<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 17:00:30
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2022-09-19 18:19:53
|
* @FilePath: \srs-police-affairs\src\components\map\index.vue
|
* @Description: 公用地图组件
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
<template>
|
<div class="viewer-box" id="viewer-container">
|
<!-- 全屏控制按钮 -->
|
<div class="screen-full-btn">
|
<el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
|
<i
|
class="fa fa-compress"
|
style="vertical-align: middle; cursor: pointer"
|
@click="fullscreenchange"
|
></i>
|
</el-tooltip>
|
<el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
|
<i
|
class="fa fa-expand"
|
style="vertical-align: middle; cursor: pointer"
|
@click="fullscreenchange"
|
></i>
|
</el-tooltip>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
var siteEntitylayers = null
|
|
let layersObjcect = {
|
housingEstateLayer: null,
|
patrolWagonLayer: null,
|
handMachineLayer: null,
|
monitoringLayer: null,
|
panoramaLayer: null
|
}
|
|
let tilesetLayer = null
|
|
let tilesetObject = {
|
sdTilesetLayer: null
|
}
|
|
export default {
|
name: 'mapBox',
|
|
data () {
|
return {
|
fullscreen: false,
|
isFullscreen: false,
|
dialogVisible: false,
|
dialogTitle: "",
|
searchInput: '',
|
loading: false,
|
searchDetailsShow: false,
|
videoExist: true,
|
videoTotal: 0,
|
carTotal: 0,
|
searchList: [
|
{
|
"name": "铅山县公安局食品药品与环境犯罪侦查大队",
|
"address": "江西省上饶市铅山县河口镇公安局铅山县公安局食品药品与环境犯罪侦查大队",
|
"adcode": "361124",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "铅山县",
|
"town": "河口镇"
|
},
|
{
|
"name": "老公安局",
|
"address": "江西省上饶市铅山县河口镇狮江大道老公安局",
|
"adcode": "361124",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "铅山县",
|
"town": "河口镇"
|
},
|
{
|
"name": "老市公安局",
|
"address": "江西省上饶市信州区东市街道金龙岗路18号老市公安局",
|
"adcode": "361102",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "信州区",
|
"town": "东市街道"
|
},
|
{
|
"name": "铅山县公安局",
|
"address": "江西省上饶市铅山县永平镇铅山县公安局",
|
"adcode": "361124",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "铅山县",
|
"town": "永平镇"
|
},
|
{
|
"name": "铅山县森林公安局",
|
"address": "江西省上饶市铅山县河口镇铅山县森林公安局",
|
"adcode": "361124",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "铅山县",
|
"town": "河口镇"
|
},
|
{
|
"name": "森林公安局",
|
"address": "江西省上饶市信州区灵溪街道森林公安局",
|
"adcode": "361102",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "信州区",
|
"town": "灵溪街道"
|
},
|
{
|
"name": "上饶市广丰区公安局",
|
"address": "江西省上饶市广丰区永丰街道裕丰大道36号上饶市广丰区公安局",
|
"adcode": "361103",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "广丰区",
|
"town": "永丰街道"
|
},
|
{
|
"name": "上饶市公安局",
|
"address": "江西省上饶市上饶县罗桥街道广信大道118号上饶市公安局",
|
"adcode": "361121",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "上饶县",
|
"town": "罗桥街道"
|
},
|
{
|
"name": "广信区公安局",
|
"address": "江西省上饶市上饶县罗桥街道旭日北大道666号广信区公安局",
|
"adcode": "361121",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "上饶县",
|
"town": "罗桥街道"
|
},
|
{
|
"name": "江西省玉山县公安局",
|
"address": "江西省上饶市玉山县冰溪街道人民大道166号江西省玉山县公安局",
|
"adcode": "361123",
|
"province": "江西省",
|
"city": "上饶市",
|
"district": "玉山县",
|
"town": "冰溪街道"
|
}
|
]
|
}
|
},
|
|
computed: {
|
|
},
|
mounted () {
|
if (global.viewer != null) {
|
global.viewer = null
|
}
|
|
const that = this
|
|
// 初始化地图
|
function initViewer () {
|
// new Viewer(new 地图)
|
global.viewer = new global.DC.Viewer('viewer-container', {
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
}
|
})
|
|
// 去除logo
|
let primitiveArr = global.viewer.scene.primitives._primitives
|
global.viewer.scene.primitives.remove(primitiveArr[0])
|
|
// global.viewer.scene.globe.depthTestAgainstTerrain = true
|
|
// 已声明的图层添加到地图上
|
siteEntitylayers = new global.DC.VectorLayer('siteEntitylayers')
|
global.viewer.addLayer(siteEntitylayers)
|
|
// 图层加入地图
|
|
layersObjcect.housingEstateLayer = new global.DC.VectorLayer('housingEstateLayer')
|
global.viewer.addLayer(layersObjcect.housingEstateLayer)
|
layersObjcect.patrolWagonLayer = new global.DC.VectorLayer('patrolWagonLayer')
|
global.viewer.addLayer(layersObjcect.patrolWagonLayer)
|
layersObjcect.handMachineLayer = new global.DC.VectorLayer('handMachineLayer')
|
global.viewer.addLayer(layersObjcect.handMachineLayer)
|
layersObjcect.monitoringLayer = new global.DC.VectorLayer('monitoringLayer')
|
global.viewer.addLayer(layersObjcect.monitoringLayer)
|
layersObjcect.panoramaLayer = new global.DC.VectorLayer('panoramaLayer')
|
global.viewer.addLayer(layersObjcect.panoramaLayer)
|
|
// 模型图层添加
|
tilesetLayer = new global.DC.TilesetLayer('tilesetLayer')
|
global.viewer.addLayer(tilesetLayer)
|
|
// 加载围栏
|
let layer = new global.DC.VectorLayer('layer')
|
global.viewer.addLayer(layer)
|
|
let wall = new global.DC.Wall(
|
'116.018142,28.688089,100.0; 116.017756,28.684648,100.0; 116.019507,28.677570,100.0; 116.033653,28.675634,100.0; 116.034223,28.681389,100.0; 116.033483,28.687265,100.0; 116.018142,28.688089,100.0'
|
)
|
|
wall.setStyle({
|
material: new global.DC.WallTrailMaterialProperty({
|
color: global.DC.Color.BLUE,
|
speed: 8
|
})
|
})
|
layer.addOverlay(wall)
|
|
|
|
// 判断是否支持图像渲染像素化处理
|
if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
|
global.viewer.setOptions({
|
resolutionScale: window.devicePixelRatio
|
})
|
}
|
|
// 天地图 影像
|
global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
format: 'image/jpeg',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
|
|
|
|
// 加载顺丰底图
|
// global.viewer.imageryLayers.addImageryProvider(
|
// new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
// url: "http://36.14.131.102:8899/tile?x={x}&y={y}&z={z}&mid=basemap&p=0&f=pbf"
|
// // url: "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}"
|
// })
|
// )
|
|
// 设置地图初始位置，角度等
|
global.viewer.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
116.027429, 28.681978, 8000.0
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
})
|
|
|
|
global.viewer.use(new global.DC.Measure())
|
|
global.viewer.locationBar.enable = true
|
// 缩放
|
global.viewer.zoomController.enable = true
|
// 比例尺
|
global.viewer.distanceLegend.enable = true
|
|
}
|
|
global.DC.ready(initViewer)
|
|
// global.viewer.scene.morphTo2D(1)
|
|
// 清除控制台
|
console.clear()
|
|
function isEleFullScreen () {
|
const fullScreenEle =
|
document.fullscreenElement ||
|
document.msFullscreenElement ||
|
document.mozFullScreenElement ||
|
document.webkitFullscreenElement
|
if (fullScreenEle === null) {
|
|
that.isFullscreen = false
|
return false
|
} else {
|
return true
|
}
|
}
|
|
window.onresize = function () {
|
console.log(isEleFullScreen())
|
}
|
|
// 注册事件
|
|
// 使用示例
|
// this.$EventBus.emit('mapAddLayer', {
|
// layerName: 'housingEstateLayer',
|
// type: 'VectorLayer'
|
// })
|
|
|
this.$EventBus.$on('mapAddLayer', (params) => {
|
that.mapAddLayer(params.layerName, params.type)
|
})
|
|
this.$EventBus.$on('mapRemoveLayer', (params) => {
|
that.mapRemoveLayer(params.layerName, params.type)
|
})
|
|
this.$EventBus.$on('mapClearLayer', (params) => {
|
that.mapClearLayer(params.layerName, params.type)
|
})
|
|
this.$EventBus.$on('layerPointAdd', (params) => {
|
// eslint-disable-next-line no-unused-vars
|
that.layerPointAdd(params.layerName, params.type, params.params, params.incident = (e) => { })
|
})
|
|
this.$EventBus.$on('layerPolygonAdd', (params) => {
|
that.layerPolygonAdd(params.layerName, params.positions, params.material)
|
})
|
|
this.$EventBus.$on('layerShow', (params) => {
|
that.layerShow(params.layerName, params.flag)
|
})
|
|
this.$EventBus.$on('flyToPosition', (params) => {
|
that.flyToPosition(params.siteJd, params.siteWd, params.siteGd = 0, params.siteHeading = 0, params.sitePitch = -90, params.siteRoll = 0, params.time = 3)
|
})
|
|
|
this.$EventBus.$on('addMxTileset', (params) => {
|
// eslint-disable-next-line no-unused-vars
|
that.addMxTileset(params.titlesetName, params.titlesetUrl, params.incident = (e) => { })
|
})
|
|
this.$EventBus.$on('removeMxTileset', (params) => {
|
// eslint-disable-next-line no-unused-vars
|
that.removeMxTileset(params.titlesetName, params.incident = (e) => { })
|
})
|
},
|
|
methods: {
|
/**
|
* @description: 全屏控制
|
* @return {*} 无返回值
|
*/
|
fullscreenchange () {
|
// 最新写法
|
const isFullScreen = document.fullscreenElement
|
if (isFullScreen) {
|
console.log('退出全屏')
|
if (document.exitFullscreen) {
|
document.exitFullscreen()
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen()
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen()
|
} else if (document.webkitCancelFullScreen) {
|
document.webkitCancelFullScreen()
|
}
|
this.isFullscreen = false
|
} else {
|
var fullscreen = document.body // 需要全屏的元素
|
console.log('进入全屏')
|
if (fullscreen.requestFullscreen) {
|
fullscreen.requestFullscreen()
|
} else if (fullscreen.mozRequestFullScreen) {
|
fullscreen.mozRequestFullScreen()
|
} else if (fullscreen.webkitRequestFullscreen) {
|
fullscreen.webkitRequestFullscreen()
|
} else if (fullscreen.msRequestFullscreen) {
|
fullscreen.msRequestFullscreen()
|
}
|
|
this.isFullscreen = true
|
}
|
},
|
/**
|
* 在图层中添加实体(点)
|
* @param {*} item 图标
|
* @param {*} url 图标地址
|
*/
|
addSiteEntity (item, url) {
|
const billboard = new global.DC.Billboard(new global.DC.Position(Number(item.lon), Number(item.lat)), url)
|
billboard.size = [20, 28]
|
billboard.attrParams = item
|
siteEntitylayers.addOverlay(billboard)
|
},
|
|
test () {
|
console.log('map.test(MAP)!!!')
|
},
|
|
/**
|
* 添加图层
|
* @param {*} layerName 图层名称
|
* @param {*} type 图层类型
|
*/
|
mapAddLayer (layerName, type) {
|
if (type == 'VectorLayer') {
|
if (!layersObjcect[layerName]) layersObjcect[layerName] = null
|
layersObjcect[layerName] = new global.DC.VectorLayer('layerName')
|
global.viewer.addLayer(layersObjcect[layerName])
|
}
|
},
|
|
/**
|
* 删除图层
|
* @param {*} layerName 图层名称
|
* @param {*} type 图层类型
|
*/
|
mapRemoveLayer (layerName, type) {
|
if (type == 'VectorLayer') {
|
layersObjcect[layerName].remove()
|
|
layersObjcect[layerName] = null
|
}
|
},
|
|
/**
|
* 清空图层
|
* @param {*} layerName 图层名称
|
* @param {*} type 图层类型
|
*/
|
mapClearLayer (layerName, type) {
|
if (type == 'VectorLayer') {
|
layersObjcect[layerName].clear()
|
}
|
},
|
|
/**
|
* 图层点添加
|
* @param {*} layerName 图层名称
|
* @param {*} type 添加的点位类型
|
* @param {*} params 添加的点位参数（内容、详情）
|
* @param {*} incident 添加的点位事件
|
*/
|
layerPointAdd (layerName, type, params, incident) {
|
|
let pointElement
|
|
if (type == "billboard") {
|
pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lon), Number(params.lat)), params.url)
|
|
pointElement.size = [20, 28]
|
} else if (type == "label") {
|
pointElement = new global.DC.Label(new global.DC.Position(Number(params.lon), Number(params.lat), 0), params.url)
|
|
pointElement.setStyle({
|
fillColor: global.DC.Color.CRIMSON,
|
style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
outlineColor: global.DC.Color.WHITE, // 边框颜色
|
outlineWidth: 8, // 边框大小，
|
font: '14px sans-serif',
|
pixelOffset: { x: 0, y: -24 }
|
})
|
}
|
pointElement.attrParams = params
|
layersObjcect[layerName].addOverlay(pointElement)
|
pointElement.on(global.DC.MouseEventType.CLICK, incident)
|
},
|
|
/**
|
* 图层面添加
|
* @param {*} layerName 图层名称
|
* @param {*} positions 图层位置数据
|
* @param {*} material 颜色
|
*/
|
layerPolygonAdd (layerName, positions, material) {
|
if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
|
this.mapAddLayer(layerName, 'VectorLayer')
|
}
|
|
let polygon = new global.DC.Polygon(positions)
|
|
polygon.setStyle({
|
material: material,
|
extrudedHeight: 0,
|
perPositionHeight: true
|
})
|
|
layersObjcect[layerName].addOverlay(polygon)
|
},
|
|
/**
|
* 图层显示隐藏
|
* @param {*} layerName 图层名称
|
* @param {*} flag 显示隐藏
|
*/
|
layerShow (layerName, flag) {
|
layersObjcect[layerName].show = flag
|
},
|
|
/**
|
* 飞到指定位置
|
* @param {*} siteJd 经度
|
* @param {*} siteWd 纬度
|
* @param {*} siteGd 高度，默认0
|
* @param {*} siteHeading 偏航角度，默认0
|
* @param {*} sitePitch 俯仰角度，默认0
|
* @param {*} siteRoll 翻转角度，默认0
|
* @param {*} time 飞行时间，默认3秒
|
*/
|
flyToPosition (siteJd, siteWd, siteGd, siteHeading, sitePitch, siteRoll, time) {
|
global.viewer.flyToPosition(
|
new global.DC.Position(
|
Number(siteJd),
|
Number(siteWd),
|
Number(siteGd),
|
Number(siteHeading),
|
Number(sitePitch),
|
Number(siteRoll)
|
),
|
function () { },
|
time
|
)
|
},
|
// sdTilesetLayer
|
|
/**
|
* 添加模型
|
* @param {*} titlesetName 图层名称
|
* @param {*} titlesetUrl 模型地址
|
* @param {*} incident 模型点击事件
|
*/
|
addMxTileset (titlesetName, titlesetUrl, incident) {
|
if (!tilesetObject[titlesetName]) tilesetObject[titlesetName] = null
|
|
tilesetObject[titlesetName] = new global.DC.Tileset(titlesetUrl, {
|
luminanceAtZenith: 0.4,
|
// cullWithChildrenBounds: false,
|
// cullRequestsWhileMoving: false,
|
// skipLevelOfDetail: false,
|
shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED
|
})
|
|
tilesetObject[titlesetName].setHeight(5)
|
|
|
tilesetLayer.addOverlay(tilesetObject[titlesetName])
|
|
global.viewer.flyTo(tilesetObject[titlesetName])
|
|
tilesetObject[titlesetName].on(global.DC.MouseEventType.CLICK, incident)
|
},
|
|
/**
|
* 删除模型
|
* @param {*} titlesetName 图层名称
|
* @param {*} incident 模型点击事件
|
*/
|
removeMxTileset (titlesetName, incident) {
|
tilesetObject[titlesetName].off(global.DC.MouseEventType.CLICK, incident)
|
tilesetLayer.removeOverlay(tilesetObject[titlesetName])
|
tilesetObject[titlesetName] = null
|
},
|
},
|
|
}
|
</script>
|
|
<style lang="scss" scope>
|
.viewer-box {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.screen-full-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
right: 20px;
|
bottom: 10px;
|
width: 36px;
|
height: 36px;
|
font-size: 20px;
|
color: #5a5e66;
|
background: #fff;
|
border-radius: 5px;
|
z-index: 99;
|
|
// &.hover-effect {
|
// cursor: pointer;
|
// transition: background 0.3s;
|
|
// &:hover {
|
// background: rgba(0, 0, 0, 0.025);
|
// }
|
// }
|
}
|
}
|
</style>
|
