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的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...
随机推荐
- TypeScript枚举类型
枚举 简单理解就是将所有的情况列举出来. 枚举不是用来定义类型的哈.就是说枚举不是一种数据类型. enum xxx={ key1=value1, key2=value2, } 通过 xxx.key1的 ...
- SignalR系列文章02---netCoreMvc创建Demo
1. 新建.net core MVC项目,并引入nuget包 2. 添加客户端库 3. 修改startUp.cs文件,增加services.AddSignalR();和endpoints.Map ...
- Gin 框架介绍与快速入门
Gin 框架介绍与快速入门 目录 Gin 框架介绍与快速入门 一.Gin框架介绍 1. 快速和轻量级 2. 路由和中间件 3. JSON解析 4. 支持插件 5. Gin相关文档 二.基本使用 1.安 ...
- c++全局变量extern
extern extern 是 C++ 中的一个关键字,用于声明一个变量或函数是在其他文件中定义的.它的作用是告诉编译器在链接时在其他文件中寻找该变量或函数的定义. 在 C++ 中,如果一个变量或函数 ...
- 2.5 CE修改器：寻找数值指针
上一步阐述了如何使用代码替换功能对付变化位置的数据地址,但这种方法往往不能达到预期的效果,所以我们需要学习如何利用指针,在本关的Tutorial.exe窗口下面有两个按钮,一个会改变数值,另一个不但能 ...
- LyScript 自实现汇编搜索功能
通过对LyScript自动化插件进行二次封装,实现从内存中读入目标进程解码后的机器码,并通过Python代码在这些机器码中寻找特定的十六进制字符数组,或直接检索是否存在连续的反汇编指令片段等功能. 插 ...
- vue下载本地文件 下载二进制流文件 兼容ie
vue-cli2要下载的静态文件放在static目录下,vue-cli3则放在public目录下 ie不支持 h5 的download写法,故用以下写法 <el-button type=&quo ...
- 关于React-Router6 （React 路由）
一.概要 (1)每个单页应用其实是一系列的 JS 文件,当用户请求网站时,网站返回一整个(或一系列)的 js 文件和 HTML,而当用户在某个页面内点击时,你需要告诉浏览器怎么加载另一个页面地址.单页 ...
- tp使用workerman消息推送
安装 首先通过 composer 安装 composer require topthink/think-worker SocketServer 在命令行启动服务端 php think worker:s ...
- Windows10系统下JDK1.8的下载安装及环境变量配置
1. JDK1.8安装 2. 环境变量配置点击此处:官网下载 根据自己的系统 ,下载相应的JDK版本. 1. JDK1.8安装双击下载的安装包(.exe文件),进行安装. 点击"下一步&qu ...