关于 mapboxgl 的常用方法及效果

给地图标记点

实现效果
在这里插入图片描述

 /*** 在地图上添加标记点* point: [lng, lat]* color: '#83f7a0'*/addMarkerOnMap(point, color = '#83f7a0') {const marker = new mapboxgl.Marker({draggable: false,color: color,}).setLngLat(point).addTo(this.map);this.markersList.push(marker);},

给地图添加气泡展示地点详情

实现效果：
在这里插入图片描述

 /*** 在地图上添加气泡展示* point: [lng, lat]*/addPopupOnMap(point) {// 将所选点设置为地图中心this.map.setCenter(point);// Zoom to the zoom level 8 with an animated transitionthis.map.zoomTo(16, {duration: 2000});// 自行赋值const html = `<div class="dt-popup"><i class="ivu-icon ivu-icon-md-close" id="closePop"></i><ul><li><span class="label">事件名称：</span>${eventName}</li><li><span class="label">经度：</span>${longitude}</li><li><span class="label">纬度：</span>${latitude}</li></ul></div>`const popup = new mapboxgl.Popup({ closeOnClick: false }).setLngLat(point).setHTML(html).addTo(this.map);// this.popup = popupPopup = popup},

给地图划线

实现效果
在这里插入图片描述
我的写法估计是有点问题，每条小线段都增加了一个资源和图层，但是还是实现了此功能

map.addSource(`route${routesI}`, {type: 'geojson',data: {type: 'Feature',properties: {},geometry: {type: 'LineString',coordinates: routesNew,},},});map.addLayer({id: `route${routesI}`,type: 'line',source: `route${routesI}`,layout: {'line-join': 'round','line-cap': 'round',},paint: {'line-color': '#24C1FF','line-width': 10,},});

给地图添加缓冲区画圆

实现效果：（颜色自行修改）
在这里插入图片描述

参考地址：https://blog.csdn.net/qq_33950912/article/details/127428093

思路：画圆，其实就是连接n个近似于圆的点位。

经过验证，上述文章中选取了方法三，自定义去切割圆。方法一未曾实现。方法二可能有问题，没有尝试。

/*** 计算以中心点、半径 缓冲区* center: [lng, lat]* radiusInKm */createGeoJSONCircle(center, radiusInM, points = 64) {var coords = {latitude: center[1],longitude: center[0]};var miles = radiusInM;var ret = [];var distanceX = miles/1000/(111.320*Math.cos(coords.latitude*Math.PI/180));var distanceY = miles/1000/110.574;var theta, x, y;for(var i=0; i<points; i++) {theta = (i/points)*(2*Math.PI);x = distanceX*Math.cos(theta);y = distanceY*Math.sin(theta);ret.push([coords.longitude+x, coords.latitude+y]);}ret.push(ret[0]);return {"type": "geojson","data": {"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Polygon","coordinates": [ret]}}]}};},/**调用 - 请自行赋值
*/
map.addSource("polygon", createGeoJSONCircle([-93.6248586, 41.58527859], 0.5));
map.addLayer({"id": "polygon","type": "fill","source": "polygon","layout": {},"paint": {"fill-color": "blue","fill-opacity": 0.6}
});

给地图添加其他图片资源

实现效果
请添加图片描述
添加卡车图片资源：

 /*** 引入图片* img obj : src, name*/addImage = function(img) {map.loadImage(img.src, (error, image) => {if (error) throw error;if (!map.hasImage(img.name)) map.addImage(img.name, image, {sdf: img.sdf || false});})}// 加载 truck let truck_img = {src: 'img/truck_mapboxgl.png',name: 'truck_img'}addImage(truck_img)

给地图添加图上gif中 1-2-3标记点并且实现鼠标滑过显示popup效果

实现效果：同上图

/*** 添加坐标点及鼠标以上效果*/
addPoints = function (featuresList) {map.addSource('places', {'type': 'geojson','data': {'type': 'FeatureCollection','features': featuresList}})// 加载 circle 定位圆let img = {src: 'img/circle.png',name: 'circle_img',sdf: true}addImage(img)map.addLayer({'id': 'places','type': 'symbol','source': 'places','layout': {'icon-image': img.name, // 图标ID'icon-size': 0.15, // 图标的大小'icon-anchor': 'center', // 图标的位置'text-field': ['get', 'num'],},'paint': {'text-color': '#fff','icon-color': ['get', 'color']},});// Create a popup, but don't add it to the map yet.const popup = new mapboxgl.Popup({closeButton: false,closeOnClick: false});map.on('mouseenter', 'places', (e) => {// Change the cursor style as a UI indicator.map.getCanvas().style.cursor = 'pointer';// Copy coordinates array.const coordinates = e.features[0].geometry.coordinates.slice();const description = e.features[0].properties.description;// Ensure that if the map is zoomed out such that multiple// copies of the feature are visible, the popup appears// over the copy being pointed to.while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;}// Populate the popup and set its coordinates// based on the feature found.popup.setLngLat(coordinates).setHTML(description).addTo(map);});map.on('mouseleave', 'places', () => {map.getCanvas().style.cursor = '';popup.remove();});
}

在地图中图标动态移动

实现效果：如上图

此方法用于卡车图标动态移动

/*** 添加路径 - 卡车图标动态效果*/
addTruckRoutes = function (coordinatesList) {// 起点const origin = coordinatesList[0]const route = {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'LineString','coordinates': coordinatesList}}]};const point = {'type': 'FeatureCollection','features': [{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': origin}}]}const lineDistance = turf.length(route.features[0]);const arc = [];const steps = 200;for (let i = 0; i < lineDistance; i += lineDistance / steps) {const segment = turf.along(route.features[0], i);arc.push(segment.geometry.coordinates);}route.features[0].geometry.coordinates = arc;let counter = 0;map.addSource('route', {'type': 'geojson','data': route});map.addSource('point', {'type': 'geojson','data': point});map.addLayer({'id': `route`,'source': 'route','type': 'line','paint': {'line-width': 20,'line-color': '#2d8cf0','line-opacity': 0.4}})// 加载 truck 定位圆let truck_img = {src: 'img/truck_mapboxgl.png',name: 'truck_img'}addImage(truck_img)map.addLayer({'id': `point`,'source': 'point','type': 'symbol','layout': {'icon-image': truck_img.name,'icon-size': 0.2,'icon-rotate': ['get', 'bearing'],'icon-rotation-alignment': 'map','icon-allow-overlap': true,'icon-ignore-placement': true}});animate = function () {running = true;const start =route.features[0].geometry.coordinates[counter >= steps ? counter - 1 : counter];const end =route.features[0].geometry.coordinates[counter >= steps ? counter : counter + 1];point.features[0].geometry.coordinates =route.features[0].geometry.coordinates[counter];point.features[0].properties.bearing = turf.bearing(turf.point(start),turf.point(end))+90; // 此处控制图标的头部指向问题，可以加减角度，使卡车头部一直朝着目的地// Update the source with this new datamap.getSource('point').setData(point);// Request the next frame of animation as long as the end has not been reachedif (counter < steps) {requestAnimationFrame(animate);counter = counter + 1;} else {counter = 0animate()}      }animate(counter);
}

地图路线持续闪动特效

实现效果
请添加图片描述
此方法官网有示例

代码如下：

/*** 添加路径 - 路径虚线变化效果*/
addDashedRoutes = function (coordinatesList) {map.addSource('route', {'type': 'geojson','data': {'type': 'Feature','properties': {},'geometry': {'type': 'LineString','coordinates': coordinatesList}}});map.addLayer({'id': 'route','type': 'line','source': 'route','layout': {'line-join': 'round','line-cap': 'round'},'paint': {// 'line-color': '#2b85e4',// 'line-width': 10'line-color': '#2d8cf0','line-width': 8,'line-opacity': 0.4}});map.addLayer({id: 'line-dashed',type: 'line',source: 'route',paint: {'line-color': '#2db7f5','line-width': 8,'line-dasharray': [0, 4, 3]}});   /*** 动态展示路径 - 路径虚线变化效果*/const dashArraySequence = [[0, 4, 3],[0.5, 4, 2.5],[1, 4, 2],[1.5, 4, 1.5],[2, 4, 1],[2.5, 4, 0.5],[3, 4, 0],[0, 0.5, 3, 3.5],[0, 1, 3, 3],[0, 1.5, 3, 2.5],[0, 2, 3, 2],[0, 2.5, 3, 1.5],[0, 3, 3, 1],[0, 3.5, 3, 0.5]];let step = 0;animateDashArray = function (timestamp) {const newStep = parseInt((timestamp / 50) % dashArraySequence.length);if (newStep !== step) {map.setPaintProperty('line-dashed','line-dasharray',dashArraySequence[step]);step = newStep;}// Request the next frame of the animation.requestAnimationFrame(animateDashArray);}// start the animationanimateDashArray(0);
}

地图正向反向地址匹配

官网有示例，可自行查阅

/*** 正向地址匹配* address: '孵化大厦'*/
addressMatchPoint(address) {// 正向匹配参数var geoCodeParam = new SuperMap.GeoCodingParameter({address: address, // 地址fromIndex:0, // 设置返回对象的起始索引值toIndex:10, // 设置返回对象的结束索引值。// prjCoordSys:{epsgcode26}, // 坐标设置maxReturn:5 // 最大返回结果数});//创建地址匹配服务var addressUrl = MAP_SERVICE + "***************"var addressMatchService = new mapboxgl.supermap.AddressMatchService(addressUrl);// 向服务端发送请求进行正向地址匹配，并获取返回的结果return addressMatchService.code(geoCodeParam, function(obj){});
},/*** 反向地址匹配* point: [lng, lat]*/
pointMatchAddress(point) {// 反向匹配参数var geoDecodeParam = new SuperMap.GeoDecodingParameter({x: point[0], // 横坐标y: point[1], // 纵坐标fromIndex: 0, // 设置返回对象的起始索引值。toIndex: 10, // 设置返回对象的结束索引值。// filters: "", // 过滤字段// prjCoordSys: {epsgcode26}, // 坐标设置maxReturn: 3, // 最大结果数geoDecodingRadius: -1 // 查询半径});// 创建地址匹配服务var addressUrl = MAP_SERVICE +  "***************"var addressMatchService = new mapboxgl.supermap.AddressMatchService(addressUrl);// 向服务端发送请求进行反向地址匹配，并获取返回的结果return addressMatchService.decode(geoDecodeParam, function(obj){});
},

两点之间路径规划

参照官网示例

let serviceUrl = MAP_SERVICE + '******';
let findPathService = new mapboxgl.supermap.NetworkAnalystService(serviceUrl);
//向服务器发送请求，并对返回的结果进行分析处理，展示在客户端上
const result = findPathService.findPath(findPathParams, function(serviceResult) {})
// ...不完整代码

遇到问题

  1. 在vue组件中，添加上了maker或者popup，使用data中定义变量会造成地图空白问题，暂时没有解决，后面改用在全局声明marker或者popup，layer好像也存在类似问题，可以参考解决。
    在这里插入图片描述
  2. 调用以上方法包裹在 map.on('load', () => { }) 的方法中。
  3. 以上代码均为不完整代码，有些在vue中使用，有些在原生中使用，请仔细阅读，以免出错。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/203626.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AI必然成为未来的OS

AI必然成为未来的OS

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 ChatGPT引入插件&#xff0c;AI必然成为未来OS&#xff0c;或至少成为绝大多数APP首选入口。未来软件开发根据任务不同&#xff0c;有两种不同范式&#xff1a; &a…
阅读更多...
unity 2d 入门 飞翔小鸟 场景淡入淡出功能（三)

unity 2d 入门 飞翔小鸟 场景淡入淡出功能（三)

1、在图层新建个空的图层 场景2 2创建c#脚本 脚本创建好后&#xff0c;将脚本推拽进空白图层里面&#xff0c;将黑色图片拉进去脚本的参数里面&#xff0c;如上面最后一张图&#xff0c;两个切换的场景都要进行上述操作 using System.Collections; using System.Collection…
阅读更多...
识别低效io引起的free buffer waits

识别低效io引起的free buffer waits

产生事发时间段的awr报告 Top 5 wait events 这里重点关注&#xff1a; 1.free buffer waits 2.enq_HW-contention 3.enq:tx-row lock contention enq:HW-contention属于水位线的争用&#xff0c;已经透过alter table allocate extent&#xff0c;提前分配空间,这里不做讨论 …
阅读更多...
软件工程之需求分析

软件工程之需求分析

一、对需求的基本认识 1.需求分析简介 (1)什么是需求 用户需求&#xff1a;由用户提出。原始的用户需求通常是不能直接做成产品的&#xff0c;需要对其进行分析提炼&#xff0c;最终形成产品需求。 产品需求&#xff1a;产品经理针对用户需求提出的解决方案。 (2)为什么要…
阅读更多...
【Python】Flask + MQTT 实现消息订阅发布

【Python】Flask + MQTT 实现消息订阅发布

目录 Flask MQTT 实现消息订阅发布准备开始1.创建Flask项目2创建py文件&#xff1a;mqtt_demo.py3.代码实现4.项目运行5.测试5.1 测试消息接收5.2 测试消息发布6、扩展 Flask MQTT 实现消息订阅发布 准备 本次项目主要使用到的库&#xff1a;flask_mqtt pip install flask…
阅读更多...
Leetcode刷题详解——最长湍流子数组

Leetcode刷题详解——最长湍流子数组

1. 题目链接&#xff1a;978. 最长湍流子数组 2. 题目描述&#xff1a; 给定一个整数数组 arr &#xff0c;返回 arr 的 最大湍流子数组的长度 。 如果比较符号在子数组中的每个相邻元素对之间翻转&#xff0c;则该子数组是 湍流子数组 。 更正式地来说&#xff0c;当 arr 的子…
阅读更多...
ALPHA开发板烧录工具MfgTool简介

ALPHA开发板烧录工具MfgTool简介

一. 简介 前面我们已经移植好了 uboot 和 linux kernle &#xff0c;制作好了根文件系统。但是我们移植都是通 过网络来测试的&#xff0c;在实际的产品开发中肯定不可能通过网络来运行。 因此&#xff0c;我们需要将 uboot 、 linux kernel 、 .dtb( 设备树 ) 和 rootf…
阅读更多...
串口环形收发原理及实现

串口环形收发原理及实现

一、环形收发队列构建 1、构造环形收发数组及其长度 #define buff_size 10 Unsigned char buff[buff_size]; 2、定义环形收发读/写位置 u16 R_Buff; u16 W_Buff; 3、结构体封装 typedef struct Qbuff {u16 write; //写位置u16 read; //读位置u8 buf…
阅读更多...
Zabbix自定义飞书webhook告警媒介1

Zabbix自定义飞书webhook告警媒介1

说明&#xff1a;此配置仅适用于7版本及以上&#xff0c;低版本可能有问题 JavaScript 内容如下&#xff1a; try {var sourceData JSON.parse(value),req new HttpRequest(),response;if (sourceData.HTTPProxy) {req.setProxy(sourceData.HTTPProxy);}req.addHeader(Conte…
阅读更多...
pytorch中的transpose用法

pytorch中的transpose用法

注意&#xff1a;维数从0开始&#xff0c;0维 1维2维…,负数代表从右往左数&#xff0c;-1代表第一维&#xff0c;以此类推 import torch import numpy as np# 创建一个二维数组 arr torch.tensor([[[1, 2],[3, 4]],[[5, 6],[7, 8]]]) print("原始数组&#xff1a;"…
阅读更多...
Docker部署.NET6项目

Docker部署.NET6项目

Docker的三大核心概念 1、docker仓库&#xff08;repository&#xff09; docker仓库&#xff08;repository&#xff09;类似于代码库&#xff0c;是docker集中存放镜像的场所。实际上&#xff0c;注册服务器是存放仓库的地方&#xff0c;其上往往存放着很多仓库。每个仓库集…
阅读更多...
案例058:基于微信小程序的智能社区服务系统

案例058:基于微信小程序的智能社区服务系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…
阅读更多...
操作符（原码反码补码）

操作符（原码反码补码）

目录 前言&#xff1a; 原反补码&#xff1a; 位操作符&#xff1a; &#xff06; &#xff5c; &#xff3e; &#xff5e; >> << 总结&#xff1a; 逻辑操作符 && || 其他操作符&#xff1a; sizeof -- () &#xff1f;&#xf…
阅读更多...
AMEYA360--罗姆与Quanmatic公司利用量子技术优化制造工序并完成验证

AMEYA360--罗姆与Quanmatic公司利用量子技术优化制造工序并完成验证

全球知名半导体制造商罗姆(总部位于日本京都市)于2023年1月起与 Quanmatic Inc.(总部位于日本东京都新宿区&#xff0c;以下简称“Quanmatic”)展开合作&#xff0c;在半导体制造工序之一的EDS工序中测试并引入量子技术&#xff0c;以优化制造工序中的组合。目前&#xff0c;双…
阅读更多...
C#excel导入dategridview并保存到数据库/dategridview增加一行或几行一键保存数据库

C#excel导入dategridview并保存到数据库/dategridview增加一行或几行一键保存数据库

excel导入到dategridview显示并保存到数据库 dategridview增加一行或几行一键保存数据库 ExcelHelper类(这个要导入NPOI包) using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel; using System; using System.Collections.Generic; using Syste…
阅读更多...
dtaidistance笔记：dtw_ndim (高维时间序列之间的DTW)

dtaidistance笔记：dtw_ndim (高维时间序列之间的DTW)

1 数据 第一个维度是sequence的index&#xff0c;每一行是多个元素&#xff08;表示这一时刻的record&#xff09; from dtaidistance.dtw_ndim import *s1 np.array([[0, 0],[0, 1],[2, 1],[0, 1],[0, 0]], dtypenp.double) s2 np.array([[0, 0],[2, 1],[0, 1],[0, .5],[0…
阅读更多...
Elasticsearch--解决磁盘使用率超过警戒水位线

Elasticsearch--解决磁盘使用率超过警戒水位线

原文网址&#xff1a;Elasticsearch--解决磁盘使用率超过警戒水位线_IT利刃出鞘的博客-CSDN博客 简介 本文介绍如何解决ES磁盘使用率超过警戒水位线的问题。 问题描述 当客户端向 Elasticsearch 写入文档时候报错&#xff1a; cluster_block_exception [FORBIDDEN/12/inde…
阅读更多...
Qt进程和线程

Qt进程和线程

一、进程 在设计一个应用程序时，有时不希望将一个不太相关的功能集成到程序中，或者是因为该功能与当前设计的应用程序联系不大，或者是因为该功能已经可以使用现成的程序很好的实现了，这时就可以在当前的应用程序中调用外部的程序来实现该功能，这就会使用到进程。Qt应用程序…
阅读更多...
亿胜盈科 HT4182,HT4186,HT4188 电量均衡 同步升压型 双节理电池充电器

亿胜盈科 HT4182,HT4186,HT4188 电量均衡 同步升压型 双节理电池充电器

HT4182&#xff0c;HT4186&#xff0c;HT4188是一款5V输入&#xff0c;升压模式的充电管理IC&#xff0c;适用于双节串联鲤电池。其能自适应任意5V电源进行充电&#xff0c;并且由输入过压、欠压保护。 HT4182&#xff0c;HT4186&#xff0c;HT4188采用同步升压结构&#xff0…
阅读更多...
基于单片机出租车计价器控制系统

基于单片机出租车计价器控制系统

**单片机设计介绍&#xff0c;基于单片机出租车计价器控制系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的出租车计价器控制系统是一个用于控制和管理出租车费用计算的电子设备。下面是一个简单的系统设计介绍&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023