<template>
|
<div id="sdkContainer"></div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import * as turf from "@turf/turf";
|
|
// import { getNextLayer, getPelByGraphEntityId } from "../../api/api";
|
var handler;
|
export default {
|
name: "CESIUMmap",
|
data() {
|
return {
|
dataSourceArr: [],
|
properyiesObj: {
|
entityArea: "",
|
entityLength: "",
|
elemId: "",
|
relationType: "",
|
entityName: "",
|
producer: "",
|
createTime: "",
|
updateTime: "",
|
entityId: "",
|
},
|
renderStyle: {
|
"0101": Cesium.Color.AQUA, //'水系'
|
"0102": Cesium.Color.LIGHTSLATEGRAY, //'交通',
|
"0103": Cesium.Color.DARKSALMON, //'建筑',
|
"0104": Cesium.Color.GREY, //'/管线',
|
"0105": Cesium.Color.ORANGE, //'院落',
|
"0106": Cesium.Color.BALCK, //'地名',
|
"0107": Cesium.Color.fromCssColorString("rgba(86,112,198,1)"), //'地貌',
|
"0108": Cesium.Color.SEAGREEN, //'植被与土质',
|
"0109": Cesium.Color.fromCssColorString("rgba(158,204,50,1)"), //'定位基础',
|
"0201": Cesium.Color.NAVAJOWHITE, //'行政区域单元',
|
"0202": Cesium.Color.fromCssColorString("rgba(151,152,2,1)"), //'自然地理单元',
|
},
|
loadingCount: 0,
|
imageryProviderLayers: [],
|
};
|
},
|
methods: {
|
init3DMap() {
|
// window.sgworld = Vue.prototype.$earthCtrl = new SmartEarth.SGWorld(
|
// "sdkContainer"
|
// );
|
// 使用单张地图图片
|
window.sgworld = new SmartEarth.SGWorld(
|
"sdkContainer",
|
Cesium,
|
SmartEarthRootUrl + "Workers/image/earth.jpg"
|
);
|
|
sgworld.Viewer.scene.globe.depthTestAgainstTerrain = false;
|
window.Viewer = sgworld._Viewer;
|
|
//抚顺图层
|
let urls = BASE_URL + "/tmsserver/fssh_dom_10_20";
|
let layer = sgworld.Creator.createUrlTemplateImageryProvider(
|
"tms服务",
|
{
|
url: Cesium.buildModuleUrl(urls + "/{z}/{x}/{reverseY}.png"),
|
minimumLevel: 10,
|
maximumLevel: 20,
|
rectangle: Cesium.Rectangle.fromDegrees(
|
123.1842,
|
41.698,
|
124.1864,
|
41.9207
|
),
|
},
|
"0",
|
undefined,
|
true,
|
""
|
);
|
sgworld.Navigate.Stop(); //取消飞行状态
|
sgworld.Navigate.jumpTo({
|
//跳转视角
|
destination: new Cesium.Cartesian3.fromDegrees(
|
124.041921763,
|
41.832088564,
|
5000
|
),
|
});
|
this.senderStartMessage();
|
},
|
senderStartMessage() {
|
var jsonData = {
|
funName: "loadMap",
|
data: [{ name: "数据加载完成" }],
|
};
|
window.onload = function () {
|
window.parent.postMessage(jsonData, "*");
|
};
|
},
|
// //显隐图层
|
// cesiumMapControl(data, value) {
|
// // 每次勾选恢复初始状态
|
// this.removeAllEntity();
|
// this.imageryProviderLayers = [];
|
// // this.dataSourceArr = []
|
// // sgworld.Viewer.dataSources.removeAll()
|
// var index = this.dataSourceArr.indexOf(data);
|
// if (index >= 0) {
|
// var cesiumData = sgworld.Viewer.dataSources.get(index);
|
// cesiumData.show = value;
|
// sgworld.Viewer.flyTo(cesiumData);
|
// } else {
|
// this.getFour(data);
|
// this.dataSourceArr.push(data);
|
// }
|
// },
|
// 主实体接口请求
|
// getFour(val) {
|
// getNextLayer(val)
|
// .then((response) => {
|
// var a = response.itselfPel;
|
// this.addCesiumMap(a, val);
|
// })
|
// .catch((error) => {
|
// console.log(error);
|
// });
|
// },
|
// //三维实体绘制
|
// addCesiumMap(data, value) {
|
// const properyiesObj = data.features[0].properties;
|
// this.$emit("addProperites", properyiesObj);
|
// var geojsonData = new Cesium.GeoJsonDataSource(value);
|
// geojsonData
|
// .load(data, {
|
// stroke: Cesium.Color.BLACK,
|
// fill: Cesium.Color.ORANGE.withAlpha(0),
|
// markerSymbol: ".",
|
// strokeWidth: 5,
|
// markerSize: 20,
|
// outlineWidth: 6,
|
// markerColor: Cesium.Color.BLUE,
|
// clampToGround: false,
|
// })
|
// .then((res) => {
|
// sgworld.Viewer.dataSources.add(res);
|
// //sgworld.Viewer.zoomTo(res);
|
// var entity = res.entities.values;
|
// if (entity.length > 1) {
|
// for (var i = 0, len = entity.length; i < len; i++) {
|
// console.log(entity[i].properties);
|
// if (entity[i].properties.elemId) {
|
// let id = entity[i].properties.elemId._value.substr(0, 4);
|
// if (entity[i].position) {
|
// entity[i].billboard = {};
|
// }
|
// if (entity[i].polyline) {
|
// entity[i].polyline.material = this.renderStyle[id];
|
// }
|
// if (entity[i].polygon) {
|
// entity[i].polygon.material = this.renderStyle[id];
|
// }
|
// } else {
|
// if (entity[i].position) {
|
// entity[i].billboard = {};
|
// entity[i].point = {
|
// pixelSize: 10,
|
// color: Cesium.Color.fromCssColorString("#4B0082"),
|
// show: true,
|
// disableDepthTestDistance: 100.0,
|
// };
|
// this.handerLabel(entity[i]);
|
// }
|
// if (entity[i].polyline) {
|
// entity[i].polyline.material = Cesium.Color.BLUE;
|
// }
|
// if (entity[i].polygon) {
|
// entity[i].polygon.material = Cesium.Color.ORANGE;
|
// }
|
// }
|
// }
|
// } else {
|
// this.randerSelfEntity(entity);
|
// }
|
// });
|
// sgworld.Viewer.flyTo(geojsonData);
|
// },
|
// //主实体渲染
|
// randerSelfEntity(entity) {
|
// for (var i = 0, len = entity.length; i < len; i++) {
|
// let id = entity[i].properties.elemId._value.substr(0, 4);
|
// if (entity[i].position) {
|
// entity[i].billboard = {};
|
// entity[i].point = {
|
// pixelSize: 10,
|
// color: Cesium.Color.fromCssColorString("#4B0082"),
|
// show: true,
|
// disableDepthTestDistance: 100.0,
|
// };
|
// this.handerLabel(entity[i]);
|
// }
|
// if (entity[i].polyline) {
|
// var polylinepos = entity[i].polyline.positions.getValue();
|
// var polylineCenter = polylinepos[parseInt(polylinepos.length / 2)];
|
// entity[i].position = polylineCenter;
|
// entity[i].polyline.material = this.renderStyle[id];
|
// this.handerLabel(entity[i]);
|
// }
|
// if (entity[i].polygon) {
|
// var polygonpos = entity[i].polygon.hierarchy.getValue().positions;
|
// var polygeonCenter =
|
// Cesium.BoundingSphere.fromPoints(polygonpos).center;
|
// entity[i].position = polygeonCenter;
|
// // entity[i].polygon.outline = false
|
// // entity[i].polygon.outlineColor = Cesium.Color.BLACK
|
// // entity[i].polygon.outlineWidth = 50
|
// // entity[i].polygon.closeTop = false
|
// this.handerLabel(entity[i]);
|
// // entity[i].polygon.material = this.renderStyle[id].withAlpha(0.3)
|
// entity[i].polygon.outline = true;
|
// entity[i].polygon.outlineColor = this.renderStyle[id];
|
// entity[i].polygon.outlineWidth = 6;
|
// // entity[i].polygon.material = require('@/assets/background.png')
|
// entity[i].polyline = {
|
// positions: polygonpos,
|
// width: 6,
|
// material: this.renderStyle[id],
|
// };
|
// }
|
// }
|
// },
|
// //主实体名称处理
|
// handerLabel(data) {
|
// data.label = {
|
// text: data.name,
|
// showBackground: true,
|
// scale: 0.5,
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
// 10.0,
|
// 5000.0
|
// ),
|
// disableDepthTestDistance: 100.0,
|
// };
|
// },
|
//高亮显示
|
// inputAction() {
|
// let highlightedFeature = {
|
// feature: undefined,
|
// originColor: new Cesium.Color(),
|
// };
|
// let highlightedPoint = {
|
// feature: undefined,
|
// originColor: new Cesium.Color(),
|
// };
|
// let heightEntity = null;
|
// handler = new Cesium.ScreenSpaceEventHandler(sgworld.Viewer.scene.canvas);
|
// handler.setInputAction((e) => {
|
// if (Cesium.defined(highlightedFeature.feature)) {
|
// highlightedFeature.feature.material.color =
|
// highlightedFeature.originColor;
|
// highlightedFeature.feature = undefined;
|
// }
|
// if (Cesium.defined(highlightedPoint.feature)) {
|
// highlightedPoint.feature.color = highlightedPoint.originColor;
|
// highlightedPoint.feature = undefined;
|
// }
|
// // const feature = sgworld.Viewer._Viewer.scene.pick(e.position);
|
// const feature = sgworld.Viewer.scene.pick(e.position);
|
// if (feature) {
|
// if (feature.id.point) {
|
// highlightedPoint.originColor = feature.id.point.color;
|
// feature.id.point.color = Cesium.Color.RED;
|
// highlightedPoint.feature = feature.id.point;
|
// }
|
// if (feature.id.polyline) {
|
// highlightedFeature.originColor = feature.id.polyline.material.color;
|
// feature.id.polyline.material.color = Cesium.Color.RED;
|
// highlightedFeature.feature = feature.id.polyline;
|
// }
|
// if (feature.id.polygon) {
|
// highlightedFeature.originColor = feature.id.polygon.material.color;
|
// feature.id.polygon.material.color = Cesium.Color.RED;
|
// highlightedFeature.feature = feature.id.polygon;
|
// }
|
// const properties = feature.id.properties;
|
// // 三维实体点击处理
|
// this.handelGeojson(properties);
|
// }
|
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
// },
|
//判断实体是否存在
|
// isExitFeature(id) {
|
// var index = this.dataSourceArr.indexOf(id);
|
// if (index >= 0) {
|
// var cesiumData = sgworld.Viewer.dataSources.get(index);
|
// sgworld.Viewer.dataSources.remove(cesiumData, true);
|
// this.dataSourceArr.splice(index, 1);
|
// }
|
// this.dataSourceArr.push(id);
|
// },
|
// //处理属性数据
|
// handelGeojson(data) {
|
// var len1 = Object.keys(this.properyiesObj);
|
// for (var i = 0, len = len1.length; i < len; i++) {
|
// if (data[len1[i]]) {
|
// this.properyiesObj[len1[i]] = data[len1[i]]._value;
|
// }
|
// }
|
|
// this.$emit("addProperites", this.properyiesObj);
|
// //增加左侧实体树选中更新
|
// this.$bus.$emit("updateRightTree", this.properyiesObj.entityId);
|
// let entitydata = {
|
// entityId: this.properyiesObj.entityId,
|
// name: this.properyiesObj.entityName,
|
// };
|
// this.$bus.$emit("updateEntitySearchName", entitydata);
|
// this.$bus.$emit("updateAtlas", entitydata.entityId);
|
// this.$bus.$emit("updateCount", entitydata.entityId);
|
// const renderThreeIndex = this.dataSourceArr.indexOf("Entity_ID");
|
// if (renderThreeIndex <= -1) return;
|
// this.dataSourceArr = [];
|
// sgworld.Viewer.dataSources.removeAll();
|
// this.$bus.$emit("clearChecked", entitydata.entityId);
|
|
// this.cesiumMapControl(entitydata.entityId, true);
|
// },
|
// //获取右侧树数据
|
// getRightTree(data, id = "Entity_ID") {
|
// this.isExitFeature(id);
|
// if (data.length == 0) {
|
// return;
|
// }
|
// getPelByGraphEntityId(data).then((res) => {
|
// let feature = res.data.pel;
|
// this.addCesiumMap(feature, id);
|
// // this.dealSonData1(feature, id);
|
// });
|
// },
|
// //显示覆盖地图
|
// showCoverageMap(data, id) {
|
// this.isExitFeature(id);
|
// this.addCesiumMap(data, id);
|
// },
|
// //清除Cesium地图
|
// clearCesium() {
|
// this.$bus.$emit("clearChecked");
|
// this.$emit("rightDown");
|
// this.$emit("addProperites", {});
|
// sgworld.Viewer.dataSources.removeAll();
|
// this.dataSourceArr = [];
|
// },
|
// addGltfModel(showModel) {
|
// var gltf2 = sgworld.Viewer.entities.add({
|
// name: "gltf",
|
// position: new Cesium.Cartesian3.fromDegrees(
|
// 106.27898940713537,
|
// 29.595215690167116,
|
// 0
|
// ),
|
// model: {
|
// uri: "./data/{45E48FBD-D0BD-437F-810B-AB6CCB27BD01}.gltf",
|
// },
|
// });
|
|
// if (!showModel) {
|
// // gltf2.show = false
|
// sgworld.Viewer.entities.values.forEach((item) => {
|
// item.show = false;
|
// });
|
// }
|
// sgworld.Viewer.zoomTo(gltf2);
|
// },
|
// removeAllEntity() {
|
// sgworld.Viewer.entities.values.forEach((item) => {
|
// item.show = false;
|
// });
|
// },
|
},
|
mounted() {
|
this.init3DMap();
|
|
// 添加交互
|
// this.inputAction();
|
// //左侧树绘制
|
// this.$bus.$on("getLayer", (param, id) => {
|
// this.addCesiumMap(param, id);
|
// });
|
// //判断显隐
|
// this.$bus.$on("layerControl", (param, id) => {
|
// this.cesiumMapControl(param, id);
|
// });
|
// //覆盖率图表点击绘制
|
// this.$bus.$on("showCoverageMap", (param) => {
|
// this.showCoverageMap(param, "CoverageMap");
|
// });
|
// //按类型的覆盖率图表点击绘制
|
// this.$bus.$on("showCoverageMapByType", (param) => {
|
// this.showCoverageMap(param, "CoverageMapByType");
|
// });
|
// //右侧实体树绘制
|
// this.$bus.$on("renderAllEntity", (params, state) => {
|
// this.getRightTree(params, state);
|
// });
|
// //清楚图层
|
// this.$bus.$on("clearLayer", () => {
|
// this.clearCesium();
|
// });
|
// //展示LOD4层数据
|
// this.$bus.$on("showLOD4", (param) => {
|
// // var url = "../../../public/data/3dtiles/tileset.json";
|
// // this.add3DTileSource(url);
|
// this.addGltfModel(param);
|
// });
|
},
|
// beforeDestroy() {},
|
};
|
</script>
|
|
<style scoped>
|
#sdkContainer {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
</style>
|
