一、在Vue项目中引入三维地图

1.安装对应的包

//安装mars3d主库
npm install mars3d --save   //安装mars3d插件（按需安装）
npm install mars3d-space --save

2.为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用

<template><div :id='`tong3d-container${mapKey}`':class="['tong3d-container', customClass, { 'tong3d-container-compare-rh' : compare }]"></div>
</template><script>
import Vue from 'vue'
import './lib/tong3d.css'
import './lib/tong3d'// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.tong3d = tong3d
Vue.prototype.Cesium = tong3d.Cesiumexport default {name: 'tong3dViewer',props: {// 初始化配置参数url: String,// 地图唯一性标识mapKey: {type: String,default: ''},// 自定义参数options: Object,// 是否分屏显示compare: {type: Boolean,default: false},// 是否插入到body元素上appendToBody: {type: Boolean,default: false},// 自定义css类名customClass: {type: String,default: ''}},mounted() {if (this.appendToBody) {document.body.appendChild(this.$el)}if (this.mapKey) {this.initTong3d(this.options)} else {tong3d.Resource.fetchJson({ url: this.url }).then((data) => {this.initTong3d(data.map3d)// 构建地图})}},beforeDestroy() {this[`map${this.mapKey}`].destroy()delete this[`map${this.mapKey}`]},methods: {initTong3d(options) {if (this[`map${this.mapKey}`]) {this[`map${this.mapKey}`].destroy()}const mapOptions = {...options,...this.options}// 创建三维地球场景var map = new tong3d.Map(`tong3d-container${this.mapKey}`, mapOptions)this[`map${this.mapKey}`] = mapconsole.log('>>>>> 地图创建成功 >>>>', map)// 挂载到全局对象下，所有组件通过 this.map 访问// Vue.prototype[`map${this.mapKey}`] = map// 绑定对alert的处理，右键弹出信息更美观。// window.haoutil = window.haoutil || {}// window.haoutil.msg = (msg) => {//   this.$message.success(msg)// }// window.haoutil.alert = (msg) => {//   this.$message.success(msg)// }// 抛出事件this.$emit('onload', map)}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.tong3d-container {height: 100%;overflow: hidden;
}/* 重写Cesium的css *//**cesium按钮背景色*/
.cesium-button {background-color: #3f4854;color: #e6e6e6;fill: #e6e6e6;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);line-height: 32px;
}.cesium-viewer-geocoderContainer .cesium-geocoder-input {background-color: rgba(63, 72, 84, 0.7);
}.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {background-color: rgba(63, 72, 84, 0.9);
}.cesium-viewer-geocoderContainer .search-results {background-color: #3f4854;
}.cesium-geocoder-searchButton {background-color: #3f4854;
}.cesium-infoBox-title {background-color: #3f4854;
}.cesium-infoBox {background: rgba(63, 72, 84, 0.9);
}.cesium-toolbar-button img {height: 100%;
}.cesium-performanceDisplay-defaultContainer {top: auto;bottom: 35px;right: 50px;
}.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {color: #fff;
}/**cesium工具栏位置*/
.cesium-viewer-toolbar {top: auto;left: auto;right: 12px;bottom: 35px;
}.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {margin-bottom: 5px;float: right;clear: both;text-align: center;
}.cesium-baseLayerPicker-dropDown {bottom: 0;right: 40px;max-height: 700px;margin-bottom: 5px;
}.cesium-navigation-help {top: auto;bottom: 0;right: 40px;transform-origin: right bottom;
}.cesium-sceneModePicker-wrapper {width: auto;
}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {float: left;margin: 0 3px;
}.cesium-viewer-geocoderContainer .search-results {left: 0;right: 40px;width: auto;z-index: 9999;
}.cesium-infoBox-title {background-color: #3f4854;
}.cesium-infoBox {top: 50px;background: rgba(63, 72, 84, 0.9);
}/**左下工具栏菜单*/
.toolbar-dropdown-menu-div {background: rgba(43, 44, 47, 0.8);border: 1px solid #2b2c2f;z-index: 991;position: absolute;right: 60px;bottom: 40px;display: none;
}.toolbar-dropdown-menu {min-width: 110px;padding: 0;
}.toolbar-dropdown-menu > li {padding: 0 3px;margin: 2px 0;
}.toolbar-dropdown-menu > li > a {color: #edffff;display: block;padding: 4px 10px;clear: both;font-weight: normal;line-height: 1.6;white-space: nowrap;text-decoration: none;
}.toolbar-dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {color: #fff;background-color: #444d59;
}.toolbar-dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {color: #fff;background-color: #444d59;
}.toolbar-dropdown-menu i {padding-right: 5px;
}
</style>

3.加载三维地图

<!--* @Descripttion:* @version:* @Author: zhangfan* @email: 2207044692@qq.com* @Date: 2021-10-28 14:34:51* @LastEditors: zhangfan* @LastEditTime: 2022-03-18 14:13:25
-->
<template><div id='centerDiv' class='mapcontainer'><Map :url='configUrl' @onload='onMapload' /></div>
</template><script>
import Map from '../components/tong3d/Map.vue'
export default {name: 'Index',components: {Map},data() {return {configUrl:  {"map3d": {"scene": {"center": { "lat": 39.91737, "lng": 116.408293, "alt": 8000, "heading": 0, "pitch": -45 },"scene3DOnly": false,"shadows": false,"removeDblClick": true,"sceneMode": 3,"showSun": true,"showMoon": true,"showSkyBox": true,"showSkyAtmosphere": true,"fog": true,"fxaa": true,"globe": {"depthTestAgainstTerrain": true,"baseColor": "#546a53","showGroundAtmosphere": true,"enableLighting": false},"cameraController": {"zoomFactor": 3.0,"minimumZoomDistance": 1,"maximumZoomDistance": 50000000,"enableRotate": true,"enableTranslate": true,"enableTilt": true,"enableZoom": true,"enableCollisionDetection": true,"minimumCollisionTerrainHeight": 15000}},"basemaps": [{"name": "地图","icon": "img/12.png","type": "xyz","url": "http://xx.xx.xx.xx.xx/{z}/{x}/{y}.png","subdomains": "abc","show": true   }]}},}},methods: {// 地图构造完成回调onMapload(map) {// 以下为演示代码// 创建entity图层this.graphicLayerData = new this.tong3d.layer.GraphicLayer()map.addLayer(this.graphicLayerData)this.mapBasice = map},// 画波纹addDemoGraphic1(graphicLayer,var2) {var graphic = new tong3d.graphic.CircleEntity({position: var2,style: {radius: 200,height: 0,material: tong3d.MaterialUtil.createMaterialProperty(tong3d.MaterialType.CircleWave, {color: "#ffff00",count: 2,speed: 5,}),clampToGround: true,},});graphicLayer.addGraphic(graphic);},//线条addDemoPolyline(graphicLayer,lineData) {let line =  new tong3d.graphic.PolylineEntity({positions:lineData,style:{width:3,material: mars3d.MaterialUtil.createMaterialProperty(//新建材质线mars3d.MaterialType.PolylineOutline, //线的材质{color: "#03F5FA",outlineWidth: 2, //线的轮廓宽度outlineColor: "#03F5FA", //线的轮廓颜色}),}})graphicLayer.addGraphic(line)},// 使用图标点替换自定义addBillBort(graphicLayer,var1,var2,droneId){let graphic =new mars3d.graphic.BillboardEntity({position:var1,style:{image:"../../static/img/drone.png",droneId:droneId}})this.wrjGrapic.push(graphic)let tool = new mars3d.graphic.Tooltip({position:var1,style:{direction:'right',template:false,//不使用内置文档scaleByDistance:true,distanceDisplayCondition:true,offsetX:250,offsetY:155,html:this.toolText}})let line =  new tong3d.graphic.PolylineEntity({positions:[var2,var1],style:{width:5,material:  new Cesium.PolylineDashMaterialProperty({color: Cesium.Color.YELLOW,dashLength: 20 //短划线长度})
,}})//图标点鼠标移入时显示弹窗graphic.on(mars3d.EventType.mouseOver,()=>{graphicLayer.addGraphic(tool)})graphic.on(mars3d.EventType.mouseOut,()=>{graphicLayer.removeGraphic(tool)})// 左键显示历史数据，右键重置graphic.on(mars3d.EventType.click,this.showHisTrack)graphic.on(mars3d.EventType.rightClick,this.hiddHisTrack)graphicLayer.addGraphic(line)graphicLayer.addGraphic(graphic);},showHisTrack(e){// 获取参数console.log(e)if(!e.target){var ids = e.graphic.options.style.droneId//获取id}else{var ids = e.target.options.style.droneId//获取id}let ind = this.idList.indexOf(ids)console.log(ind)if(this.trackLayer[ind] == -1){this.trackLayer[ind] =  new this.tong3d.layer.GraphicLayer() this.mapBasice.addLayer(this.trackLayer[ind])}else{this.trackLayer[ind].clear()}getHisTrack({droneld: ids,}).then(res => {let lineData = []res.data.forEach((item,index)=>{if(index < 15 ){if(this.curposition.indexOf(item.var2)==-1){this.addPoint(this.trackLayer[ind],JSON.parse(item.var2),JSON.parse(item.var1))}lineData.push(JSON.parse(item.var2))}})this.addDemoPolyline(this.trackLayer[ind],lineData)})},hiddHisTrack(e){// 获取参数console.log('hidde')console.log(e)let ids = e.graphic.options.style.droneId//获取idlet ind = this.idList.indexOf(ids)if(this.trackLayer[ind] != -1){this.trackLayer[ind].clear()this.mapBasice.removeLayer(this.trackLayer[ind])this.trackLayer[ind] = -1}},addPoint(graphicLayer,point,point2){var graphic = new tong3d.graphic.PointEntity({position: point,style: {pixelSize:15,color:"#03F5FA"},});var graphicTwo = new tong3d.graphic.CircleEntity({position: point,style: {radius: 10,height: 0,material: tong3d.MaterialUtil.createMaterialProperty(tong3d.MaterialType.CircleWave, {color: "#00ffff",count: 2,speed: 5,}),clampToGround: true,},});let line =  new tong3d.graphic.PolylineEntity({positions:[point,point2],style:{width:5,material:  new Cesium.PolylineDashMaterialProperty({color: Cesium.Color.YELLOW,dashLength: 20 //短划线长度})
,}}) let tool = new mars3d.graphic.Tooltip({position:point,style:{direction:'right',template:false,//不使用内置文档scaleByDistance:true,distanceDisplayCondition:true,offsetX:250,offsetY:155,html:this.toolText}})graphic.on(mars3d.EventType.mouseOver,()=>{graphicLayer.addGraphic(tool);})graphic.on(mars3d.EventType.mouseOut,()=>{graphicLayer.removeGraphic(tool)})graphicLayer.addGraphic(line)graphicLayer.addGraphic(graphicTwo);graphicLayer.addGraphic(graphic);}},
}
</script>

3.对应的开发文档和教程

对应的开发教程

基于Vue框架开发的页面加载三维维地图以及交互相关推荐

基于Vue框架开发的页面加载二维地图以及交互
一.在Vue项目中引入二维地图 1.切换到公司的仓库下载地图插件 npm config set registry http://nexus.toops.club/repository/npm-zui/ ...
vue框架开发出现页面空白、白屏的解决方法总汇
vue框架开发出现页面空白.白屏的解决方法总汇参考文章: (1)vue框架开发出现页面空白.白屏的解决方法总汇 (2)https://www.cnblogs.com/love314159/artic ...
leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
基于Cesium开源框架的3D展示（包含加载三维以及地图的一些基本操作）
加载3Dtile模型数据 3D展示效果 geojson格式数据展示白驹过隙,时光如梭,又到一年年尾.回想一年的工作,感觉做了很多,又感觉什么都没做成.so,在此回顾一下今年经历过的那些个不一定有头, ...
vue生命周期函数，页面加载事件
<script>export default {data() {return {};},methods: {toIndex() {//跳转页面this.$router.push(" ...
Vue 中的 v-cloak 作用及用法-vue页面加载时会闪烁
用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕 ...
Cesium笔记之加载三维地图
Cesium提供了展示三维地形数据的接口,同时也提供了丰富的接口调用.但是由于API文档过于碎片,经过蛮长时间的研究学习,也算是掌握了如何利用Cesium在三维地形上进行标绘. 注:示例代码基于Vue ...
vue开发手机页面闪烁_Vue页面加载闪烁问题的解决方法_婳祎_前端开发者
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换也就是说,在使用v-if时,若值为false,那 ...
vue 判断页面加载完成_vue项目搭建及总结
一.vue的两种安装方式 (1)直接在html中引入vue.js (2)通过vue+nodeJS搭建我们采用的是第二种方式二.vue和nodeJS的关系 (1)nodeJS不是一个js框架,是一个 ...

基于Vue框架开发的页面加载三维维地图以及交互

一、在Vue项目中引入三维地图

1.安装对应的包

2.为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用

3.加载三维地图

3.对应的开发文档和教程

基于Vue框架开发的页面加载三维维地图以及交互相关推荐

最新文章

热门文章