<template>
|
<div :style="{height: cesiumContainer}">
|
<div id="cesiumContainer"></div>
|
</div>
|
</template>
|
|
<script>
|
// import {
|
// clearVideoConverter,
|
// freshNginxff,
|
// getAddressByType,
|
// getSys,
|
// getTiles3D,
|
// } from "../../api/api";
|
import { listConfig } from "@/api/system/config";
|
import {mapState} from "vuex";
|
|
let viewer = null;
|
let googleimagery;
|
let arcgisimagery;
|
let arcgisTerrainProvider;
|
let terrainProvider;
|
let tdtimagery;
|
let tdtannoimagery;
|
let tdtvectorimagery;
|
let tdtvectoranoimagery;
|
let serverIp = "";
|
let serverUrl = "";
|
let tilesetArr = [];
|
let origin = [];
|
let preImageryArr = [];
|
let importantLableArr = []; //重点地名地址标记数组
|
let address_overlays3D;
|
let pomhandler; //操作监听句柄对象
|
let simple3D;
|
let bdtvectoranoimagery;
|
export default {
|
name: "cesium-map",
|
data() {
|
return {
|
// 日期范围
|
dateRange: [],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
configName: undefined,
|
configKey: undefined,
|
configType: undefined
|
},
|
};
|
},
|
methods: {
|
initMap(terrainEx) {
|
let _this = this;
|
//谷歌地图
|
let googleimageryProvider = new Cesium.UrlTemplateImageryProvider({
|
url:
|
"http://mt1.google.cn/vt/lyrs=s@113&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
|
maximumLevel: 19,
|
tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
});
|
googleimagery = new Cesium.ImageryLayer(googleimageryProvider, {});
|
|
//arcgis影像地图
|
let arcgisimageryProvider = new Cesium.ArcGisMapServerImageryProvider({
|
url:
|
"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
});
|
arcgisimagery = new Cesium.ImageryLayer(arcgisimageryProvider, {});
|
|
//arcgis地形数据
|
arcgisTerrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
|
url:
|
"https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
|
});
|
let imageryProvider1 = new Cesium.TileMapServiceImageryProvider({
|
// url: process.env.VUE_APP_BASE_GIS + "/daqing/dom-sea",
|
url: process.env.VUE_APP_BASE_GIS + "/daqing/dom-sea",
|
});
|
//本地地形
|
terrainProvider = new Cesium.CesiumTerrainProvider({
|
// url: this,nginxIp + "daqing/dem-hdq"
|
url: process.env.VUE_APP_BASE_GIS + "/daqing/dem-dqnew"
|
});
|
//注记
|
let imageryProvider2 = new Cesium.TileMapServiceImageryProvider({
|
url: process.env.VUE_APP_BASE_GIS + "/daqing/dom-zj"
|
});
|
bdtvectoranoimagery = new Cesium.ImageryLayer(imageryProvider2, {});
|
//天地图影像服务，质量太差，如无特殊要求就不用
|
let tdtimgurl =
|
"http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile" +
|
"&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
|
"&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&" +
|
"tk=954ce480477b67c303b290204f3e539a";
|
let tdtimageryProvider = new Cesium.WebMapTileServiceImageryProvider({
|
url: tdtimgurl,
|
layer: "tdtimgLayer",
|
style: "default",
|
format: "image/jpeg",
|
tileMatrixSetID: "GoogleMapsCompatible",
|
show: true,
|
});
|
tdtimagery = new Cesium.ImageryLayer(tdtimageryProvider, {});
|
|
//天地图影像注记
|
let tdtimganourl =
|
"http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile" +
|
"&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}" +
|
"&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg" +
|
"&tk=954ce480477b67c303b290204f3e539a";
|
let tdtannoimageryProvider = new Cesium.WebMapTileServiceImageryProvider({
|
url: tdtimganourl,
|
layer: "tdtimganoLayer",
|
style: "default",
|
format: "image/jpeg",
|
tileMatrixSetID: "GoogleMapsCompatible",
|
show: true,
|
});
|
tdtannoimagery = new Cesium.ImageryLayer(tdtannoimageryProvider, {});
|
|
//天地图二维矢量底图
|
// let tdtvecurl =
|
// "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile" +
|
// "&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}" +
|
// "&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg" +
|
// "&tk=954ce480477b67c303b290204f3e539a";
|
// let tdtvectorProvider = new Cesium.WebMapTileServiceImageryProvider({
|
// url: tdtvecurl,
|
// layer: "tdtvecLayer",
|
// style: "default",
|
// format: "image/jpeg",
|
// tileMatrixSetID: "GoogleMapsCompatible",
|
// show: true,
|
// });
|
// tdtvectorimagery = new Cesium.ImageryLayer(tdtvectorProvider, {});
|
|
//天地图二维矢量底图注记
|
// let tdtvecanourl =
|
// "http://t0.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile" +
|
// "&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}" +
|
// "&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg" +
|
// "&tk=954ce480477b67c303b290204f3e539a";
|
// let tdtvectoranoProvider = new Cesium.WebMapTileServiceImageryProvider({
|
// url: tdtvecanourl,
|
// layer: "tdtvecLayer",
|
// style: "default",
|
// format: "image/jpeg",
|
// tileMatrixSetID: "GoogleMapsCompatible",
|
// show: true,
|
// });
|
// tdtvectoranoimagery = new Cesium.ImageryLayer(tdtvectoranoProvider, {});
|
|
preImageryArr = [googleimagery, tdtannoimagery];
|
|
//cesium全球30米分辨率地形资源token
|
Cesium.Ion.defaultAccessToken =
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0NjBlYzRiYS0wMDRhL" +
|
"TRjZWYtODJhOS1jZTk5ZmI4ZDg5ZTIiLCJpZCI6ODI1MCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MTU3M" +
|
"DU1Mn0.yfJ_i4EPiunFj_qUftuv1ksx4pUNgnPC16vQCBGrM08";
|
//初始化三维场景
|
viewer = new Cesium.Viewer("cesiumContainer", {
|
fullscreenButton: false,
|
homeButton: false,
|
timeline: true,
|
geocoder: false,
|
scene3DOnly: true,
|
sceneModePicker: false,
|
baseLayerPicker: false,
|
shouldAnimate: true,
|
navigationHelpButton: false,
|
navigationInstructionsInitiallyVisible: false,
|
//showRenderLoopErrors: false,
|
//mapProjection: new Cesium.WebMercatorProjection(),
|
//terrainProvider: Cesium.createWorldTerrain({requestWaterMask:true}),
|
imageryProvider: imageryProvider1,
|
// terrainProvider: terrainProvider,
|
// terrainExaggeration: terrainEx,
|
shadows: true,
|
});
|
// viewer.imageryLayers.add(tdtannoimagery);
|
viewer.imageryLayers.add(bdtvectoranoimagery);
|
//其他设置
|
viewer.scene.globe.enableLighting = false; //太阳光
|
viewer.scene.skyBox.show = true; //星空
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
viewer.scene.globe.showGroundAtmosphere = true;
|
viewer.scene._hdr = false;
|
// 去掉entity的点击事件
|
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
|
);
|
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
Cesium.ScreenSpaceEventType.LEFT_CLICK
|
);
|
viewer.scene.light = new Cesium.DirectionalLight({
|
direction: new Cesium.Cartesian3(0.354925, -0.890918, -0.283358)
|
})
|
console.log(viewer)
|
window.viewer = viewer;
|
const ardList = ["ard42:poi", "ard42:tube", "ard42:grid"];
|
|
ardList.forEach((item) => {
|
const wmsUrl = `http://192.168.1.11:8080/geoserver/ard42/wms?layers=${item}`;
|
|
const wmsSource = new Cesium.WebMapServiceImageryProvider({
|
url: wmsUrl,
|
layers: `${item}`,
|
parameters: {
|
service: "WMS",
|
transparent: true,
|
format: "image/png",
|
},
|
tilingScheme: new Cesium.GeographicTilingScheme({
|
//此处很重要，很重要。。。
|
numberOfLevelZeroTilesX: 2,
|
numberOfLevelZeroTilesY: 1,
|
}),
|
});
|
|
viewer.scene.imageryLayers.addImageryProvider(wmsSource);
|
});
|
this.$emit('mapReady');
|
},
|
initSys(data) {
|
let nginxUrl = "";
|
// for (let i = 0; i < data.length; i++) {
|
// switch (data[i].sysType) {
|
// // case "gis":
|
// // serverIp = data[i].sysContent;
|
// // window.serverIP = serverIp;
|
// // break;
|
// case "origin":
|
// origin = data[i].sysContent.split(",");
|
// break;
|
// // case "nginx":
|
// // nginxUrl = data[i].sysContent;
|
// // // nginxUrl = 'D:\\apache-tomcat-8.5.39\\webapps\\easyApi\\server\\';
|
// // break;
|
// // case "smarteye":
|
// // serverUrl = data[i].sysContent;
|
// // window.serverUrl = serverUrl;
|
// // jSW.swInit({
|
// // url: serverUrl, // bv_nginx.exe服务器地址
|
// // calltype: jSW.CallProtoType.AUTO, // AUTO: IE优先使用OCX, 如果希望IE仍然使用HTTP通信, 请使用jSW.CallProtoType.HTTP
|
// // });
|
// // break;
|
// default:
|
// break;
|
// }
|
// }
|
// let args = {
|
// camAdd: nginxUrl,
|
// };
|
// freshNginxff(args).then((res) => {
|
// if (res) {
|
// console.log("代理配置刷新成功！");
|
// setTimeout(() => {
|
// getTiles3D().then((res) => this.init3dtilesmaps(res.data));
|
// }, 5000);
|
// } else {
|
// console.log("代理配置添加成功！");
|
// }
|
// });
|
|
// this.wholeView();
|
// clearVideoConverter();
|
// window.onbeforeunload = function () {
|
// commandMan.methods.smartEyelogout();
|
// jSW.swDeInit();
|
// };
|
if(data.length > 0){
|
origin = data[0].configValue.split(",");
|
console.log(origin)
|
this.wholeView();
|
} else {
|
console.log("未查询到结果！")
|
}
|
|
},
|
init3dtilesmaps(data) {
|
//模型平移的转移矩阵
|
for (let i = 0; i < data.length; i++) {
|
if (data[i].tilesType === "cc") {
|
this.add3dtilesmap(data[i]);
|
}
|
}
|
},
|
add3dtilesmap(data) {
|
let modelMatrix = Cesium.Matrix4.fromArray([
|
1.0,
|
0.0,
|
0.0,
|
0.0,
|
0.0,
|
1.0,
|
0.0,
|
0.0,
|
0.0,
|
0.0,
|
1.0,
|
0.0,
|
Number(data.tilesX),
|
Number(data.tilesY),
|
Number(data.tilesZ),
|
1.0,
|
//x, y, z, 1.0
|
]);
|
//配置市区三维数据
|
let tilesetOption = {
|
url: serverIp + data.tilesUrl,
|
modelMatrix: modelMatrix, //引入转移矩阵
|
shadows: Cesium.ShadowMode.DISABLED,
|
imageBasedLightingFactor: new Cesium.Cartesian2(2.5, 1),
|
maximumScreenSpaceError: 1,
|
maximumNumberOfLoadedTiles: 1000,
|
maximumMemoryUsage: 256,
|
dynamicScreenSpaceError: true,
|
dynamicScreenSpaceErrorDensity: 0.00278,
|
dynamicScreenSpaceErrorFactor: 4.0,
|
dynamicScreenSpaceErrorHeightFalloff: 0.25,
|
skipLevelOfDetail: true,
|
baseScreenSpaceError: 1024,
|
skipScreenSpaceErrorFactor: 16,
|
skipLevels: 1,
|
immediatelyLoadDesiredLevelOfDetail: true,
|
loadSiblings: false,
|
cullWithChildrenBounds: true,
|
cullRequestsWhileMoving: true,
|
cullRequestsWhileMovingMultiplier: 0.001, // 值越小能够更快的剔除
|
preloadWhenHidden: true,
|
preferLeaves: true,
|
progressiveResolutionHeightFraction: 0.1, // 数值偏于0能够让初始加载变得模糊
|
};
|
let tileset = new Cesium.Cesium3DTileset(tilesetOption);
|
tilesetArr.push(tileset);
|
//加载3dtiles数据
|
viewer.scene.primitives.add(tileset);
|
},
|
remove3dtilesmap(url) {
|
let primitivesArr = viewer.scene.primitives._primitives;
|
let fullserverIp = serverIp + url;
|
for (let i = 0; i < primitivesArr.length; i++) {
|
if (fullserverIp === primitivesArr[i]._url) {
|
viewer.scene.primitives.remove(primitivesArr[i]);
|
break;
|
}
|
}
|
},
|
wholeView() {
|
viewer.camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(
|
origin[0],
|
origin[1],
|
origin[2]
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(origin[3]),
|
pitch: Cesium.Math.toRadians(origin[4]),
|
roll: 0,
|
},
|
});
|
},
|
resizeMap() {
|
let winHeight = Number(document.documentElement.clientWidth);
|
document.getElementById("cesiumContainer").style.height =
|
winHeight + "px";
|
},
|
//定位到坐标
|
flyToLocation(lon, lat, height) {
|
viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
Number(lon),
|
Number(lat),
|
Number(height)
|
),
|
});
|
},
|
flyToLocalArea(centerPois) {
|
viewer.camera.flyTo({
|
destination: centerPois,
|
});
|
},
|
},
|
mounted() {
|
this.initMap(1.0);
|
// 高度注释
|
// let winHeight=document.body.scrollHeight;
|
// document.getElementById("cesiumContainer").style.height=winHeight+"px";
|
|
// listConfig(this.addDateRange(this.queryParams, this.dateRange)).then((res) => this.initSys(res.data));
|
// listConfig(this.addDateRange(this.queryParams, this.dateRange)).then((res) => {
|
// console.log(res.data)
|
// })
|
|
// listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
// console.log(response)
|
// // this.initSys(response.rows);
|
// // this.configList = response.rows;
|
// });
|
let params = {
|
configKey: "origin"
|
}
|
listConfig(params).then((res) =>{
|
console.log(res)
|
this.initSys(res.rows);
|
})
|
},
|
computed: {
|
cesiumContainer: function () {
|
return window.innerHeight - 230 + "px";
|
},
|
...mapState(["nginxIp"]),
|
},
|
};
|
</script>
|
|
<style scoped>
|
#cesiumContainer {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
border: none;
|
overflow: hidden;
|
}
|
</style>
|
