首页 > TAG信息列表 > mapbox

mapbox 扩展

写在前面 持续更新 仓库地址 github npm 功能 测量工具 绘制工具 图层分组操作 setStyle方法重写 功能介绍 图层分组操作 图层操作是基于 Map 类添加的扩展,所以可以直接在 Map 的实例中使用以下函数 /** * 所有图层组,不要尝试自行使用 */

mapbox 右键菜单栏

 //函数初始化时要进行监听 function rightMouseMenu(){                     var rightMenu = new SFMap.RightMenuControl({                     className: 'sfmap-ctrl-rightmenu-custom',                     // 菜单内容          

Openlayers示例 | Advanced Mapbox Vector Tiles

矢量瓦片地图,在后续缩放级别中重用相同的源瓦片,以节省移动设备上的带宽。 注意:当访问令牌过期时,映射将不可见。 Advanced Mapbox Vector Tiles <!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <!-- 引入OpenLayers CSS样式 --> <link rel="st

记录:实现mapbox的测面功能

前言 系统实现过程中存在测面的需求,系统选用mapbox二维引擎,所以记录下使用mapbox实现测面的方式,供后续查阅使用。 效果 实现代码 步骤1、前置资源 <link rel="stylesheet" href="http://resource.geointech.cn:8040/mapbox/mapbox-gl.css" /> <script src="http://resou

mapbox获取各种经纬度

点击地图即可获取经纬度,也可以手动输入经纬度来换算 在线查看运行效果 实现方法 mapbox中通过地图点击事件来获取到坐标,然后转换为其他的坐标系并输出在屏幕上即可 获取坐标 方法很简单,给地图添加一个监听事件即可。 map.on('click', e=>{ const {lng, lat} = e.lngLat con

MapBox加载矢量瓦片

基于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 = ''

Mapbox 自定义点标记图标

<!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

如何创建离线化 mapbox sprite精灵图

在线网站的工具,只能生成精灵图,没有json配置文件。 mapbox精灵图工具 mapbox开源了一个精灵图制作工具 spritezero,这个工具可以生成精灵图和对应的json文件。spritezero 的输入文件是svg文件,输出文件是指定比例的精灵图和对应的json文件。 我自己在安装 spritezero 这个工具时总报

mapbox层级变小,部分图标+文字不进行绘制问题

mapbox层级变小后,可能由于碰撞算法,有些位置的图标要素比较多时,会出现少绘制/不绘制的情况 查阅官网后,发现参数icon-ignore-placement   解释:If true, other symbols can be visible even if they collide with the icon.(如果设置成true,即使其他要素有碰撞的情况下,依然可以显示)

L7和mapbox结合使用的案例1

先在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"

在React项目中使用mapbox,实现兄弟组件传递参数显示鼠标移动地理坐标,并保留小数后两位

加载mapbox地图完之后,需要在头部工具栏中显示坐标,首先使用map.on方法调用 map.on('mousemove', function (e) {     }); ‘mousemove’是鼠标移动触发事件,‘click’为点击事件,具体可在mapbox官网查询; 然后console一下; map.on('mousemove', function (e) {     

Mapbox添加空白地图,减少加载时间

由于mapbox 的服务器在国外,在开发的时候有可能加载很慢,而且大多时候与背景地图无关,此时可以加载一个空白的地图来增加加载速度从而提高开发效率。代码如下: 首发在https://www.aigisss.com/posts/e1a3a842.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

Mapbox相关内容

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

three几何线在mapbox地图显示

1、首先引入three与mapbox库 <script src="./js/mapbox-gl.js"></script> <link href="./js/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0;

【GIS】Mapbox、GeoServer矢量瓦片

参考: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

mapbox gl js

1.新增图层的时候,设置图片的位置  map.addLayer(geojson,'下面图层的ID') 2.当多个图层层叠时候,点击会触发多个点击事件,取消事件冒泡   设置好图层的层级   在需要取消之后的: e.preventDefault()   后面的图片判断if(e.defaultPrevented)return;    

mapbox-gl集成three.js开发

mapbox-gl近日更新到了2.0.0版本,有两个更新对地图的体验和实用性有了相当大的提升。 一是自身完善了地图引擎对高程数据的支持(DEM): 二是调整了观看视角,以前限制到只能以60度的倾角观看,现在放宽到可以以85度的视角观看,基本达到平视的效果,同时添加了天空盒的效果,优化平视观看到

mapbox 不加载地图

由于 mapbox 的服务器在国外,在开发的时候有可能加载很慢,而且大多时候与背景地图无关,此时可以加载一个空白的地图来增加加载速度从而提高开发效率。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Add an image</title> <meta name="viewp

【数据获取】ArcGIS下载mapbox卫星影像图

在之前的文章【数据获取】GGGIS下载谷歌、天地图等地图数据里,我们介绍了用GGGIS地图下载器下载卫星影像图的方法。那么有没有其它的办法能够获取卫星图呢? 当然有!我们其实可以通过GIS软件自带的“添加WMTS服务器”加载其它地图服务来获取卫星图。在本篇文章里,我们就来介绍一下如

【Mapbox】建筑矢量切片拾取、高亮、信息弹窗

1、数据源加载 map.addSource('building', { type: 'vector', tiles: ['http://192.168.182.1:6767/{z}/{x}/{y}.pbf'] }) 2、建筑图层加载 map.addLayer({

【MapBox】建筑矢量切片

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矩阵)

mapbox源码解析(mvp矩阵) 1.坐标范围2.模型矩阵,转世界坐标2.1计算转当前切片内的真正相对坐标(本地坐标)2.2计算转当前切片内各点平移后的真正绝对坐标(世界坐标),得到模型矩阵ModelMatrix 3.视图转换,转到相机空间坐标下ViewMatrix4.投影转换5.src/geo/transform.js相关矩阵计算源

Mapbox gl tile瓦片渲染点以及图片Icon

Mapbox gl tile瓦片渲染点以及图片Icon 1. 效果图2. 源码参考 1. 效果图 点效果图如下: 以图标渲染效果图如下: 注意图片要不能跨域,需要下载的下来才能正常展示。 2. 源码 // 先把图片加载进来 mapObj.on('load', function () { // Add an image to use as a custom

mapboxgl地图分屏

介绍 地图展示效果在实际工程中会用到分屏和卷帘两种,目前基于ArcGIS Server JS、Leaflet等网上已经大堆的实现,本篇文章介绍基于Mapbox GL JS如何实现地图分屏效果,目前已经开源在github,可以随时使用。效果图如下,在线演示。 以下文章提到的mapbox-gl-split为本人开发的库,目前在git

基于mapbox搭建可离线的矢量切片地图服务-3.Mapbox个性化地图定制入门

作者:ATtuing 出处:http://www.cnblogs.com/ATtuing 最近在做关于mapbox的项目,看到这篇文章感觉特别好,特此转载记录一下。 先不说废话直接上地址:(所有东西都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵)。 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.