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的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...
随机推荐
- diff算法是如何比较的，保证让你看的明明白白的！
更新dom节点,最小力度去跟新 index.html <body> <h1>你好啊!</h1> <button id="btn">该 ...
- python快速入门【五】---- 面向对象编程、python类
python入门合集: python快速入门[一]-----基础语法 python快速入门[二]----常见的数据结构 python快速入门[三]-----For 循环.While 循环 python ...
- 5.10 Windows驱动开发：摘除InlineHook内核钩子
在笔者上一篇文章<内核层InlineHook挂钩函数>中介绍了通过替换函数头部代码的方式实现Hook挂钩,对于ARK工具来说实现扫描与摘除InlineHook钩子也是最基本的功能,此类功能 ...
- C++ Boost 异步网络编程基础
Boost库为C++提供了强大的支持,尤其在多线程和网络编程方面.其中,Boost.Asio库是一个基于前摄器设计模式的库,用于实现高并发和网络相关的开发.Boost.Asio核心类是io_servi ...
- 希捷推出IronWolf Pro 24TB硬盘：CMR构建、285MB/s传输速率
希捷推出了全新IronWolf Pro 24TB硬盘,采用3.5寸规格,满足中小企业和NAS环境需求. 据了解,新款硬盘采用了希捷AgileArray技术,针对NAS系统进行了优化.其通过双平面平衡和 ...
- P4402 [Cerc2007] robotic sort 机械排序题解
题目链接:[Cerc2007] robotic sort 机械排序 前置知识点:文艺平衡树 具体的我们会将序号下标作为平衡树的键值,这样一来每个节点其实就是数组中的每个位置,又因为这个位置是具有有序性 ...
- 零基础入门Vue之皇帝的新衣——样式绑定
回顾 大致掌握了上一节的 插值语法 我已经可以把想要的数据显示到页面上,并且仅需要修改变量,页面就会跟着实时改变 但如果对于已经熟悉前端的人来说,单单有数据还是不太行,还需要css对数据进行样式的修饰 ...
- Linux--top命令解释
top命令解释 1.1 系统运行时间和平均负载: top命令的顶部显示与uptime命令相似的输出 这些字段显示: 当前时间 系统已运行的时间 当前登录用户的数量 相应最近5.10和15分钟内的平均负 ...
- NC20277 [SCOI2010]字符串
题目链接 题目 题目描述 lxhgww最近接到了一个生成字符串的任务,任务需要他把n个1和m个0组成字符串,但是任务还要求在组成的字符串中,在任意的前k个字符中,1的个数不能少于0的个数.现在lxhg ...
- Js遍历对象总结
Js遍历对象总结 Js遍历对象的方法主要有for in.Object.keys().Object.getOwnPropertyNames().Reflect.ownKeys().Object.getO ...