GIS开发从0到1|MapboxGL可视化项目实战教程（含步骤说明和代码展示）1

于 2024-09-12 13:56:38 发布
阅读量314 收藏 6
点赞数 15
文章标签： 前端 java echarts vue.js javascript arcgis node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gisDuo/article/details/142173659
版权

通用可视化

聚类

代码展示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>聚类显示</title>
    <script include="jquery,papaparse" src="./static/libs/include-lib-local.js"></script>
    <script include="" src="./static/libs/include-mapboxgl-local.js"></script>
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map">
        <div id="mouse-position">
        </div>
    </div>
    <script>
        var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
        var map = new mapboxgl.Map({
            container: 'map',
            crs: 'EPSG:4326',
            maxBounds: [[-180, -90], [180, 90]],
            style: {
                version: 8,
                sources: {
                    'tianditu-3857-image': {
                        //来源类型为栅格瓦片
                        type: 'raster',
                        tiles: [
                            //来源请求地址，请求天地图提供的全球矢量地图WMTS服务
                            'http://t' +
                            Math.round(Math.random() * 7) +
                            '.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0' +
                            '&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
                            '&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}' +
                            '&tk=' +
                            tiandituKey
                        ],
                        //栅格瓦片的分辨率
                        tileSize: 256
                    }
                },
                layers: [
                    {
                        id: 'tianditu-3857-image',
                        type: 'raster',
                        source: 'tianditu-3857-image',
                        minzoom: 0,
                        maxzoom: 22
                    }
                ],
                glyphs: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf'
            },
            center: [108.95, 34.25],
            zoom: 3
        });
        //注册鼠标移动事件
        map.on('mousemove', function (e) {
            //经纬度坐标转web墨卡托
            const earthRad = 6378137.0;
            const x = e.lngLat.lng * Math.PI / 180 * earthRad;
            const a = e.lngLat.lat * Math.PI / 180;
            const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
            document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
        });
        map.on('load', () => {
            $.get('../../static/data/geojson/chinaEarthquake.csv', function (response) {
                var dataObj = Papa.parse(response, {
                    skipEmptyLines: true,
                    header: true
                });

                var data = dataObj.data;

                var geojson = {
                    type: 'FeatureCollection',
                    features: []
                };

                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var date = new Date(item.date);
                    var year = date.getFullYear();

                    //2w+地震数据
                    if (year > 2000 && year < 2015) {
                        var feature = {
                            type: 'feature',
                            geometry: {
                                type: 'Point',
                                coordinates: []
                            },
                            properties: {
                                value: parseFloat(item.level)
                            }
                        };
                        feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];

                        geojson.features.push(feature);
                    }
                }
                addCluster(geojson);
            });
        });

        function addCluster(geojson) {
            // map.add
            map.addSource('earthquakes', {
                type: 'geojson',
                data: geojson,
                cluster: true,
                clusterMaxZoom: 14, // 聚合最大级别
                clusterRadius: 50 // 聚合半径
            });

            map.addLayer({
                id: 'clusters',
                type: 'circle',
                source: 'earthquakes',
                filter: ['has', 'point_count'],
                paint: {
                    'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 750, '#f28cb1'],
                    'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
                    'circle-stroke-color': '#FFFFFF',
                    'circle-stroke-width': 5
                }
            });

            map.addLayer({
                id: 'cluster-count',
                type: 'symbol',
                source: 'earthquakes',
                filter: ['has', 'point_count'],
                layout: {
                    'text-field': '{point_count_abbreviated}',
                    'text-font': ['宋体', '宋体'],
                    'text-size': 12
                }
            });

            map.addLayer({
                id: 'unclustered-point',
                type: 'circle',
                source: 'earthquakes',
                filter: ['!', ['has', 'point_count']],
                paint: {
                    'circle-color': '#11b4da',
                    'circle-radius': 4,
                    'circle-stroke-width': 1,
                    'circle-stroke-color': '#fff'
                }
            });
        }
    </script>
</body>

</html>

客户端可视化矢量瓦片

上传样式

步骤说明

例功能
    使用MapGIS IGServer配置矢量瓦片的显示样式，配置的样式信息保存为xxx.json文件，上传文件到MapGIS IGServer服务器，客户端通过接口即可访问定制样式的矢量瓦片。本示例通过MapGIS IGServer矢量瓦片配置界面，使用默认矢量瓦片地图样式。
示例实现
    本示例需要使用【include-mapboxgl-local.js】开发库实现，通过关键接口mapboxgl.Map()实现MapGIS矢量瓦片的加载。
开发库使用请参见首页-概述-原生JS调用内容
1.MapGIS桌面工具裁剪矢量瓦片
（1）准备矢量地图文档

（2）矢量瓦片裁剪：设置输入瓦片索引区要素类，其他选项使用默认值

（3）矢量瓦片裁剪：选择一个空文件夹用来存放生成的矢量瓦片文件，高级设置中将最小显示块级别修改为0，其他选项使用默认值

（4）矢量瓦片裁剪：附加裁剪项设置使用默认值

（5）矢量瓦片裁剪：瓦片裁剪的过程，瓦片裁剪级别越高需要的生成时间越久

（6）矢量瓦片裁剪：裁剪的结果文件展示

2.矢量瓦片的服务发布与样式管理
（1）矢量瓦片服务发布：打开MapGIS Server Manager，找到矢量瓦片发布选项

（2）矢量瓦片服务发布：选择矢量瓦片发布的格式为目录格式，选中矢量瓦片发布的数据路径

（3）矢量瓦片服务发布：点击发布的矢量瓦片的左边的预览按钮，进入对应的编辑界面


（4）矢量瓦片样式管理：按照个性化需求进行样式配色等操作

（5）矢量瓦片样式管理：样式配置完毕后， 点击左上方的保存按钮保存对应的样式json文件到当前计算机

（6）矢量瓦片样式管理：将第5步保存的文件上传到对应的服务器上, 该按钮在第3步的最右边有个绿色上传箭


（7）矢量瓦片样式管理：上传完成的提示如下

（7）矢量瓦片样式管理：以上步骤完成后得到矢量瓦片样式URL：http://localhost:6163/igs/rest/mrms/vtiles/styles/hubei-id.json，在步骤实现中通过该URL即可访问矢量瓦片地图服务
实现步骤
Step 1.引用开发库:
    本示例通过本地离线【include-mapboxgl-local.js】脚本引入开发库；
Step 2. 创建布局：
    创建id="map"的div作为地图容器，并设置其样式；
Step 3. 创建地图对象：
    设置地图的必要参数，如地图div容器、缩放层级、中心点等，具体操作参考互联网地图目录下的天地图墨卡托示例；
Step 4. 加载矢量瓦片：
    通过矢量瓦片样式URL加载MapGIS矢量瓦片地图服务；

Step 5. 数据展示：
     浏览矢量瓦片地图服务。

代码展示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>GeoPoint</title>
  <script src="./static/libs/include-mapboxgl-local.js"></script>
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map">
    <div id="mouse-position">
    </div>
  </div>
  <script>
    var { protocol, ip, port } = window.webclient;
    var map = new mapboxgl.Map({
      container: 'map', // 绑定div
      style: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/街道-墨卡托.json`,
      center: [106.563777, 29.578285],
      zoom: 3
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    //注册鼠标移动事件
    map.on('mousemove', function (e) {
      //经纬度坐标转web墨卡托
      const earthRad = 6378137.0;
      const x = e.lngLat.lng * Math.PI / 180 * earthRad;
      const a = e.lngLat.lat * Math.PI / 180;
      const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
      document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
    });
  </script>


</body>

</html>

浅色样式

示例功能

    使用MapGIS IGServer配置矢量瓦片的显示样式，配置的样式信息保存为xxx.json文件，上传文件到MapGIS IGServer服务器，客户端通过接口即可访问定制样式的矢量瓦片。本示例通过MapGIS IGServer矢量瓦片配置界面，配置矢量瓦片浅色地图样式。

示例实现

    本示例需要使用【include-mapboxgl-local.js】开发库实现，通过关键接口mapboxgl.Map()实现MapGIS矢量瓦片的加载。

开发库使用请参见 首页- 概述- 原生JS调用内容

1.MapGIS桌面工具裁剪矢量瓦片

（1）准备矢量地图文档

（2）矢量瓦片裁剪：设置输入瓦片索引区要素类，其他选项使用默认值

（3）矢量瓦片裁剪：选择一个空文件夹用来存放生成的矢量瓦片文件，高级设置中将最小显示块级别修改为0，其他选项使用默认值

（4）矢量瓦片裁剪：附加裁剪项设置使用默认值

（5）矢量瓦片裁剪：瓦片裁剪的过程，瓦片裁剪级别越高需要的生成时间越久

（6）矢量瓦片裁剪：裁剪的结果文件展示

2.矢量瓦片的服务发布与样式管理

（1）矢量瓦片服务发布：打开MapGIS Server Manager，找到矢量瓦片发布选项

（2）矢量瓦片服务发布：选择矢量瓦片发布的格式为目录格式，选中矢量瓦片发布的数据路径

（3）矢量瓦片服务发布：点击发布的矢量瓦片的左边的预览按钮，进入对应的编辑界面

（4）矢量瓦片样式管理：按照个性化需求进行样式配色等操作

（5）矢量瓦片样式管理：样式配置完毕后， 点击左上方的保存按钮保存对应的样式json文件到当前计算机

（6）矢量瓦片样式管理：将第5步保存的文件上传到对应的服务器上, 该按钮在第3步的最右边有个绿色上传箭

（7）矢量瓦片样式管理：上传完成的提示如下

（7）矢量瓦片样式管理：以上步骤完成后得到矢量瓦片样式URL：http://localhost:6163/igs/rest/mrms/vtiles/styles/hubei-id.json，在步骤实现中通过该URL即可访问矢量瓦片地图服务

实现步骤

Step 1.引用开发库:
    本示例通过本地离线【include-mapboxgl-local.js】脚本引入开发库；

Step 2. 创建布局：
    创建id="map"的div作为地图容器，并设置其样式；

Step 3. 创建地图对象：
    设置地图的必要参数，如地图div容器、缩放层级、中心点等，具体操作参考互联网地图目录下的天地图墨卡托示例；

Step 4. 加载矢量瓦片：
    通过矢量瓦片样式URL加载MapGIS矢量瓦片地图服务；

Step 5. 数据展示：
    浏览矢量瓦片地图服务；

代码展示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>GeoPoint</title>
  <script src="./static/libs/include-mapboxgl-local.js"></script>
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map">
    <div id="mouse-position">
    </div>
  </div>
  <script>
    var { protocol, ip, port } = window.webclient;
    var map = new mapboxgl.Map({
      container: 'map', // 绑定div
      style: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/浅色-墨卡托.json`,
      center: [106.563777, 29.578285],
      zoom: 3
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    //注册鼠标移动事件
    map.on('mousemove', function (e) {
      //经纬度坐标转web墨卡托
      const earthRad = 6378137.0;
      const x = e.lngLat.lng * Math.PI / 180 * earthRad;
      const a = e.lngLat.lat * Math.PI / 180;
      const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
      document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
    });
  </script>


</body>

</html>

持续更新中

GIS开发资料分享icon-default.png?t=O83Ahttps://www.wjx.cn/vm/OaQEBVS.aspx#

gisDuo
关注
  • 15
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从零开始Vue项目中使用MapboxGL开发三维地图教程（一）MapboxGL介绍以及前期vue项目的搭建
tigerhhzz的博客
06-11 3474
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开发三维地图教程（六）加载点、线、面图层以及三维面图层（白模）
tigerhhzz的博客
06-17 1889
然后使用addLayer创建一个新的图层，并设置多边形外观的样式。为了在多边形周围添加轮廓，它再次使用addLayer来创建一个引用相同GeoJSON源的新线层。开发地图应用时，加载POI等点状数据，显示文字或者图标信息，mapbox-gl对应使用的是符号图层（symbol），下面的代码时使用Mapbox GL JS中的默认Marker方法向地图添加两个标记。在mapbox-gl加载fill-extrusion图层过程：通过加载geojson矢量数据，数据源加载完成后，再进行图层的设置。
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-gl开发教程（二）：地图主要配置参数说明
地理信息技术杂谈 博客，欢迎技术交流
05-06 3185
在mapbox-gl地图初始化时，能够进行一些参数，下边将关键参数进行说明，未涉及的请参见mapbox-gl官方文档： options.antialias（布尔型）：是否设置抗锯齿（平滑），默认值是false； options.bearing（数值型）：地图默认逆时针偏北旋转角度值（度数），默认值是0； options.bounds（经纬度范围型）：地图初始化的显示范围，如设置这个属性，设置的center和zoom属性不起作用，默认值是null； options.center（经纬度坐标型）：地图初始化的中
mapbox-gl开发教程（一）：搭建前端开发环境
地理信息技术杂谈 博客，欢迎技术交流
04-26 2814
–mapbox-gl是一个开源、基于webgl技术的前端地图类库– 开发教程篇一：搭建前端开发环境 1、mapbox官网注册一个账号，生成一个开发token，在mapbox-gl2.0以前，使用自搭建的后台地图服务时，可以不使用此token，参见公众号文章：mapbox-gl升级到2.0后，使用自搭建的后端服务，也需要token，敬请注意！，或者修改mapbox-gl2.0以后的源码，也能避免token，参见公众号文章：mapbox-gl避免设置token源码修改，修改时，看一下官网的许可声明。 2、生成t
GIS开发：推荐Mapbox gl解决方案
地理信息技术杂谈 博客，欢迎技术交流
04-08 2085
在二维地图的开发中，实现类似于百度、高德地图那样加载简体的模型，使用mapbox gl是一个比较好的解决方案。 https://docs.mapbox.com/mapbox-gl-js/api/ 类似于国内的地图，在开发时，需要先以开发者的身份，申请token，才能调用官网的数据服务等其他接口。当然，库是JavaScript的，意味着可以将源码都下载下来，并搭建自己的服务方式，在网上可以搜到详细的...
基于 mapboxgl+threejs+react+ts 三维 webgis 实战系列教程
jiegiser博客
09-04 1400
全网唯一 基于 mapboxgl+threejs+react+ts 的 三维 webgis 实战系列教程： 后续将分享一些下面的功能： 基本项目搭建； mapboxgl 支持多坐标系； geojson 建筑面拉升以及纹理贴图； 流光线图层； 天空盒图层； 三维模型（obj、fbx、gltf）加载，并编辑位置； 飞线、防护罩等效果； 注意有 √ 的功能已经全部实现，可在专栏找到对应的文章以及代码详解。 目前正在整理开发中，后续会加入更过内容。敬请期待… ...
GIS开发：mapbox gl几种底图的加载
地理信息技术杂谈 博客，欢迎技术交流
05-09 4310
mapbox gl除了加载客户端可控制样式的底图，也能够加载常规的影像底图。 这里指发布的影像或者矢量地图切片，在线经常使用的有天地图，谷歌地图、高德百度等，底图的加载，mapbox gl中，主要是修改对应的样式style。 //这是加载arcgis server发布的底图切片 <div id='map'></div> <script> var map = new mapboxgl.Map({ container: 'map', style: { //
mapboxGL轨迹展示与播放
LZUGIS
12-20 3171
历史轨迹回放是GIS很常见的一个功能，本文结合turf.js实现轨迹的展示与播放动画。
基于SpringBoot和PostGIS的某国基地可视化实战
夜郎King的博客
06-25 4526
本文以Java开发语言为例，使用SpringBoot框架来进行后台开发，详细讲解如何使用Leaflet对PostGIS的全球基地信息进行Web可视化，最后分享Web可视化结果。从国内基地，到海外不同国家的具体的驻扎分布。
从零开始Vue项目中使用MapboxGL开发三维地图教程（二）Mapbox地图样式
tigerhhzz的博客
06-12 1719
Mapbox地图样式：按照Mapbox地图样式规范中描述的模式定义的一个JSON对象，或者是此类JSON的URL。可以接受null值以允许手动添加样式。要从Mapbox API加载样式，可以使用表单的URL其中：owner是您的Mapbox帐户名，：style是样式ID。
从零开始Vue项目中使用MapboxGL开发三维地图教程（四）改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标
tigerhhzz的博客
06-14 1780
该功能使用mapbox gl draw绘制多边形，并使用Turf.js计算其面积（平方米）和中心点坐标。绘制最终顶点时双击以完成多边形。多边形的总面积将显示在地图的左上角。在地图上画一个多边形，并计算多边形中包含的面积和中心点坐标。要删除多边形并绘制新多边形，请使用地图右上角的绘制工具。单击地图上的点来创建线，使用turf测量线的长度距离。这里我们使用到turfjs库，安装并引入turf。单击地图开始绘制多边形。
从零开始Vue项目中使用MapboxGL开发三维地图教程（三）添加全屏，缩放旋转和比例控制面板以及自定义图标、标记点击弹窗、地图平移等功能
tigerhhzz的博客
06-13 1593
/geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 582
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
基于Spring Boot构建一个点餐系统
嵌入式行业打工人，不定期更新博客。
09-08 953
这个示例提供了一个非常基础的框架，你可以在此基础上扩展更多的功能，如用户认证、购物车管理、支付接口等。在实际开发过程中，还需要考虑诸如错误处理、事务管理、日志记录等方面的问题。此外，确保所有的API调用都是安全的，并且正确处理用户的输入数据，防止SQL注入等安全风险。如有疑问和需求，可以私信联系我。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 923
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
09-10 483
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1069
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
一文读懂 JS 中的 Set 结构
最新发布
沐爸的博客
09-11 579
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值