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

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

自定义地图

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

得到下图:

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

我们先看看json数据:

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

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

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

相关文章
|
1月前
Echarts 热力图自定义开发
Echarts 热力图自定义开发
|
1月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
30 0
|
1天前
|
JSON 数据可视化 JavaScript
Echarts地图实现:山东省会员活跃度
使用ECharts展示山东会员活跃度,通过散点图和地图结合,颜色对比强烈,背景深蓝(#020933)、点色明亮黄(#F4E925)。核心代码示例展示了散点、地图及特效散点系列配置。[点击下载](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89493130)代码和数据。
4 0
Echarts地图实现:山东省会员活跃度
|
1天前
|
JSON JavaScript 前端开发
Echarts地图实现:杭州市困难人数分布
使用ECharts实现杭州困难人数分布地图,结合地区与散点图,动态展示数据变化。支持进入下级区域并返回。预览包含动画效果。关键代码涉及地图初始化、数据加载及事件处理。需`hangzhou-map.json`数据文件。完整代码和资源见链接。
10 0
Echarts地图实现:杭州市困难人数分布
|
10天前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
31 0
 ECharts 雷达图案例001-自定义节点动画
|
4天前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
4天前
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
1月前
|
定位技术
echarts 地图点位
在使用ECharts的点击事件绑定中,观察到每次点击会递增一次后台请求:首次点击请求1次,第二次点击请求2次,第三次点击请求3次,以此类推。为解决这个问题,尝试在事件绑定前使用`myChart.off(&#39;click&#39;)`移除原有监听器,然后添加新的点击事件处理函数。
25 0
|
1月前
|
数据采集 JSON 数据可视化
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
16 1
|
1月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
49 0