随笔分类 - GIS / Mapbox-GL
摘要：一、介绍 插槽允许在样式中创建定义明确的插入点，如：通常“面”图层需要插入到“线”图层下方，在标准样式之前，需要通过指定图层 id 来实现，一旦 id 发生变化，则会抛出错误，而在新的标准样式中，只需要指定相应的插槽即可。 { "layers": [ ..., { "id": "bottom", "
阅读全文
摘要：官方文档说明 在地图进入“空闲”状态之前渲染的最后一帧之后触发 // 地图初始化 const map = new mapboxgl.Map({}); // 设置一个事件侦听器，在映射进入“空闲”状态之前触发。 map.on('idle', () => { console.log('A idle ev
阅读全文
摘要：在Mapbox GL JS中，可通过使用Mapbox提供的带有本地化支持的样式或者通过加载带有中文标签的自定义样式来实现中文语言的图层配置。 https://docs.mapbox.com/mapbox-gl-js/example/language-switch/ 以下是实现中文语言显示的两种方法：
阅读全文
摘要：mapboxgl动态点图标制作 interface PulsingDot { width: number; height: number; data: Uint8Array; context: CanvasRenderingContext2D | null; onAdd: () => void; r
阅读全文
摘要：https://docs.mapbox.com/mapbox-gl-js/api/map/#map#triggerrepaint map.triggerRepaint();
阅读全文
摘要：mapboxgl加载geoserver发布的tms矢量图层服务 // 添加源 g.map.addSource('tms-source', { type: 'vector', scheme:'tms', tiles: [ 'http://localhost:9090/geoserver/gwc/ser
阅读全文
摘要：leaflet加载mapbox矢量图层-最佳方案推荐 闪烁问题 比如现在有卫星图和mapboxgl矢量图层，两者有时常常需要切换，但在切换回矢量图层时，会出先短暂的空白问题(就是初始化图层)，那有什么办法，可以实现平滑过渡切换呢 解决思路 大概讲一下思路，就是在切换卫星图时，矢量图层不要立刻移除，通
阅读全文
摘要：注意Openlayer的版本 Openlayer是支持直接加载矢量图层的，如下 图层会没有样式渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
阅读全文
摘要：mapboxgl加载xyzTiles地图示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/mapbox-gl/2.15.0/mapbox-gl.js"></sc
阅读全文
摘要：map.addLayer( { "id": "背景", "type": "background", "paint": { "background-color": "rgba(255,255,255,0)" }, "layout": { "visibility": "visible" } } )
阅读全文
摘要：获取地址 wms服务发布之后，在图层预览这里，找到我们发布的图层服务，然后下拉框内选择WMS服务下的png 这个链接要把bbox换成{bbox-epsg-3857}，就可以了。 wms服务一般可以用一些样式文件，调用上面的链接的时候，可以把styles=的后面的换成这里的自定义样式。 加载geose
阅读全文
摘要：示例一 需求说明 图层要素默认填充颜色为蓝； 当我鼠标悬浮在某一个要素上时，这个要素的填充颜色是红，同时显示标签且颜色也为红； 当我鼠标点击某一个要素时，这个要素的填充颜色是黄，同时当鼠标悬浮时标签颜色显示黄。 有一个geojson面图层数据，加载到地图上。 代码实现 const addGeoJso
阅读全文
摘要：const testGeoJOSN = () => { // 加载 GeoJSON 数据 map.addSource("geojson", { type: "geojson", data: china, generateId: true, }); map.addLayer({ id: "china"
阅读全文
摘要：map.on("click", "china", (e) => { console.log(e); console.log(e.features); }); 很疑惑？事件在输出时，features给过滤掉了
阅读全文
摘要：问题描述 在使用 Mapbox-GL 构建地图 Web 应用程序。它有很多很酷的功能。根据需求在地图上设置了切换基本地图（即卫星、地形等）的按钮。 遇到的问题是，当使用setStyle()更改样式时，它会删除作为图层加载的多边形并重新加载地图，而且会把我后续单独添加的图层给删除，我希望能够更改基本地
阅读全文
摘要：主要使用了这个表达式进行过滤："text-opacity": ["step", ["zoom"], 0, 5, 1] 这个表达式的意思就是zoom在小于5时text-opacity值等于0，大于5时text-opacity值等于1 const addPortsGeoJSONLayer = (port
阅读全文
