需求背景

需要实现地图上展示一个类似于罗盘的标记，随着地图的缩放、切换、旋转等，能够在地图的中央指示出地图的方位。

系统自带的方位控件太小，在特殊业务场景下不够醒目。

技术选型

Mapbox

实现分析

  1. 官网已经有地图上展示图片矢量图层的demo，“Add a raster image to a map layer”和“Add a pattern to a polygon”。注意看前者和后者的区别，前者主要用一张图片覆盖到指定的一个多边形区域；而后者则会用图片区填充一个多边形区域，如果图片太小，矩形区域太大，则会重复叠加多张图片直到矩形区域填充满。
  2. 从地图开放的接口上来看，我们需要监听的主要地图交互事件有：拖拽、缩放、旋转。可在这三个事件完成时重新调整矢量图片的中心位置，重新绘制图层；
  3. 重新绘制图片图层时，需要注意地图的旋转角度（bearing）参数，在交互事件结束时实时获取当前地图的中心点和旋转角度，计算图片重新“贴”的位置；
  4. 通过“Add a raster image to a map layer”示例了解到，往地图上“贴”一张图片需要定义四个经纬度坐标用来确定图片的“粘贴”位置，这样在进行地图旋转或者调整俯视角度的时候就可以紧贴地图跟随地图一起变化。
  5. 当用户在交互的过程中，需要使用以地图中心点（全屏下：屏幕中心点）计算图片在地图坐标系中的四个经纬度坐标。因此我们需要将图片放在屏幕中间，同时计算出图片在屏幕上的四个屏幕坐标点，通过mapbox提供的屏幕坐标点转经纬度坐标接口进行转换。
  6. 在屏幕坐标系转地图坐标系时，需要注意图片的旋转角度。mapbox的bearing是逆时针旋转，原始的屏幕坐标点在经过指定的角度旋转之后获得一个新的屏幕坐标点，再将旋转后的坐标点通过mapbox的屏幕坐标点转经纬度坐标点就可以得到一个“贴”图的目标经纬度坐标。
  7. 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)-栅格图片图层实现地图方位展示的更多相关文章

  1. arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  2. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  3. vue+websocket+express+mongodb实战项目（实时聊天）

    继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...

  4. vue+websocket+express+mongodb实战项目（实时聊天）（二）

    原项目地址:[ vue+websocket+express+mongodb实战项目(实时聊天)(一)][http://blog.csdn.net/blueblueskyhua/article/deta ...

  5. FaceRank，最有趣的 TensorFlow 入门实战项目

    FaceRank,最有趣的 TensorFlow 入门实战项目 TensorFlow 从观望到入门! https://github.com/fendouai/FaceRank 最有趣? 机器学习是不是 ...

  6. .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了

    写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...

  7. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  8. .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI

    作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...

  9. .NET Core实战项目之CMS 第十五章 各层联动工作实现增删改查业务

    连着两天更新叙述性的文章大家可别以为我转行了!哈哈!今天就继续讲讲我们的.NET Core实战项目之CMS系统的教程吧!这个系列教程拖得太久了,所以今天我就以菜单部分的增删改查为例来讲述下我的项目分层 ...

  10. .NET Core实战项目之CMS 第十六章 用户登录及验证码功能实现

    前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 ASP.NET Core的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...

随机推荐

  1. 【小测试】读取*.proto文件，再读取service中method的注释

    想要在proto3中定义service,及其service的method.然后在method后面加上特殊注释,通过这个特殊注释来动态生成代码. 下面是测试代码: import ( "gith ...

  2. （数据科学学习手札157）pandas新增case_when方法

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,pandas在前不久更新的2. ...

  3. 开启想象翅膀：轻松实现文本生成模型的创作应用，支持LLaMA、ChatGLM、UDA、GPT2等模型，开箱即用

    开启想象翅膀:轻松实现文本生成模型的创作应用,支持LLaMA.ChatGLM.UDA.GPT2等模型,开箱即用 1.介绍 TextGen实现了多种文本生成模型,包括:LLaMA.ChatGLM.UDA ...

  4. Flask 框架：运用WTForms实现用户注册

    WTForms 是用于web开发的灵活的表单验证和呈现库,它可以与您选择的任何web框架和模板引擎一起工作,并支持数据验证.CSRF保护.国际化等,运用WTForms框架并配合Flask可实现一个带有 ...

  5. Python 字符串与字节数组转换

    整数之间的进制转换: 10进制转16进制: hex(16) ==> 0x10 16进制转10进制: int('0x10', 16) ==> 16 类似的还有oct(), bin() 字符串 ...

  6. 记录一次py2编码带来的坑

    "中文" == u"中文" # PY2 False"中文" == u"中文" # PY3 True

  7. 案例：记录一则强制开库遭遇ORA-16433的处理过程

    客户的一套开发环境,大概了解到的背景是清理空间时redo被运维人员当作log误删除,一线同事先接手处理,过程中遇到问题升级到我这里继续分析. 接手后,数据库处于mount状态,之前恢复过程中已经做过r ...

  8. 小知识：Linux如何删除大量小文件

    环境:RHEL 6.5 + Oracle 11.2.0.4 需求:使用df -i巡检发现Inodes使用率过高,需要清理删除文件来解决.如果Inodes满,该目录将不能写,即使df -h查看还有剩余空 ...

  9. ABC 314

    F 每次相当于创建一个包含 \(p_i,q_i\) 各自所在集合的点的大点 \(u\),然后 \(u\) 向 \(p_i,q_i\) 各自所在集合连边,边权就是胜率. 连完之后求每个点到根结点(\(\ ...

  10. 【译】使用.NET将WebAssembly扩展到云（二）

    原文 | Richard Lander 翻译 | 郑子铭 轻量级功能 嗯--但是如果我们使用 Wasm 更像是一个典型的功能而不是一个应用程序,我们可能不会计算一百万个单词,而是做一些更轻量级的事情. ...