|
|
@@ -12,190 +12,142 @@ import WaterQuality from "@/assets/Images/MapSymbol/WaterQuality.png";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ waterClass: null,
|
|
|
+ };
|
|
|
},
|
|
|
created() {
|
|
|
- proj4.defs("EPSG:0986", "+proj=tmerc +lat_0=0 +lon_0=120.666666666667 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs")
|
|
|
+ proj4.defs(
|
|
|
+ "EPSG:0986",
|
|
|
+ "+proj=tmerc +lat_0=0 +lon_0=120.666666666667 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs"
|
|
|
+ );
|
|
|
// $.getJSON("./static/data/guanxian.json", function (result) {
|
|
|
// globalVariable.guanxianGeojson = result
|
|
|
// });
|
|
|
},
|
|
|
mounted() {
|
|
|
- let that = this;
|
|
|
- // // 默认中国区域
|
|
|
- // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
|
|
|
- // 90,
|
|
|
- // -20,
|
|
|
- // 110,
|
|
|
- // 90
|
|
|
- // );
|
|
|
- let viewer = new Cesium.Viewer("cesiumContainer", {
|
|
|
- // useDefaultRenderLoop: false, //关闭自动渲染
|
|
|
- animation: false, //动画控制不显示
|
|
|
- timeline: false, //时间线不显示
|
|
|
- fullscreenButton: false, //全屏按钮不显示
|
|
|
- infoBox: false,
|
|
|
- baseLayerPicker: false, //地图切换不显示
|
|
|
- // terrainProvider: Cesium.createWorldTerrain(), // 地形
|
|
|
- imageryProvider: new Cesium.SingleTileImageryProvider({
|
|
|
- url: (function createColorCanvas(color) {
|
|
|
- var width = 1,
|
|
|
- height = 1;
|
|
|
- var canvas = document.createElement("canvas");
|
|
|
- canvas.width = width;
|
|
|
- canvas.height = height;
|
|
|
- var ctx = canvas.getContext("2d");
|
|
|
- ctx.fillStyle = color;
|
|
|
- ctx.fillRect(0, 0, width, height);
|
|
|
- return canvas.toDataURL();
|
|
|
- })("#ffffff00"),
|
|
|
- rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
|
|
|
- }),
|
|
|
- geocoder: false,
|
|
|
- homeButton: false,
|
|
|
- selectionIndicator: false, // 去除绿色选择框
|
|
|
- sceneModePicker: false,
|
|
|
- navigationHelpButton: false,
|
|
|
- scene3DOnly: true, // 仅以3D渲染以节省GPU内存
|
|
|
- useBrowserRecommendedResolution: true, // 以浏览器建议的分辨率渲染
|
|
|
+ this.waterClass = new Cesium.Water();
|
|
|
+ this.initViewer().then(() => {
|
|
|
+ this.setViewDefaultlocation().then(() => {
|
|
|
+ this.mainFunc();
|
|
|
+ });
|
|
|
});
|
|
|
-
|
|
|
- //去除版权标记
|
|
|
- viewer._cesiumWidget._creditContainer.style.display = "none";
|
|
|
-
|
|
|
- globalVariable.viewer = viewer;
|
|
|
-
|
|
|
- this.mainFunc(viewer);
|
|
|
-
|
|
|
- // setTimeout(() => {
|
|
|
- //
|
|
|
- // }, 999);
|
|
|
-
|
|
|
- // this.cesium.viewer.render();
|
|
|
- return;
|
|
|
},
|
|
|
methods: {
|
|
|
- mainFunc(viewer) {
|
|
|
- let that = this;
|
|
|
- this.mapConfig(viewer);
|
|
|
-
|
|
|
- // // 加载天地图影像
|
|
|
- // viewer.imageryLayers.addImageryProvider(
|
|
|
- // new Cesium.WebMapTileServiceImageryProvider({
|
|
|
- // url: "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + systemConfig.tdt_tk,
|
|
|
- // // url: "/proxy_tdt/proxy{s}/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+systemConfig.tdt_tk,
|
|
|
- // layer: "img",
|
|
|
- // style: "default",
|
|
|
- // tileMatrixSetID: "w",
|
|
|
- // format: "image/jpeg",
|
|
|
- // subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
|
|
|
- // tileMatrixSetID: "GoogleMapsCompatible",
|
|
|
- // show: true,
|
|
|
- // minimumLevel: 1,
|
|
|
- // maximumLevel: 18,
|
|
|
- // // rectangle: Cesium.Rectangle.fromDegrees(90, -90, 180, -180),
|
|
|
- // })
|
|
|
- // );
|
|
|
- // //加载影像注记
|
|
|
- // viewer.imageryLayers.addImageryProvider(
|
|
|
- // new Cesium.WebMapTileServiceImageryProvider({
|
|
|
- // url: "http://t{s}.tianditu.gov.cn/cia_w/wmts?tk=" + systemConfig.tdt_tk,
|
|
|
- // layer: "cia",
|
|
|
- // style: "default",
|
|
|
- // tileMatrixSetID: "w",
|
|
|
- // format: "tiles",
|
|
|
- // subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
|
|
|
- // maximumLevel: 20,
|
|
|
- // })
|
|
|
- // );
|
|
|
-
|
|
|
- viewer.imageryLayers.addImageryProvider(
|
|
|
- new Cesium.UrlTemplateImageryProvider({
|
|
|
- url: 'http://202.107.245.52:12017/v1.0/gr?l={z}&x={x}&y={y}',
|
|
|
- minimumLevel: 1,
|
|
|
- maximumLevel: 19,
|
|
|
- format: "png"
|
|
|
- }),
|
|
|
- );
|
|
|
+ initViewer() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ globalVariable.viewer = new Cesium.Viewer("cesiumContainer", {
|
|
|
+ // useDefaultRenderLoop: false, //关闭自动渲染
|
|
|
+ animation: false, //动画控制不显示
|
|
|
+ timeline: false, //时间线不显示
|
|
|
+ fullscreenButton: false, //全屏按钮不显示
|
|
|
+ infoBox: false,
|
|
|
+ baseLayerPicker: false, //地图切换不显示
|
|
|
+ // terrainProvider: Cesium.createWorldTerrain(), // 地形
|
|
|
+ imageryProvider: new Cesium.SingleTileImageryProvider({
|
|
|
+ url: (function createColorCanvas(color) {
|
|
|
+ var width = 1,
|
|
|
+ height = 1;
|
|
|
+ var canvas = document.createElement("canvas");
|
|
|
+ canvas.width = width;
|
|
|
+ canvas.height = height;
|
|
|
+ var ctx = canvas.getContext("2d");
|
|
|
+ ctx.fillStyle = color;
|
|
|
+ ctx.fillRect(0, 0, width, height);
|
|
|
+ return canvas.toDataURL();
|
|
|
+ })("#ffffff00"),
|
|
|
+ rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
|
|
|
+ }),
|
|
|
+ geocoder: false,
|
|
|
+ homeButton: false,
|
|
|
+ selectionIndicator: false, // 去除绿色选择框
|
|
|
+ sceneModePicker: false,
|
|
|
+ navigationHelpButton: false,
|
|
|
+ scene3DOnly: true, // 仅以3D渲染以节省GPU内存
|
|
|
+ useBrowserRecommendedResolution: true, // 以浏览器建议的分辨率渲染
|
|
|
+ });
|
|
|
+ //去除版权标记
|
|
|
+ globalVariable.viewer._cesiumWidget._creditContainer.style.display =
|
|
|
+ "none";
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- // 定位
|
|
|
- viewer.camera.flyTo({
|
|
|
- destination: Cesium.Cartesian3.fromDegrees(
|
|
|
- systemConfig.mapDefault.center.lon,
|
|
|
- systemConfig.mapDefault.center.lat,
|
|
|
- systemConfig.mapDefault.height,
|
|
|
- ),
|
|
|
- orientation: {
|
|
|
- heading: Cesium.Math.toRadians(systemConfig.mapDefault.heading), // 方向
|
|
|
- pitch: Cesium.Math.toRadians(systemConfig.mapDefault.pitch), // 倾斜角度
|
|
|
- roll: Cesium.Math.toRadians(systemConfig.mapDefault.roll),
|
|
|
- },
|
|
|
+ // 默认定位
|
|
|
+ setViewDefaultlocation(time) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ globalVariable.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(
|
|
|
+ systemConfig.mapDefault.center.lon,
|
|
|
+ systemConfig.mapDefault.center.lat,
|
|
|
+ systemConfig.mapDefault.height
|
|
|
+ ),
|
|
|
+ orientation: {
|
|
|
+ heading: Cesium.Math.toRadians(systemConfig.mapDefault.heading), // 方向
|
|
|
+ pitch: Cesium.Math.toRadians(systemConfig.mapDefault.pitch), // 倾斜角度
|
|
|
+ roll: Cesium.Math.toRadians(systemConfig.mapDefault.roll),
|
|
|
+ },
|
|
|
+ duration: isNaN(time) ? 3 : time,
|
|
|
+ pitchAdjustHeight: 1000,
|
|
|
+ complete: function () {
|
|
|
+ resolve();
|
|
|
+ },
|
|
|
+ });
|
|
|
});
|
|
|
+ },
|
|
|
+
|
|
|
+ mainFunc() {
|
|
|
+ this.mapConfig();
|
|
|
|
|
|
- this.getPointPosition().then((result) => {
|
|
|
- that.bindPopup();
|
|
|
- }).catch((err) => {
|
|
|
+ // 加载地图瓦片
|
|
|
+ this.addMapTiles("arcgis");
|
|
|
|
|
|
+ // this.getPointPosition()
|
|
|
+ // .then((result) => {
|
|
|
+ // that.bindPopup();
|
|
|
+ // })
|
|
|
+ // .catch((err) => {});
|
|
|
+
|
|
|
+ this.tilesetAdd();
|
|
|
+
|
|
|
+ this.addWater("./static/data/ojk_water_v3.json", {
|
|
|
+ // this.addWater("./static/data/ojksb.json", {
|
|
|
+ // normalMap: "img/textures/waterNormals.jpg", // 水正常扰动的法线图
|
|
|
+ frequency: 8000.0, // 控制波数的数字。
|
|
|
+ animationSpeed: 0.02, // 控制水的动画速度的数字。
|
|
|
+ amplitude: 5.0, // 控制水波振幅的数字。
|
|
|
+ specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
|
|
+ baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
|
|
+ blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
|
|
|
+ height: -1, //水面高度
|
|
|
+ clampToGround: true, //是否贴地
|
|
|
+ opacity: 0.8, //透明度
|
|
|
});
|
|
|
|
|
|
- // this.singleClick(viewer);
|
|
|
+ // this.singleClick();
|
|
|
|
|
|
// this.addGWDataPrimitive();
|
|
|
|
|
|
- // // 模型加载;
|
|
|
- // 建筑
|
|
|
- if (systemConfig.modelTilesObj.build && systemConfig.modelTilesMatrixObj.build) {
|
|
|
- let pianyi = this.createMatrix4(systemConfig.modelTilesMatrixObj.build);
|
|
|
- globalVariable.build = this.add3DTilesData(systemConfig.modelTilesObj.build, pianyi, true);
|
|
|
- }
|
|
|
- // 其他建筑（厂房）
|
|
|
- if (systemConfig.modelTilesObj.other_build && systemConfig.modelTilesMatrixObj.other_build) {
|
|
|
- let pianyi = this.createMatrix4(systemConfig.modelTilesMatrixObj.other_build);
|
|
|
- globalVariable.other_build = this.add3DTilesData(systemConfig.modelTilesObj.other_build, pianyi, true);
|
|
|
- }
|
|
|
- if (systemConfig.modelTilesObj.plan && systemConfig.modelTilesMatrixObj.plan) {
|
|
|
- // 地面
|
|
|
- let pianyi = this.createMatrix4(systemConfig.modelTilesMatrixObj.plan);
|
|
|
- globalVariable.plan = this.add3DTilesData(systemConfig.modelTilesObj.plan, pianyi, true);
|
|
|
- }
|
|
|
- // globalVariable.plan.style = new Cesium.Cesium3DTileStyle({
|
|
|
- // // //写法一
|
|
|
- // color: "color('rgba(255,255,255,0.5)')",
|
|
|
- // //写法2
|
|
|
- // // color: {
|
|
|
- // // evaluateColor: function (feature, result) {
|
|
|
- // // let color = new Cesium.Color(1, 1, 1, param);
|
|
|
- // // return color;
|
|
|
- // // }
|
|
|
- // // },
|
|
|
- // // show: true,
|
|
|
- // });
|
|
|
- if (systemConfig.modelTilesObj.pipe && systemConfig.modelTilesMatrixObj.pipe) {
|
|
|
- // 管网
|
|
|
- let pianyi = this.createMatrix4(systemConfig.modelTilesMatrixObj.pipe);
|
|
|
- globalVariable.pipe = this.add3DTilesData(systemConfig.modelTilesObj.pipe, pianyi, false);
|
|
|
- }
|
|
|
- // globalVariable.tileset = [globalVariable.plan, globalVariable.build]
|
|
|
- // this.loop();
|
|
|
+ // this.loadBigDataGltf();
|
|
|
},
|
|
|
+
|
|
|
// cesium 球体配置
|
|
|
- mapConfig(viewer) {
|
|
|
- let globe = viewer.scene.globe;
|
|
|
+ mapConfig() {
|
|
|
// 基础球体颜色
|
|
|
- globe.baseColor = Cesium.Color.BLUE;
|
|
|
+ globalVariable.viewer.scene.globe.baseColor = Cesium.Color.BLUE;
|
|
|
// 取消大气效果（发光）
|
|
|
- globe.showGroundAtmosphere = true;
|
|
|
+ globalVariable.viewer.scene.globe.showGroundAtmosphere = true;
|
|
|
|
|
|
- globe.translucency.enabled = true;
|
|
|
+ globalVariable.viewer.scene.globe.translucency.enabled = true;
|
|
|
|
|
|
// // 地底颜色
|
|
|
- // globe.undergroundColor = undefined;
|
|
|
+ // globalVariable.viewer.scene.globe.undergroundColor = undefined;
|
|
|
|
|
|
// 地形遮盖
|
|
|
- globe.depthTestAgainstTerrain = false;
|
|
|
+ globalVariable.viewer.scene.globe.depthTestAgainstTerrain = false;
|
|
|
|
|
|
- // globe.translucency.frontFaceAlpha = 1.0;
|
|
|
- // globe.translucency.rectangle = Cesium.Rectangle.fromDegrees(
|
|
|
+ // globalVariable.viewer.scene.globe.translucency.frontFaceAlpha = 1.0;
|
|
|
+ // globalVariable.viewer.scene.globe.translucency.rectangle = Cesium.Rectangle.fromDegrees(
|
|
|
// 120.87373270003363,
|
|
|
// 27.913116219448348,
|
|
|
// 120.98856425530658,
|
|
|
@@ -203,36 +155,36 @@ export default {
|
|
|
// );
|
|
|
|
|
|
// // 地下模式
|
|
|
- // viewer.scene.screenSpaceCameraController.enableCollisionDetection = true ;
|
|
|
- // viewer.scene.undergroundMode = true;
|
|
|
+ // globalVariable.viewer.scene.screenSpaceCameraController.enableCollisionDetection = true ;
|
|
|
+ // globalVariable.viewer.scene.undergroundMode = true;
|
|
|
// // 设置地表透明度
|
|
|
- // viewer.scene.globe.translucency.frontFaceAlpha=0
|
|
|
+ // globalVariable.viewer.scene.globe.translucency.frontFaceAlpha=0
|
|
|
|
|
|
// // 天空盒隐藏
|
|
|
- // viewer.scene.skyBox.show = false;
|
|
|
+ // globalVariable.viewer.scene.skyBox.show = false;
|
|
|
// // 解决抗锯齿问题
|
|
|
// if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
|
|
|
// //判断是否支持图像渲染像素化处理
|
|
|
- // viewer.resolutionScale = window.devicePixelRatio;
|
|
|
+ // globalVariable.viewer.resolutionScale = window.devicePixelRatio;
|
|
|
// }
|
|
|
// // //是否开启抗锯齿
|
|
|
- // viewer.scene.fxaa = true;
|
|
|
- // viewer.scene.postProcessStages.fxaa.enabled = true;
|
|
|
- // viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
|
- // viewer.scene.debugShowFramesPerSecond = true;
|
|
|
- // viewer.scene.globe.enableLighting = true;
|
|
|
- // viewer.shadows = true;
|
|
|
- // //viewer.shadowMap.softShadows = true
|
|
|
- // viewer.shadowMap.darkness = 0.7; //阴影透明度--越大越透明
|
|
|
+ // globalVariable.viewer.scene.fxaa = true;
|
|
|
+ // globalVariable.viewer.scene.postProcessStages.fxaa.enabled = true;
|
|
|
+ // globalVariable.viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
|
+ // globalVariable.viewer.scene.debugShowFramesPerSecond = true;
|
|
|
+ // globalVariable.viewer.scene.globe.enableLighting = true;
|
|
|
+ // globalVariable.viewer.shadows = true;
|
|
|
+ // //globalVariable.viewer.shadowMap.softShadows = true
|
|
|
+ // globalVariable.viewer.shadowMap.darkness = 0.7; //阴影透明度--越大越透明
|
|
|
// // 改变时间设置光照效果
|
|
|
// var utc = Cesium.JulianDate.fromDate(new Date("2021/07/04 08:00:00"));
|
|
|
// //北京时间=UTC+8=GMT+8
|
|
|
- // viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(
|
|
|
+ // globalVariable.viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(
|
|
|
// utc,
|
|
|
// 8,
|
|
|
// new Cesium.JulianDate()
|
|
|
// );
|
|
|
- // viewer.scene.light = new Cesium.DirectionalLight({
|
|
|
+ // globalVariable.viewer.scene.light = new Cesium.DirectionalLight({
|
|
|
// //去除时间原因影响模型颜色
|
|
|
// direction: new Cesium.Cartesian3(
|
|
|
// 0.35492591601301104,
|
|
|
@@ -241,23 +193,177 @@ export default {
|
|
|
// ),
|
|
|
// });
|
|
|
},
|
|
|
- loop() {
|
|
|
- requestAnimationFrame(this.loop);
|
|
|
- // this.$options.methods.renderCesium();
|
|
|
- globalVariable.viewer.render();
|
|
|
+
|
|
|
+ // 添加地图底图瓦片
|
|
|
+ addMapTiles(key) {
|
|
|
+ switch (key) {
|
|
|
+ case "tdt":
|
|
|
+ // 加载天地图影像
|
|
|
+ globalVariable.viewer.imageryLayers.addImageryProvider(
|
|
|
+ new Cesium.WebMapTileServiceImageryProvider({
|
|
|
+ url:
|
|
|
+ "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
|
|
|
+ systemConfig.tdt_tk,
|
|
|
+ // url: "/proxy_tdt/proxy{s}/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+systemConfig.tdt_tk,
|
|
|
+ layer: "img",
|
|
|
+ style: "default",
|
|
|
+ tileMatrixSetID: "w",
|
|
|
+ format: "image/jpeg",
|
|
|
+ subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
|
|
|
+ tileMatrixSetID: "GoogleMapsCompatible",
|
|
|
+ show: true,
|
|
|
+ minimumLevel: 1,
|
|
|
+ maximumLevel: 18,
|
|
|
+ // rectangle: Cesium.Rectangle.fromDegrees(90, -90, 180, -180),
|
|
|
+ })
|
|
|
+ );
|
|
|
+ // 加载影像注记
|
|
|
+ globalVariable.viewer.imageryLayers.addImageryProvider(
|
|
|
+ new Cesium.WebMapTileServiceImageryProvider({
|
|
|
+ url:
|
|
|
+ "http://t{s}.tianditu.gov.cn/cia_w/wmts?tk=" +
|
|
|
+ systemConfig.tdt_tk,
|
|
|
+ layer: "cia",
|
|
|
+ style: "default",
|
|
|
+ tileMatrixSetID: "w",
|
|
|
+ format: "tiles",
|
|
|
+ subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
|
|
|
+ maximumLevel: 20,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case "xq":
|
|
|
+ viewer.imageryLayers.addImageryProvider(
|
|
|
+ new Cesium.UrlTemplateImageryProvider({
|
|
|
+ url: "http://119.3.233.75/tile/v1.0/gr?l={z}&x={x}&y={y}",
|
|
|
+ minimumLevel: 1,
|
|
|
+ maximumLevel: 19,
|
|
|
+ format: "png",
|
|
|
+ })
|
|
|
+ );
|
|
|
+
|
|
|
+ break;
|
|
|
+ case "arcgis":
|
|
|
+ // 加载ArcGIS在线地图
|
|
|
+ globalVariable.viewer.imageryLayers.addImageryProvider(
|
|
|
+ new Cesium.ArcGisMapServerImageryProvider({
|
|
|
+ url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
|
|
|
+ })
|
|
|
+ );
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
+ // 模型加载
|
|
|
+ tilesetAdd() {
|
|
|
+ // 水坝
|
|
|
+ // this.add3DTilesData(
|
|
|
+ // systemConfig.modelTilesObj.ojk_shuiba_dm,
|
|
|
+ // undefined,
|
|
|
+ // true
|
|
|
+ // );
|
|
|
+ // this.add3DTilesData(
|
|
|
+ // systemConfig.modelTilesObj.ojk_shuiba_snjz,
|
|
|
+ // undefined,
|
|
|
+ // true
|
|
|
+ // );
|
|
|
+ // this.add3DTilesData(
|
|
|
+ // systemConfig.modelTilesObj.ojk_shuiba_swjz,
|
|
|
+ // undefined,
|
|
|
+ // true
|
|
|
+ // );
|
|
|
+ // this.add3DTilesData(
|
|
|
+ // systemConfig.modelTilesObj.ojk_shuiba_xp,
|
|
|
+ // undefined,
|
|
|
+ // true
|
|
|
+ // );
|
|
|
+ // globalVariable.ojk_shuiba_zm = this.add3DTilesData(
|
|
|
+ // systemConfig.modelTilesObj.ojk_shuiba_zm,
|
|
|
+ // undefined,
|
|
|
+ // true
|
|
|
+ // );
|
|
|
+
|
|
|
+ // 模型加载;
|
|
|
+ if (systemConfig.modelTilesObj.plan) {
|
|
|
+ // 地面
|
|
|
+ // let pianyi = this.createMatrix4(systemConfig.modelTilesMatrixObj.plan);
|
|
|
+ globalVariable.plan = this.add3DTilesData(
|
|
|
+ systemConfig.modelTilesObj.plan,
|
|
|
+ undefined,
|
|
|
+ true
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (systemConfig.modelTilesObj.plan_nowater) {
|
|
|
+ // 无水地面
|
|
|
+ // let pianyi = this.createMatrix4(systemConfig.modelTilesMatrixObj.plan);
|
|
|
+ globalVariable.plan = this.add3DTilesData(
|
|
|
+ systemConfig.modelTilesObj.plan_nowater,
|
|
|
+ undefined,
|
|
|
+ true
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // 建筑
|
|
|
+ if (systemConfig.modelTilesObj.build) {
|
|
|
+ globalVariable.build = this.add3DTilesData(
|
|
|
+ systemConfig.modelTilesObj.build,
|
|
|
+ undefined,
|
|
|
+ true
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // 其他建筑（厂房）
|
|
|
+ if (systemConfig.modelTilesObj.other_build) {
|
|
|
+ globalVariable.other_build = this.add3DTilesData(
|
|
|
+ systemConfig.modelTilesObj.other_build,
|
|
|
+ undefined,
|
|
|
+ true
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // 管网
|
|
|
+ if (systemConfig.modelTilesObj.pipe) {
|
|
|
+ globalVariable.pipe = this.add3DTilesData(
|
|
|
+ systemConfig.modelTilesObj.pipe,
|
|
|
+ undefined,
|
|
|
+ false
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // globalVariable.tileset = [globalVariable.plan, globalVariable.build]
|
|
|
+ },
|
|
|
|
|
|
+ addWater(url, style) {
|
|
|
+ this.waterClass.create(url, style).then((waterPrimitiveArr) => {
|
|
|
+ this.waterPrimitiveArr = waterPrimitiveArr;
|
|
|
+ window.waterPrimitiveArr = this.waterPrimitiveArr;
|
|
|
+ waterPrimitiveArr.map(function (waterPrimitive) {
|
|
|
+ return globalVariable.viewer.scene.primitives.add(waterPrimitive);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // setTimeout(() => {
|
|
|
+ // Cesium.upraiseModel(waterPrimitiveArr, {
|
|
|
+ // time: 3,
|
|
|
+ // height: 2,
|
|
|
+ // defaultHeight: 2,
|
|
|
+ // });
|
|
|
+ // Cesium.upraiseModel([globalVariable.ojk_shuiba_zm], {
|
|
|
+ // time: 3,
|
|
|
+ // height: 2,
|
|
|
+ // defaultHeight: 0,
|
|
|
+ // });
|
|
|
+ },
|
|
|
|
|
|
// 点位数据
|
|
|
- // 1 流量计 2 消火栓 3 漏失监测仪 4 水质检测设备
|
|
|
+ // 1 流量计 2 消火栓 3 漏失监测仪 4 水质检测设备
|
|
|
getPointPosition() {
|
|
|
let that = this;
|
|
|
return new Promise((resolve, reject) => {
|
|
|
if (Object.keys(globalVariable.point_positions).length != 0) {
|
|
|
Object.keys(globalVariable.point_positions).map(function (key) {
|
|
|
- globalVariable.viewer.entities.remove(globalVariable.point_positions[key]);
|
|
|
- })
|
|
|
+ globalVariable.viewer.entities.remove(
|
|
|
+ globalVariable.point_positions[key]
|
|
|
+ );
|
|
|
+ });
|
|
|
globalVariable.point_positions = {};
|
|
|
}
|
|
|
api
|
|
|
@@ -270,20 +376,20 @@ export default {
|
|
|
// new Cesium.BillboardCollection()
|
|
|
// );
|
|
|
data.map(function (item, index) {
|
|
|
- let arr = that.wenzhou2000ToWGS84([item.x, item.y])
|
|
|
+ let arr = that.wenzhou2000ToWGS84([item.x, item.y]);
|
|
|
let img = null;
|
|
|
switch (item.equipmentType) {
|
|
|
case 1:
|
|
|
- img = Flowmeter
|
|
|
+ img = Flowmeter;
|
|
|
break;
|
|
|
case 2:
|
|
|
- img = FireHydrant
|
|
|
+ img = FireHydrant;
|
|
|
break;
|
|
|
case 3:
|
|
|
- img = LeakageTester
|
|
|
+ img = LeakageTester;
|
|
|
break;
|
|
|
case 4:
|
|
|
- img = WaterQuality
|
|
|
+ img = WaterQuality;
|
|
|
break;
|
|
|
}
|
|
|
let entity = globalVariable.viewer.entities.add({
|
|
|
@@ -300,12 +406,12 @@ export default {
|
|
|
},
|
|
|
// description: '<table><tr><td>事件描述：</td><td>' + item.id + '</td></tr>'+'<tr><td>中心点坐标：'+item.palce+'',
|
|
|
});
|
|
|
- item.lon = arr[0]
|
|
|
- item.lat = arr[1]
|
|
|
+ item.lon = arr[0];
|
|
|
+ item.lat = arr[1];
|
|
|
entity.info = item;
|
|
|
entity.callback = that.searchPointInfo;
|
|
|
- globalVariable.point_positions[item.equipmentId] = entity
|
|
|
- return
|
|
|
+ globalVariable.point_positions[item.equipmentId] = entity;
|
|
|
+ return;
|
|
|
// billboards.add({
|
|
|
// image: img, // 图片地址
|
|
|
// width: 138,
|
|
|
@@ -322,21 +428,21 @@ export default {
|
|
|
});
|
|
|
resolve();
|
|
|
}
|
|
|
-
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
reject();
|
|
|
});
|
|
|
});
|
|
|
-
|
|
|
},
|
|
|
// 点位popup窗口事件
|
|
|
bindPopup() {
|
|
|
let that = this;
|
|
|
- var handler = new Cesium.ScreenSpaceEventHandler(globalVariable.viewer.scene.canvas);
|
|
|
+ var handler = new Cesium.ScreenSpaceEventHandler(
|
|
|
+ globalVariable.viewer.scene.canvas
|
|
|
+ );
|
|
|
handler.setInputAction(function (event) {
|
|
|
popup({
|
|
|
- type: 'LEFT_CLICK',
|
|
|
+ type: "LEFT_CLICK",
|
|
|
infos: event,
|
|
|
});
|
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
@@ -353,7 +459,7 @@ export default {
|
|
|
if (globalVariable.point_positions[clickMarkerId]) {
|
|
|
var data = globalVariable.point_positions[clickMarkerId];
|
|
|
if (data.callback) {
|
|
|
- data.callback(data.info)
|
|
|
+ data.callback(data.info);
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
@@ -361,7 +467,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
|
|
|
// 查询点位坐标
|
|
|
@@ -410,45 +515,42 @@ export default {
|
|
|
|
|
|
// 加载3DTiles数据
|
|
|
add3DTilesData(url, matrix, show) {
|
|
|
- let that = this;
|
|
|
let tileset = new Cesium.Cesium3DTileset({
|
|
|
url: url + "/tileset.json",
|
|
|
skipLevelOfDetail: true, //开启跳级加载
|
|
|
// preferLeaves: true,
|
|
|
maximumScreenSpaceError: 16,
|
|
|
maximumNumberOfLoadedTiles: 2000,
|
|
|
- maximumMemoryUsage: 512,//tileset可以使用的最大内存
|
|
|
+ maximumMemoryUsage: 512, //tileset可以使用的最大内存
|
|
|
show: show,
|
|
|
immediatelyLoadDesiredLevelOfDetail: true,
|
|
|
});
|
|
|
globalVariable.viewer.scene.primitives.add(tileset);
|
|
|
tileset.readyPromise.then(function () {
|
|
|
- if (matrix)
|
|
|
- tileset.root.transform = matrix;
|
|
|
+ if (matrix) tileset.root.transform = matrix;
|
|
|
});
|
|
|
return tileset;
|
|
|
},
|
|
|
|
|
|
// 创建偏移矩阵
|
|
|
createMatrix4(matrixParam) {
|
|
|
- let tileModelTool = matrixParam;
|
|
|
var mx = Cesium.Matrix3.fromRotationX(
|
|
|
- Cesium.Math.toRadians(tileModelTool.rx)
|
|
|
+ Cesium.Math.toRadians(matrixParam.rx)
|
|
|
);
|
|
|
var my = Cesium.Matrix3.fromRotationY(
|
|
|
- Cesium.Math.toRadians(tileModelTool.ry)
|
|
|
+ Cesium.Math.toRadians(matrixParam.ry)
|
|
|
);
|
|
|
var mz = Cesium.Matrix3.fromRotationZ(
|
|
|
- Cesium.Math.toRadians(tileModelTool.rz)
|
|
|
+ Cesium.Math.toRadians(matrixParam.rz)
|
|
|
);
|
|
|
var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
|
|
|
var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
|
|
|
var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
|
|
|
//平移 修改经纬度
|
|
|
var position = Cesium.Cartesian3.fromDegrees(
|
|
|
- tileModelTool.longitude,
|
|
|
- tileModelTool.latitude,
|
|
|
- tileModelTool.height
|
|
|
+ matrixParam.longitude,
|
|
|
+ matrixParam.latitude,
|
|
|
+ matrixParam.height
|
|
|
);
|
|
|
var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
|
|
|
//旋转、平移矩阵相乘
|
|
|
@@ -456,7 +558,7 @@ export default {
|
|
|
Cesium.Matrix4.multiply(m, rotationY, m);
|
|
|
Cesium.Matrix4.multiply(m, rotationZ, m);
|
|
|
//缩放 修改缩放比例
|
|
|
- var scale = Cesium.Matrix4.fromUniformScale(tileModelTool.scale);
|
|
|
+ var scale = Cesium.Matrix4.fromUniformScale(matrixParam.scale);
|
|
|
Cesium.Matrix4.multiply(m, scale, m);
|
|
|
return m;
|
|
|
},
|
|
|
@@ -468,17 +570,19 @@ export default {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
$.getJSON("./static/data/GLTF/tree_path.json", function (array) {
|
|
|
//array.length
|
|
|
-
|
|
|
let instances = [];
|
|
|
- for (let i = 0; i < array.length; i += 10) {
|
|
|
+ for (let i = 0; i < array.length; i += 2) {
|
|
|
const item = array[i];
|
|
|
- let lonlat = that.webMercator2lonlat(item.x, item.y);
|
|
|
+ let lonlat = that.wenzhou2000ToWGS84([
|
|
|
+ Number(item.x),
|
|
|
+ Number(item.y),
|
|
|
+ ]);
|
|
|
globalVariable.treeArr.push(lonlat);
|
|
|
let modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
|
|
|
new Cesium.Cartesian3.fromDegrees(
|
|
|
- lonlat[0] + 116.2026998939312,
|
|
|
- lonlat[1] + 1.1932712598797461,
|
|
|
- 10
|
|
|
+ lonlat[0] + 0.0007,
|
|
|
+ lonlat[1] - 0.0004,
|
|
|
+ 5
|
|
|
),
|
|
|
new Cesium.HeadingPitchRoll(0, 0, 0)
|
|
|
);
|
|
|
@@ -574,7 +678,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
wenzhou2000ToWGS84(coordinate) {
|
|
|
- return proj4("EPSG:0986", "EPSG:4326", coordinate)
|
|
|
+ return proj4("EPSG:0986", "EPSG:4326", coordinate);
|
|
|
},
|
|
|
|
|
|
// 经纬度转墨卡托
|
wandequan