Echarts自定义地图显示区域，可以显示街道，小区，学校等区域

码喽的自我修养

于 2024-06-12 11:33:32 发布

阅读量1.2k

点赞数 53

分类专栏： GIS地图与大数据可视化文章标签： vue.js 前端 javascript echarts 数据可视化信息可视化阿里云

本文链接：https://blog.csdn.net/2301_78542842/article/details/139621633

版权

GIS地图与大数据可视化专栏收录该内容

6 篇文章 3 订阅

订阅专栏

🚀🚀🚀目录

4.两个面、两条线，4个features，在每一个properties中添加name属性

自定义地图

DataV.GeoAtlas 使用文档

这里有详细的操作教程。

1. 选择边界生成器

（绘制上海海洋大学为例）

缩放到合适的尺寸，使得你需要绘制的在视图中心；

使用左侧多边形工具：（千万不要在绘制过程中移动地图！！不然什么都没有了）

如果绘制不够完整，一定要先双击结束！！然后缩放微调！！！

使用顶点编辑工具，可以新增点，移动点，使得地图的尺寸更加合适（顶点编辑状态下，可以平移地图、缩放操作）：

编辑完成后，得到整个区域地图（仅作为示范，不表示实际面积！！）：

地图是由一个区域一个区域组成的，现在只是一块区域，如何拆分呢？

在原地图上，在画一个区域：

使用差集实现【差集有两种状态，一个是点一下，编程✔，然后依次点击差集得面，就是谁减谁，点了两个面后！再点一下✔，就能实现差集了，两个面就在空间上是一个层次了】：

两个面层叠，很难选择，可以使用下面的属性面板：直接点击即可

差集后，得到如下结果：

完成差集后，会空出来，在画一个，填补该位置：

这样就有两个图层了

道路使用线：

以上就是基础的线面的使用（注意，有的不能识别点！！！）

2.导出JSON，在vue中使用：

3. vue中使用自定义地图

保存的自定义地图json文件：

使用：

<script>
import * as echarts from 'echarts';
import userJSON from './json/1.json'
export default {
  name: 'App',
  mounted() {
    // 初始化统计图对象
    var myChart = echarts.init(this.$refs["chartsDOM"]);
    // 显示 loading 动画
    myChart.showLoading();
    // 关闭动画
    myChart.hideLoading();
    // 注册地图(数据放在axios返回对象的data中哦)
    echarts.registerMap('user', userJSON);
    var option = {
      series: [
        {
          name: '自定义地图',
          type: 'map',
          map: 'user',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
          label: {
            show: true
          },
        }]
    }
    myChart.setOption(option);
 
  }
}
</script>

z 不难理解，不解释啦，不懂的可以提问。

得到下图：