vue3使用Mars3D写区块地图

这篇具有很好参考价值的文章主要介绍了vue3使用Mars3D写区块地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图

mars3d图层下钻,vue3,mars3D

引入相关文件

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

源文件

下载地址:
http://mars3d.cn/download.html
mars3d图层下钻,vue3,mars3D
放入位置
mars3d图层下钻,vue3,mars3D
在index.html中引入
mars3d图层下钻,vue3,mars3D

	<!--引入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  

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

大体布局
父组件

mars3d图层下钻,vue3,mars3D
mars3d图层下钻,vue3,mars3D
mars3d图层下钻,vue3,mars3D
添加地图内部数据和地图外部数据的方法 ,我都是放在上图的moreMethod()方法中一起调用的
mars3d图层下钻,vue3,mars3D
mars3d图层下钻,vue3,mars3D

子组件

mars3d图层下钻,vue3,mars3D文章来源地址https://www.toymoban.com/news/detail-807278.html

// 这个是初始化地图的视角等一些基本配置
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
});

到了这里,关于vue3使用Mars3D写区块地图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 + vite + ts 集成mars3d

    使用mars3d过程中,需要集成mars3d到自己的项目中,mars3d开发教程中已经有集成好的项目模板 http://mars3d.cn/doc.html 项目模板gitte地址:https://gitee.com/marsgis/mars3d-vue-template/tree/master/mars3d-vue3-vite 如果不想用官方的模板就需要自己集成 如何创建项目参考网上的教程,这里就不做详细

    2024年02月06日
    浏览(45)
  • Mars3D手把手开发教程(vue3)

    Mars3D三维可视化平台  是火星科技 (opens new window)研发的一款基于 WebGL 技术实现的三维客户端开发平台,基于Cesium (opens new window)优化提升与B/S架构设计,支持多行业扩展的轻量级高效能GIS开发平台,能够免安装、无插件地在浏览器中高效运行,并可快速接入与使用多种GIS数

    2024年04月15日
    浏览(81)
  • Vue3项目中集成mars3D简单三部曲

    这里是参考网址,大佬可以点击一件跳转 1.安装依赖 2.修改 vite.config.ts 配置文件 3. 新建DIV容器 + 创建地图 新建map.ts文件,以下代码闭眼直接copy vue文件引入map.ts,以下代码闭眼直接copy 快去试试吧~

    2024年01月25日
    浏览(34)
  • Vue2项目使用mars3d

    或参考webpack.config.js写法进行修改

    2024年02月14日
    浏览(44)
  • mars3d显示地图,并且完成切换地图图层的功能,使用隐藏显示去控制图层

    如何安装mars3d请看这个链接哈! 我用的是vue3 先引入mars3d 创建地图的变量 在template中定义div,并且id名为cesiumBox(可以自定义) 在 onMounted 中使用 切换地图图层的实例 在上面的实例继续添加下面代码 show为false的话是图层隐藏掉 天地图的api链接在底部 接着在 template 添加此代码

    2024年02月12日
    浏览(48)
  • 【mars3d】Vue3项目集成mard3d实现gis空间地理系统

    最近公司的业务逻辑需要使用到gis空间地理系统,最开始使用的是Cesium.js.涉及东西很多,对新手不是太友好,传送门: https://cesium.com/platform/cesiumjs/ . 业务要使用到很多特效,刚接触到Cesium,很多效果实现起来很鸡肋,mars3d则很适合新手.文档与示例也很全,现在记录一下vue3项目如何集

    2024年02月13日
    浏览(45)
  • 通过Mars3d在地图上加载风力发电机车模型

    首先理清需求,通过Mars3d的基础项目,在基础项目模板上添加一个风力发电机模型。 Mars3d官网的基础项目下载地址:Mars3D三维可视化平台 | 火星科技 gitee地址: git clone https://gitee.com/marsgis/mars3d-vue-project.git 下载一份基础项目模板到本地后,参考README.md正常打开运行即可 其次

    2024年02月01日
    浏览(51)
  • Mars3D使用教程

    1、使用npm安装依赖库 //安装mars3d主库 ​ //安装mars3d插件(按需安装) ​ //安装copy-webpack-plugin 插件在第3步中使用,根据webpack版本安装,不匹配的版本可能出错,版本需要5.0 “copy-webpack-plugin”: “^5.0.0”, 2.在main.js全局导入 或者 在使用mars3d的文件中导入(这一步可以跳过,

    2024年02月02日
    浏览(49)
  • vue集成mars3d后,basemaps加不上去

    首先: template   div id=\\\"centerDiv\\\" class=\\\"mapcontainer\\\"     mars-map :url=\\\"configUrl\\\" @οnlοad=\\\"onMapload\\\" /   /div /template script import MarsMap from \\\'../components/mars-work/mars-map.vue\\\' import * as mars3d from \\\'mars3d\\\' //npm install mars3d-echarts --save import \\\'mars3d-echarts\\\' const Cesium = mars3d.Cesium export default {   // eslint-disabl

    2024年02月10日
    浏览(38)
  • Mars3D Studio 的使用方法

    mars3d Studio 是 mars3d 研发团队于近期研发上线的一款 场景可视化编辑平台。拥有资源存档、团队协作、定制材质等丰富的功能。可以实现零代码构建一个可视化三维场景。 (1)数据上传:目前支持 tif 影像上传、 3dtitles 、 gltf 小模型上传以及矢量数据( shp、gesojson、kml ) 下

    2023年04月16日
    浏览(101)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包