mapboxgl + deckgl 入门例子-爱代码爱编程
前言 mapboxgl 提供底图，deckgl 可以提供更为丰富的可视化效果图层，两者的结合可以提供更多的可视化方式。本文仅是简单尝试，后续可以做更多的探索。 效果 实现代码 <!DOCTYPE html&
mapboxgl学习——多段线路marker运动动画轨迹。途径点暂停并弹出相关信息-爱代码爱编程
主要逻辑和主要方法都和https://mp.csdn.net/mp_blog/creation/editor/129506864一样. 最终效果 这里需要注意的是，后台返回的数据，有n个途经点 就有n+1段路径。 每一段路径的终点就是途经点，或者说 每一段的起点也是途经点（除了起点之外）。 也需要手动将每一段的终点（或者起点）加入到对应
supermap for mapboxgl 实现自定义图标点位及多点位聚合-爱代码爱编程
实现效果如图： 代码如下： <template> <div class="screen-container"> <div class="map-container"> <
mapboxgl流动水效果实现-爱代码爱编程
在mapboxgl中改源码相比cesium还是比较繁琐的，mapboxgl中存在着大量的样式配置内容，写一个面的水流效果就要改动很多东西，最近将之前写的水流效果迁移到了最新的mapboxgl版本上，顺便再次梳理下流程。
ubuntu中安装tippecanoe并切片-爱代码爱编程
概述 本文是一片”水文”，记录一下如何在ubuntu中用tippecanoe制作矢量切片。 实现操作 本示例中ubuntu是在VMware虚拟机中，安装的是18.04.6的版本，你可通过我兰的镜像下载，速度杠杠的。
mapboxgl中多图标加载的实现_牛老师讲gis的博客-爱代码爱编程
概述 mapboxGl中多图标的实现可以在style中指定sprite来实现，但是在实际使用的时候会出现sprite之外的图标需要引用，此时通过map.addImage()来实现，但是如果存在多个图标的时候，因为map.a
mapboxgl中3d行政区划的实现_牛老师讲gis的博客-爱代码爱编程
概述 很多时候我们会遇到3D行政区划的展示，在mapboxGL中，面状的3D展示比较容易，我们可以通过fill-extrusion来实现，但是没法实现其边界线在上面的浮动展示。本文借助QGIS，实现边界线在上面的浮动展示。
mapboxgl实现旋转的地球_牛老师讲gis的博客-爱代码爱编程
概述 许久未更新，这一篇是凑数的，用最新的mapboxGL2.10的版本实现一个旋转的地球的效果。 实现效果 实现 为效果好一点，添加了一个canvas的星空动画，实现代码如下： class Star {
mapbox尝鲜值之云图动画_牛老师讲gis的博客-爱代码爱编程
概述 昨天收到了mapbox中国的推送，看到了mapboxgl的更新，此次更新版本加入了globa，终于有个球了，于是就迫不及待的今天想尝个鲜。 尝鲜效果 主要实现了：1.源码的编译，最新的版本为2.10.0-dev；2、三维球展示；3、由于最近台风活动比较频繁，所以加入了云图动画。实现后效果图如下： 实现 1. 源码编译 从github上cl
geoserver矢量切片加密与调用-爱代码爱编程
本文，讲的是有关安全的话题。 概述 GIS的数据一直是比较敏感的，所以数据安全也是一个“老生常谈”的话题。本文利用geoserver的矢量切片插件对数据进行发布，通过自己写的中间接口实现矢量切片的加密，并修改mapboxGL源码，添加数据的解密与展示。 实现效果 实现 1. MapboxGL 2.X离线时候的token强认证 2.
MapboxGL source和Layer画圆-爱代码爱编程
MapboxGL 在地图上面添加点位 1. 可以使用Marker 2. 可以通过source,layer 通过source案列: // source map.addSource("circle_source", { "type": "geojson", "data": { "type": "FeatureColl
开源WebGIS-相关知识-爱代码爱编程
开源WebGIS-相关知识 目录 1. 开源的相关项目 1.1 二维 1.2 三维 1.3 其他 1.4 题外话 2. 相关介绍 1. 开源的相关项目 1.1 二维 【1】geoserver 不支持三维服务！ 【2】qgis 【3】openlayes 【4】lea
websocket实现GPS数据的实施推送与地图的展示-爱代码爱编程
概述 实时展示GPS的数据是webgis中比较常见的一个需求，本文通过nodejs-websocket模拟GPS数据的更新，实现GPS数据的实施推送与地图数据的展示。 效果 实现 nodejs-websocket模拟数据 // websocket.js // websocket.js const ws = require('nodejs-we
websocket实现GPS数据的实时推送与地图的展示(优化)-爱代码爱编程
概述 前两天，发布了一片文章websocket实现GPS数据的实时推送与地图的展示，文章发出后引来了不少读者的关注，也有不少读者要求做进步一优化。本文应大家的要求，对上文的内容做一个优化，优化地方包括： 加入了GPS方向的展示；加入了GPS精度的展示；加入了GPS轨迹的展示；效果 实现 node模拟数据 const io = require(
mapboxgl 地图样式 - 重分类渲染-爱代码爱编程
上回，我们在《mapboxgl 地图样式 - 唯一值渲染》中了解到case、match、get等表达式，通过表达式来完成了唯一值渲染。 在实际情况下，我们还经常需要进行重分类渲染，将某范围的值重分为一类，并将另一个范围重分为其它类。 今天我们继续了解新的表达式来实现重分类渲染。 重分类效果图： 方式一：使用step表达式 "fill-colo
mapboxgl 地图样式 - 唯一值渲染-爱代码爱编程
mapboxgl 中提供了强大的地图样式编辑功能，样式表达式是其一大特色。 唯一值渲染是GIS中常见的专题图渲染方式，今天我们来看一下如何用 mapboxgl 中的样式表达式实现这一效果。 在网上找了一份北京市的行政区划图，目标是各个区设置上不同的颜色。效果如下： 方式一：使用 case 表达式 这种做法的好处是可以灵活修改每个区的颜色。 "
mapboxGL轨迹展示与播放-爱代码爱编程
概述 历史轨迹回放是GIS很常见的一个功能，本文结合turf.js实现轨迹的展示与播放动画。 效果 实现功能 轨迹的展示；轨迹的方向的箭头展示；随着轨迹播放的小车，并调整方向与轨迹方向一致；已播放路径的展示；多条轨迹线的同时播放展示；实现 const icon = 'data:image/png;base64,iVBORw0KGgoAAAAN
SuperMap iClient for MapboxGL数据加载与更新-爱代码爱编程
作者：John 经常有客户咨询，说SuperMap iClient只有对点数据集的修改 & 添加，对于面数据的操作不清楚改如何去做，下面我就以iClient for MapboxGL 和其Draw控件来实现面数据加载与编辑的功能。 效果截图 实现面数据加载与编辑思路： 1. 数据查询;
mapbox点击图片弹出对话框-爱代码爱编程
<template> <div > <div id='mapDiv'></div> </div> </template> <script> export default { name: "Map", data() { return { }; }
mapboxgl 纠偏百度地图-爱代码爱编程
缘起 之前分享了mapboxgl 互联网地图纠偏插件，插件当时只集成了高德地图。 文章发布后，有小伙伴在后台留言，希望插件也能支持百度地图。 刚好国庆假期有时间就研究了一下。 插件加载瓦片原理 首先，插件之所以能够正确的加载互联网地图瓦片，关键是依托经纬度和瓦片编号的互转算法。 有了经纬度和瓦片编号的互转算法，插件就能根据当前地图窗口4个角的经