学者网学科建设网站,开发小程序费用一览表,wordpress 超级排版器,大连零基础网站建设培训班1: 预期效果
通过切换地图 , 实现地图的钻取效果
2: 实现原理以及核心方法/参数
一开始是想利用更换地图数据的形式进行地图钻取 , 这就意味着我们需要准备全国30多个省份的地图数据 , 由于一开始考虑需要适配小程序端 , 如此多的地图文件增加了程序的体积 , 如果使用接口调…1: 预期效果
通过切换地图 , 实现地图的钻取效果
2: 实现原理以及核心方法/参数
一开始是想利用更换地图数据的形式进行地图钻取 , 这就意味着我们需要准备全国30多个省份的地图数据 , 由于一开始考虑需要适配小程序端 , 如此多的地图文件增加了程序的体积 , 如果使用接口调用 , 会影响响应速度 ; 所以最后想到了使用一张地图数据 , 通过地图中心点定位 缩放 主动触发高亮
方法解读: ** 监听到地图点击事件/地图切换事件 , 通过center属性定位当前省份 , 通过zoom属性指定放大层级(让当前省份占据页面) , 接下来需要将其他的省份隐藏掉 , 这里通过itemStyle样式设置 , 将地图的透明度调整为0 , 这时候发现我们选择的当前省份也隐藏掉了 , 这时候就要借助另一个属性 emphasis , 在emphasis 中可以将当前选中的地图区块重新定义样式 ; 如果我们是通过地图点击触发的钻取 , 当前省份区块是可以被选中的 , 但是如果是select选择器 , 需要调用echarts的dispatchAction**接口进行主动触发
_this.$refs[canvas].$curChart.dispatchAction({type: highlight,name: _this.cityList[e.target.value][name]
})参数如下:
geo: {map: china, // 映射的地图name// roam: scale, // scale缩放/ move拖动 / true 缩放拖动center: , // 中心点位置坐标scaleLimit: {min: 1,max: 10}, // 缩放比例限制zoom: 1.2, // 当前缩放比例top: 50,label: { // 地图文本样式show: true,fontSize: 8,color: rgba(0,0,0,0.7)},itemStyle: { // 地图区块样式borderColor: rgba(0, 0, 0, 0.2),opacity: 1},emphasis: { // 当前选中地图区块样式itemStyle: {opacity: 1,areaColor: #f2d5ad,shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 2}},selectedMode: false , // 多选开关silent: false // 是否静默状态},3: 代码
demo.vue
templateviewview styleheight:34px;/view!-- uchartsDemo1/uchartsDemo1 --view classuni-title uni-common-pl地区选择器/viewview classuni-listview classuni-list-cellview classuni-list-cell-left当前选择/viewview classuni-list-cell-dbpicker changebindPickerChange :valueindex :rangecityList :range-keynameview classuni-input{{cityList[index][name]}}/view/picker/view/view/viewuni-ec-canvas classuni-ec-canvas idline-chart refcanvas canvas-idlazy-load-chart :ecec/uni-ec-canvas/view
/templatescriptimport uniEcCanvas from /components/uni-ec-canvas/uni-ec-canvasimport cityMap from ./cityMap.jsimport chartsOption from ./chartsOption.jslet pageInstance {}export default {data() {return {index: 0,cityList: [{name:全国},...cityMap.cityPointList],ec: {lazyLoad: true,option: chartsOption.mapOption}}},mounted() {this.$refs[canvas].init()},components: {uniEcCanvas},methods:{// 城市切换bindPickerChange (e) {const _this this// 根据name获取当前城市数据 , 并修改option// 获取城市坐标let point cityMap.cityPointMap.get(_this.cityList[e.target.value][name]) || []let data cityMap.cityDataMap.get(_this.cityList[e.target.value][name]) || {}// 组装optionlet mapOption JSON.parse(JSON.stringify(chartsOption.mapOption))mapOption.geo.center pointmapOption.geo.zoom 6mapOption.geo.silent truemapOption.geo.label.show falsemapOption.geo.itemStyle.opacity 0mapOption.series[0].data [data]_this.ec.option mapOptionsetTimeout(function(){_this.$refs[canvas].$curChart.dispatchAction({type: highlight,name: _this.cityList[e.target.value][name]})},10)},BindEvent (e) {}}}
/script
style scoped.uni-ec-canvas {width: 750upx;height: 750upx;display: block;}
/style
cityMap.js – 存放所有省份的中心点 , 数据 , 自定义的配置
let cityMap {}cityMap.cityPointList [{cp: [121.0254, 23.5986],name: 台湾,childNum: 6},{cp: [115.4004, 37.9688],name: 河北,childNum: 3},{cp: [112.4121, 37.6611],name: 山西,childNum: 1},{cp: [117.5977, 44.3408],name: 内蒙古,childNum: 2},{cp: [122.3438, 41.0889],name: 辽宁,childNum: 16},{cp: [126.4746, 43.5938],name: 吉林,childNum: 1},{cp: [128.1445, 48.5156],name: 黑龙江,childNum: 2},{cp: [120.0586, 32.915],name: 江苏,childNum: 1},{cp: [120.498, 29.0918],name: 浙江,childNum: 45},{cp: [117.2461, 32.0361],name: 安徽,childNum: 3},{cp: [118.3008, 25.9277],name: 福建,childNum: 18},{cp: [116.0156, 27.29],name: 江西,childNum: 1},{cp: [118.7402, 36.4307],name: 山东,childNum: 13},{cp: [113.4668, 33.8818],name: 河南,childNum: 1},{cp: [112.2363, 31.1572],name: 湖北,childNum: 3},{cp: [111.5332, 27.3779],name: 湖南,childNum: 3},{cp: [113.4668, 22.8076],name: 广东,childNum: 24},{cp: [108.2813, 23.6426],name: 广西,childNum: 2},{cp: [109.9512, 19.2041],name: 海南,childNum: 1},{cp: [102.9199, 30.1904],name: 四川,childNum: 2},{cp: [106.6113, 26.9385],name: 贵州,childNum: 3},{cp: [101.8652, 25.1807],name: 云南,childNum: 1},{cp: [88.7695, 31.6846],name: 西藏,childNum: 1},{cp: [109.5996, 35.6396],name: 陕西,childNum: 1},{cp: [95.7129, 40.166],name: 甘肃,childNum: 2},{cp: [96.2402, 35.4199],name: 青海,childNum: 2},{cp: [105.9961, 37.3096],name: 宁夏,childNum: 2},{cp: [84.9023, 41.748],name: 新疆,childNum: 1},{cp: [116.4551, 40.2539],name: 北京,childNum: 1},{cp: [117.4219, 39.4189],name: 天津,childNum: 1},{cp: [121.4648, 31.2891],name: 上海,childNum: 6},{cp: [107.7539, 30.1904],name: 重庆,childNum: 2},{cp: [115.5784, 22.1057],name: 香港,childNum: 5},{cp: [113.5715, 21.1983],name: 澳门,childNum: 1}]
cityMap.cityDataList [{name: 南海诸岛,value: 0},{name: 北京,value: 54},{name: 天津,value: 13},{name: 上海,value: 40},{name: 重庆,value: 75},{name: 河北,value: 13},{name: 河南,value: 83},{name: 云南,value: 11},{name: 辽宁,value: 19},{name: 黑龙江,value: 15},{name: 湖南,value: 69},{name: 安徽,value: 60},{name: 山东,value: 39},{name: 新疆,value: 4},{name: 江苏,value: 31},{name: 浙江,value: 104},{name: 江西,value: 36},{name: 湖北,value: 1052},{name: 广西,value: 33},{name: 甘肃,value: 7},{name: 山西,value: 9},{name: 内蒙古,value: 7},{name: 陕西,value: 22},{name: 吉林,value: 4},{name: 福建,value: 18},{name: 贵州,value: 5},{name: 广东,value: 98},{name: 青海,value: 1},{name: 西藏,value: 0},{name: 四川,value: 44},{name: 宁夏,value: 4},{name: 海南,value: 22},{name: 台湾,value: 3},{name: 香港,value: 5},{name: 澳门,value: 5}]
cityMap.cityPointMap new Map()
cityMap.cityDataMap new Map()
cityMap.cityPointList.forEach(e{let {name,cp} ecityMap.cityPointMap.set(name,cp)
})
cityMap.cityDataList.forEach(e{cityMap.cityDataMap.set(e.name,e)
})export default cityMapchartsOption.js – 存在地图option配置
let chartsOption {}// 地图
chartsOption.mapOption {visualMap: {min: 0,max: 1000,right: 10,bottom: 40,showLabel: !0,text: [高, 低],pieces: [{gt: 100,label: 100,color: #7f1100}, {gte: 10,lte: 100,label: 100,color: #ff5428}, {gte: 1,lt: 10,label: 10,color: #ff8c71}, {gt: 0,lt: 1,label: 1,color: #ffd768}, {value: 0,color: #ffffff}],show: !0},geo: {map: china,// roam: scale, // scale缩放/ move拖动center: , // 中心点位置scaleLimit: {min: 1,max: 10}, // 缩放限制zoom: 1.2, // 缩放比例top: 50,label: {show: true,fontSize: 8,color: rgba(0,0,0,0.7)},itemStyle: {borderColor: rgba(0, 0, 0, 0.2),opacity: 1},emphasis: {itemStyle: {opacity: 1,areaColor: #f2d5ad,shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 2}},selectedMode: false ,silent: false},series: [{name: 汽车销量,type: map,geoIndex: 0,data: [{name: 南海诸岛,value: 0},{name: 北京,value: 54},{name: 天津,value: 13},{name: 上海,value: 40},{name: 重庆,value: 75},{name: 河北,value: 13},{name: 河南,value: 83},{name: 云南,value: 11},{name: 辽宁,value: 19},{name: 黑龙江,value: 15},{name: 湖南,value: 69},{name: 安徽,value: 60},{name: 山东,value: 39},{name: 新疆,value: 4},{name: 江苏,value: 31},{name: 浙江,value: 104},{name: 江西,value: 36},{name: 湖北,value: 1052},{name: 广西,value: 33},{name: 甘肃,value: 7},{name: 山西,value: 9},{name: 内蒙古,value: 7},{name: 陕西,value: 22},{name: 吉林,value: 4},{name: 福建,value: 18},{name: 贵州,value: 5},{name: 广东,value: 98},{name: 青海,value: 1},{name: 西藏,value: 0},{name: 四川,value: 44},{name: 宁夏,value: 4},{name: 海南,value: 22},{name: 台湾,value: 3},{name: 香港,value: 5},{name: 澳门,value: 5}]}]
}export default chartsOption
