geojson+echsrts绘制地图
时间: 2024-01-17 16:19:33 浏览: 26
使用geojson和echarts可以绘制地图,具体步骤如下:
1. 获取地图的geojson数据,可以通过以下网址获取:
[http://geojson.io/#map=2/20.0/0.0](http://geojson.io/#map=2/20.0/0.0)
或者通过打点获取某一个区域的轮廓数据:
[http://datav.aliyun.com/tools/atlas/#&lat=31.80289258670676&lng=104.2822265625&zoom=4](http://datav.aliyun.com/tools/atlas/#&lat=31.80289258670676&lng=104.2822265625&zoom=4)
2. 将获取到的geojson数据保存为一个json文件,例如命名为mapData.json。
3. 在HTML文件中引入echarts库和mapData.json文件:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
<script src="mapData.json"></script>
```
4. 创建一个具有指定id的div元素,用于显示地图:
```html
<div id="map" style="width: 800px; height: 600px;"></div>
```
5. 在JavaScript中使用echarts绘制地图:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('map'));
// 配置地图的option
var option = {
series: [{
type: 'map',
map: 'mapData', // 使用mapData.json中的地图数据
label: {
show: true
},
itemStyle: {
areaColor: '#ccc',
borderColor: '#fff'
},
emphasis: {
label: {
show: true
},
itemStyle: {
areaColor: '#ff0000'
}
}
}]
};
// 使用配置项显示地图
myChart.setOption(option);
```
通过以上步骤,你可以使用geojson和echarts绘制地图。