<template>
|
<div :style="{height: cesiumContainer}">
|
<div id="cesiumContainer"></div>
|
</div>
|
</template>
|
|
<script>
|
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",
|
url: "https://192.168.1.2:9999/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:`https://192.168.1.2:9999/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, {});
|
|
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: false,
|
geocoder: false,
|
scene3DOnly: true,
|
sceneModePicker: false,
|
baseLayerPicker: false,
|
shouldAnimate: false,
|
navigationHelpButton: false,
|
navigationInstructionsInitiallyVisible: false,
|
imageryProvider: imageryProvider1,
|
shadows: false,
|
animation: false,
|
timeline: false,
|
fullscreenButton: false,
|
vrButton: false,
|
});
|
// 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;
|
this.$emit('mapReady');
|
},
|
resizeMap() {
|
let winHeight = Number(document.documentElement.clientWidth);
|
document.getElementById("cesiumContainer").style.height =
|
winHeight + "px";
|
},
|
},
|
mounted() {
|
this.initMap();
|
},
|
computed: {
|
cesiumContainer: function () {
|
return window.innerHeight - 230 + "px";
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
#cesiumContainer {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
border: none;
|
overflow: hidden;
|
}
|
</style>
|
