说明
模型 引入的开源前端js库cesium.js (opens new window)。
# 使用
<template>
<div class="testStyle">
<cesium-viewer
ref="cesium"
:tileset="tileset"
:symbol-list="symbolList"
:image-type="imageType"
@getLatitude="getLatitude"
@getViewer="getViewer"
:layers="layers"
:symbol-img="symbolImg"
></cesium-viewer>
</div>
</template>
<script>
import CesiumViewer from '@/components/CesiumViewer'
import { queryBimViews } from '@/api/project/bimViews'
const currentTileSets = null
export default {
components: { CesiumViewer },
data() {
return {
tileset: [],
symbolList: [],
imageType: null,
layers: [0],
symbolImg: {
url: '../../static/point.png',
width: 30,
height: 30
}
}
},
methods: {
/** 经纬度获取
* @function getLatitude
* @param {*} longitudeString
* @param {*} latitudeString
* @param {*} heightString
*/
getLatitude({ longitudeString, latitudeString, heightString }) {
const x = longitudeString
const y = latitudeString
const z = heightString
console.log(x, y, z, '上述代')
},
async getViewer(viewer) {
const back = await queryBimViews({
linkType: 'shieldModel',
sourceId: 1, // 盾构机的编码
sourceType: 'Shield'
})
const result = back.result[0]
const viewInfo = JSON.parse(result.viewInfo)
const camera = JSON.parse(result.camera)
const kmlList = camera.kmlList
? camera.kmlList.filter((item) => item)
: []
const sceneList = []
for (const i in viewInfo) {
sceneList.push({
sceneId: i,
sceneVersion: viewInfo[i].version,
name: viewInfo[i].name
})
}
// 视图加载处理
this.getModel({ viewInfo, camera })
},
getModel({ viewInfo, camera }) {
const tilesetVisibleArr = []
let tileset = null
for (const i in viewInfo) {
const version = `${viewInfo[i].version ? viewInfo[i].version : '65536'}`
const id = `${i}_${version}`
try {
if (this.$refs.cesium.getTileset(i)) {
this.$refs.cesium.getTileset(i).show = true // 模型显示
currentTileSets.push(i)
} else {
tileset = {
name: i,
url: `${this.$gisUrl}getModel?tileset=true&id=${id}`
}
const _tileset = this.$refs.cesium.addTileset(tileset)
currentTileSets.push(_tileset)
}
// 设置sse 空间误差参数
if (viewInfo[i].sse) {
this.$refs.cesium.getTileset(i).maximumScreenSpaceError =
viewInfo[i].sse
}
tilesetVisibleArr.push({
tileset: this.$refs.cesium.getTileset(i),
familyList: viewInfo[i].familyList,
familyTypeList: viewInfo[i].familyTypeList,
sceneId: i,
version: viewInfo[i].version ? viewInfo[i].version : null,
isVisable:
typeof viewInfo[i].sceneVisable === 'undefined'
? true
: viewInfo[i].sceneVisable,
pellucidity: viewInfo[i].pellucidity ? viewInfo[i].pellucidity : 1
})
} catch (error) {
console.log(error)
}
}
this.$refs.cesium.flyTo(camera)
}
}
}
</script>
<style lang="scss">
.testStyle {
.cesium-cesiumInspector-dropDown {
display: none;
}
.cesium-3DTilesInspector {
display: none;
}
.cesium-viewer-toolbar {
display: none;
}
}
</style>
# 参数说明
# 属性
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| mapUrl | 地图链接 | String | — | '' |
| tileset | 模型的基本信息 | Array[] | — | [] |
| layers | 隐藏的图层级数 | Array[] | — | [] |
| imageType | 图片类型 | String | — | '' |
| symbolImg | 标注点的图标样式 | Object | — | {} |
| symbolList | 一组标注点的坐标 | Array[] | — | [] |
| demonstrate | --- | Array[] | — | [] |
# 事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| getLatitude | 当用户点击地图中的位置时，会返回相应的经纬度 | { longitudeString, latitudeString, heightString }返回的分别是经度、纬度、高度 |
| getTileset | 得到视图的tileset | 接受一个参数[String类型],返回符合筛选条件的参数tileset |
| addTileset | 为视图增加一个tileset | 接受的参数[String类型]会用于new Cesium.Cesium3DTileset(参数)中 |
| resizeEvent | 监听事件，判断视图是否为全屏模式 | -- |
| draw | 暂定 | -- |
| clearPolygon | 清除面，调用的entities.remove(),清除集合中的实例数组 | -- |
| disableDraw | 禁用画面功能 | -- |
| showPolygon | 添加多边形以及设置标签 | (data, text),第一个参数可以是数组/字符串；第二个参数是标签显示的文本 |
| zoomToPolygon | 定位面 | 接受一个参数，该参数是showPolygon()返回的多边形结果。 |
| getViewer | 页面一加载的时候走这个方法，利用$emit()方法将viewer(查看器)传递给父组件 | 返回参数: viewer |
| destroyViewer | 销毁查看器 | -- |
| photoAlphaHandler | 设置倾斜摄影透明度 | 接受一个参数[String类型] |
| groundAlpha | 设置地图透明度 | 接受一个参数[String类型] |
| initMeasureHandler | 初始化测量 | -- |
| activateMeasureHandler | 测量功能 | -- |
| deactivateMeasureHandler | 禁用测量功能 | -- |
| clickPick3DTileFeature | 拾取高亮模型 | -- |
| reversalClip3DTileset | 反转按钮，跟水平剖切关联 | -- |
| mileagePolyline | 里程线的绘制 | -- |
| addMarker | 添加标注点 | -- |
| deactiveMaker | 禁用标注点 | -- |
| getMarker | 获取添加的标注的坐标，获取之后会清空 | -- |
| flyToMarker | 视图飞到相应的标注点 | 接受一个对象[Object类型]，对象中包括经纬度和高度的值 |
| synchroCamera | 同步视图 | -- |
| addMarkerToMap | 在地图上添加实体 | 接受实体的位置、实体的标签内容、flag作为实体图片大小的判断、imageType实体的图片名称、options中包括该实体需要的其它属性 |
| displayMarker | 获取指定的实体 | 接受第一个position位置参数[Object]用于实体定位，接受第二个参数show[Boolean]判断该实体是否展示 |
| getMarkerById | 根据id获取Marker | 接受一个参数 -- id[String] |
| removeMarker | 移除标签 | 接受一个position参数[Object] |
| clearMarker | 清理标注点 | -- |
| tilesetVisible | tileset 的隐藏和显示 | 接受第一个参数[Object类型]包括tileset等，接受第二个参数isClear判断该tilset是否展示 |
| tilesetPellucidity | 设置tileset透明度 | 接受第一个参数 |
| debugProcessTilesetRequest | 点击结束标注按钮时调用的方法 | -- |
| getTileset | 根据编码来获得tilset | 接受一个参数name |
| removeTileset | 移除该tileset | 接受需要删除的tilset |
| flyToTileset | 视图飞到相应的tileset处 | 接受一个tileset参数 |
| setColor | 着色和取消着色 | 接受一个参数state[Boolean] |
| addSymbol | 添加标记, 结束时移除标记 | 接受一个参数state[Boolean] |
| selectedSymbol | 点击标注点列表下拉框触发的方法 | -- |
| saveSymbol | 保存标记点 | -- |
| showSymbol | 显示标注点 | 接受一个参数img[Object]，其中包括图片的样式宽高 |
| showSelfWindow | 显示自定义弹窗 | 接受三个参数：_this, position, html。分别代表vue的实例、弹窗的位置、弹窗的内容 |
| selectFeature | 选中模型 | 接受两个参数，第一个参数state[Boolean]如果为false表示取消单个选中。第二个参数type表示模型类型 |
| hidden | 隐藏模型 | 接受一个参数state[Boolean] |
| fly | 点击飞行按钮时触发的方法 | 接受一个data参数 |
| saveViewPoint | 保存当前视图 | --- |
| flyTo | 将相机从当前位置飞到新位置 | 接受两个参数，第一个参数viewPoint[Object]包括相机位置、航向等, complete作为一个回调函数使用 |
| addHtml | addHtml | 接受一个对象，包含四个值：{ position, offset, render, callBack } |
| flyToEntity | 视图飞入相应的实体处 | 接受一个entity参数 |