openlayers6【二十三】vue LineString 实现地图轨迹路线,设置起点和终点的标注信息详解

本文主要是介绍openlayers6【二十三】vue LineString 实现地图轨迹路线,设置起点和终点的标注信息详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 1.写在前面
    • 2. 创建轨迹线段,设置起点和终点位置和样式代码
    • 3. 完整代码
    • 4. track-car.json 轨迹JSON数据

1.写在前面

本文主要是下面一个简单切经典的需求场景,在地图上根据轨迹的经纬度数据,通过openlayers的LineString 方法创建一条线,并且设置起点和终点的标注信息。下面是效果图。
在这里插入图片描述

2. 创建轨迹线段,设置起点和终点位置和样式代码

addTrack() {// 根据经纬度点位创建线var routeFeature = new Feature({type: "route",geometry: new LineString(trackCar).transform("EPSG:4326", "EPSG:3857"),});// 创建开始图标const startMarker = new Feature({type: "startMarker",geometry: new Point(trackCar[0]).transform("EPSG:4326", "EPSG:3857"),});// 创建结束图标const endMarker = new Feature({type: "endMarker",geometry: new Point(trackCar[trackCar.length - 1]).transform("EPSG:4326","EPSG:3857"),});// 设置样式var styles = {// 如果类型是 route 的样式route: new Style({stroke: new Stroke({width: 2, //线的宽度color: "#ffc641", //线的颜色}),}),// 如果类型是 geoMarker 的样式startMarker: new Style({image: new Icon({src: require("../../assets/images/start.png"),anchor: [0.5, 1.1], // 设置偏移}),}),endMarker: new Style({image: new Icon({src: require("../../assets/images/end.png"),anchor: [0.5, 1.1], // 设置偏移}),}),};// 把小车和线添加到图层this.vectorLayer = new VectorLayer({source: new VectorSource({features: [routeFeature, startMarker, endMarker],}), //线,起点的图标,终点的图标style: function (feature) {return styles[feature.get("type")];},});
},

3. 完整代码

<template><div id="content"><div id="map" ref="map" /></div>
</template><script>
import "ol/ol.css";
import { Map, Feature } from "ol";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Style, Stroke, Icon } from "ol/style";
import { LineString, Point, Polygon } from "ol/geom";
import XYZ from "ol/source/XYZ";
// 一段经纬度数据
import trackCar from "./track-car.json";
export default {data() {return {map: null,vectorLayer: null,};},mounted() {this.addTrack(); //创建this.initMap(); //初始化地图},methods: {addTrack() {// 根据经纬度点位创建线var routeFeature = new Feature({type: "route",geometry: new LineString(trackCar).transform("EPSG:4326", "EPSG:3857"),});// 创建开始图标const startMarker = new Feature({type: "startMarker",geometry: new Point(trackCar[0]).transform("EPSG:4326", "EPSG:3857"),});// 创建结束图标const endMarker = new Feature({type: "endMarker",geometry: new Point(trackCar[trackCar.length - 1]).transform("EPSG:4326","EPSG:3857"),});// 设置样式var styles = {// 如果类型是 route 的样式route: new Style({stroke: new Stroke({width: 2, //线的宽度color: "#ffc641", //线的颜色}),}),// 如果类型是 geoMarker 的样式startMarker: new Style({image: new Icon({src: require("../../assets/images/start.png"),anchor: [0.5, 1.1], // 设置偏移}),}),endMarker: new Style({image: new Icon({src: require("../../assets/images/end.png"),anchor: [0.5, 1.1], // 设置偏移}),}),};// 把小车和线添加到图层this.vectorLayer = new VectorLayer({source: new VectorSource({features: [routeFeature, startMarker, endMarker],}), //线,起点的图标,终点的图标style: function (feature) {return styles[feature.get("type")];},});},/*** 初始化一个 openlayers 地图*/initMap() {const target = "map"; // 跟页面元素的 id 绑定来进行渲染const tileLayer = [new TileLayer({source: new XYZ({url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",}),projection: "EPSG:3857",}),this.vectorLayer, //把线,起点,终点的图标加载到图层];this.map = new Map({target: target, // 绑定dom元素进行渲染layers: tileLayer, // 配置地图数据源});this.map.getView().fit(new Polygon([trackCar]).transform("EPSG:4326", "EPSG:3857"), {padding: [100, 100, 100, 100],}); //设置地图的缩放距离离屏幕的大小},},
};
</script>
<style lang="scss" scoped>
// 此处非核心内容,已删除
</style>

4. track-car.json 轨迹JSON数据

这是我的模拟数据,实际数据根据你们业务需求返回的数据进行获取渲染。

import trackCar from "./track-car.json";
[[120.97202539443971,29.149083495140076],[120.97365617752077,29.147656559944153],[120.97478270530702,29.146594405174255],[120.97543716430665,29.14593994617462],[120.97596287727357,29.145285487174988],[120.9764349460602,29.144577383995056],[120.97669243812561,29.14408653974533],[120.97699284553528,29.143426716327667],[120.97723960876465,29.142654240131378],[120.97735226154329,29.142230451107025],[120.97756683826448,29.141243398189545],[120.97781896591188,29.140020310878754],[120.97790479660036,29.139483869075775],[120.97804427146912,29.138880372047424],[120.97839832305908,29.137893319129944],[120.97876310348511,29.137163758277893],[120.97941756248474,29.13626253604889],[120.9810483455658,29.134342074394226],[120.9818959236145,29.133376479148865],[120.98270595073701,29.132418930530548],[120.98334968090059,29.131678640842438],[120.98402559757234,29.130959808826447],[120.98470687866212,29.13033217191696],[120.985227227211,29.12989765405655],[120.9860908985138,29.129264652729034],[120.98707258701324,29.12864774465561],[120.9880542755127,29.12812203168869],[120.98936319351196,29.127537310123444],[120.99144458770752,29.126807749271393],[120.99297881126404,29.126287400722504],[120.99447548389435,29.125772416591644],[120.99569857120514,29.125321805477142],[120.99704504013062,29.124737083911896],[120.99830567836761,29.12410408258438],[120.99883675575256,29.123830497264862],[120.99963068962097,29.1233691573143],[121.00059628486633,29.122741520404816],[121.00166380405426,29.122038781642914],[121.00329995155334,29.120981991291046],[121.00475907325745,29.120016396045685],[121.00560128688812,29.119447767734528],[121.00612163543701,29.11910980939865],[121.0070389509201,29.11860018968582],[121.00769877433777,29.118267595767975],[121.00861608982086,29.1178759932518],[121.00979626178741,29.117489755153656],[121.01091742515564,29.117216169834137],[121.01166307926178,29.117071330547336],[121.01268768310547,29.116931855678562],[121.0139536857605,29.116878211498264],[121.01507484912872,29.116931855678562],[121.01689338684082,29.117071330547336],[121.01934492588043,29.117291271686558],[121.02029979228975,29.117350280284885],[121.02101325988771,29.117339551448826],[121.02191984653474,29.117242991924286],[121.02294981479646,29.117001593112946],[121.02402269840242,29.116583168506622],[121.02478981018068,29.1161647439003],[121.0260719060898,29.115327894687653]
]

这篇关于openlayers6【二十三】vue LineString 实现地图轨迹路线,设置起点和终点的标注信息详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/618942

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象