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
});

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

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

相关文章

Kubernetes 容器编排 -- 1

前言 知识扩展 早在 2015 年 5 月&#xff0c;Kubernetes 在 Google 上的搜索热度就已经超过了 Mesos 和 Docker Swarm&#xff0c;从那儿之后更是一路飙升&#xff0c;将对手甩开了十几条街,容器编排引擎领域的三足鼎立时代结束。 目前&#xff0c;AWS、Azure、Google、阿里…

软考科目如何选择?

软考科目繁多&#xff0c;让许多学弟学妹感到困惑&#xff0c;不知道该选择哪个科目。以下是一些建议&#xff0c;可以根据个人实际需求选择备考的科目。 1、初级是可选的 软考初级非常简单&#xff0c;适合刚刚入门学习的朋友报考。对于一些有基础的朋友&#xff0c;建议直接…

【从零开始学习--设计模式--装饰者模式】

返回首页 前言 感谢各位同学的关注与支持&#xff0c;我会一直更新此专题&#xff0c;竭尽所能整理出更为详细的内容分享给大家&#xff0c;但碍于时间及精力有限&#xff0c;代码分享较少&#xff0c;后续会把所有代码示例整理到github&#xff0c;敬请期待。 此章节介绍装…

【vim 学习系列文章 13.1 -- 自动命令autocmd 根据文件类型设置vim参数】

文章目录 autocmd 根据文件类型配置vim参数vim 文本类型 autocmd 根据文件类型配置vim参数 在 Vim 中&#xff0c;你可以使用 autocmd &#xff08;自动命令&#xff09;来根据文件类型自动执行特定的函数。首先&#xff0c;你需要定义这些函数&#xff0c;然后使用 autocmd 与…

java实现局域网内视频投屏播放(二)爬虫

代码链接 视频播放原理 大多视频网站使用的是m3u8&#xff0c;m3u8其实不是一个真正的视频文件&#xff0c;而是一个视频播放列表&#xff08;playlist&#xff09;。它是一种文本文件&#xff0c;里面记录了一系列的视频片段&#xff08;segment&#xff09;的网络地址。这些…

原来定时发朋友圈设置这么简单?看完我也会了

目前微信作为最大的社交平台之一&#xff0c;吸引了众多使用者。你是否听过有些朋友感叹这么多微信号&#xff0c;需要每天手动发布朋友圈&#xff0c;任务很繁琐呢&#xff1f;是否希望可以事先设置好定时发送的功能&#xff0c;让朋友圈自动更新&#xff0c;省去手动发送的麻…

初探栈溢出(下)

0x04 漏洞利用 作为脚本小子&#xff0c;先跑一下写好了的exploit脚本。 打开HackSysEVDExploit.sln文件&#xff0c;直接在vs2019上编译即可。 将生成的HackSysEVDExploit.exe拷贝至win7&#xff0c;执行如下命令 直接可以获取system权限。 那么只跑一下脚本肯定不行&#…

世微 锂电池保护IC DW01 充电器检测过充保护SOT23-6

一、 描述 DW01A 是一个锂电池保护电路&#xff0c;为避免锂电池因过充电、过放电、电流过大导致电池寿命缩短或电池被损坏而设计的。它具有高精确度的电压检测与时间延迟电路。 二、 主要特点 工作电流低 过充检测 4.3V&#xff0c;过充释放 4.05V&#xff1b; 过放检测 2.4…

C 库函数 - ctime()

描述 C 库函数 char *ctime(const time_t *timer) 返回一个表示当地时间的字符串&#xff0c;当地时间是基于参数 timer。 返回的字符串格式如下&#xff1a; Www Mmm dd hh:mm:ss yyyy 其中&#xff0c;Www 表示星期几&#xff0c;Mmm 是以字母表示的月份&#xff0c;dd 表示…

黑马头条--day01.环境搭建

一.前言 该项目学习自黑马程序员&#xff0c;由我整理如下&#xff0c;版权归黑马程序员所有 二.环境搭建 1.数据库 第一天&#xff0c;先创建如下库和表: sql文件如下: CREATE DATABASE IF NOT EXISTS leadnews_user DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_…

MySQL 的索引分类

文章目录 MySQL 的索引分类是什么&#xff1f;单列索引组合索引&#xff1a;全文索引&#xff1a;空间索引&#xff1a; MySQL 的索引分类是什么&#xff1f; 单列索引 普通索引&#xff1a;MySQL 中基本索引类型&#xff0c;没有什么限制&#xff0c;允许在定义索引的列中插…

LeetCode(62)删除排序链表中的重复元素 II【链表】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 删除排序链表中的重复元素 II 1.题目 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1…

【JavaEE】锁的策略

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…

20.Java程序设计-基于SSM框架的安卓掌上校园生活系统的设计与实现

摘要&#xff1a; 随着移动互联网技术的快速发展&#xff0c;校园生活信息化成为提高学校管理效率、方便学生生活的关键。本研究以基于SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架的技术体系为基础&#xff0c;致力于设计与实现一款功能强大、高效稳定的安卓…

现代雷达车载应用——第2章 汽车雷达系统原理 2.6节 雷达设计考虑

经典著作&#xff0c;值得一读&#xff0c;英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 2.6 雷达设计考虑 上述部分给出了汽车雷达基本原理的简要概述。在雷达系统的设计中&#xff0c;有几个方面是必不可少的&#xff0c;它们决定了雷达系…

LeetCode215. Kth Largest Element in an Array

文章目录 一、题目二、题解 一、题目 Given an integer array nums and an integer k, return the kth largest element in the array. Note that it is the kth largest element in the sorted order, not the kth distinct element. Can you solve it without sorting? …

VUE学习三、前端项目部署

1.前端项目打包 执行命令 npm run build:prod正常命令结束 , 会在前端项目里面出现dist文件夹 2.nginx下载安装 nginx下载 : http://nginx.org/en/download.html Windows 下载版本 Mainline version&#xff1a;Mainline 是 Nginx 目前主力在做的版本&#xff0c;可以说…

《使用ThinkPHP6开发项目》 - ThinkPHP6使用使用中间件验证登录Token

https://blog.csdn.net/centaury32/article/details/134997438 按照https://blog.csdn.net/centaury32/article/details/134999029的方法验证登录Token&#xff0c;那么每一步都需要写同样一段代码&#xff0c;这里可以结合中间件进行验证 一、创建中间件&#xff1a;php thi…

QT----第三天,Visio stdio自定义封装控件,鼠标事件,定时器,事件分发器过滤器,绘图事件

目录 第三天1 自定义控件封装2 QT鼠标事件3 定时器4 event事件分发器5 事件过滤器6 绘图事件Qpainter 源码&#xff1a;CPP学习代码 第三天 1 自定义控件封装 新建一个QT widgetclass&#xff0c;同时生成ui,h,cpp文件 在smallWidget.ui里添加上你想要的控件并调试大小 回到…

ISSUE的基本概念

ISSUE:将符合一定条件的指令从发射队列&#xff08;IssueQueue)中选出来&#xff0c;并送到FU中执行的过程; ISSUE QUEUE也称之为reservation station, 其按照一定的规则&#xff0c;选择那些源操作数都已经准备好的指令&#xff0c;将其送到FU中执行&#xff0c;这个过程称为…