echarts之基于geojson的自定义地图

应用场景:需要在平面图或者特殊地理区域上展示数据,比如


geojson作为echarts的地图数据源,能实现简单平面图(如果是立体图就需要研究svg)上的数据交互。优点:技术低,学习起来没难度;缺点:耗时耗力,复杂的平面图有难度。

实现步骤: 1、在 http://geojson.io/ 上画自己需要的平面图并导出为geojson

勾画区域时添加name属性


echarts之基于geojson的自定义地图_第1张图片

定义一个js文件 ,变量内容为上面制作的topojson文件

echarts之基于geojson的自定义地图_第2张图片

完整简单demo代码如下:



  
   
  巡检异常读数地图 
  
  
   
  
效果:

echarts之基于geojson的自定义地图_第3张图片
echarts之基于geojson的自定义地图_第4张图片

你可能感兴趣的:(Web,开发)