<template>
|
<div class="viewer-box" id="viewer-container">
|
<slot ref="mainContent" name="mainContent"></slot>
|
</div>
|
</template>
|
|
<script>
|
import { getResLgtdLttdInfo, getStLgtdLttdInfo } from "@/api/singleSk/";
|
import geoJSON from "@/assets/geoJSON.js";
|
let baseLayer = null;
|
|
let siteAllLayer = {};
|
|
let skSiteAll = [];
|
|
export default {
|
name: "mapBox",
|
|
props: {
|
curMap: {
|
type: String,
|
default: "矢量"
|
}
|
},
|
|
watch: {
|
curMap: {
|
handler(newData) {
|
this.mapChanges(newData);
|
}
|
}
|
},
|
|
data() {
|
return {
|
publicPath: process.env.BASE_URL
|
};
|
},
|
|
computed: {},
|
|
mounted() {
|
if (global.viewer != null) {
|
global.viewer = null;
|
}
|
|
global.DC.baseUrl = "/bigScreen/libs/dc-sdk/resources/";
|
|
const that = this;
|
|
// 初始化地图
|
function initViewer() {
|
// new Viewer(new 地图)
|
global.viewer = new global.DC.Viewer("viewer-container", {
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
}
|
});
|
|
let primitiveArr = global.viewer.scene.primitives._primitives;
|
global.viewer.scene.primitives.remove(primitiveArr[0]);
|
|
// 外网
|
that.mapChanges(that.curMap);
|
|
// 设置地图初始位置，角度等
|
global.viewer.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
112.90345419857786,
|
30.886750328577417,
|
1000000
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
});
|
// 启用地图的旋转功能
|
global.viewer.scene.screenSpaceCameraController.enableRotate = false;
|
|
// 启用地图的缩放功能
|
global.viewer.scene.screenSpaceCameraController.enableZoom = false;
|
}
|
|
global.DC.ready(initViewer);
|
|
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.addRegionPolygon(geoJSON);
|
},
|
|
methods: {
|
mapChanges(name) {
|
global.viewer.imageryLayers.remove(baseLayer);
|
if (name == "矢量") {
|
baseLayer = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url:
|
"https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c",
|
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
|
format: "image/jpeg",
|
show: true,
|
maximumLevel: 18
|
})
|
);
|
|
baseLayer.hue = 3;
|
baseLayer.contrast = -1.2;
|
} else {
|
baseLayer = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url:
|
"https://t{s}.tianditu.gov.cn/DataServer??T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c",
|
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
|
format: "image/jpeg",
|
show: true,
|
maximumLevel: 18
|
})
|
);
|
}
|
},
|
|
addRegionPolygon(geoJSON) {
|
let regionNameLayer = new global.DC.VectorLayer("regionNameLayer");
|
global.viewer.addLayer(regionNameLayer);
|
|
geoJSON.features.forEach(item => {
|
let label = new global.DC.Label(
|
new global.DC.Position(
|
Number(item.properties.center[0]),
|
Number(item.properties.center[1])
|
),
|
item.properties.name
|
);
|
label.setStyle({
|
fillColor: global.DC.Namespace.Cesium.Color.fromBytes(
|
43,
|
179,
|
250,
|
255
|
),
|
font: "20px"
|
});
|
|
regionNameLayer.addOverlay(label);
|
});
|
|
const geoJsonSource = global.DC.Namespace.Cesium.GeoJsonDataSource.load(
|
geoJSON,
|
{
|
stroke: global.DC.Namespace.Cesium.Color.fromBytes(2, 27, 121, 0),
|
fill: global.DC.Namespace.Cesium.Color.fromBytes(2, 27, 121, 0),
|
strokeWidth: 1
|
}
|
);
|
|
global.viewer.dataSources.add(geoJsonSource).then(function(dataSource) {
|
let entities = dataSource.entities.values;
|
//修改entity样式
|
for (let i = 0; i < entities.length; i++) {
|
let entity = entities[i];
|
entity.polygon.fill = false;
|
|
entity.polyline = {
|
positions: entity.polygon.hierarchy._value.positions,
|
width: 1,
|
material: global.DC.Namespace.Cesium.Color.fromBytes(
|
43,
|
179,
|
250,
|
255
|
)
|
};
|
}
|
});
|
},
|
|
getSKSiteInfo(params) {
|
const iconUrl = params.iconActive;
|
|
getResLgtdLttdInfo({ eng_scal: params.eng_scal }).then(res => {
|
res.data.resultList.forEach(item => {
|
this.addBuilboard({
|
layerName: `skSiteAllLayer${params.eng_scal}`,
|
attrParams: item,
|
lng: item.center_long,
|
lat: item.center_lat,
|
iconUrl,
|
size: [20, 20],
|
siteIncident: this.siteIncident
|
});
|
});
|
});
|
},
|
|
searchSK(value) {
|
getResLgtdLttdInfo({ res_nm: value }).then(res => {
|
this.$emit("getsearchSKValList", res.data.resultList);
|
});
|
},
|
|
sKValItemClick(item) {
|
global.viewer.flyToPosition(
|
new global.DC.Position(
|
Number(item.center_long),
|
Number(item.center_lat),
|
Number(2000),
|
Number(0),
|
Number(-90),
|
Number(0)
|
)
|
);
|
},
|
|
getStLgtdLttdInfo(params) {
|
const iconUrl = params.iconActive;
|
|
getStLgtdLttdInfo().then(res => {
|
res.data.resultList.forEach(item => {
|
this.addBuilboard({
|
layerName: `sySiteAllLayer`,
|
lng: item.station_longitude,
|
lat: item.station_latitude,
|
iconUrl,
|
size: [20, 20],
|
siteIncident: this.siteIncident
|
});
|
});
|
});
|
},
|
|
siteIncident(e) {
|
this.$router.push({
|
name: "水库详情",
|
params: { ...e.overlay.attrParams }
|
});
|
},
|
|
addSiteAllLayer(params) {
|
if (params.title == "水库") {
|
this.getSKSiteInfo(params.children, "all");
|
}
|
},
|
|
removeSiteAllLayer(params) {
|
if (params.title == "水库") {
|
this.removeLayer("skSiteAllLayer");
|
}
|
},
|
|
addSiteLayer(params) {
|
console.log(params, 655333333);
|
|
if (params.parentTitle == "水库") {
|
this.getSKSiteInfo(params);
|
} else if (params.parentTitle == "水雨情监测") {
|
this.getStLgtdLttdInfo(params);
|
}
|
},
|
|
removeSiteLayer(params) {
|
if (params.parentTitle == "水库") {
|
this.removeLayer(`skSiteAllLayer${params.eng_scal}`);
|
} else if (params.parentTitle == "水雨情监测") {
|
this.removeLayer(`sySiteAllLayer`);
|
}
|
},
|
|
addLayer(layerName) {
|
siteAllLayer[layerName] = new global.DC.ClusterLayer(layerName, {
|
style: "clustering"
|
});
|
global.viewer.addLayer(siteAllLayer[layerName]);
|
},
|
|
removeLayer(layerName) {
|
global.viewer.removeLayer(siteAllLayer[layerName]);
|
siteAllLayer[layerName] = null;
|
},
|
|
addBuilboard({
|
layerName,
|
lng,
|
lat,
|
iconUrl,
|
size,
|
attrParams,
|
siteIncident
|
}) {
|
if (!siteAllLayer[layerName]) {
|
this.addLayer(layerName);
|
}
|
|
let billboard = new global.DC.Billboard(
|
new global.DC.Position(Number(lng), Number(lat)),
|
iconUrl
|
);
|
|
billboard.attrParams = attrParams;
|
|
billboard.size = size;
|
|
billboard.setStyle({
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
});
|
|
billboard.on(global.DC.MouseEventType.CLICK, siteIncident);
|
|
siteAllLayer[layerName].addOverlay(billboard);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scope>
|
.viewer-box {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
