基于mapbox搭建的gis框架

基于mapbox搭建的gis框架

• 概述
• • 依赖库
  • 功能模块
• 快速开始
• 代码说明
• • mapConfig.js
  • LayerTree组件
  • Plot组件
  • BaseMapPanel组件
  • SplitMapContrast组件
  • Swipe组件
  • 测量模块
  • TrackPlayBack组件
  • wms服务矢量数据点选查询
  • 框选空间查询
• 总结

概述

依赖库

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中查看

功能模块

1. 实现了图层树控制
2. 实现了3dtiles格式的倾斜摄影模型、gltf、obj、fbx、三维模型等数据的加载
3. 实现了结合echarts加载迁徙图等等
4. 实现了加载wms服务，并能对其矢量数据进行空间查询，对查询的结果可以导出为excel、geojson、kml、shapefile
5. 实现了地图标绘功能
6. 实现了测量功能
7. 实现了卷帘对比功能
8. 实现了分屏对比功能
9. 实现了轨迹回放功能
10. 实现了自定义地图样式功能

快速开始

1. 代码下载后，项目结构如下图
   
2. 执行
   npm install
   npm run serve
3. 最终打开项目主页面如下
   

代码说明

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 来获取