mapbox内存优化-爱代码爱编程
geojson数据源 删除无用属性 源数据上就删干净，没用的就删了 小数点保留位数，尤其是经纬度，6位就可以，这个在geoserver上可以设置 利用url获取geoserver，一个十五万网格要素两个字段的geojson
mapbox循环动态轨迹-爱代码爱编程
成果图 实现 思路其实就是一个路径的线图层，一个飞机的点图层，把路径图层计算出走多少步，细分他的坐标，然后实时更新点图层的坐标和角度就可以了 // 起点 var origin = [110.4
mapbox加载多个大数据图层并且播放的技术优化路线-爱代码爱编程
先看成果图 介绍 首先介绍一下我这个数据有15W的面数据，可以即时渲染，即时加载，然后播放。 技术路线 首先这种数量级的大数据，用别的二维API是绝对不可行的，arcgis和openlayer自动放弃，leafl
mapbox自定义字体-爱代码爱编程
创建字体格式pbf 字体文件（ttf/otf）一般比较大（一般在10M左右，至少设计师给我的字体文件就是这般大），在网页中加载比较耗时。 mapbox加载的字体是经过处理的，加工成pbf格式。pbf格式文件是基于Goog
mapbox实现空间过滤-爱代码爱编程
原理 空间过滤，一般就是选择政区，河流什么的地图要素，地图就会缩放到那里，高亮要素的边框。 我们这里用到的其实就是加载地图的时候就提前丢进去一个空的geojson图层，这个图层是用来空间过滤的，然后用户点击政区或者河流的
supermap gis基础产品webgis faq集锦（2）-爱代码爱编程
SuperMap GIS基础产品WebGIS FAQ集锦（2） 【iClient】Vue中该如何使用inject传递Map容器？ 【解决方案】provide和inject绑定是不可响应的，所以传递时需要传递对象的prope
【mapbox+turf.js】webgis空间分析系列（1）-爱代码爱编程
最近在想，自己一直使用webgis做的都是可视化的内容，缺少空间分析的功能。 所以吧，最近理一下使用mapbox + turf来做一些基础的空间分析功能。 大概的思路是，获取目标图层（多个图层），然后选择空间分析的内容，包括缓冲区、叠置、最短路径等。 所以大概的内容就包括了，选择目标对象（点线面），如果是单个图层的话，那就可以直接进行对应的分析；如果
mapbox 图层中哪些属性属于layout,哪些属性属于paint-爱代码爱编程
Mapbox 图层中哪些属性属于layout,哪些属性属于paint layout and paint properties | Help | Mapbox Layout properties和paint propert
mapbox gl js实现炫酷的地图背景-爱代码爱编程
经常看到网上的各种地图，有着炫酷的地图背景，用户体验非常不错。在Mapbox GL JS这块，其实关于地图的背景没有太多的设置。但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢？这里我从三方面介绍一下，如何
vue mapbox设备撒点鼠标悬浮变成可点击状以及渲染3d建筑-爱代码爱编程
这里跳过如何使用mapbox,直接上代码 // 地图撒点鼠标悬浮变成可点击状态 map.on('mouseenter', 'device_point', () => { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'device_point', ()
mapbox鼠标移入地图要素上，形状变更为手指-爱代码爱编程
每一个图层添加的时候，都可以调用一下这个函数，id为图层添加时的图层id,监听地图的鼠标移入移出事件。preventDefault用来阻止其他默认事件，获取features ，如果有要素，就变为手指，移出时变回拖拽的手掌。
map点击地图要素获取要素信息-爱代码爱编程
首先要知道的是我们给每一个图层添加到地图上面的时候，都会有一个专属的ID，例如下图中的 ID都是专属的，然后我们就可以为地图添加事件了，有的可能是click，有的可能要移入鼠标就要展示，展示的情况可以是popup，也可以是
mapbox比例尺-爱代码爱编程
只需要添加这一句 map.addControl(new mapboxgl.ScaleControl(), 'bottom-left') 上面添加的是默认的样式，想为他修改样式，可以修改这三个属性 :deep(.map
mapbox测量组件-爱代码爱编程
这里用到一个插件 mapbox-measure,需要首先安装一下，npm i maobox-measure 只需要传入map实例，注意不能立即监听，因为第一次传入map实例的时候一般是空的，map还没有load好，这样立即监
mapbox根据鼠标位置显示经纬度组件-爱代码爱编程
只需要将map实例传进来就可以了，可以通过props，也可以通过vuex、pinia等。原理就是监听mousemove事件，将经纬度取出来就可以，完整组件如下。 <template> <div cla
mapbox-gl实现 2.5d 图层高度编辑器-爱代码爱编程
文章目录 前言表达式逻辑mapbox表达式转数学表达式数学表达式转mapbox表达式 实现效果 前言 mapbox-gl 支持表达式编辑 2.5D 建筑物高度，但是 style 文件原生的表达式很不直
mapboxgl测量功能优化-爱代码爱编程
概述 MapboxGL里面虽然有测量的功能，但是不太好用，本文通过改写代码，实现了测量长度，面积功能并支持编辑，单点删除，测量结果实时更新。 效果 实现代码 1.功能引入 // 测量距离
vue 中 mapbox 的使用 ，（同一页面进行多次切换操作）-爱代码爱编程
一、vue 中 引入 mapbox （同一页面进行多次切换操作） 1.mapbox的 底图用天地图 // 1准备工作 安装 @mapbox/mapbox-gl-geocoder npm install --save @m
mapbox问题记录-token问题-爱代码爱编程
mapbox问题记录-token问题 描述 mapbox-gl升级到2.0后，使用自搭建的后端服务，也需要token。 这里我使用的是2.12.0版本，直接使用会报以下提示： 解决方法 方案一 降低map
turf计算mapbox layer 判断要素是否在另一个要素集合之内-爱代码爱编程
需求 在编辑地图绘制区域时，判断已绘制的区域集合是否包含新绘制的区域，如果是则给出警告信息，防止重复或乱绘制。 几个需要注意的点 绘制区域只在屏幕可见范围内，不会超出屏幕，所以计算时只需要读取屏幕显示的要素就行了，不用全量对比，可以减少很多计算量。 已绘制的要素可能是东一块西一块，也可能连接在一起，也可能包含在一起，所以需要逐一判断。 如