首页 前端知识 Echarts自定义地图显示区域,可以显示公园,小区,学校等区域

Echarts自定义地图显示区域,可以显示公园,小区,学校等区域

2024-04-08 23:04:05 前端知识 前端哥 279 802 我要收藏

目        录

一、实现功能:

二、需要使用的工具:

三、步骤:

      1. 在百度地图上,找到需要绘制echart区域的位置

      2. 到 geojson.io, 绘制我们地图上的区域

      3. 选择需要绘制的区域

      4. 开始拖拽地图上的坐标点,使坐标点落在想要的区域上

      5. 完成我们的坐标绘制

      6. 为生产的区域坐标信息添加属性,比如地图上显示的名称,父亲节点的ID

      7. 将新生产的区域坐标信息与城市的坐标信息进行融合     

      8. 最后下载


一、实现功能:

       显示阜新市清河门区的城区地图。因为没有找到Echarts需要的城区地理信息。需要自己制作一个。

二、需要使用的工具:

       1. 下载Echarts需要使用的地区json地理信息文件:DataV.GeoAtlas地理小工具系列

       2. 在线编辑地区的json地理信息文件: geojson.io | powered by Mapbox

三、步骤:

      1. 在百度地图上,找到需要绘制echart区域的位置

       比如,阜新市阜新蒙古族自治县伊吗图镇及氟化工产业园区

       2.   到 geojson.io, 绘制我们地图上的区域

       首先切换成“卫星视角”,然后选择“画圈工具”。

       3.   选择需要绘制的区域

        step1: 在地图上画上我们想生产echarts地理信息的区域后:

        step2: 选择“编辑按钮”,进入到编辑模式: 

       注意,保存按钮,每次修改完地图上的坐标点后,一定要点击保存,否则编辑的信息不回生效。

       4. 开始拖拽地图上的坐标点,使坐标点落在想要的区域上

        完成了一个区域的坐标点绘制:

       在拖拽坐标点的时候,我们可以放大地图利于更精准的拖拽,也可以删除多余的坐标点和添加缺少的坐标点,具体使用技巧请自己动手体验! 

        5. 完成我们的坐标绘制

         一定注意,完成后点击“保存按钮”,每次修改完地图上的坐标点后,一定要点击保存,否则编辑的信息不回生效。

      6. 为生产的区域坐标信息添加属性,比如地图上显示的名称,父亲节点的ID

       请参考下面的文章中介绍的地理信息各属性的含义填写每个属性值。

Echarts 多个地区地图可视化显示_echarts天津地图_IT小悟的博客-CSDN博客Echarts 多个地区地图可视化显示。怎么在echart上同时显示不同多个省份,不同多个城市,不同的多个县区https://blog.csdn.net/speedwalkman/article/details/129622954

      7. 将新生产的区域坐标信息与城市的坐标信息进行融合    

       此步骤也是通过修改GeoJson地理信息各属性的值完成的,请参考上面的文章。 

      8. 最后下载

       保存成功后,选择“GeoJSON”下载坐标数据。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4654.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!