自定义地图
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属性
两者不再关联。更多细节需要耐心去刻画,大家加油哈哈哈!
好了,本文就到这里吧,点个关注再走嘛~