Mapbox实战项目(1)-栅格图片图层实现地图方位展示
需求背景
需要实现地图上展示一个类似于罗盘的标记，随着地图的缩放、切换、旋转等，能够在地图的中央指示出地图的方位。
系统自带的方位控件太小，在特殊业务场景下不够醒目。
技术选型
Mapbox
实现分析
- 官网已经有地图上展示图片矢量图层的demo，“Add a raster image to a map layer”和“Add a pattern to a polygon”。注意看前者和后者的区别，前者主要用一张图片覆盖到指定的一个多边形区域；而后者则会用图片区填充一个多边形区域，如果图片太小，矩形区域太大，则会重复叠加多张图片直到矩形区域填充满。
- 从地图开放的接口上来看，我们需要监听的主要地图交互事件有：拖拽、缩放、旋转。可在这三个事件完成时重新调整矢量图片的中心位置，重新绘制图层；
- 重新绘制图片图层时，需要注意地图的旋转角度（bearing）参数，在交互事件结束时实时获取当前地图的中心点和旋转角度，计算图片重新“贴”的位置；
- 通过“Add a raster image to a map layer”示例了解到，往地图上“贴”一张图片需要定义四个经纬度坐标用来确定图片的“粘贴”位置，这样在进行地图旋转或者调整俯视角度的时候就可以紧贴地图跟随地图一起变化。
- 当用户在交互的过程中，需要使用以地图中心点（全屏下：屏幕中心点）计算图片在地图坐标系中的四个经纬度坐标。因此我们需要将图片放在屏幕中间，同时计算出图片在屏幕上的四个屏幕坐标点，通过mapbox提供的屏幕坐标点转经纬度坐标接口进行转换。
- 在屏幕坐标系转地图坐标系时，需要注意图片的旋转角度。mapbox的bearing是逆时针旋转，原始的屏幕坐标点在经过指定的角度旋转之后获得一个新的屏幕坐标点，再将旋转后的坐标点通过mapbox的屏幕坐标点转经纬度坐标点就可以得到一个“贴”图的目标经纬度坐标。
- mapbox针对图片图层的位置更新可以通过
source的setCoordinates(newCoordinates)进行更新，设置以后调用map.triggerRepaint()触发地图重绘，届时功成；
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a raster image to a map layer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '你的KEY';
const map = new mapboxgl.Map({
container: 'map',
zoom: 10,
center: [103, 30],
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11'
});
//图层的长宽尺寸, 务必和真实图片的长宽保持一致,本教程使用的是正方形，矩形同理可实现。
const imgWidth = 632;
const corners = getImgcornersAtMapCenter(map, imgWidth)
map.on('load', () => {
map.addSource('compass', {
'type': 'image',
'url': './assets/823VemjWvJ.png',
'coordinates': corners
});
map.addLayer({
"id": 'radar-layer',
'type': 'raster',
'source': 'compass',
'paint': {
'raster-fade-duration': 0
}
});
});
//拖拽结束重新绘图
map.on("dragend", () => {
var source = map.getSource("compass");
var corners = getImgcornersAtMapCenter(map, imgWidth);
source.setCoordinates(corners);
map.triggerRepaint();
});
//添加zoomend事件监听器
map.on("zoomend", () => {
var source = map.getSource("compass");
var corners = getImgcornersAtMapCenter(map, imgWidth);
source.setCoordinates(corners);
map.triggerRepaint();
});
function getImgcornersAtMapCenter(map, imgWidth) {
//获取地图的bearing参数
const bearing = map.getBearing();
// 获取地图容器的宽度和高度
const mapWidth = map.getCanvas().width;
const mapHeight = map.getCanvas().height;
//计算图片在地图上的显示区域的左上角和右下角的屏幕坐标
const imageTopLeft = [(mapWidth - imgWidth) / 2, (mapHeight - imgWidth) / 2];
const imageBottomRight = [imageTopLeft[0] + imgWidth, imageTopLeft[1] + imgWidth];
//计算图片旋转后的左上角和右下角
var rotatedcoordinates = rotatecoordinates(imageTopLeft, imageBottomRight, 0 - bearing)
// 将屏幕坐标转换为经纬度坐标
const topLeftCoordinates = map.unproject(rotatedcoordinates[0]);
const bottomRightcoordinates = map.unproject(rotatedcoordinates[1]);
return new Array(
[topLeftCoordinates.lng, topLeftCoordinates.lat], // Northwest corner
[bottomRightcoordinates.lng, topLeftCoordinates.lat], // Southwest corner
[bottomRightcoordinates.lng, bottomRightcoordinates.lat], //// Southeast corner
[topLeftCoordinates.lng, bottomRightcoordinates.lat] //Northeast corner
)
}
function rotatecoordinates(topLeft, bottomRight, bearing) {
const center = [
(topLeft[0] + bottomRight[0]) / 2,
(topLeft[1] + bottomRight[1]) / 2
];
//计算左上角相对于中心点的偏移
const offsetX1 = topLeft[0] - center[0];
const offsetY1 = topLeft[1] - center[1];
//计算右下角相对于中心点的偏移
const offsetX2 = bottomRight[0] - center[0];
const offsetY2 = bottomRight[1] - center[1];
const bearingRad = bearing * (Math.PI / 180);
//计算旋转后的左上角坐标
const rotatedX1 = offsetX1 * Math.cos(bearingRad) - offsetY1 * Math.sin(bearingRad);
const rotatedY1 = offsetX1 * Math.sin(bearingRad) + offsetY1 * Math.cos(bearingRad);
// 计算旋转后的右下角坐标
const rotatedX2 = offsetX2 * Math.cos(bearingRad) - offsetY2 * Math.sin(bearingRad);
const rotatedY2 = offsetX2 * Math.sin(bearingRad) + offsetY2 * Math.cos(bearingRad);
//将旋转后的坐标加上中心点的偏移，得到最终坐标
const rotatedTopLeft = [rotatedX1 + center[0], rotatedY1 + center[1]];
const rotatedBottomRight = [rotatedX2 + center[0], rotatedY2 + center[1]];
return new Array(rotatedTopLeft, rotatedBottomRight);
}
</script>
</body>
</html>
效果截图
思考问题
【问】贴图后的图片是否“遮挡”了地图本身的事件交互？
【答】可以调整image图层在地图众图层中的位置人，让它处于最底层；
其他
离线地图服务器，有需求就提issue：mapbox-offline-server
Mapbox实战项目(1)-栅格图片图层实现地图方位展示的更多相关文章
- arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- vue+websocket+express+mongodb实战项目（实时聊天）
继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
- vue+websocket+express+mongodb实战项目（实时聊天）（二）
原项目地址:[ vue+websocket+express+mongodb实战项目(实时聊天)(一)][http://blog.csdn.net/blueblueskyhua/article/deta ...
- FaceRank，最有趣的 TensorFlow 入门实战项目
FaceRank,最有趣的 TensorFlow 入门实战项目 TensorFlow 从观望到入门! https://github.com/fendouai/FaceRank 最有趣? 机器学习是不是 ...
- .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了
写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI
作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...
- .NET Core实战项目之CMS 第十五章 各层联动工作实现增删改查业务
连着两天更新叙述性的文章大家可别以为我转行了!哈哈!今天就继续讲讲我们的.NET Core实战项目之CMS系统的教程吧!这个系列教程拖得太久了,所以今天我就以菜单部分的增删改查为例来讲述下我的项目分层 ...
- .NET Core实战项目之CMS 第十六章 用户登录及验证码功能实现
前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 ASP.NET Core的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...
随机推荐
- VS2013未能正确加载microsoft.visualstudio.editor.implementation.editorpackage
在用VS2013做项目,但是特别不顺利,这不,VS2013突然罢工了,连解决方案都打不开了,会出现如下的错误: 试了网上的各种解决方案,总算找到一个适合自己的,具体方法如下: 1.打开VS2013的& ...
- 修改windows电脑键盘按键映射
改键的需求 买了一把61键的小键盘,有些按钮没有,比如Home.End.四个方向键,这些键需要按Fn+XX来实现,所以上网查了一下键盘按键修改的方法,即把按键给改了,比如把右边的Ctrl改成方向键. ...
- python2排序
python list cmp排序 对于list的排序一般使用cmp 示例: sorted(xxlist, cmp=self.sortFunc) def sortFunc(self, a, b): r ...
- SqlSugar的Repository
1.仓储说明 仓储可以让你的方法更加的规范,需要什么方法都封装到仓储中,下次就能重复使用,并且能很好的和你业务拆分开 这种设计模式简单粗暴用起来也方便 ,文章下面有可以运行的DEMO 2.仓储方法 仓 ...
- 深度学习应用篇-计算机视觉-图像分类[3]：ResNeXt、Res2Net、Swin Transformer、Vision Transformer等模型结构、实现、模型特点详细介绍
深度学习应用篇-计算机视觉-图像分类[3]:ResNeXt.Res2Net.Swin Transformer.Vision Transformer等模型结构.实现.模型特点详细介绍 1.ResNet ...
- 香橙派上的eMMC分区
准备工作 OrangePi Plus 2E(自带16G的eMMC存储,出厂默认eMMC中附带了Android系统,用于测试板子功能) Ubuntu16.04的TF卡 第一张方式: 该方式可以按需删除指 ...
- iOS 17.4 测试版包含大模型相关代码
外界普遍预计苹果将在 6 月份通过 iOS 18 推出主要的新人工智能功能.不过根据 9to5Mac 的报道,他们在 iOS 17.4 第一个测试版中发现的代码表明,苹果正在开发由大语言模型技术支持的 ...
- 零基础入门学习JAVA课堂笔记 ——DAY07
面向对象(下) 1. Instanceof 我们可以通过Instanceof关键词可以判断当前对象是否为某某类得父类 Object instanceof Student //true 注意:只有是两个 ...
- XD刷机中执行reclaimdisks.sh的作用
之前刷机提到在使用OEDA进行一键部署前,需先在所有DB节点上运行reclaimdisks.sh,也提到观察会释放pvs/vgs/lvs相对应的剩余空间. 本文以一套X8环境为例,来看下具体的表现,以 ...
- 微信小程序云开发项目-个人待办事项-03【主页】模块开发
上一篇: 微信小程序云开发项目-个人待办事项-02今日模块开发 https://blog.csdn.net/IndexMan/article/details/124497893 模块开发步骤 本篇介绍 ...