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

🚀🚀​​​​​​​🚀​​​​​​​目录

自定义地图

[1. 选择边界生成器](#1. 选择边界生成器)

2.导出JSON,在vue中使用:

[3. vue中使用自定义地图](#3. vue中使用自定义地图)

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

自定义地图

DataV.GeoAtlas 使用文档

这里有详细的操作教程。

1. 选择边界生成器

(绘制上海海洋大学为例)

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

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

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

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

编辑完成后,得到整个区域地图(仅作为示范,不表示实际面积!!):

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

在原地图上,在画一个区域:

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

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

差集后,得到如下结果:

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

这样就有两个图层了

道路使用线:

以上就是基础的线面的使用(注意,有的不能识别点!!!

2.导出JSON,在vue中使用:

3. vue中使用自定义地图

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

使用:

javascript 复制代码
<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 不难理解,不解释啦,不懂的可以提问。

得到下图:

这样两个面全是一样的了,因此,我们需要在json数据中手动配置些选项:

我们先看看json数据:

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

两者不再关联。更多细节需要耐心去刻画,大家加油哈哈哈!

好了,本文就到这里吧,**++点个关注++**再走嘛~

🚀 个人简介:6年开发经验,现任职某国企前端负责人,分享前端相关技术与工作常见问题~

💟 作 者:前端菜鸟的自我修养❣️

📝 专 栏:GIS地图与大数据可视化

🌈 若有帮助,还请关注➕点赞➕收藏,不行的话我再努努力💪💪💪

相关推荐
Anlici10 分钟前
跨域解决方案还有优劣!?
前端·面试
苹果电脑的鑫鑫12 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
庸俗今天不摸鱼16 分钟前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
忧郁的蛋~21 分钟前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
窝窝和牛牛22 分钟前
极简版:阿里云 ECS 搭建 WordPress
阿里云·云计算
海盗强25 分钟前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬30 分钟前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
追寻光36 分钟前
Java 绘制图形验证码
java·前端
前端snow37 分钟前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草43 分钟前
高德爬取瓦片和vue2使用
前端·javascript·vue.js