Mapboxgl

Cesium+MapboxGL+VectorTile_1

这里主要讲述Cesium通过MapboxGL加载不同服务的情况，分别包括服务部署和发布，以及使用。
seelingzheng·2024-02-07 06:29

Cesium+MapboxGL+VectorTile -2

这里主要讲述Cesium通过MapboxGL加载不同服务的情况，分别包括服务部署和发布，以及使用。
seelingzheng·2024-02-07 06:29

threebox loadObj rotation 模型方向问题

用mapboxgl+threebox加载glb，有两种方式设置模型方向在loadObj的时候设置初始方向rotation加载成功之后用setRotation设置方向，注意setRotation设置的值是在初始
AllBlue·2024-02-07 06:18

mapbox threebox 下雨效果 天气特效

使用mapbox为地图容器，结合threebox实现下雨效果，天气特效效果图主要代码创建地图容器mapboxgl.accessToken='你的token';varmap=newmapboxgl.Map
AllBlue·2024-02-07 06:48

cesium mapboxgl+threebox glb 朝向问题

一、3Dbuilder打开glb二、cesium在pitch和heading都为0的情况下，不设置模型的朝向三、mapboxgl+threebox在pitch和bearing都为0的情况下，不设置模型的朝向四
AllBlue·2024-02-07 06:44

cesium three性能比较_mapboxgl + three 动画 — 网格热图

一、前言最近工作上需要实现一个地图动画效果，简单的动画效果，是的，简单；不过在此之前，我并不认为它简单，需要有一点点的webgl、three.js的基础。效果大概就是一个网格起伏热力图的动画，像心跳一样、heartbeat……，像这样。Agridheatmap上面这个动效，它好像是基于一个gltf模型来做的，它不给地图交互，现在我们也想实现类似的效果，我们最后实现的效果跟这个效果比还有点差距，我们
weixin_39667801·2024-02-04 08:43

MapBoxGL 加载天地图

MapBoxGLbody{margin:0;padding:0;}#map{position:absolute;top:0;bottom:0;width:100%;}.mapboxgl-canvas{outline
一碗老面i·2024-01-23 09:15

进阶mapbox GL之paint和filter

概述通过前面的文章初识mapboxGL我们对mapboxGL有了一个相对比较全面的认识，本节结合一些示例，重点讲述一下mapboxGL里面的filter和paint的用法。
牛老师讲webgis·2024-01-11 15:13

【WebGIS实例】（12）MapboxGL解决叠加图层的点击事件冒泡

解决方法一：监听有冲突的图层map.on('click','layerName',e=>{e.preventDefault()console.log('上面的图层')console.log('点击的要素',e.features[0])})//下面的那个图层：阻止默认事件，在下面的e可以看到_defaultPrevented:false，在layerName2中写入map.on('click','l
ReBeX·2024-01-10 12:48

SuperMap iClient for MapboxGL通过不同格式资源加载REST地图服务

目录前言一、iServerzxyTileImage资源模板1.1tiles参数填写格式1.2示例代码1.3加载效果二、iServerimage资源模板2.1tiles参数填写格式2.2示例代码2.3加载效果三、iServertileimage资源模板3.1tiles参数填写格式3.2示例代码3.3加载效果四、iServertileFeature资源模板4.1style参数填写格式4.2示例代码4.
supermapsupport·2024-01-04 07:20

关于 MapboxGL 在 Vue 中的简单使用

前言问题关于我为什么使用了在线的js引入方法，而不是使用npm直接下载依赖问题，之前有一篇文章讲过原因：关于Vue-iClient-MapboxGL的使用注意事项网上提供的vue-iclient-mapboxgl
李小斌96·2023-12-28 13:00

关于 mapboxgl 的常用方法及效果

给地图标记点实现效果/***在地图上添加标记点*point:[lng,lat]*color:'#83f7a0'*/addMarkerOnMap(point,color='#83f7a0'){constmarker=newmapboxgl.Marker({draggable:false,color:color,}).setLngLat(point).addTo(this.map);this.mark
李小斌96·2023-12-28 13:00

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

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

mapboxgl 中热力图的实现以及给热力图点增加鼠标移上 popup 效果

文章目录概要效果预览技术思路技术细节小结概要本篇文章还是关于最近做到的mapboxgl地图展开的。
李小斌96·2023-12-28 12:53

iClient for JavaScript如何以mvt矢量瓦片的形式加载数据服务

刘大这里写目录标题前言1.iServer中的预览页面2.iClientforJavaScript加载2.1构建Style2.2iCient加载2.2.1Leaflet&MapboxGL2.2.2OpenLayers
supermapsupport·2023-12-26 20:48

threejs + mapboxgl 实现炫酷动态立体墙效果

前言今天实现一个三维电子围栏效果；本例子是基于前面文章搭建的私库进行开发。在三维渲染中，有可能会遇到需要在地图上展示一个围栏效果，来展示一个区域的与众不同，或者；在预警方面常用到电子围栏来进行监控人员；本文也是借鉴maptalks中的立体墙的效果来实现的。之前在Cesium也实现过类似的效果，可以查看这个视频接下来我们实现一个动态立体墙的效果；围栏图层开发新建一个RippleWall图层，代码如下
jiegiser#·2023-11-26 07:04

GIS基础知识

webGIS引擎Openlayers：2DGIS引擎，稳定可靠的集成式地图开发脚本，兼容老版本IE浏览器，适合传统webGIS开发；MapboxGL：2.5D,不支持球，支持地图旋转，倾斜等；最美的GIS
小满blue·2023-11-10 21:05

（一）Mapbox GL源码本地部署、打包、调试

目录1.前言1.1.关于本文1.2.关于MapBoxGL1.3.环境说明2.Mapbox源码下载2.1.基础环境准备2.2.克隆项目至本地3.Mapbox本地编译4.Mapbox源码调试1.前言1.1.
轮回的秋·2023-11-05 23:03

OSX系统下运行mapbox GL源码

mapboxGL作为一个二三维的地图引擎，其源码还是值得熟悉一下的，源码运行也比较简单，简单记录一下。下载源码和安装node，yarn等这些步骤就略过了，下面主要是记录下怎么运行源码。
写前端的大叔·2023-11-05 16:34

mapbox使用marker创建html点位信息

mapbox使用marker创建html点位信息codePen地址mapboxgl.accessToken="pk.eyJ1IjoibGl1emhhbzI1ODAiLCJhIjoiY2xmcnV5c2NtMDd4eDNvbmxsbHEwYTMwbCJ9
小火车况且况且·2023-11-05 03:52

mapbox-gl支持多种坐标系

参考：支持百度、高德坐标系：mapboxgl纠偏百度地图支持天地图：cgcs2000-mapbox-gl-js，天地图解析效果修改源码后支持多种坐标系，当然也不会影响原本的3857坐标。
迦南giser·2023-10-27 13:59

mapboxgl 中插值表达式的应用场景

一、前言interpolate是mapboxgl地图样式中用于插值的表达式，能对颜色和数字进行插值。它的应用场景有两类：对地图数据进行颜色拉伸渲染。常见的应用场景有：热力图、轨迹图、模型网格渲染等。
GIS兵器库·2023-10-24 16:48

060：mapboxGL点击某处，通过flyTo，以动画的形式聚焦到此点

第060个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中点击某处，通过flyto，以动画的形式聚焦到此点。这里用到了flyTo的方法，里面可以设置bearing，zoom，pitch等众多的属性内容。直接复制下面的vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共127行）相关API参考：专栏目标示例效果</
还是大剑师兰特·2023-10-21 05:45

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

第058个点击查看专栏目录本示例是介绍演示如何在vue+mapbox中监听键盘事件，控制前后左右移动。本例通过panBy方法来移动一定距离的地图，通过.addEventListener的方法来监听键盘的按键动作。注意这里面style中一定要设置好pitch，不能为0，不然就撞墙，不能移动了。直接复制下面的vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共1
还是大剑师兰特·2023-10-20 09:51

Mapbox GL可视化之热力图

二初始化地图1引入js文件2构建地图容器3初始化MapboxGL地图对象mapboxgl.ac
Civitasv·2023-10-19 14:14

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

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

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

第051个点击查看专栏目录本示例是介绍演示如何在vue+mapbox中改变bearing和pitch，变换查看视角。bearing：地图的默认方位角（可选，表示地图视口正上方中心点在地图上北偏东的角度。默认值为0）。pitch：地图的默认倾斜角度（可选，默认值为0，范围为0~85）。直接复制下面的vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共80行）相
还是大剑师兰特·2023-10-16 18:40

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

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

049：mapboxGL本地上传WKT文件，在地图上显示图形

第049个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中本地上传wkt文件，先将wkt转换为geojson格式，然后通过mapbox加载geojson数据的方法解析，在地图上显示图形。直接复制下面的vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例用的a.wkt内容示例源代码（共118行）安装wicket相关API参考：专栏目标示例效果
还是大剑师兰特·2023-10-15 07:58

040：mapboxGL鼠标hover更换选中feature颜色

第040个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中通过鼠标hover的方式来更换选中feature颜色。这里面利用了mousemove和mouseleave的方法，通过选中图层的feature，来设置hover的true或者false，从而通过opacity的case状态来判断透明度用哪一个值。直接复制下面的vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示
还是大剑师兰特·2023-10-12 23:24

地图可视化笔记：kepler.gl 介绍

基于MapboxGL和deck.gl构建，kepler.gl可以实时渲染代表成千上万次行程的数百万个点，并执行空间聚合。2效果展示
UQI-LIUWJ·2023-10-11 15:15

039：mapboxGL更换地图上的鼠标样式

第039个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中更换地图上的鼠标的样式。直接复制下面的vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共74行）相关API参考：专栏目标示例效果配置方式1）查看基础设置：https://xiaozhuanlan.com/topic/932781
还是大剑师兰特·2023-10-10 10:07

关于 Vue-iClient-MapboxGL 的使用注意事项

官网：https://iclient.supermap.io/web/apis/vue/zh/api/guide/installation.html关于图的使用，其余的引入步骤不再赘述，仅说注意事项。推荐使用的是全局引入，也就是完整引入因为单独引入我踩了不少坑，比如说css库配置错误，花费时间研究解决。单独引入组件名与全局引入使用的组件名不同。单独引入组件的地址需要从源码中找看示例只有使用，并没有
李小斌96·2023-10-08 07:13

038：mapboxGL 旋转地图（rotateTo）

第038个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中旋转地图。直接复制下面的vue+mapbox源代码，操作2分钟即可运行实现效果文章目录示例效果配置方式示例源代码（共68行）相关API参考：专栏目标示例效果配置方式1）查看基础设置：https://xiaozhuanlan.com/topic/9327810546
还是大剑师兰特·2023-09-29 20:45

mapboxgl加载tiff

缘起近期在项目中遇到这么一个需求，需要在地图上展示一组格网数据，格网大小为2m*2m，地图api用的mapboxgl。起初拿到这个需要感觉很easy，在地图上添加一个fill图层就好啦。
GIS兵器库·2023-09-24 19:37

vue3-mapboxgl-antv-L7开发（二）控件的添加

文章目录地图中有许多的控件方便用户对地图进行操作。一、常见的控件都有哪些？1、mapbox中的控件（1）、AttributionControl（属性控件）（2）、FullscreenControl（全屏控件）（3）、GeolocateControl（定位控件）（4）、NavigationControl（导航栏控件）（5）、ScaleControl（比例尺控件）（6）、添加控件的方法(控件的配置属性
Yuan妙不可言·2023-09-23 14:30

Mapboxgl流动水效果实现

在mapboxgl中改源码相比cesium还是比较繁琐的，mapboxgl中存在着大量的样式配置内容，写一个面的水流效果就要改动很多东西，最近将之前写的水流效果迁移到了最新的mapboxgl版本上，顺便再次梳理下流程
sky.....·2023-09-23 14:29

Mapbox HTML可视化点，线，多线，面带底图

AddmultiplegeometriesfromoneGeoJSONsourcebody{margin:0;padding:0;}#map{position:absolute;top:0;bottom:0;width:100%;}mapboxgl.ac
程序媛一枚~·2023-09-23 14:28

MapboxGL——marker轨迹动画效果，自定义速度。暂停继续轨迹运动

轨迹运动的核心是不断变动marker的坐标。最终效果：主要参考了Mapbox实现动态轨迹_mapbox轨迹_二五25的博客-CSDN博客mapbox轨迹动画效果_mapbox动画_Chaoying.的博客-CSDN博客但是我们这里的需求有变化。使用turf.along和turf.lineChunk出来的数据，只包含坐标点.不包含其他信息。需要携带其他的信息就没有办法。比如起点或者终点在室内，那么就
cora_Liu·2023-09-23 14:27

mapboxgl实现带箭头轨迹线

最近在使用mapboxgl实现轨迹展示时，想实现类似高德地图导航轨迹效果，然而并未在网上找到类似示例。经一番研究与尝试，最终解决，效果如下。
GIS兵器库·2023-09-23 14:57

Mapbox GL JS 获取屏幕可视区域（四角）经纬度

其中window.mapbox为mapboxgl实例/***获取当前窗口可视区域的经纬度*@returns*/functiongetWindowLngLat(){if(window.mapbox){letwidthRange
愤怒@蜗牛·2023-09-23 14:57

解决mapboxgl加载栅格影像服务在低分屏下会模糊的问题

解法：不要将该服务放在style中一开始就进行加载，而是将其在map的load回调中加载，即可解决该问题。
铭净止水·2023-09-23 14:27

Mapbox-gl.js v2.15.0 扩展支持4326，4490坐标系

mapboxgl对地图服务坐标系的要求仅仅是EPSG:3857，也就是web墨卡托投影，如果你的地图服务是此之外的坐标系，如cgcs2000(国家2000、4490)的坐标系，则需要自己修改源码进行扩展
m0_65461805·2023-09-23 14:27

Mapbox GL 添加比例尺（Scale）功能 - JavaScript 实现

MapboxGL添加比例尺（Scale）功能-JavaScript实现MapboxGL是一款流行的地图渲染库，它提供了丰富的功能来创建交互式地图应用程序。
星光璀璨技术之心·2023-09-23 14:56

开源WebGIS-相关知识

【2】qgis【3】openlayes（2D支持的很全面，且支持mapbox矢量切片，从v6开始支持3D，现在是v8版本，但是对于3dtiles或slpk三维支持较弱）【4】leaflet【5】mapboxGL
LEILEI18A·2023-09-23 14:26

mapboxgl 添加带注记marker

;bottom:0;width:100%;}.marker{display:block;border:none;border-radius:50%;cursor:pointer;padding:0;}mapboxgl.accessToken
炉火纯青-旺·2023-09-18 04:45

mapboxgl 绘制3d polygon

AddapolygontoamapusingaGeoJSONsourcebody{margin:0;padding:0;}#map{position:absolute;top:0;bottom:0;width:100%;}mapboxgl.accessToken
炉火纯青-旺·2023-09-18 04:14

vue+mapbox实现地图3D地图展示效果

具体代码示例如下：单击地图上的点:范围内面积:import'@/assets/js/mapboxgl-control-minimap.js'importmapboxglfrom'mapbox-gl'importMapboxLanguagefrom
辉＠_＠·2023-09-16 11:19

解决vue中mapbox地图显示一半的问题

发现将canvas.mapboxgl-canvas的position:absolute去掉就解决了。
Sheyueyu·2023-09-05 01:31

Mapbox-gl 关闭所有Popup，以及关闭按钮出现黑色边框bug

2.本人采用div的方式关闭所有的popup，在map对象上新增加方法map.closePopup=mapView.popupClear=function(){    $(".mapboxgl-popup
一醉千秋·2023-08-31 19:14
上一页 1 2 3 4 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他