高德地图绘制图层

news2024/11/25 15:54:19

效果图:在这里插入图片描述

//初始数据
data(){
	return{
		//地图
		map:{
			address:'',
			map:null,
			//当前鼠标绘制
			mouseTool:null,
			//当前编辑
			polyEditor:null,
			//覆盖物的绘制点【用于编辑】
			mouseToolArr:[],
			//覆盖物的poly对象
			polyArr:[],
			//地图右侧功能按钮
			signNumber:0,
			//保存提交的覆盖物的点数据
			polySubmitData:''
		},
	}
}

//实例化地图
_this.map.map = new AMap.Map('elementMap',{
	zoom:11,
	center:[116.44309,39.921598]
})
_this.map.map.addControl(new AMap.MapType({
	defaultType:0 //0代表默认,1代表卫星
}));

//点击左侧搜索
mapSearch(){
	if(!_this.map.address){
		_this.$message.warning('请输入查询的位置!')
		return;
	}
	var geocoder = new AMap.Geocoder({
			city: "全国", //城市设为北京,默认:“全国”
	});
	//根据地址查询出经纬度,并居中;
	geocoder.getLocation(_this.map.address, function(status, result) {
		if (status === 'complete'&&result.geocodes.length) {
				var lnglat = result.geocodes[0].location
				_this.map.map.setCenter([lnglat.lng,lnglat.lat])
				_this.map.map.setZoom(17)
		}else{
				log.error('根据地址查询位置失败');
		}
	})
},

//新建图层
addPoly(){
	//按钮颜色
	_this.map.signNumber = 1;
	//编辑功能关闭
	if(_this.map.polyEditor){
		_this.map.polyEditor.close();
	}
	_this.map.mouseTool = new AMap.MouseTool(_this.map.map);
	_this.map.mouseTool.polygon({
		strokeColor: "#FF33FF", 
		strokeOpacity: 1,
		strokeWeight: 3,
		strokeOpacity: 0.4,
		fillColor: '#1791fc',
		fillOpacity: 0.4,
		// 线样式还支持 'dashed'
		strokeStyle: "solid",
		// strokeStyle是dashed时有效
		// strokeDasharray: [30,10],
	})
	_this.map.mouseTool.on('draw', function(event) {
		//覆盖物对象绘制完成
		//event.obj 为绘制出来的覆盖物对象
		//event.obj.getPath() 为拿到的点
		//存储绘制覆盖物的点,用于重新绘制
		_this.map.mouseToolArr.push(event.obj.getPath())
		setTimeout(function(){
			//拿到经纬度点清除由鼠标绘制的点
			_this.map.mouseTool.close(true)
			//重新开启鼠标绘制点功能
			_this.addPoly();
			//往地图压入当前绘制的覆盖物
			_this.openPoly(event.obj.getPath());
		})
	})
},

//开启绘制 【将绘制的点在地图中绘制出来】
openPoly(data){
	//开启格式化
	let newArr = _this.lnglatFormat(data)
	//拿到所有的点
	var polygon = new AMap.Polygon({
		path: newArr,
		strokeColor: "#FF33FF",
		strokeOpacity: 1,
		strokeWeight: 3,
		strokeOpacity: 0.4,
		fillColor: '#1791fc',
		fillOpacity: 0.4,
		// 线样式还支持 'dashed'
		strokeStyle: "solid",
		// strokeStyle是dashed时有效
		// strokeDasharray: [30,10],
	});

	_this.map.map.add(polygon);
	//存储覆盖物的poly,用于编辑
	_this.map.polyArr.push(polygon);
	//图层覆盖物居中
	_this.map.map.setFitView();
},

//编辑图层
editPoly(){
	//按钮颜色
	_this.map.signNumber = 2;
	//清除鼠标绘制功能
	if(_this.map.mouseTool){
		_this.map.mouseTool.close();
	}
	//拿到绘制多边形的点,每次编辑都是上一次已经绘制好的覆盖物
	let polygon = _this.map.polyArr[_this.map.polyArr.length-1]
	_this.map.polyEditor = new AMap.PolyEditor(_this.map.map, polygon)
	_this.map.polyEditor.open();
},

//结束编辑
endPoly(){
	if(_this.map.polyEditor){
		_this.map.signNumber = 3;
		_this.map.polyEditor.close();
	}
},

//清除重绘
clearPoly(){
	_this.map.signNumber = 4;
	_this.map.map.remove(_this.map.polyArr);
	//停止并清除鼠标点绘制事件  清除鼠标覆盖物的点
	if(_this.map.mouseTool){
		_this.map.mouseTool.close();
		_this.map.mouseToolArr = [];
	}
	//停止编辑的覆盖物  重置其数据
	if(_this.map.polyEditor){
		_this.map.polyEditor.close();
		_this.map.polyEditor = null;
	}
	//清除自己拿到鼠标绘制的点数据并重绘的覆盖物点
	_this.map.polyArr = [];
},

//保存图层
polySubmit(){
	_this.map.signNumber = 0;
	let polygonData = _this.map.map.getAllOverlays('polygon')
	let submit = [];
	for(let i=0; i<polygonData.length; i++){
		let lnglatData = polygonData[i].getPath();
		submit.push(lnglatData)
	}
	_this.map.polySubmitData = JSON.stringify(submit)
},

//格式化经纬度数据
lnglatFormat(data){
	let arr = [];
	for(let i=0; i<data.length; i++){
		let newArr = [];
		newArr.push(data[i].lng)
		newArr.push(data[i].lat)
		arr.push(newArr)
	}
	return arr;
},


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

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

相关文章

win10添加右键菜单打开VSCode

当进入一个文件夹后&#xff0c;想右键直接打开我的工程&#xff0c;用发现没有vscode项。 我了方便&#xff0c;把 VSCode添加到右键菜单吧。 1. 在桌面新建一个txt文档&#xff0c;用文本编辑器打开 2. 查看vscode所在位置 在桌面找到vscode快捷键图标&#xff0c;右键--&g…

2023年考PMP真的有用吗?含备考资料分享~

对于项目管理者来说&#xff0c;是真的有用&#xff0c;前提是你真的学进去了&#xff0c;是为了学习而考&#xff0c;而不是为了考证而考&#xff0c;考试的作用不是为了让你得到证书&#xff0c;而是考校你的水平&#xff0c;知识是知识&#xff0c;经验是经验&#xff0c;缺…

【浅学Java】MySQL索引七连炮

MySQL索引面试七连炮0. 谈一下你对索引的理解1. MySQL索引原理和数据结构能介绍一下吗2. B树和B树的区别3. MySQL聚簇索引和非聚簇索引的区别4. 使用MySQL索引都有什么原则4.1 回表4.2 索引覆盖4.3 最左匹配4.4 索引下推5. 不同的存储引擎是如何进行数据的存储的6. MySQL组合索…

根据文件内容批量更改文件名称

注意的问题&#xff1a; ★★★待处理的文件顺序要与excel中新的文件名称顺序一致&#xff0c;我直接复制文件地址到excel中顺序与原来顺序不一样&#xff0c;也不能通过排序得到原来的顺序&#xff0c;这里给出一种解决办法&#xff0c;具体步骤见2数据预处理阶段。 1. 这是我…

最新版本OpenAI怎么调试--用Postman调试最新版OpenAI-API

动动小手指&#xff0c;去到openai的API介绍页面。 https://platform.openai.com/docs/api-reference/models 通过官网的提示&#xff0c;可以copy对应的调试命令进行测试。 本文主要通过curl命令实现。 打开Postman&#xff0c;对&#xff0c;就是那个测试接口用的postman ​…

浙江首场千人大会现场爆满!实在智能九哥专题演讲:企业数字化转型,从实在RPA开始!

为帮助众多电商商家探索数字时代下新赛道、新趋势、新方向&#xff0c;制定有目标、有节奏的全年生意规划&#xff0c;“未来电商高峰论坛暨电商生态赋能大会”于3月4日在杭州正式拉开序幕。本次大会旨在向品牌电商企业主、运营操盘手分享数字电商时代的黄金趋势及运营策略&…

【C++】30h速成C++从入门到精通(继承)

继承的概念及定义继承的概念继承&#xff08;inheritance&#xff09;机制是面向对象程序设计使代码可以复用的重要手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承呈现了面向对象程序…

数据结构——链表OJ题目讲解(1)

作者&#xff1a;几冬雪来 时间&#xff1a;2023年3月7日 内容&#xff1a;数据结构链表OJ题目讲解 题目来源&#xff1a;力扣和牛客 目录 前言&#xff1a; 刷题&#xff1a; 1.移出链表元素&#xff1a; 2.链表的中间结点&#xff1a; 3. 链表中倒数第k个结点&#xff1…

第六届省赛——8移动距离(总结规律)

题目&#xff1a;X星球居民小区的楼房全是一样的&#xff0c;并且按矩阵样式排列。其楼房的编号为1,2,3...当排满一行时&#xff0c;从下一行相邻的楼往反方向排号。比如&#xff1a;当小区排号宽度为6时&#xff0c;开始情形如下&#xff1a;1 2 3 4 5 612 11 10 9 8 713 14 1…

【论文简述】MVSTER: Epipolar Transformer for EfficientMulti-View Stereo(ECCV 2022)

一、论文简述 1. 第一作者&#xff1a;Xiaofeng Wang 2. 发表年份&#xff1a;2022 3. 发表期刊&#xff1a;ECCV 4. 关键词&#xff1a;MVS、3D重建、Transformer、极线几何 5. 探索动机&#xff1a;融合多视图代价体很关键&#xff0c;现有的方法效率低&#xff0c;引入…

【Git】P2 分支(创建分支,合并分支,分支冲突,分支分类)

分支分支的概念2077 与 分支git - 分支分支语句查看与创建分支切换与删除分支合并分支分支冲突分支分类分支的概念 什么是分支&#xff1f; 2077 与 分支 我最喜欢的游戏就是 赛博朋克2077&#xff0c;美国末日 和 GTA&#xff0c;下图是2077的存档。 存档非常多的原因是因为…

JavaScript 语句、注释和代码块实例集合

文章目录JavaScript 语句、注释和代码块实例集合JavaScript 语句JavaScript 代码块JavaScript 单行注释JavaScript 多行注释使用单行注释来防止执行使用多行注释来防止执行JavaScript 语句、注释和代码块实例集合 JavaScript 语句 源码 <!DOCTYPE html> <html> &…

Springboot 读取模板excel信息内容并发送邮件, 并不是你想想中的那么简单

Springboot 读取模板excel信息内容并发送邮件 背景技术选型搭建过程数据加密隐藏问题暴露背景追溯解决背景 在我们日常开发中, 会遇到这样一种场景, 就是读取表格中的数据, 并将数据以附件的形式通过邮箱发送到表格中的每个人 即: excel 读取 excel 写入 发送邮件(携带附件), 例…

Volsdf Sampling algorithm

l论文作者开发一个算法计算抽样S方程中使用 I(c,v)≈I^S(c,v)∑i1m−1τ^iLiI(\boldsymbol{c}, \boldsymbol{v}) \approx \hat{I}_{\mathcal{S}}(\boldsymbol{c}, \boldsymbol{v})\sum_{i1}^{m-1} \hat{\tau}_{i} L_{i} I(c,v)≈I^S​(c,v)i1∑m−1​τ^i​Li​ 首先是通过利用…

小区业主入户安检小程序开发

小区业主入户安检小程序开发 可针对不同行业自定义安检项目&#xff0c;线下安检&#xff0c;线上留存&#xff08;安检拍照/录像&#xff09;&#xff0c;提高安检人员安检效率 功能特性&#xff0c;为你介绍小区入户安检系统的功能特性。 小区管理;后台可添加需要安检的小区…

LeetCode-96. 不同的二叉搜索树

题目来源 96. 不同的二叉搜索树 递归 1.我们要知道二叉搜索树的性质&#xff0c;对于一个二叉搜索树&#xff0c;其 【左边的节点值 < 中间的节点值 < 右边的节点值】&#xff0c;也就是说&#xff0c;对于一个二叉搜索树&#xff0c;其中序遍历之后形成的数组应该是一…

分布式系统中的补偿机制设计问题

我们知道&#xff0c;应用系统在分布式的情况下&#xff0c;在通信时会有着一个显著的问题&#xff0c;即一个业务流程往往需要组合一组服务&#xff0c;且单单一次通信可能会经过 DNS 服务&#xff0c;网卡、交换机、路由器、负载均衡等设备&#xff0c;而这些服务于设备都不一…

C++:初识函数模板和类模板

目录 一. 泛型编程 二. 函数模板 2.1 什么是函数模板 2.2 函数模板的实例化 2.2.1 函数模板的隐式实例化 2.2.1 函数模板的显示实例化 2.3 函数模板实例化的原理 2.4 模板函数调用实例化原则 三. 类模板 3.1 什么是类模板 3.2 类模板的实例化 一. 泛型编程 泛型编程…

Qt广告机客户端(下位机)

目录功能结构adClient.promain.cppadclient.h 客户端adclient.cpp 客户端addate.h 时间处理addate.cpp 时间处理adsocket.h 客户端Socket处理adsocket.cpp 客户端Socket处理weather.h 天气信息处理weather.cpp 天气信息处理rollmassege.h 滚动信息处理rollmassege.cpp 滚动信息…

DCC数字管护生命周期模型解读

实话说&#xff0c;对于Digital Curation笔者真心不知道应该怎么翻译。本文借用了钱毅老师的观点&#xff0c;姑且翻译成“数字管护”&#xff0c;详见《从保护到管护&#xff1a;对象变迁视角下的档案保管思想演变》&#xff08;《档案学通讯》&#xff0c;2022年第2期&#x…