代码编织梦想

关于 mapboxgl 的常用方法及效果_mapboxgl 方法-爱代码爱编程

给地图标记点 实现效果 /** * 在地图上添加标记点 * point: [lng, lat] * color: '#83f7a0' */ addMarkerOnMap(point, color =

webgis之制作地图切片方法(二) —— gdal2tiles.py-爱代码爱编程

前言 接续前面文章《webgis之制作地图切片方法(一) —— QGIS》,本文介绍另外一种切片工具gdal2tiels。通常遥感影像数据非常大,要在webgis应用中使用遥感影像数据需要对其进行切片,提升用户体验,降低客

webgis之制作地图切片方法(三) —— tippecanoe-爱代码爱编程

相关文章 《webgis之制作地图切片方法(一) —— QGIS》 《webgis之制作地图切片方法(二) —— gdal2tiles.py》 前言 本文介绍Mapbox开源的一个非常强大的矢量切片工具应用 —— tip

iclient for leaflet加载mvt矢量瓦片并注册鼠标事件_leaflet 加载mvt-爱代码爱编程

作者:刘大 使用背景 需要在前端动态更改地图样式,并高效进行鼠标交互获取要素的业务场景时,我们会采取MVT矢量瓦片来解决此类问题,但是web应用开发已经选用Leaflet地图框架的情况下怎么办呢,这时,我们便可

基本项目搭建-爱代码爱编程

首先我们需要搭建一个基于 React 的一个项目用开始我们的实战系列,后期所有的功能都是基于 react 的一个项目来实现。 由于后面需要支持多坐标系,需要进行修改 mapboxgl 的源码,以及实现对应的功能,我们需要手

关于 vue-爱代码爱编程

官网:https://iclient.supermap.io/web/apis/vue/zh/api/guide/installation.html 关于图的使用,其余的引入步骤不再赘述,仅说注意事项。 推荐使用的是全局

mapbox结合threejs载入3d模型,并实现点击事件-爱代码爱编程

https://www.jianshu.com/p/ae8f9b338f80 地址参考代码如下: <!DOCTYPE html> <html> <head> <title>Mapbox THREE.js raycaster test</title> <meta charse

mapbox gl js access token 问题-爱代码爱编程

使用Mapbox GL JS时出现如下错误 Error: A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/ 解决方法: (1)M

《mapboxgl 基础知识点》- 放大/缩小/定位/级别-爱代码爱编程

中心点 getCenter:获取中心点 const {lng, lat} = map.getCenter(); setCenter:设置中心点 // lng, lat map.setCenter([134, 28]); 缩放级别   getZoom:获取当前缩放级别 map.getZoom();   setZoom:设置缩放级别 map.

《mapboxgl 基础知识点》- 地图监听事件-爱代码爱编程

添加地图监听事件 使用方法 map.on map.on(type, layerIds, listener) 例如 map.on('mouseup', onMouseup); function onMouseup(e) { // mouseup console.log(e.type); } 取消地图监听事件 使用方法 map.o

mapboxgl中楼层与室内地图的结合展示-爱代码爱编程

概述 质量不够,数量来凑,没错,本文就是来凑数的。前面的几篇文章实现了楼栋与楼层单体化的展示、室内地图的展示,本文结合前面的几篇文章,做一个综合的展示效果。 实现效果 实现 1. 数据处理 要实现上图所示的效果

mapboxgl坐标体系-爱代码爱编程

ecef球坐标轴 ecef球的y轴朝上,跟cesium的z轴朝上不一样。x轴朝向经度90°,z轴朝向经度0°。坐标轴查看可以看这里。 地球半径是earthRadius,设置的是6371008.8。还有一个GLOBE_RAD

结合ace编辑器实现mapboxgl热力图样式在线配置-爱代码爱编程

概述 MapboxGL热力图的配置参数并不多,但是有时候为了或得一个比较好用的热力图配置参数,我们不得不改代码再预览,显得尤为麻烦,为方便配置,实现实时预览,本文使用ace实现了一个热力图样式在线配置页面。 效果

mapboxgl中的symbol碰撞检测随笔-爱代码爱编程

在mapboxgl里面,symbol的碰撞检测是通过计算symbol的二维边界框,然后设置顶点透明度来实现symbol淡入淡出效果来模拟碰撞。 GridIndex是一个二维空间数据结构,使用一个 2D 平面作为“视口”——

从零开始vue项目中使用mapboxgl开发三维地图教程(七)创建一个自动旋转的地球、添加一个3d模型、实现在两个地图之间滑动和同步来比较两个地图-爱代码爱编程

目录 1、创建一个自动旋转的地球地图2、添加一个3D模型3、一个页面创建两个底图之间滑动 1、创建一个自动旋转的地球地图 实现功能:地球仪和camera动画结合在一起,创建旋转行星效果

从零开始vue项目中使用mapboxgl开发三维地图教程(六)加载点、线、面图层以及三维面图层(白模)-爱代码爱编程

目录 1、加载点图层2、加载线和面图层3、加载三维面图层(白模) 1、加载点图层 开发地图应用时,加载POI等点状数据,显示文字或者图标信息,mapbox-gl对应使用的是符号图

从零开始vue项目中使用mapboxgl开发三维地图教程(五)实现框选要素功能、可拖动点展示坐标以及地图上实时更新要素-爱代码爱编程

文章目录 1、实现框选要素功能1.1、添加点数据的图层:1.2、增加绘图插件(mapbox-draw)1.3、实现框选并让选择的目标数据高亮 2、实现地图上可拖动点2.1、实现功能:2.2

从零开始vue项目中使用mapboxgl开发三维地图教程(四)改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标-爱代码爱编程

文章目录 1、飞行平移到鼠标点击图层属性的地图中心位置2、当鼠标光标进入“圆”图层中的某个要素时,将其更改为指针3、量测距离4、量测area面积和中心点坐标 1、飞行平移到鼠标点击图层属

mapboxgl + deckgl 入门例子-爱代码爱编程

前言 mapboxgl 提供底图,deckgl 可以提供更为丰富的可视化效果图层,两者的结合可以提供更多的可视化方式。本文仅是简单尝试,后续可以做更多的探索。 效果 实现代码 <!DOCTYPE html&

mapboxgl学习——多段线路marker运动动画轨迹。途径点暂停并弹出相关信息-爱代码爱编程

主要逻辑和主要方法都和https://mp.csdn.net/mp_blog/creation/editor/129506864一样. 最终效果   这里需要注意的是,后台返回的数据,有n个途经点 就有n+1段路径。 每一段路径的终点就是途经点,或者说 每一段的起点也是途经点(除了起点之外)。 也需要手动将每一段的终点(或者起点)加入到对应