基于mapbox搭建的gis框架

已于 2022-08-09 10:08:29 修改
阅读量3.7k 收藏 17
点赞数 9
分类专栏： mapbox 文章标签： echarts 前端 javascript
于 2022-08-09 10:03:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37750030/article/details/126240035
版权

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

功能模块

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

阳光男孩~Taner
关注
专栏目录
从零开始Vue项目中使用MapboxGL开发三维地图教程（一）MapboxGL介绍以及前期vue项目的搭建
tigerhhzz的博客
06-11 3570
1、Mapbox-gl简介2、搭建vue项目2.1、创建vue项目2.2、注册mapbox官网2.3、mapbox-gl入门案例3、Mapbox-gl地图主要配置参数说明Mapbox-gl是一个开源、基于webgl技术的前端地图类库。地图数据渲染和可视化这块我们经常用到的有商业使用的如：百度地图API和JS、高德地图的API和JS、ESRI的arcgis的全家桶，同时也有开源的一些地图引擎如：openlayers、mapboxgl、Leaflet等。
从零开始Vue项目中使用MapboxGL开发三维地图教程（二）Mapbox地图样式
tigerhhzz的博客
06-12 1800
Mapbox地图样式：按照Mapbox地图样式规范中描述的模式定义的一个JSON对象，或者是此类JSON的URL。可以接受null值以允许手动添加样式。要从Mapbox API加载样式，可以使用表单的URL其中：owner是您的Mapbox帐户名，：style是样式ID。
vue3-mapboxgl-antv-L7开发（一）项目的搭建
ycc211215的博客
08-31 1007
随着科技的飞速发展，智慧地球，智慧城市等一些名词不断的出现在我们的日常生活中，智慧化的完成离不开地理信息的，它们要获取到我们的位置信息，进而完成一些智能化的决策。
mapbox+deck.gl加载倾斜摄影模型3dtiles
热门推荐
qq_37750030的博客
05-10 1万+
mapbox+deck.gl加载倾斜摄影模型
Mapbox加载3D Tiles倾斜摄影模型Demo
最新发布
gitblog_09750的博客
09-06 430
Mapbox加载3D Tiles倾斜摄影模型Demo 3d-tiles.zip项目地址:https://gitcode.com/open-source-toolkit/f0ed6 简介 本仓库提供了一个使用Mapbox和Deck.GL加载Cesium定义的3D Tiles数据的示例。通过这个Demo，您可以方便地加载和展示倾斜摄影模型，为您的地理信息系统（GIS）项目提供强大的3D可视化支持。 ...
基于mapbox-gl 开发类似于高德地图的经纬度拾取器
aganliang的专栏
06-06 896
1.index.html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>坐标拾取器</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> &
Vue项目中使用Mapbox完成GIS可视化
Tron_future的博客
04-22 1万+
1.项目准备 首先准备好Vue项目，然后安装mapbox依赖： npm install --save mapbox-gl 项目结构： 首先需要引用mapbox的css样式，虽然在index.html里面直接引用cdn也有效果，但是不建议直接修改index.html，后面会出现很多路径问题 推荐的方法是：首先将css样式下载到本地，然后再需要使用mapbox的组件里import样式： @import "assets/css/mapboxgl.css"; @import "assets/css/mapbox
Mapbox加载Cesium 3dtiles的实践
Zxs021310的专栏
04-15 4771
1.第一部分，使用deck.gl的Tile3DLayer deck.gl提供了Tile3DLayer的实现，我们需要一定的改造。 首先我们环境是Vue2+mapbox,安装相关依赖 npm i vue-deck.gl dekc.gl 我们直接使用vud-deck.gl的样例改造一下 <template> <VueDeckgl :layers="layers" :viewState="viewState" @view-state-c
Mapbox GL JS access token 问题
08-10 1573
MapBox在内网使用时，accesstoken不能使用，导致局域网内地图服务不能使用，只需修改mapbox-gl.js文件中“this._requestManager._customAccessToken,(e=>{if(e&&(false))”，框架就不会验证token，可内网部署
从零开始Vue项目中使用MapboxGL开发三维地图教程（四）改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标
tigerhhzz的博客
06-14 1817
该功能使用mapbox gl draw绘制多边形，并使用Turf.js计算其面积（平方米）和中心点坐标。绘制最终顶点时双击以完成多边形。多边形的总面积将显示在地图的左上角。在地图上画一个多边形，并计算多边形中包含的面积和中心点坐标。要删除多边形并绘制新多边形，请使用地图右上角的绘制工具。单击地图上的点来创建线，使用turf测量线的长度距离。这里我们使用到turfjs库，安装并引入turf。单击地图开始绘制多边形。
从零开始Vue项目中使用MapboxGL开发三维地图教程（三）添加全屏，缩放旋转和比例控制面板以及自定义图标、标记点击弹窗、地图平移等功能
tigerhhzz的博客
06-13 1637
/geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${
以MapBox为核心构建Vue地图组件库教程
lz5211314121的博客
10-20 1036
不多废话直接讲干货，首先我们要清楚如何写一套组件库，类似于使用vue编写的elementui，使用react编写的antdesign等，我们现在要以GIS为核心写组件库，其实原理类似。一个是组件的主体vue文件，另一个是将组件局部暴露出去的index.js文件，当然你可以再此基础上增加你想要的其他的js文件和vue文件，上面讲的两个文件是必须的。这行命令可以将你写的组件库打包成压缩文件，一般是一个dist静态目录，在进行npm发布的时候也是将这个静态的dist发布在官网上。
deck.gl加载3dtiles源码解读
qq_37750030的博客
02-16 1702
deck.gl加载3dtiles源码解读
vue3结合Cesium加载倾斜摄影3dtiles
qq_43474235的博客
10-22 1375
这篇文章主要是为了记录加载3dtiles时模型与地形有时候存在一些高度上的差异，为此将解决方法做一个记录，便于其他读者使用。
Vue2利用mapbox加载倾斜摄影
Sakura1998gis的博客
05-03 1072
Vue2利用mapbox加载倾斜摄影
mapbox-gl加载3dtiles渐变模型（视频）
地理信息技术杂谈 博客，欢迎技术交流
07-14 861
https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247486173&idx=1&sn=76e7fe7cb5550b1488605fa924a1ee71&chksm=fc8baaefcbfc23f986dd553aeb2c8509e359ddc0c97d313b62f9dc44ac7b46d91bb7260b2783&token=635212041&lang=zh_CN#rd
16.（cesium之家）cesium接入加载倾斜摄影
地图之家
09-10 759
16.（cesium之家）cesium接入加载倾斜摄影
osgearth加载倾斜摄影数据
欧特GO
05-19 958
osgearth运用的mapbox的XYZ瓦片地图，效果图如下： 代码如下： #include <iostream> #include <string> using namespace std; #include <QDir> #include <osgViewer/Viewer> #include <osgDB/ReadFile> #include <osgDB/WriteFile> #include <osg/Geod
mapbox-gl加载3dtiles模型（视频）
地理信息技术杂谈 博客，欢迎技术交流
03-17 2130
请参见公众号地址查看： https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485494&idx=1&sn=8893adbcd5ce4d0ba207fc3e08ac6706&chksm=fc8ba804cbfc211254bb76f18f6ed94f1a74c1ce607768e939db743cd300dba9925c79ddf4ab&token=416786478&lang=zh_CN#rd
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值