vue3使用Mars3D写区块地图

news2024/11/24 18:54:05

效果图

在这里插入图片描述

引入相关文件

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

源文件

下载地址：
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
});

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

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

相关文章

互联网加竞赛 opencv 图像识别 指纹识别 - python

互联网加竞赛 opencv 图像识别 指纹识别 - python

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于机器视觉的指纹识别系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&#xff0c;适…
阅读更多...
【Docker】从零开始：18.使用Dockerfile构造自己的KingbaseES数据库镜像

【Docker】从零开始：18.使用Dockerfile构造自己的KingbaseES数据库镜像

【Docker】从零开始&#xff1a;17.使用Dockerfile构造自己的数据库镜像 新建一个自定义目录并创建Dockerfile文件上传需要的文件到自定义目录下注意docker-circle-init.sh文件内容password 内容 开始打包注意打包完成后执行 尝试用工具连接数据库 kingbase.tar.gz 包过大我就上…
阅读更多...
阻抗控制实现更快更精准（跟踪精度，较小且稳定的接触力）

阻抗控制实现更快更精准（跟踪精度，较小且稳定的接触力）

阻抗控制是一种模拟人类肌肉阻抗特性的控制方法&#xff0c;可以实现更快更精准的机器人运动控制&#xff0c;同时具有较小的接触力和稳定的跟踪精度。 Kd 10; Bd 5 ; Md 2; 1e5/(0.0005*s^25*s1) 5e4/(0.1*s^21*s1) 1e4/(0.1*s^21*s1) 增益较小时容易跟踪性能不足&#xf…
阅读更多...
机房末端配电中机柜PDU是如何工作的？

机房末端配电中机柜PDU是如何工作的？

鉴于IDC数据中心7*24小时的运营要求以及对电源效率的日益关注&#xff0c;机柜PDU&#xff08;Power Distribution Unit&#xff0c;电源分配单元&#xff09;已成为数据中心基础设施的重要组成部分。在很多初次接触机柜PDU的人看来&#xff0c;其作用看上去类似于简单的插线板…
阅读更多...
用心研发好产品：健康品牌podeey是如何做到的？

用心研发好产品：健康品牌podeey是如何做到的？

在分析消费者健康需求的同时&#xff0c;美国podeey能量生命有限公司&#xff08;PODEEY Biotechnology LLC.&#xff09;不断提升自主研发实力&#xff0c;并且一直注重汇集全球前沿的研发力量&#xff0c;与贵州宏臻菌业达成战略合作&#xff0c;始终致力于以科学技术为核心&…
阅读更多...
微信小程序js数组对象根据某个字段排序

微信小程序js数组对象根据某个字段排序

一、排序栗子 注: 属性字段需要进行转换,如String类型或者Number类型 //升序排序 首元素(element1)在前 降序则(element1)元素在后 data data.sort((element1, element2) >element1.属性 - element2.属性 ); 二、代码 Page({/*** 页面的初始数据*/data: {user:…
阅读更多...
Axure RP 9 入门教程

Axure RP 9 入门教程

1. Axure简介 Axure 是一个交互式原型设计工具&#xff0c;可以帮助用户创建复杂的交互式应用程序和网站。Axure 能够让用户快速构建出具有高度可交互性的原型&#xff0c;可以在团队中进行协作、分享和测试。 使用 Axure 可以设计出各种不同类型的原型&#xff0c;包括网站、移…
阅读更多...
windows下安装git中文版客户端

windows下安装git中文版客户端

下载git Windows客户端 git客户端下载地址&#xff1a;Git - Downloads 我这里下载的是Git-2.14.0-64-bit.exe版本 下载TortoiseGit TortoiseGit客户端下载地址&#xff1a;Download – TortoiseGit – Windows Shell Interface to Git TortoiseGit客户端要下载两个&#…
阅读更多...
C++学习笔记（十一）------has_a和use_a关系

C++学习笔记（十一）------has_a和use_a关系

文章目录 前言 一、has_a关系 1.1 has_a概念 1.2 has_a中构造和析构的顺序 1.3 has_a对象的内存情况 二、use_a关系&#xff08;友元关系&#xff09; 1.友元函数&#xff1a; 2.友元类 3 使用多文件编程的方式重新编辑上述代码 总结 前言 随着技术的革新&#xff0c;出现各种各…
阅读更多...
三种方法：教你选择腾讯云服务器配置及报价

三种方法：教你选择腾讯云服务器配置及报价

腾讯云服务器购买流程直接在官方秒杀活动上购买比较划算&#xff0c;在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵&#xff0c;但是自定义购买云服务器CPU内存带宽配置选择范围广&#xff0c;活动上购买只能选择固定的活动机&#xff0c;选择范围窄&#xff0c;但是…
阅读更多...
MQ-Det: Multi-modal Queried Object Detection in the Wild

MQ-Det: Multi-modal Queried Object Detection in the Wild

首个支持视觉和文本查询的开放集目标检测方法 NeurIPS2023 文章&#xff1a;https://arxiv.org/abs/2305.18980 代码&#xff1a;https://github.com/YifanXu74/MQ-Det 主框图 摘要 这篇文章提出了MQ-Det&#xff0c;一种高效的架构和预训练策略&#xff0c;它利用文本描述的…
阅读更多...
IDEA调整内存大小

IDEA调整内存大小

一、IDEA开启内存显示 双击shift,搜索show memory indicator 打开后重启&#xff0c;右下角显示IDEA内存占用情况 开启后右下角会显示 二、调整内存 双击shift,搜索vmoption 修改-Xms和-Xmx参数&#xff0c;如下&#xff1a; -Xms:最小内存 -Xmx:最大内存 设置完成后&…
阅读更多...
HTTP协议在Linux上进行数据库访问代码示例

HTTP协议在Linux上进行数据库访问代码示例

在Linux上使用HTTP协议进行数据库访问通常涉及到使用库如requests来进行HTTP请求&#xff0c;以及使用json或类似的库来处理返回的数据。下面是一个使用Python的简单示例&#xff0c;展示如何通过HTTP协议在Linux上访问数据库。 首先&#xff0c;你需要确保你的Linux系统上已经…
阅读更多...
【flink番外篇】3、fflink的source（内置、mysql、kafka、redis、clickhouse）介绍及示例（2）- 自定义、mysql

【flink番外篇】3、fflink的source（内置、mysql、kafka、redis、clickhouse）介绍及示例（2）- 自定义、mysql

Flink 系列文章 一、Flink 专栏 Flink 专栏系统介绍某一知识点&#xff0c;并辅以具体的示例进行说明。 1、Flink 部署系列 本部分介绍Flink的部署、配置相关基础内容。 2、Flink基础系列 本部分介绍Flink 的基础部分&#xff0c;比如术语、架构、编程模型、编程指南、基本的…
阅读更多...
图解Redis，谈谈Redis的持久化，RDB快照与AOF日志

图解Redis，谈谈Redis的持久化，RDB快照与AOF日志

目录 专栏导读一、RDB持久化1、自动触发2、手动触发3、设置保存条件4、加解密5、RDB持久化优缺点6、哪些情况会触发RDB持久化？二、AOF持久化1、AOF持久化过程2、appendfsync的选项值3、AOF持久化优缺点4、数据恢复顺序和加载流程三、Redis事务</
阅读更多...
Leetcode—2962.统计最大元素出现至少 K 次的子数组【中等】

Leetcode—2962.统计最大元素出现至少 K 次的子数组【中等】

2023每日刷题&#xff08;五十六&#xff09; Leetcode—2962.统计最大元素出现至少 K 次的子数组 滑动窗口算法思想 参考的灵神思路 实现代码 class Solution { public:long long countSubarrays(vector<int>& nums, int k) {int n nums.size();long long ans…
阅读更多...
深度学习 Day12——P1实现mnist手写数字识别

深度学习 Day12——P1实现mnist手写数字识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 文章目录 前言1 我的环境2 代码实现与执行结果2.1 前期准备2.1.1 引入库2.1.2 设置GPU&#xff08;如果设备上支持GPU就使用GPU,否则使用C…
阅读更多...
【计算机网络】URL概念及组成

【计算机网络】URL概念及组成

目录 一、什么是URL 二、URL格式 示例&#xff1a; 1. Scheme&#xff08;协议&#xff09;&#xff1a; 2. Host&#xff08;主机&#xff09;&#xff1a; 3. Port&#xff08;端口&#xff09;&#xff1a; 4. Path&#xff08;路径&#xff09;&#xff1a; 5. Quer…
阅读更多...
容器化升级对服务有哪些影响？

容器化升级对服务有哪些影响？

容器技术是近几年计算机领域的热门技术&#xff0c;特别是随着各种云服务的发展&#xff0c;越来越多的服务运行在以 Docker 为代表的容器之内。 本文我们就来分享一下容器化技术相关的知识。 容器化技术简介 相比传统虚拟化技术&#xff0c;容器技术是一种更加轻量级的操作…
阅读更多...
如何使用玻璃材质制作3D钻石模型

如何使用玻璃材质制作3D钻石模型

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023