|
|
@@ -36,6 +36,7 @@
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import VueOfficeExcel from "@vue-office/excel";
|
|
|
import "@vue-office/excel/lib/index.css";
|
|
|
+import { ElLoading } from "element-plus";
|
|
|
import { toRaw } from "vue";
|
|
|
export default {
|
|
|
name: "",
|
|
|
@@ -52,9 +53,10 @@ export default {
|
|
|
nowPoint: null,
|
|
|
nowPointInfo: null,
|
|
|
excelUrl: "",
|
|
|
- loading: false,
|
|
|
+ loading: null,
|
|
|
error: "",
|
|
|
isShow: 1,
|
|
|
+ drawnEntities: [],
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
@@ -65,6 +67,11 @@ export default {
|
|
|
if (url) {
|
|
|
let arr = url.split(".");
|
|
|
let type = arr[arr.length - 1];
|
|
|
+ this.loading = ElLoading.service({
|
|
|
+ lock: true,
|
|
|
+ text: 'Loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)',
|
|
|
+ });
|
|
|
if (type == "json" || type == "geojson") {
|
|
|
let param = { url: url };
|
|
|
this.isShow = 1;
|
|
|
@@ -93,19 +100,19 @@ export default {
|
|
|
loadExcel() {
|
|
|
if (!this.excelUrl) {
|
|
|
// this.error = '请输入Excel文件在线地址'
|
|
|
+ this.loading.close();
|
|
|
return;
|
|
|
}
|
|
|
- this.loading = true;
|
|
|
this.error = "";
|
|
|
// 加载Excel文件，实际加载由VueOfficeExcel组件处理
|
|
|
setTimeout(() => {
|
|
|
- this.loading = false;
|
|
|
+ this.loading.close();
|
|
|
}, 1000);
|
|
|
},
|
|
|
onError(err) {
|
|
|
ElMessage.error("Excel文件加载失败:", err);
|
|
|
// this.error = 'Excel文件加载失败，请检查文件地址是否正确'
|
|
|
- this.loading = false;
|
|
|
+ this.loading.close();
|
|
|
},
|
|
|
creatMap() {
|
|
|
window.viewer = new SkyScenery.Viewer("skysceneryContainer", {
|
|
|
@@ -169,85 +176,384 @@ export default {
|
|
|
},
|
|
|
dwanMap() {
|
|
|
let that = this;
|
|
|
- if (that.geometryArr.length > 0) {
|
|
|
- that.geometryArr.map(function (info) {
|
|
|
- viewer.entities.remove(info);
|
|
|
+ // if (that.geometryArr.length > 0) {
|
|
|
+ // that.geometryArr.map(function (info) {
|
|
|
+ // viewer.entities.remove(info);
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // that.geometryArr = that.dataJson.features.map(function (info) {
|
|
|
+ // console.log("dataJson======"+JSON.stringify(info));
|
|
|
+ // if (info.geometry.type == "Point") {
|
|
|
+ // return that.addPoint(info);
|
|
|
+ // } else if (info.geometry.type == "LineString") {
|
|
|
+ // return that.addLine(info);
|
|
|
+ // } else {
|
|
|
+ // return that.addPolygon(info);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ that.addToMap(that.dataJson);
|
|
|
+ this.flyToGeojson(that.dataJson);
|
|
|
+ that.pointTCHandle();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 飞行定位到geojson范围
|
|
|
+ flyToGeojson(geojson) {
|
|
|
+ if (!viewer || !geojson) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const points = this.collectGeojsonCoordinates(geojson);
|
|
|
+ if (!points.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (points.length === 1) {
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ destination: SkyScenery.Cartesian3.fromDegrees(points[0][0], points[0][1], 1200),
|
|
|
+ duration: 1.1,
|
|
|
+ orientation: {
|
|
|
+ heading: viewer.camera.heading,
|
|
|
+ pitch: SkyScenery.Math.toRadians(-65),
|
|
|
+ roll: 0,
|
|
|
+ },
|
|
|
});
|
|
|
+ viewer.scene.requestRender();
|
|
|
+ return;
|
|
|
}
|
|
|
- that.geometryArr = that.dataJson.features.map(function (info) {
|
|
|
- if (info.geometry.type == "Point") {
|
|
|
- return that.addPoint(info);
|
|
|
- } else if (info.geometry.type == "LineString") {
|
|
|
- return that.addLine(info);
|
|
|
- } else {
|
|
|
- return that.addPolygon(info);
|
|
|
- }
|
|
|
+ let minLon = Infinity;
|
|
|
+ let maxLon = -Infinity;
|
|
|
+ let minLat = Infinity;
|
|
|
+ let maxLat = -Infinity;
|
|
|
+ points.forEach((point) => {
|
|
|
+ minLon = Math.min(minLon, point[0]);
|
|
|
+ maxLon = Math.max(maxLon, point[0]);
|
|
|
+ minLat = Math.min(minLat, point[1]);
|
|
|
+ maxLat = Math.max(maxLat, point[1]);
|
|
|
});
|
|
|
- that.pointTCHandle();
|
|
|
+ const lonPad = Math.max((maxLon - minLon) * 0.25, 0.0008);
|
|
|
+ const latPad = Math.max((maxLat - minLat) * 0.25, 0.0008);
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ destination: SkyScenery.Rectangle.fromDegrees(
|
|
|
+ minLon - lonPad,
|
|
|
+ minLat - latPad,
|
|
|
+ maxLon + lonPad,
|
|
|
+ maxLat + latPad
|
|
|
+ ),
|
|
|
+ duration: 1.1,
|
|
|
+ });
|
|
|
+ viewer.scene.requestRender();
|
|
|
+ },
|
|
|
+ collectGeojsonCoordinates(geojson) {
|
|
|
+ let that = this;
|
|
|
+ if (!geojson) {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ if (geojson.features && Array.isArray(geojson.features)) {
|
|
|
+ return geojson.features.flatMap((feature) =>
|
|
|
+ that.collectGeometryCoordinates(feature.geometry)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (geojson.geometry) {
|
|
|
+ return that.collectGeometryCoordinates(geojson.geometry);
|
|
|
+ }
|
|
|
+ return [];
|
|
|
},
|
|
|
- addPolygon(param) {
|
|
|
- let arr = [];
|
|
|
- param.geometry.coordinates.forEach((element) => {
|
|
|
- element.forEach((e) => {
|
|
|
- arr.push(e[0]);
|
|
|
- arr.push(e[1]);
|
|
|
+ collectGeometryCoordinates(geometry) {
|
|
|
+ if (!geometry || !geometry.coordinates) {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ const { type, coordinates } = geometry;
|
|
|
+ const points = [];
|
|
|
+ if (type === "Point") {
|
|
|
+ points.push([coordinates[0], coordinates[1]]);
|
|
|
+ } else if (type === "LineString") {
|
|
|
+ coordinates.forEach((coord) => points.push([coord[0], coord[1]]));
|
|
|
+ } else if (type === "Polygon") {
|
|
|
+ coordinates.forEach((ring) => {
|
|
|
+ ring.forEach((coord) => points.push([coord[0], coord[1]]));
|
|
|
+ });
|
|
|
+ } else if (type === "MultiPolygon") {
|
|
|
+ coordinates.forEach((polygon) => {
|
|
|
+ polygon.forEach((ring) => {
|
|
|
+ ring.forEach((coord) => points.push([coord[0], coord[1]]));
|
|
|
+ });
|
|
|
});
|
|
|
+ }
|
|
|
+ return points;
|
|
|
+ },
|
|
|
+ // 将geojson添加到地图中
|
|
|
+ addToMap(geojson) {
|
|
|
+ this.drawnEntities.forEach((entity) => {
|
|
|
+ viewer.entities.remove(entity);
|
|
|
});
|
|
|
- return viewer.entities.add(
|
|
|
- new SkyScenery.Entity({
|
|
|
- name: " polygon",
|
|
|
- polygon: {
|
|
|
- hierarchy: {
|
|
|
- positions: SkyScenery.Cartesian3.fromDegreesArray(arr),
|
|
|
- },
|
|
|
- heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
|
|
|
- material: SkyScenery.Color.CYAN.withAlpha(0.5),
|
|
|
- },
|
|
|
- info: {
|
|
|
- coor: [arr[0], arr[1]],
|
|
|
- properties: param.properties,
|
|
|
- },
|
|
|
- })
|
|
|
- );
|
|
|
+ const source = "sourceId";
|
|
|
+ if (geojson.features) {
|
|
|
+ const features = geojson.features;
|
|
|
+ // 2. 遍历features，根据type添加到地图中
|
|
|
+ // console.log("features", features);
|
|
|
+ features.forEach((feature, featureIndex) => {
|
|
|
+ const { type, coordinates } = feature.geometry;
|
|
|
+ const featureProperties = feature.properties || {};
|
|
|
+ const featureRefInfo = {
|
|
|
+ source,
|
|
|
+ featureIndex,
|
|
|
+ };
|
|
|
+ switch (type) {
|
|
|
+ case "Point":
|
|
|
+ // 点
|
|
|
+ this.addPoint(coordinates, featureProperties, featureRefInfo);
|
|
|
+ break;
|
|
|
+ case "LineString":
|
|
|
+ // 线
|
|
|
+ this.addLine(coordinates, featureProperties, featureRefInfo);
|
|
|
+ break;
|
|
|
+ case "Polygon":
|
|
|
+ case "MultiPolygon":
|
|
|
+ // 面
|
|
|
+ this.addPolygon(coordinates, featureProperties, featureRefInfo);
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ viewer.scene.requestRender();
|
|
|
+ this.loading.close();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 添加点到地图中
|
|
|
+ addPoint(coordinates, featureProperties = null, featureRefInfo = null) {
|
|
|
+ // 1. 解析点的坐标
|
|
|
+ console.log("addPoint coordinates", coordinates);
|
|
|
+ // 2. 创建点实体
|
|
|
+ const pointEntity = viewer.entities.add({
|
|
|
+ name: "point",
|
|
|
+ position:
|
|
|
+ coordinates.length > 2
|
|
|
+ ? SkyScenery.Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
|
|
|
+ : SkyScenery.Cartesian3.fromDegrees(coordinates[0], coordinates[1]),
|
|
|
+ point: {
|
|
|
+ show: true,
|
|
|
+ color: SkyScenery.Color.RED,
|
|
|
+ pixelSize: 10,
|
|
|
+ outlineColor: SkyScenery.Color.WHITE,
|
|
|
+ outlineWidth: 2,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ pointEntity.__featureProperties = featureProperties;
|
|
|
+ pointEntity.__featureRef = featureRefInfo;
|
|
|
+ // 3. 将点实体添加到drawnEntities中
|
|
|
+ this.drawnEntities.push(pointEntity);
|
|
|
},
|
|
|
- addLine(param) {
|
|
|
- return viewer.entities.add({
|
|
|
+ // 添加线到地图中
|
|
|
+ addLine(coordinates, featureProperties = null, featureRefInfo = null) {
|
|
|
+ // 1. 解析线的坐标
|
|
|
+ console.log("addLine coordinates", coordinates);
|
|
|
+ // 2. 处理坐标格式：如果是二维数组则取第一个元素，否则直接使用
|
|
|
+ const lineCoordinates =
|
|
|
+ Array.isArray(coordinates[0]) && Array.isArray(coordinates[0][0])
|
|
|
+ ? coordinates[0]
|
|
|
+ : coordinates;
|
|
|
+
|
|
|
+ // 3. 检测坐标是否包含Z值
|
|
|
+ const hasZValues = lineCoordinates.some(
|
|
|
+ (coord) => coord.length > 2 && typeof coord[2] === "number"
|
|
|
+ );
|
|
|
+
|
|
|
+ // 4. 根据是否有Z值选择合适的坐标转换方法
|
|
|
+ let positions;
|
|
|
+ if (hasZValues) {
|
|
|
+ // 包含Z值，使用带高度的坐标转换方法
|
|
|
+ const flatCoordinatesWithHeights = [];
|
|
|
+ lineCoordinates.forEach((coord) => {
|
|
|
+ flatCoordinatesWithHeights.push(coord[0], coord[1], coord[2] || 0);
|
|
|
+ });
|
|
|
+ positions = SkyScenery.Cartesian3.fromDegreesArrayHeights(flatCoordinatesWithHeights);
|
|
|
+ } else {
|
|
|
+ // 不包含Z值，使用普通坐标转换方法
|
|
|
+ const flatCoordinates = [];
|
|
|
+ lineCoordinates.forEach((coord) => {
|
|
|
+ flatCoordinates.push(coord[0], coord[1]);
|
|
|
+ });
|
|
|
+ positions = SkyScenery.Cartesian3.fromDegreesArray(flatCoordinates);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 5. 创建线实体
|
|
|
+ const lineEntity = viewer.entities.add({
|
|
|
name: "line",
|
|
|
polyline: {
|
|
|
- //经纬度数组转世界坐标，带高度的话是fromDegreesArrayHeights
|
|
|
- positions: SkyScenery.Cartesian3.fromDegreesArray(param.geometry.coordinates),
|
|
|
- width: 2,
|
|
|
- material: SkyScenery.Color.CYAN,
|
|
|
+ show: true,
|
|
|
+ positions: positions,
|
|
|
+ material: SkyScenery.Color.BLUE.withAlpha(0.8),
|
|
|
+ width: 3,
|
|
|
info: {
|
|
|
- properties: param.properties,
|
|
|
+ properties: featureProperties,
|
|
|
},
|
|
|
},
|
|
|
+
|
|
|
});
|
|
|
+ lineEntity.__featureProperties = featureProperties;
|
|
|
+ lineEntity.__featureRef = featureRefInfo;
|
|
|
+
|
|
|
+ // 6. 将线实体添加到drawnEntities中
|
|
|
+ this.drawnEntities.push(lineEntity);
|
|
|
},
|
|
|
- addPoint(param) {
|
|
|
- let that = this;
|
|
|
- return viewer.entities.add(
|
|
|
- new SkyScenery.Entity({
|
|
|
- name: "point",
|
|
|
- position: SkyScenery.Cartesian3.fromDegrees(
|
|
|
- param.geometry.coordinates[0],
|
|
|
- param.geometry.coordinates[1]
|
|
|
- ),
|
|
|
- type: "point",
|
|
|
- info: {
|
|
|
- coor: [param.geometry.coordinates[0], param.geometry.coordinates[1]],
|
|
|
- properties: param.properties,
|
|
|
- },
|
|
|
- billboard: {
|
|
|
- image: that.pointImg,
|
|
|
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
|
- scale: 0.3,
|
|
|
- horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
|
|
|
- verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
|
|
|
- },
|
|
|
- })
|
|
|
+ // 添加面到地图中
|
|
|
+ addPolygon(coordinates, featureProperties = null, featureRefInfo = null) {
|
|
|
+ // 检测是否为MultiPolygon类型（MultiPolygon的坐标是三维数组）
|
|
|
+ if (
|
|
|
+ Array.isArray(coordinates[0]) &&
|
|
|
+ Array.isArray(coordinates[0][0]) &&
|
|
|
+ Array.isArray(coordinates[0][0][0])
|
|
|
+ ) {
|
|
|
+ console.log("MultiPolygon coordinates", coordinates);
|
|
|
+ // 是MultiPolygon类型，遍历每个Polygon
|
|
|
+ coordinates.forEach((polygonCoordinates) => {
|
|
|
+ this.renderSinglePolygon(polygonCoordinates, featureProperties, featureRefInfo);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 是单个Polygon类型
|
|
|
+ this.renderSinglePolygon(coordinates, featureProperties, featureRefInfo);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 渲染单个Polygon
|
|
|
+ renderSinglePolygon(coordinates, featureProperties = null, featureRefInfo = null) {
|
|
|
+ // 1. 处理坐标格式：确保获取外部环坐标
|
|
|
+ const outerRingCoordinates =
|
|
|
+ Array.isArray(coordinates[0]) && Array.isArray(coordinates[0][0])
|
|
|
+ ? coordinates[0]
|
|
|
+ : coordinates;
|
|
|
+
|
|
|
+ // 2. 检测坐标是否包含Z值
|
|
|
+ const hasZValues = outerRingCoordinates.some(
|
|
|
+ (coord) => coord.length > 2 && typeof coord[2] === "number"
|
|
|
);
|
|
|
+
|
|
|
+ // 3. 根据是否有Z值选择合适的坐标转换方法
|
|
|
+ let positions;
|
|
|
+ let baseHeight = 0;
|
|
|
+ let extrudedHeight = 0; // 默认挤压高度
|
|
|
+
|
|
|
+ if (hasZValues) {
|
|
|
+ // 包含Z值，使用带高度的坐标转换方法
|
|
|
+ const flatCoordinatesWithHeights = [];
|
|
|
+ let minZ = Infinity;
|
|
|
+ let maxZ = -Infinity;
|
|
|
+
|
|
|
+ // 计算Z值的范围
|
|
|
+ outerRingCoordinates.forEach((coord) => {
|
|
|
+ const z = coord[2] || 0;
|
|
|
+ minZ = Math.min(minZ, z);
|
|
|
+ maxZ = Math.max(maxZ, z);
|
|
|
+ flatCoordinatesWithHeights.push(coord[0], coord[1], minZ); // 使用最小Z值作为基础高度
|
|
|
+ });
|
|
|
+
|
|
|
+ positions = SkyScenery.Cartesian3.fromDegreesArrayHeights(flatCoordinatesWithHeights);
|
|
|
+ baseHeight = minZ;
|
|
|
+ extrudedHeight = maxZ;
|
|
|
+ } else {
|
|
|
+ // 不包含Z值，使用普通坐标转换方法
|
|
|
+ const flatCoordinates = [];
|
|
|
+ outerRingCoordinates.forEach((coord) => {
|
|
|
+ flatCoordinates.push(coord[0], coord[1]);
|
|
|
+ });
|
|
|
+ positions = SkyScenery.Cartesian3.fromDegreesArray(flatCoordinates);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 4. 创建面实体
|
|
|
+ const polygonEntity = viewer.entities.add({
|
|
|
+ name: "polygon",
|
|
|
+ polygon: {
|
|
|
+ hierarchy: {
|
|
|
+ positions: positions,
|
|
|
+ },
|
|
|
+ height: baseHeight, // 多边形底部高度
|
|
|
+ extrudedHeight: extrudedHeight, // 多边形顶部高度，实现3D挤压效果
|
|
|
+ heightReference: hasZValues
|
|
|
+ ? SkyScenery.HeightReference.NONE
|
|
|
+ : SkyScenery.HeightReference.CLAMP_TO_GROUND,
|
|
|
+ material: SkyScenery.Color.GREEN.withAlpha(0.5),
|
|
|
+ outline: true,
|
|
|
+ outlineColor: SkyScenery.Color.WHITE,
|
|
|
+ outlineWidth: 2,
|
|
|
+ // 设置侧面材质
|
|
|
+ extrudedMaterial: SkyScenery.Color.GREEN.withAlpha(0.8),
|
|
|
+ },
|
|
|
+ info: {
|
|
|
+ properties: featureProperties,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ polygonEntity.__featureProperties = featureProperties;
|
|
|
+ polygonEntity.__featureRef = featureRefInfo;
|
|
|
+
|
|
|
+ // 5. 将面实体添加到drawnEntities中
|
|
|
+ this.drawnEntities.push(polygonEntity);
|
|
|
},
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // addPolygon(param) {
|
|
|
+ // let arr = [];
|
|
|
+ // param.geometry.coordinates.forEach((element) => {
|
|
|
+ // element.forEach((e) => {
|
|
|
+ // arr.push(e[0]);
|
|
|
+ // arr.push(e[1]);
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // return viewer.entities.add(
|
|
|
+ // new SkyScenery.Entity({
|
|
|
+ // name: " polygon",
|
|
|
+ // polygon: {
|
|
|
+ // hierarchy: {
|
|
|
+ // positions: SkyScenery.Cartesian3.fromDegreesArray(arr),
|
|
|
+ // },
|
|
|
+ // heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
|
|
|
+ // material: SkyScenery.Color.CYAN.withAlpha(0.5),
|
|
|
+ // },
|
|
|
+ // info: {
|
|
|
+ // coor: [arr[0], arr[1]],
|
|
|
+ // properties: param.properties,
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // );
|
|
|
+ // },
|
|
|
+ // addLine(param) {
|
|
|
+ // return viewer.entities.add({
|
|
|
+ // name: "line",
|
|
|
+ // polyline: {
|
|
|
+ // //经纬度数组转世界坐标，带高度的话是fromDegreesArrayHeights
|
|
|
+ // positions: SkyScenery.Cartesian3.fromDegreesArray(param.geometry.coordinates),
|
|
|
+ // width: 2,
|
|
|
+ // material: SkyScenery.Color.CYAN,
|
|
|
+ // info: {
|
|
|
+ // properties: param.properties,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // addPoint(param) {
|
|
|
+ // let that = this;
|
|
|
+ // return viewer.entities.add(
|
|
|
+ // new SkyScenery.Entity({
|
|
|
+ // name: "point",
|
|
|
+ // position: SkyScenery.Cartesian3.fromDegrees(
|
|
|
+ // param.geometry.coordinates[0],
|
|
|
+ // param.geometry.coordinates[1]
|
|
|
+ // ),
|
|
|
+ // type: "point",
|
|
|
+ // info: {
|
|
|
+ // coor: [param.geometry.coordinates[0], param.geometry.coordinates[1]],
|
|
|
+ // properties: param.properties,
|
|
|
+ // },
|
|
|
+ // billboard: {
|
|
|
+ // image: that.pointImg,
|
|
|
+ // disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
|
+ // scale: 0.3,
|
|
|
+ // horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
|
|
|
+ // verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // );
|
|
|
+ // },
|
|
|
// 点击事件绑定
|
|
|
pointTCHandle() {
|
|
|
let that = this;
|
|
|
@@ -270,13 +576,21 @@ export default {
|
|
|
if (SkyScenery.defined(pickedObject) && SkyScenery.defined(pickedObject.id)) {
|
|
|
const entity = pickedObject.id;
|
|
|
that.infoDialogShow = true;
|
|
|
- that.nowPoint = entity.info;
|
|
|
+ // that.nowPoint = entity.info;
|
|
|
+ // that.nowPointInfo = Object.keys(that.nowPoint.properties).map((key) => ({
|
|
|
+ // key,
|
|
|
+ // value: that.nowPoint.properties[key],
|
|
|
+ // }));
|
|
|
+ // that.nowPoint["type"] = "info";
|
|
|
+ // let xy = that.lonlatConvertToScreenXY(entity.info.coor)
|
|
|
+ let info = {properties: entity.__featureProperties};
|
|
|
+ that.nowPoint = info;
|
|
|
that.nowPointInfo = Object.keys(that.nowPoint.properties).map((key) => ({
|
|
|
key,
|
|
|
value: that.nowPoint.properties[key],
|
|
|
}));
|
|
|
that.nowPoint["type"] = "info";
|
|
|
- // let xy = that.lonlatConvertToScreenXY(entity.info.coor)
|
|
|
+
|
|
|
let xy = that.lonlatConvertToScreenXY(center);
|
|
|
document.querySelector(".infoDialog").style.top = xy.y - 230 + "px";
|
|
|
document.querySelector(".infoDialog").style.left = xy.x - 100 + "px";
|
|
|
@@ -349,6 +663,10 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
+#skysceneryContainer{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
.container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -373,7 +691,7 @@ export default {
|
|
|
top: 0px;
|
|
|
left: 0px;
|
|
|
max-width: 500px;
|
|
|
- height: 200px;
|
|
|
+ max-height: 500px;
|
|
|
// background: #01346f99;
|
|
|
background: #ffffff;
|
|
|
border-radius: 10px;
|
|
|
@@ -392,7 +710,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
- height: 160px;
|
|
|
+ max-height: 500px;
|
|
|
// color: #ffffff;
|
|
|
color: #000000;
|
|
|
margin: 30px 0px 10px 20px;
|
DESKTOP-6LTVLN7\Liumouren
mork