2020年12月19日
eachers-地图带标注
查看实例效果:地图
eachers中map的相关配置:https://echarts.apache.org/zh/option.html#series-map
html:
<div id="main" style="width: 100%;height:100vh;"></div>
js
var main = $('#main')[0]; var myChart = echarts.init(main); myChart.showLoading(); //a地图的geoJSON 格式的数据作为地图的轮廓 show(a); function show(a) { myChart.hideLoading(); echarts.registerMap('chain', a); myChart.setOption(option = { title: { text: '浪卡子县笑脸地图', padding:[20,10] }, visualMap: { show:false, min: 0, max: 50, text: ['High', 'Low'], realtime: false, calculable: false, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, series: { type: 'map', mapType: 'chain', itemStyle: { normal: { label: { show: true, color:'#000' }, areaColor:'#8ED1EB', borderWidth:1, borderColor:'#888', }, emphasis: { label: { show: true, }, areaStyle: { color: '#90c31d', }, }, }, data: [ {name:'浪卡子镇',data:'lkzz',value:'5'}, {name:'打隆镇',data:'dlz',value:'10'}, {name:'普玛江塘乡',data:'pmjtx',value:'11'}, {name:'多却乡',data:'dqx',value:'22'}, {name:'卡龙乡',data:'klx',value:'3'}, {name:'阿扎乡',data:'azx',value:'20'}, {name:'工布学乡',data:'gbdx',value:'35'}, {name:'卡热乡',data:'krx',value:'35'}, {name:'白地乡',data:'bdx',value:'9'}, {name:'张达乡',data:'zdx',value:'9'} ], //线性标注 markLine:{ lineStyle:{type:'solid'}, label:{show:false}, emphasis:{ lineStyle:{width:1} }, data: mark() } }, }); }; //标记的位置coord经纬度 function mark(){ var mark_index=[ [{name: '浪卡子镇',data:'lkzz',coord: [90.45404999990273,28.978570195635413]},{coord: [90.45404999990273,28.278570195635413],symbol:'image://colse.png',symbolSize:[30,30]}], [{name: '打隆镇',data:'dlz',coord: [90.63188389954282,28.57774719368323]},{coord: [90.63188389954282,28.07774719368323],symbol:'image://colse.png',symbolSize:[30,30]}], [{name: '普玛江塘乡',data:'pmjtx',coord: [90.19704399949458,28.391932193417503]},{coord:[90.19704399949458,28.001932193417503],symbol:'image://colse.png',symbolSize:[30,30]}], [{name: '多却乡',data:'dqx',coord: [90.83217199962429,28.663467194667803]},{coord:[90.83217199962429,28.363467194667803],symbol:'image://colse.png',symbolSize:[30,30]}], [{name: '卡龙乡',data:'klx',coord: [90.56405299997671,29.108024196041582]},{coord:[90.56405299997671,29.408024196041582],symbol:'image://colse.png',symbolSize:[30,30]}], [{name: '阿扎乡',data:'azx',coord: [90.6996099998641,28.9889797195771813]},{coord:[90.6996099998641,29.300797195771813],symbol:'image://colse.png',symbolSize:[30,30]}], [{name: '工布学乡',data:'gbdx',coord: [91.18462589983977,28.651439194107168]},{coord: [91.18462589983977,28.421439194107168],symbol:'image://colse.png',symbolSize:[30,30]}], [{name: '卡热乡',data:'krx',coord: [90.38571499999096,29.195300197158633]},{coord: [90.38571499999096,29.495300197158633],symbol:'image://colse.png',symbolSize:[30,30]}], [{name: '白地乡',data:'bdx',coord: [90.24673499987838,29.027180196598981]},{coord: [90.24673499987838,29.347180196598981],symbol:'image://colse.png',symbolSize:[30,30]}], [{name: '张达乡',data:'zdx',coord: [ 91.02786999979429,28.90539419574957]},{coord: [ 91.02786999979429,29.20539419574957],symbol:'image://colse.png',symbolSize:[30,30]}], ] return mark_index; }
生成的map轮廓:参考http://www.yayame.vip/map/map_lkzx/map_info.js中的变量a数据。
选择其他区域可使用地图选择器生成goJson(只做到省市区联动),若想生成乡镇级可参考这种获取方式:bigMap(软件)+geojson.io(详情https://blog.csdn.net/qq_36523214/article/details/106991850)