基于mapbox搭建的gis框架
vue版本2.6.14mapbox-gl版本 2.8.0deck.gl版本 8.7.8element-ui 版本 2.15.6turf 版本 3.0.14three 版本 0.139.2其他就不一一列举了,具体还使用到哪些依赖库,可在项目package.json中查看整体gis框架需要经常修改的地方都提取为配置文件的形式,其他一些核心的gis功能都已经做了封装,很方便实用。该gis框架也花了我不少
基于mapbox搭建的gis框架
概述
依赖库
vue 版本2.6.14
mapbox-gl 版本 2.8.0
deck.gl 版本 8.7.8
element-ui 版本 2.15.6
turf 版本 3.0.14
three 版本 0.139.2
其他就不一一列举了,具体还使用到哪些依赖库,可在项目package.json中查看
功能模块
- 实现了图层树控制
- 实现了3dtiles格式的倾斜摄影模型、gltf、obj、fbx、三维模型等数据的加载
- 实现了结合echarts加载迁徙图等等
- 实现了加载wms服务,并能对其矢量数据进行空间查询,对查询的结果可以导出为excel、geojson、kml、shapefile
- 实现了地图标绘功能
- 实现了测量功能
- 实现了卷帘对比功能
- 实现了分屏对比功能
- 实现了轨迹回放功能
- 实现了自定义地图样式功能
快速开始
- 代码下载后,项目结构如下图
- 执行
npm install
npm run serve - 最终打开项目主页面如下
代码说明
mapConfig.js
项目GIS功能主配置文件
取其中一个图层配置举例,其他图层配置类似
LayerTree组件
图层控制模块,控制地图图层显示和隐藏,点击图层节点飞到该图层配置的位置
config.js配置文件
注意:1、图层树叶子节点的id要和mapConfig.js中的id保持一致;2、图层树的叶子节点名称就是配置的label名称,如果没有配置label,则叶子节点名称就会显示id
Plot组件
地图标绘模块,地图上绘制点、线、面、矩形、圆、添加文字等,可动态修改样式如颜色和线宽
BaseMapPanel组件
底图切换模块,这里注意一下问题,底图切换会导致之前已经加载的图层失效
SplitMapContrast组件
分屏对比模块
Swipe组件
卷帘对比模块
测量模块
核心代码 gis/core/MapMnager.js
TrackPlayBack组件
轨迹回放模块
wms服务矢量数据点选查询
框选空间查询
查询出来的结果可以导出
总结
整体gis框架需要经常修改的地方都提取为配置文件的形式,其他一些核心的gis功能都已经做了封装,很方便实用。该gis框架也花了我不少时间去写的,现在该gis框架源码有偿提供给大家。适合初学者对用mapbox引擎的进一步的应用;适合应用于一些gis展示项目。也欢迎大家的提一些优化建议。
下载地址
解压密码:+QQ 1826356125 来获取
更多推荐
所有评论(0)