Arcgis地图实战二:地图实时轨迹展示

news2025/2/12 20:48:40

1.最终效果预览

在这里插入图片描述

2.定时器执行方法

进入页面执行执行器

this.locationInterval = setInterval(() => {
                            this.getCurrentPosition();
                        }, this.conf.LocateInterval);

离开页面销毁

clearInterval(this.locationInterval);

this.conf.LocateInterval为获取的数据同步中的定时器间隔时间为毫秒值

3.获取坐标

基于高德定位功能获取的坐标,并将高德坐标gcj02转为84坐标系坐标,然后调用封装的通用方法将坐标画到地图上

getCurrentPosition() {
        let obj = {
            androidOption: {
                locationMode: 1,
                gpsFirst: false,
                HttpTimeOut: 30000,
                interval: 2000,
                needAddress: true,
                onceLocation: true,
                onceLocationLatest: false,
                locationProtocol: 1,
                sensorEnable: false,
                wifiScan: true,
                locationCacheEnable: false
            },
            iosOption: {
                desiredAccuracy: 4,
                pausesLocationUpdatesAutomatically: "YES",
                allowsBackgroundLocationUpdates: "NO",
                locationTimeout: 10,
                reGeocodeTimeout: 5,
                locatingWithReGeocode: "YES"
            }
        };
        (<any>window).GaoDe.getCurrentPosition((location) => {
            let gcj = this.transform.gcj_decrypt(location.latitude, location.longitude);
            this.mapTool.MapCenterAt(gcj.lon, gcj.lat, undefined);

        }, (e) => {
            console.log("getCurrentPosition err:" + JSON.stringify(e));
        }, obj);
    }

4.地图上画点并判断是否处于屏幕边缘

this.mapTool.MapCenterAt(x, y, undefined);

将点画到图层上this.addGraphicsToMapRealTime(mapPoint, false, false);
判断点是否在屏幕边缘,如果点在屏幕边缘,将isCenter设为true,并将点放到屏幕中央

mapCenterAt: function (x, y, scale) {
					var mapPoint = new Point(x, y, this.map.spatialReference);
					if (scale != undefined) {
					    this.map.setScale(scale);
						   this.map.centerAt(mapPoint);
					} else {
						this.addGraphicsToMapRealTime(mapPoint, false, false);
						let isCenter = false
						let mHeight = this.map.height ;
						let mWidth = this.map.width ;
						let screenWH = this.map.toScreen(mapPoint);
						let sX = screenWH.x;
						let sY = screenWH.y;
						if (sX >= mWidth || sY >= mHeight || sX <= 0 || sY <= 0) {
							isCenter = true;
						}
						if (isCenter) {
							this.map.centerAt(mapPoint);
						}
                        
					}
				},

5.将点添加到图层中

addGraphicsToMapRealTime: function (geometry, location, flash, attributes, infoTemplate) {
					var symbol = this._symbol.getSymbol("point", "locatemarksymbol");
					var symbolPoint = this._symbol.getSymbol("point", "realpoint");
					if (location) {
						this.map.graphics.clear();
					}
					if (this.layerArr.length == 0) {
						this.map.graphics.clear();
					}
					var gl = this.GetGraphicLayerById("ssgjLayer");
					var gg = new Graphic(geometry, symbol);
					this.layerArr.push(gg)
					if (this.layerArr && this.layerArr.length > 0) {
						for (var i = 0; i < this.layerArr.length; i++) {
							var gg2 = new Graphic(this.layerArr[i].geometry, symbolPoint);
							if (i < this.layerArr.length - 1) {
								gl.remove(this.layerArr[i])
								gl.add(gg2);

							}
						}
					}

					var _graphic = gl.add(gg);
				},

6.地图上标记symbol标识

当标记为locatemarksymbol时,显示小人图片用PictureMarkerSymbol,当标记为realpoint时,显示一个圆点用SimpleMarkerSymbol

    case "locatemarksymbol":
						symbol = PictureMarkerSymbol(this._baseImgUrl+'focus.png', 24, 24);
						break;
					case "realpoint":
						symbol = new SimpleMarkerSymbol({
							  "color": [255,0,0,128],
							  "size": 5,
							  "angle": -30,
							  "xoffset": 0,
							  "yoffset": 0,
							  "type": "esriSMS",
							  "style": "esriSMSCircle",
							});

						break;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/864125.html

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

相关文章

UE4/5 GAS技能系统入门3 - GameplayEffect

阅读本文需要上一篇AttributeSet的基础知识&#xff1a; https://blog.csdn.net/grayrail/article/details/132148492 本文也并非教程性质文章&#xff0c;主要讲解学习记录为主。 这篇开始讲AttributeSet配置好后&#xff0c;GameplayEffect的使用。 1.将GE配置至Ability Co…

计算机竞赛 - 基于机器视觉的图像拼接算法

前言 图像拼接在实际的应用场景很广&#xff0c;比如无人机航拍&#xff0c;遥感图像等等&#xff0c;图像拼接是进一步做图像理解基础步骤&#xff0c;拼接效果的好坏直接影响接下来的工作&#xff0c;所以一个好的图像拼接算法非常重要。 再举一个身边的例子吧&#xff0c;…

远程RDP、远控手机、双屏控双屏,向日葵“瓜子会员”妥妥的真香

最近儿有点“小感冒”&#xff0c;没去公司在家歇着&#xff0c;居家归居家&#xff0c;砖还是要搬的&#xff0c;突然来活了也得及时的处理掉&#xff0c;这种时候我一般用远程桌面的方式&#xff0c;之前就一直用的向日葵远程控制。 为啥用远程桌面呢&#xff1f;主要原因是家…

31 | 独角兽企业数据分析

独角兽企业:是投资行业尤其是风险投资业的术语,一般指成立时间不超过10年、估值超过10亿美元的未上市创业公司。 项目目的: 1.通过对独角兽企业进行全面地分析(地域,投资方,年份,行业等),便于做商业上的战略决策 项目数据源介绍 1.数据源:本项目采用的数据源是近…

独立站还值不值得入?先来了解最新趋势!

近年来&#xff0c;随着跨境电商行业的蓬勃发展&#xff0c;跨境卖家的数量持续攀升&#xff0c;然而由于亚马逊等跨境电商平台对第三方卖家的规则约束越加严厉&#xff0c;目前有很多卖家都在考虑平台转型独立站。与此同时&#xff0c;独立站 SHEIN、Anker、DX 的成功&#xf…

Git全栈体系(五)

第八章 IDEA 集成 GitHub 一、设置 GitHub 账号 如果出现 401 等情况连接不上的&#xff0c;是因为网络原因&#xff0c;可以使用以下方式连接&#xff1a; 然后去 GitHub 账户上设置 token。 点击生成 token。 复制红框中的字符串到 idea 中。 点击登录。 二、分享工程…

【正点原子STM32连载】 第一章 本书学习方法摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html# 第一…

【ArcGIS Pro二次开发】(60):按图层导出布局

在使用布局导图时&#xff0c;会遇到如下问题&#xff1a; 为了切换图层和导图方便&#xff0c;一般情况下&#xff0c;会把相关图层做成图层组。 在导图的时候&#xff0c;如果想要按照图层组进行分开导图&#xff0c;如上图&#xff0c;想导出【现状图、规划图、管控边界】3…

零基础看懂免费开源的Stable Diffusion

文章目录 前言Diffusion模型推理过程训练过程 Stable Diffusion模型参考 前言 前面一篇文章主要讲了扩散模型的理论基础&#xff0c;还没看过上篇的小伙伴可以点击查看&#xff1a;DDPM理论基础。这篇我们主要讲一下一经推出&#xff0c;就火爆全网的Stable Diffusion模型。St…

最大限度增加销售额!亚马逊提醒卖家准备Q4季度促销库存!

亚马逊美国站发布公告称为了最大限度提高卖家销售额&#xff0c;确保您的亚马逊物流库存在第四季度的促销活动中按时到达亚马逊运营中心&#xff0c;亚马逊建议卖家检查补货库存并及时将库存送到运营中心&#xff0c;以下是公告内容&#xff1a; 为了最大限度地提高您的假期销…

【Linux取经路】揭秘进程的父与子

文章目录 1、进程PID1.1 通过系统调用接口查看进程PID1.2 父进程与子进程 2、通过系统调用创建进程-fork初始2.1 调用fork函数后的现象2.2 为什么fork给子进程返回0&#xff0c;给父进程返回pid&#xff1f;2.3 fork函数是如何做到返回两次的&#xff1f;2.4 一个变量怎么会有不…

微信可以设置延迟到账了!让资金更安全!

微信几乎已经成为了每个人离不开的交流、通讯、支付工具&#xff0c;微信支付也是离不开的移动支付手段。 如果我们在微信转账时出现转错账的情况怎么办&#xff1f;其实微信转账是可以设置到账时间的。 什么是延时到账&#xff1f; 延时到账是指&#xff0c;收款方在确认了你的…

VIOOVI的ECRS工时分析软件分析:SOP的核心和特征是什么?

制定SOP的主要目的是为企业做技术储备、提供企业的工作效率、防止同样的错误反复出现、让员工作业有标准化的行为准则。以规定的成本、规定的工作时间&#xff0c;生产质量均匀、符合规范的产品。为了能够达到上述要求&#xff0c;如果制造现场的操作混乱&#xff0c;比如制作工…

在vue3+vite项目中使用jsx语法

如果我掏出下图&#xff0c;阁下除了私信我加入学习群&#xff0c;还能如何应对&#xff1f; 正文开始 前言一、下载资源二、利用vite工具引入babel插件总结 前言 最近在为部署人员开发辅助部署的工具&#xff0c;技术栈是vue3viteelectron&#xff0c;在使用jsx语法时&#x…

【学习】若依源码(前后端分离版)之 “ 数据的导入导出功能”

大型纪录片&#xff1a;学习若依源码&#xff08;前后端分离版&#xff09;之 “ 数据的导入导出功能” 前言导入功能实现前端部分后端部分 导出功能实现前端部分后端部分8月9日补充&#xff1a;自定义隐藏属性列导出对象的子列表 结语 前言 在实际开发中&#xff0c;碰到大批…

【java实习评审】对推电影详情模块的基本电影模型设计到位,并能考虑到特色业务的设计

大家好&#xff0c;本篇文章分享一下【校招VIP】免费商业项目"推电影"第一期 电影详情模块 Java同学的开发文档周最佳作品。该同学来自暨南大学电子信息专业。 本项目的商业出发点&#xff1a; 豆瓣评分越来越水&#xff0c;不太符合年青人的需求&#xff0c;我们推…

React Dva项目小优化之redux-action

之前 我们讲过 models 接下啦 我们来给大家讲一个新的库 这个库的话 有最好 没有影响也不大 它主要是帮助我们处理 action的 我们直接在 GitHub 官网上搜索 redux-action 我们搜出来 第一个就是 从星数来看 还是非常优秀的 我们拉下来 找到这个Documentation 然后点击进去 进…

【WiFi】WiFi 6E最新支持的国家和频段

信道Map图 国家和频段 CountryStatus Spectrum Andorra Adopted Considering 5945-6425 MHz 6425-7125 MHz ArgentinaAdopted5925-7125 MHzAustralia Adopted Considering 5925-6425 MHz 6425-7125 MHz Austria Adopted Considering 5945-6425 MHz 6425-7125 MHz BahrainA…

IOC容器 - Autofac

DI&#xff08;依赖注入&#xff09;&#xff1a;DI&#xff08;Dependency Injection&#xff09;是一种实现松耦合和可测试性的软件设计模式。它的核心思想是将依赖关系的创建与管理交给外部容器&#xff0c;使得对象之间只依赖于接口而不直接依赖于具体实现类。通过依赖注入…

MySQL多表连接查询3

目录 表结构 创建表 表数据 查询需求&#xff1a; 1.查询student表的所有记录 2.查询student表的第2条到4条记录 3.从student表查询所有学生的学号&#xff08;id&#xff09;、姓名&#xff08;name&#xff09;和院系&#xff08;department&#xff09;的信息 4.从s…