antV实现离线中国2D地图并叠加拓扑（一）

业务背景：

中国地图铺满屏幕，屏幕的中间部分动态展示当前区域地图。当前区域有可能是省、市、县等，需要在当前区域展示拓扑站点，并实时弹出小面板展示当前站点详情。

实现方式：

antv-G6实现拓扑图，antv-L7绘制地图。本身L7是可以实现动态标记站点的效果，但是因为站点需要做的自定义操作较多，所以选择了叠加G6来实现。
最终实现效果展示：

地图缩放展示：

代码实现

首先，绘制地图。原本的需求是需要展示全国的道路河流，但是搞不到数据，只能展示到省市的分界线了。

//html部分
<div ref="container" id="container"></div>
//js部分
import { Scene, PolygonLayer, Mapbox } from '@antv/l7';
import areaList from '@/views/area-list';//引用地图数据
export default {mounted(){let totaldata = { parentCode: 610000, type: 'city' };//当前区域代码和区域级别（陕西省）//new一个地图场景const scene = new Scene({id: 'container',map: new Mapbox({style: 'blank',//地图底图的基本样式，blank代表无底图，还可以导入自定义配色zoom: 0,//初始化缩放等级pitch: 0,//地图初始俯仰角度，一般3D地图用的上}),});//下面有两处地图场景样式配置加载。第一个是显示中国地图的省市区划分隔线，第二个是加载当前区域样式//地图的配置参数--中国地图整个纹理及配色scene.on('loaded', () => {//Choropleth代表区域图层const choropleth = new Choropleth({width: 1000,height: 1000,source: {data: areaList,joinBy: {sourceField: 'code',geoField: 'adcode',},},viewLevel: {level: 'country',adcode: 100000,//100000代表中国},// color: {//     field: 'value',//     value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],//     scale: { type: 'quantile' },// },style: {opacity: 1,stroke: '#0F1E38',//文字描边颜色lineWidth: 0.6,//地图描边宽度lineOpacity: 1,},label: {visible: true,//标签是否可见field: 'name',//标签映射的keystyle: {fill: '#000',opacity: 0.8,fontSize: 10,stroke: '#fff',strokeWidth: 1.5,textAllowOverlap: false,padding: [5, 5],},},state: {active: { stroke: '#0F1E38', lineWidth: 1 },//鼠标悬浮交互的样式},});choropleth.addToScene(scene);})//当前区域的样式及配色scene.on('loaded', () => {const data = areaList.filter(({ level, parent }) => level === totaldata.type && parent === totaldata.parentCode).map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));//给选中的区域随机配色const choropleth = new Choropleth({width: 200,height: 200,source: {data: data,joinBy: {sourceField: 'adcode',geoField: 'adcode',},},viewLevel: {level: 'province',//区域的级别adcode: totaldata.parentCode//区域的代码},autoFit: true,//开启自适应color: {field: 'value',value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],scale: { type: 'quantize' },//关键字段的映射类型：等间距},style: {opacity: 1,stroke: '#ccc',//区域描边lineWidth: 0.6,lineOpacity: 1,},label: {visible: true,field: 'name',style: {fill: '#000',//区域标签颜色opacity: 0.8,fontSize: 10,stroke: '#fff',//区域标签描边颜色strokeWidth: 1.5,textAllowOverlap: false,padding: [5, 5],},},state: {active: { stroke: 'black', lineWidth: 1 },//鼠标悬浮交互的样式},});choropleth.addToScene(scene);});scene.setMapStatus({dragEnable: false, // 是否允许地图拖拽keyboardEnable: false, // 是否允许形键盘事件doubleClickZoom: false, // 双击放大zoomEnable: false, // 滚动缩放rotateEnable: false // 旋转})}
}

下一篇写实现地图上的拓扑

antV实现离线中国2D地图并叠加拓扑（一）相关推荐

中国区域地图叠加绘制
中国区域地图叠加绘制 1.数据准备 2.相关Matlab代码及使用方法 3.图片固定位置信息标注 drawmap更新 1.数据准备地理信息地图在进行绘制的过程中,叠加上行政区域,更方便进行位置定 ...
基于单目相机的2D地图构建
第一章引言 1.1 研究背景同时定位和建图(SLAM)是机器人和自主导航中的一个重要领域.它是指机器人在未知环境中移动并使用其传感器和里程计信息构建环境地图并同时估计其在此地图中位置的过程.SLA ...
在百度地图中叠加CAD图及GIS数据展示踩坑记
前言在之前的几篇博客中分别介绍了在Cesium中实现与CAD的DWG图叠加显示分析 https://www.cnblogs.com/vjmap/p/16541751.html . 高德地图与CAD ...
Mapbox、GeoServer离线部署矢量地图
Mapbox.GeoServer离线部署矢量地图关键词:Mapbox.GeoServer.Tomcat.PostgreSQL.PostGis 一.地图数据获取使用OpenStreetMap获取中国 ...
2021-2027全球与中国汽车导航地图市场现状及未来发展趋势
2021-2027全球与中国汽车导航地图市场现状及未来发展趋势本文研究全球及中国市场汽车导航地图现状及未来发展趋势,侧重分析全球及中国市场的主要企业,同时对比北美.欧洲.日本.中国.东南亚.印度等地 ...
echarts：实现3D地图版块叠加动效散点+轮播高亮效果
需求描述如下图所示,展示3D效果的地图版块,并叠加显示动效散点: 实现思路首先是3D地图版块效果的实现,可以参考广州3D地图:而动效散点的实现,可以参考地图发散分布. 这里再提一个经过尝试并不行的 ...
Unity记录3.3-地图-柏林噪声生成 2D 地图
文章首发及后续更新:https://mwhls.top/4486.html,无图/无目录/格式错误/更多相关请至首发页查看. 新的更新内容请到mwhls.top查看. 欢迎提出任何疑问及批评,非常感谢 ...
pyecharts官方文档_中国疫情地图pyecharts
共助医患渡江南, 同为华人望平安. 战有常山似鼠窜, 疫有谣传使心寒. 这次咱们不说疫情,咱们来说说怎么画一个中国疫情图. 这里用到了pyecharts,这个库里包含了非常多的图 https://py ...
echart 地图某个地区_中国饮食地图来袭！你爱的口味暗藏健康隐患吗？
食,既是人生存之根本,也是人们热爱生活的体现. 中国地域广阔.物产富饶,中国人对"吃"看重也愿钻研,种种因素造就了中国美食 "百花齐放"的局面,在"吃 ...