openlayers更改点坐标

news2024/11/16 9:44:18

我现在的需求是无人机点位根据ws传输的经纬度改变位置,在网上查了很多资料,终于是做出来了,如果有问题请指出。
效果图,无人机可以来回移动
在这里插入图片描述
这里是核心代码

// 添加飞机点位图层
    let vectorLayerpoint
    function 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.coloradmin.cn/o/1909498.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vscode设置左侧窗口字体大小

vscode设置左侧窗口字体大小 打开设置 在搜索框输入Zoom 修改这个值即可放大相关字体

从数字化营销与运营视角:看流量效果的数据分析

基于数据打通的“全链路”营销是当下的“时髦”&#xff0c;应用它的前提是什么&#xff1f;深度营销和运营的关键数据如何获得&#xff1f;如何利用数据进行更精准的营销投放&#xff1f;如何利用数据优化投放的效果&#xff1f;如何促进消费者的转化&#xff0c;以及激活留存…

【js面试题】深入理解尾递归及其在JavaScript中的应用

面试题&#xff1a;举例说明尾递归的理解&#xff0c;以及应用场景 引言&#xff1a; 在编程中&#xff0c;递归是一种常见的解决问题的方法&#xff0c;它允许函数调用自身来解决问题。然而&#xff0c;递归如果不当使用&#xff0c;可能会导致栈溢出错误&#xff0c;特别是在…

无损音频格式 FLAC 转 MP3 音频图文教程

音频文件的格式多样&#xff0c;每种格式都有其独特的特点与适用场景。FLAC&#xff08;Free Lossless Audio Codec&#xff09;&#xff0c;作为一种无损音频压缩格式&#xff0c;因其能够完美保留原始音频数据的每一个细节而备受音频发烧友和专业人士的青睐。 然而&#xff0…

代码随想录打卡第十八天

代码随想录–二叉树部分 day 17 休息日 day 18 二叉树第五天 文章目录 代码随想录--二叉树部分一、力扣654--最大二叉树二、力扣617--合并二叉树三、力扣700--二乘树中的搜素四、力扣98--验证二叉搜索树 一、力扣654–最大二叉树 代码随想录题目链接&#xff1a;代码随想录 给…

双系统ubuntu20.04扩容

windows端 打开磁盘管理器&#xff0c;选择需要的盘点击压缩卷 点击未分配的盘&#xff0c;新建简单卷&#xff0c;一致点击下一步即可&#xff0c;记住分配的大小容量 ubuntu端 lsblk 查看所有的磁盘&#xff0c;可以看到新增为nvme0n1p4、nvme1n1p2 win分配的格式为NTFS&a…

Idea-单个窗口导入并开启多个module项目

前言 大家是否有过这样的困扰&#xff0c;我们每次打开一个项目就需要单开一个idea窗口&#xff0c;项目少时了还好&#xff0c;一旦涉及多个项目间服务调用&#xff0c;特别是再包括网关、注册中心、前端web服务&#xff0c;需要开启的窗口就会是一大批&#xff0c;每次切换的…

antd a-select下拉框样式修改 vue3 亲测有效

记录一下遇到的问题 1.遇到问题&#xff1a; 使用到Vue3 Ant Design of Vue 3.2.20&#xff0c;但因为项目需求样式&#xff0c;各种查找资料都未能解决; 2.解决问题&#xff1a; ①我们审查元素可以看到&#xff0c;下拉框是在body中的; ①在a-select 元素上添加dropdownCla…

在Linux下使用Docker部署chirpstack

目录 一、前言 二、chirpstack 1、chirpstack是什么 2、chirpstack组件 3、为什么选择Docker部署 三、Linux下部署过程 四、web界面部署过程 一、前言 本篇文章我是在Linux下使用 Docker 进行部署chirpstack&#xff0c;chirpstack采用的是v4 版本&#xff0c;v4 版本 与…

AMEYA360荣登2024电子元器件分销商30强!

2024年7月4日&#xff0c;“2024(第二届)电子产业供应链生态大会”在东莞顺利召开。 本次大会由中国物流与采购联合会和东莞市人民政府联合主办&#xff0c;由中国物流与采购联合会电子产业供应链分会承办&#xff0c;该会议以“智链端生态 互链芯未来”为主题&#xff0c;旨在…

你最近想通了什么事情?这10条职场经验帮助你活得更通透

1别总当老好人 记得刚步入职场那会儿&#xff0c;我简直是“老好人”的代名词。 无论是同事的额外任务&#xff0c;还是朋友的小忙&#xff0c;我总是二话不说就接下来&#xff0c;结果自己累得半死&#xff0c;换来的却是别人的理所当然和偶尔的忽视。 直到有一次&#xff…

蓝牙信标是什么?蓝牙信标好不好用?

说到蓝牙大家应该都非常熟悉&#xff0c;有很多通信设备都可以经过蓝牙而取得联系。但是说到蓝牙信标很多人可能就比较陌生了&#xff0c;毕竟这样的说法太少见了&#xff0c;很多人也不知道这到底是什么。那么究竟我们应该怎么去理解&#xff0c;蓝牙信标是什么&#xff0c;另…

TikTok海外运营,云手机多种变现方法

从现阶段来看&#xff0c;TikTok 的用户基数不断增长&#xff0c;已然成为全球创业者和品牌的全新竞争舞台。其用户数量近乎 20 亿&#xff0c;年轻用户占据主导&#xff0c;市场渗透率也逐年提高。不管是大型企业、著名品牌&#xff0c;还是个体创业者&#xff0c;都绝不能小觑…

进程地址空间(初)

1.遗留问题 前面在fork创建子进程的内容中遗留了一个问题&#xff0c;一个 变量既等于0又大于0. 2.地址空间的概念 (仅有栈区从高地址处向低地址处&#xff09; &#xff08;堆区和栈区之间有一大块的镂空&#xff0c;这里暂时不作介绍&#xff09; 使用代码验证上图的大…

项目实施案例:金蝶云星空对接泛微OA

摘要 在企业信息化中&#xff0c;某电子行业集团公司面临着跨语言、跨系统的业务流程管理和数据同步的挑战。本项目通过一系列的技术实施解决方案&#xff0c;成功地解决了这些问题&#xff0c;提高了企业的运营效率和数据管理的准确性&#xff0c;本此分享满满的干货&#xff…

RTK_ROS_导航(2):卫星图查看

目录 1. 基于MapViz的卫星图查看 1. 基于MapViz的卫星图查看 安装 # 源码安装 mkdir -p RTK_VISION/src cd RTK_VISION/src git clone https://github.com/swri-robotics/mapviz.git --branchmelodic-eol sudo apt-get install ros-$ROS_DISTRO-mapviz ros-$ROS_DISTRO-mapviz-…

django基于个人BMI的健康饮食食谱推荐系统-计算机毕业设计源码26624

目 录 1 绪论 1.1 研究背景和意义 1.2国内外研究现状 1.3论文结构与章节安排 2 系统分析 2.1 可行性分析 2.1.1技术可行性分析 2.1.2 操作可行性分析 2.1.3经济可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 2.4系统流程分…

科技日报社激发数据要素价值,树立媒体行业数字化转型标杆

更多案例研究与行业报告&#xff0c;请前往爱分析官网 媒体行业企事业单位在数据要素领域得天独厚&#xff0c;日积月累的新闻报道、媒资素材、读者反馈和市场研究&#xff0c;沉淀出属于它们的“数据金矿”。 但是&#xff0c;多数相关单位尚未重视和发挥数据要素价值&#…

微客云外卖霸王餐系统怎么样?怎么运营外卖霸王餐

微客云霸王餐系统是一个旨在促进本地生活服务的创新平台&#xff0c;特别针对餐饮业&#xff0c;它确实支持商家入驻。该系统设计用于帮助商家通过组织霸王餐活动来提高店铺的知名度、吸引新顾客并增加订单量。商家不仅能够发布免费或优惠的餐饮体验活动&#xff0c;还能利用系…

什么是ThingsKit物联网平台?

在信息化时代的浪潮中&#xff0c;物联网&#xff08;IoT&#xff09;作为新一代信息技术的核心&#xff0c;已经逐渐渗透到我们生活的方方面面。而在这个大背景下&#xff0c;Thingskit物联网平台以其独特的技术优势和应用场景&#xff0c;成为了物联网领域的一颗璀璨明星。本…