前端利用echart绘制json打点地图

      最近做的项目，想在首页添加一个武汉市的地图，然后点击每个区相应的渲染这个区的数据，开始考虑用echart做，可是echart上的一些图都不太精确，一些小的区放大后基本是方形，没有地图的样子。

       后来研究了一下echart地图的原理，就是把一个json格式的数据通过registerMap方法在页面中打点画出来，那么我们可以改变json中的点位来达到精确的效果，这里有几个链接可供大家使用，都是前辈的智慧啊

 1.这段代码可以输入地点名然后直接得出绘制点位的数据，稍微修改一下就能用了，比较精确的

<div id="container" style="width:100%;height:500px"></div>
<input type="text" id="districtName" onFocus="this.select()"/>
<input type="button" οnclick="getBoundary()" value="获取轮廓线"/>
<textarea id="Div1" style="width:100%;height:200px"></textarea>
<script type="text/javascript"> 
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.enableScrollWheelZoom();
function getBoundary()
{ 
var bdary = new BMap.Boundary();
var name = document.getElementById("districtName").value;
bdary.get(name, function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物 
var count = rs.boundaries.length; //行政区域的点有多少个
for(var i = 0; i < count; i++){
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
map.setViewport(ply.getPath()); //调整视野 
} 

document.getElementById('Div1').innerText = rs.boundaries; 

}

</script>

输入地名，得到的数据如下：

如下处理{"type":"Feature","id":"0","properties":{"name":"'+name+'"},"geometry":{"type":"Polygon","coordinates":[[[' + String().replace(';','],[') + ']]}}

然后再用echart就可以渲染出来

具体echart中代码如下

$.get(json文件, function(geoJson) {
echarts.registerMap(name, geoJson);
myChart.setOption(option = {


title: {
text: "",
left: 'center'
},
visualMap: {
min: 0,
max: 100,
left: '50',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
inRange: {
color: ['#02172a', '#007cff']
}
},
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
series: [{
type: 'map',
mapType: name,
selectedMode: 'single',
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#000000'
}
}
},
itemStyle: {


normal: {
borderWidth: 1.5,
borderColor: '#389BB7',
areaColor: '#fff',
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false,
data: [{
name: '江汉区',
value: 100
}, {
name: '汉阳区',
value: 70
}, {
name: '武昌区',
value: 20
}, {
name: '洪山区',
value: 90
}, {
name: '青山区',
value: 5
}, {
name: '江夏区',
value: 41
}, {
name: '汉南区',
value: 100
}, {
name: '蔡甸区',
value: 0
}, {
name: '东西湖区',
value: 60
}, {
name: '黄陂区',
value: 10
}, {
name: '新洲区',
value: 60
}, {
name: '硚口区',
value: 41
}, {
name: '江岸区',
value: 20
}]


}],


});
});

  上面是我们做的武汉的一个实例，大家可以参考一下；

2，如果大家对上面这个方法拿到的地图不满意，可以看一下下面这个链接，这个可以自己打点绘制，自动得出json数据。

https://juejin.im/post/59e76c3f5188250988737e7c