Vue结合mars3d加载3dtiles模型
作者：互联网
官网：http://mars3d.cn/doc
官方提供vue项目示例：https://github.com/marsgis/mars3d-vue-template
1.引入必要插件：
通过npm安装mars3d主库： npm install mars3d
2.在main.js中导入依赖
3.vue.config.js（或Webpack）配置
const webpack = require('webpack')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const cesiumSource = 'node_modules/mars3d-cesium/Build/Cesium/'
module.exports = {
publicPath: './', // 打包后的位置
outputDir: 'dist',//打包后的目录名称
assetsDir: './static', // 静态资源目录名称
productionSourceMap:false, //去掉打包的时候生成的map文件
lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('static')
}),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'static/Workers' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'static/ThirdParty' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' }])
],
// pluginOptions: {
// 'style-resources-loader': {
// preProcessor: 'sass',
// patterns: [
// path.resolve(__dirname, '@/assets/styles/*.scss') //你的.scss文件所在目录
// ]
// }
// },
module: {
unknownContextCritical: false,
unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
}
},
}
4.主要代码:
<template>
<div class="mapcontainer">
<Map :url="configUrl" @onload="onMapload" />
<div class="bottomLayer" v-show="showLayerMan">
<el-button v-for="item in layersList" :key="item.id" type="primary" round :class="[item.options.icon, {activeBtn: item.show}]" @click="updateLayerShow(item)">
<div style="font-size: 16px;">{{item.name}}</div>
</el-button>
</div>
<el-dialog
title="3D库室"
:visible.sync="DialogVisible3D"
width="1300px"
:before-close="DialogVisible3DClose">
<iframe
style="border:none"
:src="room3DUrl"
:width="1200"
:height="600"
></iframe>
</el-dialog>
</div>
</template>
<script>
import Map from '@/components/mars3d/Map.vue' // 此处用的map在官网模板代码里有
export default {
components: {
Map
},
data () {
return {
configUrl: 'config/config.json', // mars3D配置文件
tilesetUrl: window.Tileset, // 获取三维模型地址
layersList: [],
showLayerMan: true,
DialogVisible3D: false,
room3DUrl: 'http://.....' // 显示3d库室地址
}
},
mounted () {
},
methods: {
// 地图构造完成回调
onMapload(map) {
this.map = map
this.removeLayer()
// 3dTiles格式
const tileLayer = new this.mars3d.layer.TilesetLayer({
id: '202158',
name: '模型',
url: this.tilesetUrl,
maximumScreenSpaceError: 16,
maximumMemoryUsage: 1024,
dynamicScreenSpaceError: true,
cullWithChildrenBounds: false,
skipLevelOfDetail: true,
preferLeaves: true,
position: { alt: -50 }, // 城市
// rotation: { x: 240, y: 0, z: 0 },
// center: {"lat":34.843297,"lng":114.79871,"alt":430,"heading":30,"pitch":-35},
// flyTo: true
icon: 'el-icon-s-home'
})
this.layer = tileLayer
this.map.addLayer(this.layer)
// 创建摄像头图层
this.graphicLayerCamera = new this.mars3d.layer.GraphicLayer({id: '20210512',name: '摄像头', icon: 'el-icon-video-camera-solid'})
this.map.addLayer(this.graphicLayerCamera)
// 创建3d库室图层
this.graphicLayer3D = new this.mars3d.layer.GraphicLayer({id: '20210525',name: '3d库室', icon: 'el-icon-receiving'})
this.map.addLayer(this.graphicLayer3D)
// 创建弹窗图层
this.graphicLayerPopup = new this.mars3d.layer.GraphicLayer({id: '20210513',name: '弹窗', icon: 'el-icon-s-comment'})
this.map.addLayer(this.graphicLayerPopup)
// 加 摄像头
this.addGraphicCamera()
// 加 3d库室
this.addGraphic3DRoom()
this.addBtn()
this.showModel()
},
removeLayer() {
if (this.layer) {
this.map.removeLayer(this.layer, true)
this.layer = null
}
},
// 添加自定义按钮
addBtn () {
let toolButton = new this.mars3d.control.ToolButton({
title: '图层管理',
icon: 'el-icon-coin',
insertIndex: 3, //插入的位置顺序, 1是home按钮后面
click: (event) => {
this.showLayerMan = !this.showLayerMan
},
})
this.map.addControl(toolButton)
let popupButton = new this.mars3d.control.ToolButton({
title: '弹窗事件',
icon: 'el-icon-s-comment',
insertIndex: 3, //插入的位置顺序, 1是home按钮后面
click: () => {
this.addDiv()
},
})
this.map.addControl(popupButton)
},
//当前页面业务相关
showModel() {
this.layer.on(this.mars3d.EventType.load, () => {
// 获取图层
this.layersList = this.map.getLayers().filter((layer) => {return layer.name !== '模型'})
})
this.layer.on(this.mars3d.EventType.click, (event) => {
console.log('单击了图层', event)
})
// 在layer上绑定监听事件
this.graphicLayer3D.on(this.mars3d.EventType.click, (event) => {
console.log('graphicLayer3D', event.graphic.id)
this.DialogVisible3D = true
})
// 在layer上绑定监听事件
this.graphicLayerCamera.on(this.mars3d.EventType.click, (event) => {
console.log('监听layer，单击了矢量对象', event)
})
// 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
this.graphicLayerCamera.bindContextMenu([
{
text: '删除对象',
iconCls: 'fa fa-trash-o',
callback: (e) => {
const graphic = e.graphic
if (graphic) {
this.graphicLayerCamera.removeGraphic(graphic)
}
}
}
])
},
//更新图层:显示隐藏状态
updateLayerShow(layer) {
layer.show = !layer.show
},
// 点击图标添加标签
addDiv () {
this.graphicLayerPopup.startDraw({
type: 'divBillboard',
style: {
html: `<div style="background-color:red; width: 100px; height: 100px">
<div class="title">测试DIV点</div>
<div class="content">此处可以绑定任意Html代码和css效果</div>
</div >`,
horizontalOrigin: this.Cesium.HorizontalOrigin.LEFT,
verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
},
})
},
// 添加图标
addGraphicCamera() {
let positions = [{name: '摄像头1', position: [114.803043, 34.846551, 30]},
{name: '摄像头2', position: [114.803282, 34.846208, 30]},
{name: '摄像头3', position: [114.802505, 34.846165, 30]}]
positions.forEach((position) => {
let graphic = new this.mars3d.graphic.BillboardEntity({
name: position.name,
position: position.position,
style: {
image: 'img/marker/camera.png',
scale: 1,
},
popup: '<video autoplay controlspreload="none" controls width="440" height="320" src="mp4/11.mp4"></video>'
})
this.graphicLayerCamera.addGraphic(graphic)
})
this.graphicLayerCamera.show = false
},
addGraphic3DRoom() {
let positions = [{id: 1, name: '库室1', position: [114.803443, 34.846651, 30]},
{id: 2, name: '库室2', position: [114.803282, 34.846308, 30]},
{id: 3, name: '库室3', position: [114.802805, 34.846665, 30]}]
positions.forEach((position) => {
let graphic = new this.mars3d.graphic.BillboardEntity({
id: position.id,
name: position.name,
position: position.position,
style: {
image: 'img/marker/moxing.png',
scale: 1,
width: 50,
height: 50,
}
})
this.graphicLayer3D.addGraphic(graphic)
})
this.graphicLayer3D.show = false
},
DialogVisible3DClose() {
this.DialogVisible3D = false
}
}
}
</script>
<style lang="scss" scoped>
.mapcontainer {
overflow: hidden;
height: 100vh;
.bottomLayer {
position: relative;
bottom: 150px;
text-align: center;
button {
font-size: 24px;
width: 90px;
background: rgba(63, 72, 84, 0.88);
/*border-color: #00ffff;*/
border: 0;
}
.activeBtn {
color: #00ffff;
}
}
/deep/.el-dialog__wrapper {
.el-dialog {
background: rgba(36, 45, 52, 0.9);
border: 1px solid #66b1ff;
.el-dialog__title {
color: #eee;
}
.el-dialog__body {
text-align: center;
}
}
}
}
</style>
4.config.js文件
标签：map,layer,Vue,name,new,3dtiles,position,mars3d 来源： https://blog.csdn.net/qq_40407998/article/details/117329887