mapboxgl专题

superMap mapboxgl初始化地图时，地图旋转api与设置地图中心api，同时进行无法完成实现效果

superMap mapboxgl初始化地图是，地图旋转api与设置地图中心api，同时进行无法完成实现效果 map = new mapboxgl.Map({center: [113.29840006822727, 23.395243424972175]})map.on("load", () => {map.rotateTo(-75)map.easeTo({center: [lng, lat]

superMap mapboxgl 跳转其他页面并改变浏览器窗口大小，在跳回地图页面，地图大小异常，变为300*400大小。

superMap mapboxgl 跳转其他页面并改变浏览器窗口大小，在跳回地图页面，地图大小异常，变为300*400大小。 window.addEventListener("resize", onResize)const onResize = () => {map.resize()}添加监听事件，调用地图api,resize()。

[vue2项目]vue2+supermap[mapboxgl]+天地图之地图的基础操作（画线+自定义打点）

二、地图的基础操作 1、画线案例（1） this.map.on("load", () => {let geometryLine = {type: "Feature",geometry: {// 定义类型type: "LineString",coordinates: [[113.39793764, 34.05675322],[113.35187554, 32.4392251],[112

记mapboxGL实现鼠标经过高亮时的一个问题

概述 mapboxGL实现鼠标经过高亮可通过注册图层的mousemove和moveout事件来实现，在mousemove事件中可以拿到当前经过的要素，但是当使用该要素时，发现在某个地图级别下会有线和面数据展示不全的情况。究其原因，发现是mapboxGL在绘图的时候为提升效率也会进行切片，所以图层事件返回的要素时切片后的，当数据范围比较大、地图级别比较大的时候，必然会分成多块。表现

基于SuperMap iClient for MapboxGL实现等时圈功能

功能介绍等时圈是指从某点出发，以某种交通方式在特定时间内能到达的距离覆盖的范围。之前在简书上看到过一篇文章，介绍的是基于mapboxgl使用turf去实现等时圈的方法：等时圈实现。最近在使用超图产品进行学习，看到iClient产品里clasic，for Leaflet,for OpenLayers都有服务区分析这个功能，看了一下是和等时圈的功能是一样的，在mapbox里找了一下并没有在分析

解决MapboxGL的Popup不支持HTMLDiv元素的问题

解决MapboxGL的Popup不支持HTMLDiv元素的问题官网给出的文档是不支持HTMLDivElement的，只支持HTML标签。如果单纯的只显示字符串，那就没问题，如果想在Popup中使用更强大的功能，此时就不行了，下面是源码的一部分显示如下： /*** Sets the popup's content to the HTML provided as a string.*

mapboxGL多图对比

概述前面的文章mapboxGL卷帘里面实现的时候已经有涉及多图联动了，本文在此基础上进一步优化，加入鼠标位置展示。效果实现思路注册map的mouseover事件，给当前移入的地图注册map的move事件；注册map的mouseout事件，给当前移出的地图取消map的move事件；注册map的mousemove事件，获取当前的鼠标位置，在其他地图上展示鼠标位置，鼠标位置的展示通过

cesium mapboxgl+threebox glb 朝向问题

一、3Dbuilder打开glb 二、cesium在pitch和heading都为0的情况下，不设置模型的朝向三、mapboxgl+threebox在pitch和bearing都为0的情况下，不设置模型的朝向四、对于地图默认视角，cesium设置pitch=-90、heading=0的时候和mapboxgl+threebox设置pitch=0、bearing=0的

mapboxGL测量实现

概述讲真，MapboxGL里面虽然有测量的功能，但是不太好用，于是就萌生了自己实现的方法。本文几个turf.js来说说mapboxGL中测量的实现。效果实现 1、实现思路按照绘制的流程，需要涉及到map的三个事件：click，dblclick，mousemove，其中click为绘制，dblclick为结束绘制，mousemove为绘制中。这样，定义一个状态标识isMea

mapboxgl绘制3D线

最近遇到个需求，使用mapboxgl绘制行政区划图层，要求把行政区划拔高做出立体效果，以便突出显示。拿到这个需求后，感觉很简单呀，只需要用fill-extrusion方式绘制就可以啦，实现出来是这个样子的效果有点丑，并且这里有个问题就是我的数据是区县数据，而绘制出的效果却没有区分出各个区县的边界于是从下面两个方向做优化处理：各区县按不同颜色区分添加区县边界首先尝试不同区县按颜

mapboxGL中的航线动画

概述借用上篇文章中二阶贝塞尔曲线的生成，本文实现mapboxGL中的航线动画。效果实现 1. 初始化地图 const from = [101.797439042302, 36.5937248286007];const to = [106.9733, 35.217];const points = new ArcLine(from, to);const line = new

mapboxgl 中给地图添加遮罩蒙版，并不遮罩其中一块区域

文章目录概要效果预览技术思路技术细节小结概要本篇文章主要是给一整块地图添加遮罩层蒙版，但是不遮罩其中一个区域，以反向高亮地区内容。效果预览技术思路这里要实现某个区域反显高亮，需要这个区域的边界json文件，与echarts中的相同，这都是通用的。实现全局遮罩给定的坐标就是-180，180.如果只想遮罩这个省，不想全部，也需要引入边界json文件即可。总体来

关于 mapboxgl 的常用方法及效果

给地图标记点实现效果 /*** 在地图上添加标记点* point: [lng, lat]* color: '#83f7a0'*/addMarkerOnMap(point, color = '#83f7a0') {const marker = new mapboxgl.Marker({draggable: false,color: color,}).setLngLat(point).add

070：mapboxGL加载含有shp文件的zip，显示图形

第070个点击查看专栏目录本示例是介绍演示如何在vue+mapbox中加载含有shp文件的zip，在地图上显示图形。这里先通过转换生成geojson文件，然后在地图上渲染图形，同时使用fitBounds将数据放置到可视的范围内。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果所用的zip文件配置方式示例源

071：mapboxGL上传含shp的zip文件，在map上解析显示图形

第071个点击查看专栏目录本示例是介绍演示如何在vue+mapbox中上传含有shp文件的zip，在地图上显示图形。这里先通过上传解压解析，转换生成geojson文件，然后在地图上渲染图形。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果所用的zip文件配置方式示例源代码（共133行）安装插件相关API参

063：mapboxGL常见错误：Style is not done loading（原因及解决办法）

第063个点击查看专栏目录作者在做vue+mapbox的项目，将geojson的数据加载到地图上来，形成的效果图如下但是在处理的时候，遇到过这个一个错误，提示信息如下： vue.runtime.esm.js:3049 Error: Style is not done loadingat Qt._checkLoaded (mapbox-gl.js:

062：mapboxGL通过jumpTo方式跳转到某位置

第062个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中通过jumpTo方式跳转到某位置。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共122行）相关API参考：专栏目标示例效果配置方式 1）查看基础设置：https://xiaozhu

062：mapboxGL通过jumpTo方式跳转到某位置

第062个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中通过jumpTo方式跳转到某位置。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共122行）相关API参考：专栏目标示例效果配置方式 1）查看基础设置：https://xiaozhu

058：mapboxGL监听键盘事件，通过panBy控制前后左右移动

第058个点击查看专栏目录本示例是介绍演示如何在vue+mapbox中监听键盘事件，控制前后左右移动。本例通过panBy方法来移动一定距离的地图，通过.addEventListener的方法来监听键盘的按键动作。注意这里面style中一定要设置好pitch，不能为0，不然就撞墙，不能移动了。直接复制下面的 vue+mapbox源代码，操作2分钟即可运

056：mapboxGL中layer的layout，paint，filter的属性值表达式说明总结

第056个点击查看专栏目录本篇文章是mapbox的layer中layout，paint，filter的表达式说明总结。 mapbox中 Expressions 是什么 Expressions：表达式集合（并非 style 的属性，只是 layer 的任何 layout布局属性和 paint绘制属性，以及 filter 属性等，它们的值都可以指定成一个表

055：mapboxGL中加载geojson，导出为CSV格式文件

vue+mapbox 第055个点击查看专栏目录本示例介绍演示如何在vue+mapbox中加载geojson，导出为CSV格式文件。通过一个插件，将geojson转化为csv，同时通过file-saver将文件下载下来。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果导出后的文件配置方式示例源代码（共

051：mapboxGL改变bearing和pitch，变换查看视角

第051个点击查看专栏目录本示例是介绍演示如何在vue+mapbox中改变bearing和pitch，变换查看视角。bearing：地图的默认方位角（可选，表示地图视口正上方中心点在地图上北偏东的角度。默认值为 0）。pitch：地图的默认倾斜角度（可选，默认值为 0，范围为 0 ~ 85）。直接复制下面的 vue+mapbox源代码，操作2分

050：mapboxGL加载geojson数据，同时包含点、多边形的处理示例

第050个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，既显示点又显示多边形。这个示例是显示了一种处理方式，通过过滤的方式将数据分离化，点和多边形通过两个不同的图层来加载表示。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共144行）相关A

048：mapboxGL本地上传geojson文件，在map上解析显示图形

第048个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中本地上传geojson文件，通过mapbox加载geojson数据的方法解析，在地图上显示图形。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共112行）相关API参考：专栏目标示例效果

044：mapboxGL利用fill-extrusion自定义挤出状建筑体

第044个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中利用fill-extrusion自定义挤出状建筑体。填充挤压样式图层在地图上渲染一个或多个填充（以及可选的描边）挤压（3D）多边形。您可以使用填充拉伸图层来配置多边形或多多边形要素的拉伸和视觉外观。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果

046：mapboxGL加载天地图路网图+标记（wmts方式）

第046个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中加载天地图路网图+标记（wmts方式）。瓦片中的url地址引用的是天地图的wmts的形式。直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共99行）相关API参考：专栏目标示例效果配置方