vue3使用Mars3D写区块地图

效果图

在这里插入图片描述

引入相关文件

因为我也是第一次使用，所以我是把插件和源文件都引入了，能使用启动

源文件

下载地址：
http://mars3d.cn/download.html
在这里插入图片描述
放入位置
在这里插入图片描述
在index.html中引入
在这里插入图片描述

	<!--引入cesium基础lib-->
		<link href="/static/Cesium/Widgets/widgets.css" rel="stylesheet" />
		<script src="/static/Cesium/Cesium.js" type="text/javascript"></script>
		<!--引入mars3d库lib-->
		<link href="/static/mars3d-JS/mars3d.css" rel="stylesheet" />
		<script src="/static/mars3d-JS/mars3d.js" type="text/javascript"></script>
引入插件
npm install mars3d --save
在main.ts里面，加上即可

在这里插入图片描述

我是封装的组件，代码的使用和意义 我直接放在备注中

大体布局
父组件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
添加地图内部数据和地图外部数据的方法 ，我都是放在上图的moreMethod()方法中一起调用的
在这里插入图片描述
在这里插入图片描述

子组件

在这里插入图片描述

// 这个是初始化地图的视角等一些基本配置
const mapOptions = {
	scene: {
		center: { lat: 26.803502, lng: 104.706942, alt: 303223.8, heading: 357.36, pitch: -57.36, roll: 0.01 }, //alt 高度值  heading 方向角 pitch俯仰角 roll 翻滚角
		orderIndependentTranslucency: false,
		contextOptions: { webgl: { alpha: true } }, // 允许透明，只能Map初始化传入 [关键代码]
		showSun: false,
		showMoon: false,
		showSkyBox: false,
		showSkyAtmosphere: false,
		fog: false,
		globe: {
			baseColor: "rgba(0,0,0,0)", // 地球地面背景色
			showGroundAtmosphere: false,
			enableLighting: false
		}
	},
	control: {
		baseLayerPicker: false
	},
	terrain: { show: false },
	layers: [],
	basemaps: []
	// basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }]
};
const map = ref(null);
//初始地图
const initMap = () => {
	return new Promise(resolve => {
	// mars3dContainer对应的是div上面的id，mapOptions就是上面写的配置
		map.value = new mars3d.Map("mars3dContainer", mapOptions);
		//添加背景图
		// map.value.container.style.backgroundImage = `url(${getImageUrl("bg")})`;
		map.value.container.style.backgroundRepeat = "no-repeat";
		map.value.container.style.backgroundSize = "100% 100%";
		resolve(map.value);
	});
};
// 这个是地图对应的底图
const baseMap = levelCode => {
	// 因为功能存在底图下钻和返回，所以当地图下钻或返回上一层级的时候
	//需要判断这个图层是否存在，存在就删除之前的图层，然后渲染信的图层页面
	if (map.value.getLayerById("tileBaseLayer")) {
		map.value.removeLayer(map.value.getLayerById("tileBaseLayer"));
	}
	const tileLayer = new mars3d.layer.XyzLayer({
		id: "tileBaseLayer",
		crs: "EPSG:4326",
		// 这个是写底图的来源，因为我项目是封装了底图的 所以你可以更换成你想要的其他的底图
		url: baseMapLayer[levelCode] // rectangle: { xmin: 114.883371, xmax: 119.649144, ymin: 29.395253, ymax: 34.650809 }
	});
	map.value.addLayer(tileLayer);
};
// 添加地图和内边界线 val--地图的数据  level--地图的层级  map--就是我父组件定义的map
const addYibin = (val, level, map) => {
	// 各市边界线和名称--先清除再添加
	if (map.getLayerById("childLineLayer")) {
		map.removeLayer(map.getLayerById("childLineLayer"));
	}
	//各子级标签--先清除再添加
	if (map.getLayerById("tipYibinGraphicLayer")) {
		map.removeLayer(map.getLayerById("tipYibinGraphicLayer"));
	}
	const childLineLayer = new mars3d.layer.GeoJsonLayer({
		id: "childLineLayer",
		name: "各子级边界线",
		// url: `//data.mars3d.cn/file/geojson/areas/${level}_full.json`,
		// 传递数据 包含子集
		data: val,
		symbol: {
			type: "polyline",
			styleOptions: {
				color: "#a4b094",
				width: 1
			}
		}
	});
	map.addLayer(childLineLayer);

	let tipYibinGraphicLayer = new mars3d.layer.GraphicLayer();
	tipYibinGraphicLayer.id = "tipYibinGraphicLayer";
	map.addLayer(tipYibinGraphicLayer);
	tipYibinGraphicLayer.on(mars3d.EventType.click, event => {
		const attr = event.graphic?.attr;
		if (attr) {
		}
	});
	// 标记
	let geojson = val;
	const arr = geojson.features;
	tipYibinGraphicLayer.clear();
	for (let index = 0; index < arr.length; index++) {
		const element = arr[index];
		const attr = element.properties; // 属性信息
		// 这个是定义标签的样式，html里面的内容可以自定义
		const divGraphic = new mars3d.graphic.DivGraphic({
			position: [attr.smx, attr.smy],
			style: {
				html: `<div class="tipbox">
					    <div class="tipboxTitle">
							<div class="titleChild">
								<p title='${attr.name}'>${attr.name}</p>
								<img code="${attr.adcode}-${attr.name}" src="${getImageUrl("next_icon")}" id=nextIcon_${index} class="nextIcon"></img>
								<img code="${attr.adcode}-${attr.name}" src="${getImageUrl("up-icon")}" id=upIcon_${index} class="upIcon" style="display:${
					level == -1 ? "none" : "block"
				}"></img>
							</div>

						</div>
						<img src="${getImageUrl("tip_bottom")}"  class="tipboxImage"></img>
					</div>`,
				horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
				verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
				clampToGround: true
			},
			attr
		});
		tipYibinGraphicLayer.addGraphic(divGraphic);
	}
	//上下钻事件
	let nextIconArr = document.getElementsByClassName("nextIcon");
	let upIconArr = document.getElementsByClassName("upIcon");

	for (let i = 0; i < nextIconArr.length; i++) {
		const item = nextIconArr[i];
		item.addEventListener("click", async (e: any) => {
			if (map.getLayerById("yibinWall")) {
				map.removeLayer(map.getLayerById("yibinWall"));
			}
			if (map.getLayerById("childLineLayer")) {
				map.removeLayer(map.getLayerById("childLineLayer"));
			}
			if (map.getLayerById("tipYibinGraphicLayer")) {
				map.removeLayer(map.getLayerById("tipYibinGraphicLayer"));
			}

			let attributesCode = e.target.attributes[0].value;

			let req = {
				parentCode: attributesCode.split("-")[0],
				name: attributesCode.split("-")[1]
			};

			emit("nextLevelFun", req);
		});
	}

	for (let i = 0; i < upIconArr.length; i++) {
		const item = upIconArr[i];
		item.addEventListener("click", async (e: any) => {
			if (map.getLayerById("yibinWall")) {
				map.removeLayer(map.getLayerById("yibinWall"));
			}
			if (map.getLayerById("childLineLayer")) {
				map.removeLayer(map.getLayerById("childLineLayer"));
			}
			if (map.getLayerById("tipYibinGraphicLayer")) {
				map.removeLayer(map.getLayerById("tipYibinGraphicLayer"));
			}
			let attributesCode = e.target.attributes[0].value;
			let req = {
				parentCode: attributesCode.split("-")[0],
				name: attributesCode.split("-")[1]
			};
			emit("uptLevelFun", req);
		});
	}
	// });
};
// 外边界
const addBorderYibin = (valBorder, map, level) => {
	// 宜宾边界线墙--先清除再添加
	if (map.getLayerById("yibinWall")) {
		map.removeLayer(map.getLayerById("yibinWall"));
	}

	const yibinWall = new mars3d.layer.GeoJsonLayer({
		id: "yibinWall",
		name: "宜宾边界墙",
		// 边界线传值-仅自己
		data: valBorder,
		// 自定义解析数据
		onCreateGraphic: function (options) {
			const points = options.positions; // 坐标
			const attr = options.attr; // 属性信息
			mars3d.PolyUtil.computeSurfaceLine({
				map: map,
				positions: points,
				has3dtiles: false,
				splitNum: 80
			}).then(result => {
				const graphic = new mars3d.graphic.WallPrimitive({
					positions: result.positions,
					style: {
						addHeight: level == 1 ? -3000 : -15000,
						diffHeight: level == 1 ? 3000 : 15000, // 墙高
						materialType: mars3d.MaterialType.Image2,
						materialOptions: {
							image: getImageUrl("fence-top"),
							color: "rgba(76,215,222,0.5)"
						}
					},
					attr
				});
				yibinWall.addGraphic(graphic);
				yibinWall.flyTo({
					scale: 1.5
				});
			});
		}
	});
	map.addLayer(yibinWall);
	// map.on(mars3d.EventType.renderError, function () {
	// 	window.location.reload();
	// });
};
defineExpose({
	initMap,
	addYibin,
	baseMap,
	addBorderYibin,
	map
});

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Stable diffusion 简介

Stable diffusion 简介

Stable diffusion 是 CompVis、Stability AI、LAION、Runway 等公司研发的一个文生图模型&#xff0c;将 AI 图像生成提高到了全新高度&#xff0c;其效果和影响不亚于 Open AI 发布 ChatGPT。Stable diffusion 没有单独发布论文&#xff0c;而是基于 CVPR 2022 Oral —— 潜扩…
阅读更多...
爆肝整理，Java接口自动化测试实战-rest-assured（详细总结）

爆肝整理，Java接口自动化测试实战-rest-assured（详细总结）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、关于rest-assu…
阅读更多...
聊个开心的敏捷话题——40小时工作制

聊个开心的敏捷话题——40小时工作制

近年来&#xff0c;加班现象在很多行业已经普遍制度化&#xff0c;甚至“996”已成为一些行业标签。企业高强度的压榨让员工不堪重负&#xff0c;且时常由此引发的各种悲剧也并不鲜见。 所以&#xff0c;今天我们一起来聊一个开心轻松的话题——极限编程的40h工作制原则。 40…
阅读更多...
本科毕业论文查重率高吗【一文读懂】

本科毕业论文查重率高吗【一文读懂】

大家好&#xff0c;今天来聊聊本科毕业论文查重率高吗&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 本科毕业论文查重率高吗&#xff1f;重要性与应对策略 摘要&#xff1a;对于本科毕业生来说&#…
阅读更多...
PyQt6 QDateEdit日期控件

PyQt6 QDateEdit日期控件

​锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计39条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话…
阅读更多...
java--正则表达式书写规则

java--正则表达式书写规则

1.正在表达式 ①就是由一些特定的字符组成&#xff0c;代表的是一个规则。 ②作用一&#xff1a;用来校验数据格式是否合法。 ③作用二&#xff1a;在一段文本中查找满足要求的内容 2.String提供了一个匹配正则表达式的方法 3.正则表达式的书写规则
阅读更多...
Uniapp安卓原生插件开发Demo

Uniapp安卓原生插件开发Demo

文章目录 前言一、安装开发工具二、导入uni插件原生项目三、开发Module四、开发Component五、合并原生代码到uniapp项目中总结 前言 当HBuilderX中提供的能力无法满足App功能需求&#xff0c;需要通过使用Andorid/iOS原生开发实现时&#xff0c;可使用App离线SDK开发原生插件来…
阅读更多...
第二十一章，网络通信

第二十一章，网络通信

网络协议 IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。Internet 网络采用的协议是TCP/IP协议&#xff0c;其全称是Transmission Control Protocol/Internet Protocol。Internet 依靠TCP/IP协议&#xff0c;在全球范围内实现了不同硬件结构、不同操作系统…
阅读更多...
排序算法之三：希尔排序

排序算法之三：希尔排序

希尔排序基本思想 希尔排序法又称缩小增量法 希尔排序法的基本思想是&#xff1a;先选定一个整数&#xff0c;把待排序文件中所有记录分成个组&#xff0c;所有距离为的记录分在同一组内&#xff0c;并对每一组内的记录进行排序。然后&#xff0c;取&#xff0c;重复上述分组…
阅读更多...
Vue3+ElementPlus：icon图标不显示（给表格字段里添加图标）

Vue3+ElementPlus：icon图标不显示（给表格字段里添加图标）

一、背景 在Vue3项目中&#xff0c;想在表格的字段中引入图标因为给字段做了触发提示&#xff0c;希望用户能够注意到这个功能&#xff0c;因此想加个图标提示一下用户&#xff0c;效果如下&#xff1a; 触发提示效果如下&#xff1a; &#xff08;样式这里就不进行优化了&am…
阅读更多...
【VS Code开发】使用Live Server搭建MENJA小游戏并发布至公网远程访问

【VS Code开发】使用Live Server搭建MENJA小游戏并发布至公网远程访问

文章目录 前言1. 编写MENJA小游戏2. 安装cpolar内网穿透3. 配置MENJA小游戏公网访问地址4. 实现公网访问MENJA小游戏5. 固定MENJA小游戏公网地址 前言 本篇教程&#xff0c;我们将通过VS Code实现远程开发MENJA小游戏&#xff0c;并通过cpolar内网穿透发布到公网&#xff0c;分…
阅读更多...
【nodejs升级版本】win10 nodejs版本低升级版本流程

【nodejs升级版本】win10 nodejs版本低升级版本流程

首先 网上说的n模块不支持window系统&#xff01;&#xff01;&#xff01; window系统升级node只能到node官网下载window安装包来覆盖之前的node 升级步骤如下&#xff1a; 1&#xff0c;找到你node的安装路径&#xff0c;不知道的可以cmd命令行中输入这个命令就可以看到了…
阅读更多...
Python：核心知识点整理大全13-笔记

Python：核心知识点整理大全13-笔记

目录 6.4.3 在字典中存储字典 6.5 小结 第7章 用户输入和while循环 7.1 函数 input()的工作原理 7.1.1 编写清晰的程序 7.1.2 使用 int()来获取数值输入 7.1.3 求模运算符 7.1.4 在 Python 2.7 中获取输入 7.2 while 循环简介 7.2.1 使用 while 循环 往期快速传送门…
阅读更多...
jsonpath:使用Python处理JSON数据

jsonpath:使用Python处理JSON数据

使用Python处理JSON数据 25.1 JSON简介 25.1.1 什么是JSON JSON全称为JavaScript Object Notation&#xff0c;一般翻译为JS标记&#xff0c;是一种轻量级的数据交换格式。是基于ECMAScript的一个子集&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清…
阅读更多...
中国教师未来发展趋势

中国教师未来发展趋势

随着科技的进步和社会的发展&#xff0c;教师的发展趋势尤其引人关注。那么&#xff0c;教师未来的发展趋势又将是什么呢&#xff1f;” 引领未来的教育变革 在快速发展的信息化社会&#xff0c;教育行业正经历着前所未有的变革。中国教师将扮演着引领这场变革的重要角色。未来…
阅读更多...
教培管理系统源码 培训管理系统源码

教培管理系统源码 培训管理系统源码

教培管理系统源码 培训管理系统源码 使用教培管理系统可以带来哪些好处&#xff1a; 1. 提高管理效率&#xff1a;教培管理系统可以自动化处理许多管理任务&#xff0c;如学生信息管理、课程管理、成绩管理等&#xff0c;从而减少人工干预&#xff0c;提高管理效率。 2. 提…
阅读更多...
Nodejs后端+express框架

Nodejs后端+express框架

前言 基于vue3Node后台管理项目&#xff0c;补充nodejs和express相关知识。 文章目录 一&#xff0c;express 1.官网 Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 2.安装 npm install express --save 二、MongoDB 特点 非关…
阅读更多...
3D摄影棚布光：Set A Light 3D Studio

3D摄影棚布光：Set A Light 3D Studio

Set A Light 3D Studio是一款专业的灯光模拟软件&#xff0c;旨在帮助摄影师和电影制片人在电脑上进行虚拟灯光布置和场景模拟&#xff0c;以实现更加精准和高质量的拍摄效果。该软件提供了丰富的灯光和场景模型&#xff0c;支持灵活调整光源位置、强度、颜色和效果等参数&…
阅读更多...
stm32学习：stm32f103c8t6+STM32CubeMX+st-link烧录+亮灯

stm32学习：stm32f103c8t6+STM32CubeMX+st-link烧录+亮灯

准备材料&#xff1a; stm32f103c8t6开发板st-link烧录器安装stm32cubemx(官网下载就行)安装keil5&#xff08;找找网上有很多破解软件&#xff0c;下载后破解&#xff09;安装st-link驱动&#xff08;下载入口STSW-LINK009 - 为Windows 7、Windows 8、Windows 10签署的ST-LIN…
阅读更多...
基于深度学习的yolov7植物病虫害识别及防治系统

基于深度学习的yolov7植物病虫害识别及防治系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介简介YOLOv7 系统特性工作流程 二、功能三、系统四. 总结 一项目简介 # YOLOv7植物病虫害识别及防治系统介绍 简介 该系统基于深度学习技术&#xff0c;采…
阅读更多...
最新文章

Copyright @ 2022~2023