openlayers更改點坐標

我現在的需求是無人機點位根據ws傳輸的經緯度改變位置,在網上查了很多資料,終于是做出來了,如果有問題請指出。
效果圖,無人機可以來回移動
在這里插入圖片描述
這里是核心代碼

// 添加飛機點位圖層let vectorLayerpointfunction DronepointLayer() {vectorLayerpoint = new VectorLayer({source: new VectorSource(),name: 'Pointlayers'});imap.addLayer(vectorLayerpoint);// var layerA = imap.getLayers().getArray()[1]; // imap.getView().setZIndex(layerA, vectorLayerpoint.getZIndex() + 1);}//Dronepoint方法傳入ws的數據let modelArr = []function Dronepoint(params) {if (vectorLayerpoint == undefined) {return}if(!params){vectorLayerpoint.getSource().clear();//cesiumViewer.entities.removeById('threeDrone')modelArr=[]return}// vectorLayerpoint.getSource().clear();// cesiumViewer.entities.removeById('threeDrone')params.forEach((item, index) => {var items = item;var obj = getModelById(item.id);var model;if (obj.model) { //表示已經存在于數組當中// 更新位置model = obj.model;vectorLayerpoint.getSource().forEachFeature((itempoint)=>{itempoint.setGeometry(new Point([item.tracing.origin.lng, item.tracing.origin.lat]));// itempoint.getGeometry().translate(model.tracing.origin.lng, model.tracing.origin.lat)console.log([item.tracing.origin.lng, item.tracing.origin.lat],itempoint, '更新位置');})} else {// 創建模型model = crateModel(items);modelArr.push(model);console.log(modelArr, model,'創建模型');}});}// 創建無人機
function crateModel(item) {// 創建feature,一個feature就是一個點坐標信息const featurepoint = new Feature({geometry: new Point([item.tracing.origin.lng, item.tracing.origin.lat]),});//addModel(item.tracing.origin.lng, item.tracing.origin.lat, item.height);//console.log(item.tracing.origin,vectorLayerpoint,imap.getLayers().getArray(),'具體點');let style = new Style({image: new Icon({scale: [0.3, 0.3],src: DronepointImg,anchor: [0.2, 0.5]}),text: new Text({font: 'normal 14px 黑體',// // 對其方式textAlign: 'center',// 基準線textBaseline: 'middle',offsetY: 35,offsetX: 35,backgroundFill: new Stroke({color: 'rgb(65 65 65 / 70%)',}),// 文本填充樣式fill: new Fill({color: 'rgba(236,218,20,1)'}),padding: [5, 5, 5, 5],text: `${item.name + '\n'}${'lng:' + item.tracing.origin.lng},${'lat:' + item.tracing.origin.lat}`,})})featurepoint.setStyle(style);vectorLayerpoint.getSource().addFeature(featurepoint);return item;}// 獲取模型function getModelById(id) {if (!id) return null;var obj = {};for (var i = 0; i < modelArr.length; i++) {var item = modelArr[i];if (id === item.id) {obj.index = i;obj.model = item;break;}}return obj;}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/42428.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/42428.shtml
英文地址,請注明出處:http://en.pswp.cn/web/42428.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Mercer 條件的基本概念及證明

Mercer 條件 是核函數理論中的一個重要概念&#xff0c;它確保了一個給定的對稱函數可以表示為某個高維特征空間中的內積。這個條件在支持向量機&#xff08;SVM&#xff09;和其他基于核方法的機器學習算法中非常重要。 文章目錄 基本介紹Mercer 條件的定義Mercer 定理實際應用…

Kafka(三)Producer第二篇

一&#xff0c;生產者架構 生產者客戶端由兩個線程協調運行&#xff0c;分別為主線程和Sender線程&#xff08;發送線程&#xff09;。 主線程&#xff1a;KafkaProducer創建消息&#xff0c;通過攔截器、序列化器和分區器之后緩存到消息收集器RecordAccumulator中&#xff1b;…

Redis 中的跳躍表(Skiplist)基本介紹

Redis 中的跳躍表&#xff08;Skiplist&#xff09;是一種用于有序元素集合的快速查找數據結構。它通過一個多級索引來提高搜索效率&#xff0c;能夠在對數時間復雜度內完成查找、插入和刪除操作。跳躍表特別適用于實現有序集合&#xff08;sorted set&#xff09;的功能&#…

大語言模型的直接偏好優化(DPO)對齊在PAI-QuickStart實踐

直接偏好優化&#xff08;Direct Preference Optimization&#xff0c;DPO)算法是大語言模型對齊的經典算法之一&#xff0c;它巧妙地將獎勵模型&#xff08;Reward Model&#xff09;訓練和強化學習&#xff08;RL&#xff09;兩個步驟合并成了一個&#xff0c;使得訓練更加快…

MySQL 給數據表增加一列,一定會鎖表嗎?

在 MySQL 中&#xff0c;給數據表增加一列&#xff0c;是否會鎖表取決于使用的存儲引擎以及 MySQL 的版本。 InnoDB 存儲引擎在 MySQL 之前的行為 之前版本的 MySQL 中&#xff0c;如果你使用 ALTER TABLE 命令來增加一列&#xff0c;對于使用 InnoDB 存儲引擎的表&#xff0…

【算法】單調隊列單調棧

一、單調隊列 用來維護一段區間內的最大值或最小值&#xff0c;例如滑動窗口、區間最值等問題。 基本概念 單調隊列是一種存儲數據的隊列&#xff0c;其中元素的順序是單調遞增或單調遞減的。在算法競賽中&#xff0c;我們一般使用兩個單調隊列&#xff0c;一個維護單調遞增序…

【版面費優惠丨ACM獨立出版丨接受全文摘要投稿】2024年生物醫藥和智能技術國際學術會議(ICBIT 2024,8月23-25)

“2024年生物醫藥和智能技術國際學術會議&#xff08;ICBIT 2024&#xff09;”擬定于2024年8月23-25日于珠海召開。近年來&#xff0c;智能技術已經逐漸走入生物醫藥領域&#xff0c;并在與生物醫藥領域的融合創新中凸顯出巨大的發展潛力和社會價值。人工智能技術在生物醫藥領…

水處理基本知識

RO反滲透程序設計軟件下載 水處理基本知識 純水制備的核心工藝 核心工藝&#xff1a;純水&#xff08;超純水&#xff09;制備的主要處理工藝&#xff0c;結合前處理&#xff08;預處理&#xff09;工藝&#xff0c;輔助工藝及特殊工藝&#xff0c;組成完整的純水制備工藝。結…

優質作品集秘訣:8個技巧讓你的作品脫穎而出

制作一個高質量的投資組合不僅可以展示你的技能和創造力&#xff0c;還可以幫助你在求職和職業發展中脫穎而出。如何制作高質量的投資組合&#xff1f;今天給大家講述作品集的 8 個實用技能&#xff0c;幫助你制作出令人印象深刻的作品集&#xff01; 1、精選作品 并不是所有…

飛睿智能會議室靜止雷達人體檢測傳感器,實時監測使用狀態,有人、無人智能感應節能減

在這個科技日新月異的時代&#xff0c;每一個細微的創新都可能成為推動行業創新的關鍵力量。今天&#xff0c;讓我們聚焦于一項看似不起眼卻實則潛力無限的技術——飛睿智能靜止雷達人體檢測傳感器&#xff0c;以及它在會議室這一商務交流核心區域中的巧妙應用。想象一下&#…

前端Canvas入門——怎么用Canvas畫一些簡單的圖案

Canvas作為前端的畫圖工具&#xff0c;其實用途還是蠻廣泛的&#xff0c;但是很多前端學習課程其實都很少涉及到這塊內容。 于是乎&#xff0c;就寫下這個了。 當然啦&#xff0c;目前還在學習摸索中。 一些實戰代碼&#xff0c;僅供參考&#xff1a; <canvasid"ctx&…

EtherCAT總線冗余讓制造更安全更可靠更智能

冗余定義 什么是總線冗余功能&#xff1f;我們都知道&#xff0c;EtherCAT現場總線具有靈活的拓撲結構&#xff0c;設備間支持線型、星型、樹型的連接方式&#xff0c;其中線型結構簡單、傳輸效率高&#xff0c;大多數的現場應用中也是使用這種連接方式&#xff0c;如下圖所示…

【Qt課設】基于Qt實現的中國象棋

一、摘 要 本報告討論了中國象棋程序設計的關鍵技術和方法。首先介紹了中國象棋的棋盤制作&#xff0c;利用Qt中的一些繪畫類的函數來進行繪制。在創作中國象棋棋子方面&#xff0c;首先&#xff0c;我們先定義一下棋子類&#xff0c;將棋子中相同的部分進行打包&#xff0c;使…

idea推送到gitee 401錯誤

在idea上推送時遇到這樣的問題&#xff0c;解決方法如下&#xff1a; 在https://的后面加上 用戶名:密碼 然后再提交就ok啦&#xff01;

三、SpringMVC

三、SpringMVC 1、SpringMVC簡介 1.1、什么是MVC MVC是一種軟件架構的思想&#xff0c;將軟件按照模型、視圖、控制器來劃分 M&#xff1a;Model&#xff0c;模型層&#xff0c;指工程中的JavaBean&#xff0c;作用是處理數據 JavaBean分為兩類&#xff1a; 一類稱為實體…

c語言實戰-極簡掃雷

C語言/c寫的C語言實戰項目掃雷 結構比較清晰&#xff0c;僅供參考&#xff1a; 核心是掃雷的遞歸算法實現 上代碼: #include <stdio.h> #include <stdlib.h> #include <time.h>#define SIZE 10 #define MINES 15char board[SIZE][SIZE]; // 游戲棋盤// 初…

Oracle的主要特點是什么?應用場景有哪些?

主要特點&#xff1a; 高可靠性&#xff1a;Oracle數據庫具有高度的可靠性&#xff0c;能夠確保數據的安全和穩定性。 高性能&#xff1a;提供高性能的數據處理和查詢能力&#xff0c;可以處理大規模的數據量。 良好的擴展性&#xff1a;支持水平和垂直的擴展&#xff0c;可以輕…

CloudWatch Logs Insights 詳解

CloudWatch Logs Insights 是 AWS 提供的強大日志分析工具,允許您快速、交互式地搜索和分析日志數據。本文將詳細介紹使用 CloudWatch Logs Insights 所需的權限、常用查詢方法,以及一些實用的查詢示例。 1. 所需權限 要使用 CloudWatch Logs Insights,用戶需要具備以下 I…

代碼隨想錄-Day55

42. 接雨水 給定 n 個非負整數表示每個寬度為 1 的柱子的高度圖&#xff0c;計算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 輸入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 輸出&#xff1a;6 解釋&#xff1a;上面是由數組 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高…

CentOS7二進制安裝和YUM安裝mongodb,服務器無法安裝5.0以上的 mongodb 數據庫報錯 Illegal instruction

文章目錄 MongoDB 安裝二進制安裝YUM 安裝 Tips:1、MongoDB安裝問題2、MongoDB登錄3、MongoDB排序時內存大小限制和創建索引4、創建用戶5、Java yaml使用密碼連接mongodb6、MongoDB增刪改查 MongoDB 安裝 二進制安裝 [rootmysql5-7 mongodb-6.0.4]# cat start.sh #!/bin/bash…