写在前面 持续更新 仓库地址 github npm 功能 测量工具 绘制工具 图层分组操作 setStyle方法重写 功能介绍 图层分组操作 图层操作是基于 Map 类添加的扩展，所以可以直接在 Map 的实例中使用以下函数 /** * 所有图层组，不要尝试自行使用 */
//函数初始化时要进行监听 function rightMouseMenu(){ var rightMenu = new SFMap.RightMenuControl({ className: 'sfmap-ctrl-rightmenu-custom', // 菜单内容
矢量瓦片地图，在后续缩放级别中重用相同的源瓦片，以节省移动设备上的带宽。 注意:当访问令牌过期时，映射将不可见。 Advanced Mapbox Vector Tiles <!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <!-- 引入OpenLayers CSS样式 --> <link rel="st
前言 系统实现过程中存在测面的需求，系统选用mapbox二维引擎，所以记录下使用mapbox实现测面的方式，供后续查阅使用。 效果 实现代码 步骤1、前置资源 <link rel="stylesheet" href="http://resource.geointech.cn:8040/mapbox/mapbox-gl.css" /> <script src="http://resou
点击地图即可获取经纬度，也可以手动输入经纬度来换算 在线查看运行效果 实现方法 mapbox中通过地图点击事件来获取到坐标，然后转换为其他的坐标系并输出在屏幕上即可 获取坐标 方法很简单，给地图添加一个监听事件即可。 map.on('click', e=>{ const {lng, lat} = e.lngLat con
基于python + Postgresql MVT+ MapBox 加载矢量瓦片的方法 服务端 django_restframework + psycopg2 from rest_framework.views import APIView from rest_framework.response import Response import psycopg2.extras DB_HOST = '' DB_PORT = 5432 DB_USERNAME = ''
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Add custom icons with Markers</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,us
在线网站的工具，只能生成精灵图，没有json配置文件。 mapbox精灵图工具 mapbox开源了一个精灵图制作工具 spritezero，这个工具可以生成精灵图和对应的json文件。spritezero 的输入文件是svg文件，输出文件是指定比例的精灵图和对应的json文件。 我自己在安装 spritezero 这个工具时总报
mapbox层级变小后，可能由于碰撞算法，有些位置的图标要素比较多时，会出现少绘制/不绘制的情况 查阅官网后，发现参数icon-ignore-placement 解释：If true, other symbols can be visible even if they collide with the icon.（如果设置成true，即使其他要素有碰撞的情况下，依然可以显示）
先在html文件中准备一个定义了高宽的 DOM 容器 <div id="map" style="width: 100%;height:900px;"></div> 引入js <!-- mapbox-gl --> <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet"
加载mapbox地图完之后，需要在头部工具栏中显示坐标，首先使用map.on方法调用 map.on('mousemove', function (e) { }); ‘mousemove’是鼠标移动触发事件，‘click’为点击事件，具体可在mapbox官网查询； 然后console一下； map.on('mousemove', function (e) {
由于mapbox 的服务器在国外，在开发的时候有可能加载很慢，而且大多时候与背景地图无关，此时可以加载一个空白的地图来增加加载速度从而提高开发效率。代码如下： 首发在https://www.aigisss.com/posts/e1a3a842.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" />
1。style： mapbox://styles/mapbox/streets-v10 mapbox://styles/mapbox/outdoors-v10 mapbox://styles/mapbox/light-v9 mapbox://styles/mapbox/dark-v9 mapbox://styles/mapbox/satellite-v9 mapbox://styles/ma
1、首先引入three与mapbox库 <script src="./js/mapbox-gl.js"></script> <link href="./js/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0;
参考：https://blog.csdn.net/GIS_Lyn/article/details/87908982 var wmts_vector = "http://192.168.198.252:8080/geoserver-2.15.4/gwc/service/tms/1.0.0/demo:XXXX@EPSG:900913@pbf/{z}/{x}/{y}.pbf" var styles = { "version": 8, "name&qu
1.新增图层的时候，设置图片的位置 map.addLayer(geojson,'下面图层的ID') 2.当多个图层层叠时候，点击会触发多个点击事件，取消事件冒泡 设置好图层的层级 在需要取消之后的： e.preventDefault() 后面的图片判断if(e.defaultPrevented)return;
mapbox-gl近日更新到了2.0.0版本，有两个更新对地图的体验和实用性有了相当大的提升。 一是自身完善了地图引擎对高程数据的支持（DEM）： 二是调整了观看视角，以前限制到只能以60度的倾角观看，现在放宽到可以以85度的视角观看，基本达到平视的效果，同时添加了天空盒的效果，优化平视观看到
由于 mapbox 的服务器在国外，在开发的时候有可能加载很慢，而且大多时候与背景地图无关，此时可以加载一个空白的地图来增加加载速度从而提高开发效率。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Add an image</title> <meta name="viewp
在之前的文章【数据获取】GGGIS下载谷歌、天地图等地图数据里，我们介绍了用GGGIS地图下载器下载卫星影像图的方法。那么有没有其它的办法能够获取卫星图呢？ 当然有！我们其实可以通过GIS软件自带的“添加WMTS服务器”加载其它地图服务来获取卫星图。在本篇文章里，我们就来介绍一下如
1、数据源加载 map.addSource('building', { type: 'vector', tiles: ['http://192.168.182.1:6767/{z}/{x}/{y}.pbf'] }) 2、建筑图层加载 map.addLayer({
1、下载建筑shp文件（带有高度字段的polygon数据） 2、使用mapshaper转换为geojson格式（本地处理） 3、安装cygwin，参考https://www.cnblogs.com/jyughynj/p/11804721.html 4、使用tippecanoe转换mbtiles矢量切片（https://github.com/mapbox/tippecanoe） 5、使用mbvie
mapbox源码解析（mvp矩阵） 1.坐标范围2.模型矩阵，转世界坐标2.1计算转当前切片内的真正相对坐标（本地坐标）2.2计算转当前切片内各点平移后的真正绝对坐标（世界坐标），得到模型矩阵ModelMatrix 3.视图转换，转到相机空间坐标下ViewMatrix4.投影转换5.src/geo/transform.js相关矩阵计算源
Mapbox gl tile瓦片渲染点以及图片Icon 1. 效果图2. 源码参考 1. 效果图 点效果图如下： 以图标渲染效果图如下： 注意图片要不能跨域，需要下载的下来才能正常展示。 2. 源码 // 先把图片加载进来 mapObj.on('load', function () { // Add an image to use as a custom
介绍 地图展示效果在实际工程中会用到分屏和卷帘两种，目前基于ArcGIS Server JS、Leaflet等网上已经大堆的实现，本篇文章介绍基于Mapbox GL JS如何实现地图分屏效果，目前已经开源在github，可以随时使用。效果图如下，在线演示。 以下文章提到的mapbox-gl-split为本人开发的库，目前在git
作者：ATtuing 出处：http://www.cnblogs.com/ATtuing 最近在做关于mapbox的项目，看到这篇文章感觉特别好，特此转载记录一下。 先不说废话直接上地址：（所有东西都在阿里云的共享云虚拟主机上，访问地图可以会有点慢，请多多包涵）。 01：中国地图：http://test.sharegis.cn/mapbox/html/3china.
