<template>
|
<div id="sdkContainer"></div>
|
</template>
|
|
<script>
|
import { GisServe, SgsServe } from "../utils/config";
|
import axios from "axios";
|
import PolygonJSON from "../assets/json/test.json";
|
export default {
|
name: "mapindex",
|
data() {
|
return {
|
earthimg: require("../assets/img/Map/earth.jpg"),
|
};
|
},
|
methods: {
|
init3DMap() {
|
// window.sgworld = new SmartEarth.SGWorld(
|
// "sdkContainer",
|
// Cesium,
|
// this.earthimg,
|
// null,
|
// function () {}
|
// );
|
window.sgworld = new SmartEarth.SGWorld("sdkContainer");
|
window.Viewer = sgworld._Viewer;
|
sgworld.Navigate.Stop(); //取消飞行状态
|
|
//显示fps
|
sgworld._Viewer.scene.debugShowFramesPerSecond = false;
|
window.Viewer = sgworld._Viewer;
|
// Viewer.imageryLayers.removeAll();
|
// Viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("#091A2A");
|
|
sgworld.Navigate.jumpTo({
|
destination: new Cesium.Cartesian3.fromDegrees(
|
118.8676896083309,
|
35.41003963163527,
|
239362.64624929303
|
),
|
|
orientation: {
|
heading: 6.270425232321142,
|
pitch: -0.9426904785754733,
|
roll: 0.0,
|
},
|
});
|
// var arrLoc = [];
|
// var pickPosition = { x: null, y: null };
|
// var mhandler = new Cesium.ScreenSpaceEventHandler(sgworld.Viewer.canvas);
|
|
// mhandler.setInputAction(function (movement) {
|
// var cartesian = sgworld.Viewer.camera.pickEllipsoid(
|
// movement.position,
|
// sgworld.Viewer.scene.globe.ellipsoid
|
// );
|
// if (cartesian) {
|
// var cartographic = Cesium.Cartographic.fromCartesian(
|
// cartesian,
|
// sgworld.Viewer.scene.globe.ellipsoid
|
// );
|
|
// var longitudeString = Cesium.Math.toDegrees(
|
// cartographic.longitude
|
// ).toFixed(2); //要更高的精度就修改保留的小数位数
|
// var latitudeString = Cesium.Math.toDegrees(
|
// cartographic.latitude
|
// ).toFixed(2); //同上
|
// pickPosition.x = longitudeString;
|
// pickPosition.y = latitudeString;
|
// let cf = {
|
// x: parseFloat(pickPosition.x),
|
// y: parseFloat(pickPosition.y),
|
// };
|
|
// var a = {
|
// position: sgworld.Viewer.camera.position,
|
// heading: sgworld.Viewer.camera.heading,
|
// pitch: sgworld.Viewer.camera.pitch,
|
// };
|
// }
|
// var ellipsoid = sgworld.Viewer.scene.globe.ellipsoid;
|
|
// var lonlat = ellipsoid.cartesianToCartographic(a.position);
|
|
// var lat = Cesium.Math.toDegrees(lonlat.latitude);
|
// var lng = Cesium.Math.toDegrees(lonlat.longitude);
|
// var alt = lonlat.height;
|
|
// console.log("获取数据", lat, lng, alt); //当前视角
|
|
// console.log(a);
|
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
//加载mpt影响数据
|
// this.getMPTDate();
|
// 加载线数据
|
// this.getGisServerPline();
|
// 加载点数据
|
// this.getGisServerPoint();
|
// 加载面数据/
|
this.getGisServerPolygon();
|
//鼠标滑动事件
|
// this.mapToolsmoveshenseboundry();
|
var arrLoc = [];
|
var pickPosition = { x: null, y: null };
|
|
var mhandler = new Cesium.ScreenSpaceEventHandler(sgworld.Viewer.canvas);
|
|
mhandler.setInputAction(function (movement) {
|
var cartesian = sgworld.Viewer.camera.pickEllipsoid(
|
movement.position,
|
sgworld.Viewer.scene.globe.ellipsoid
|
);
|
if (cartesian) {
|
var cartographic = Cesium.Cartographic.fromCartesian(
|
cartesian,
|
sgworld.Viewer.scene.globe.ellipsoid
|
);
|
|
var longitudeString = Cesium.Math.toDegrees(
|
cartographic.longitude
|
).toFixed(2); //要更高的精度就修改保留的小数位数
|
var latitudeString = Cesium.Math.toDegrees(
|
cartographic.latitude
|
).toFixed(2); //同上
|
pickPosition.x = longitudeString;
|
pickPosition.y = latitudeString;
|
let cf = {
|
x: parseFloat(pickPosition.x),
|
y: parseFloat(pickPosition.y),
|
};
|
|
var a = {
|
position: sgworld.Viewer.camera.position,
|
heading: sgworld.Viewer.camera.heading,
|
pitch: sgworld.Viewer.camera.pitch,
|
};
|
}
|
var ellipsoid = sgworld.Viewer.scene.globe.ellipsoid;
|
|
var lonlat = ellipsoid.cartesianToCartographic(a.position);
|
|
var lat = Cesium.Math.toDegrees(lonlat.latitude);
|
var lng = Cesium.Math.toDegrees(lonlat.longitude);
|
var alt = lonlat.height;
|
|
console.log("获取数据", lat, lng, alt); //当前视角
|
|
console.log(a);
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
getMPTDate() {
|
// var urls = "http://172.16.1.50/SE/streamer.ashx/Imagery";
|
// var dx = sgworld.Creator.createImageryProvider(
|
// "mpt影像",
|
// "wms",
|
// {
|
// url: urls,
|
// layers: "627.mpt.I.mpt",
|
// },
|
// "0",
|
// undefined,
|
// true,
|
// ""
|
// );
|
// },
|
var dx = {
|
url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
|
enablePickFeatures: false,
|
};
|
sgworld.Creator.createArcGisImageryLayer(
|
"ARCGIS",
|
dx,
|
"0",
|
undefined,
|
true,
|
""
|
);
|
},
|
getGisServerPolygon() {
|
var position = [
|
{ lon: 0, lat: -90 },
|
{ lon: 360, lat: 90 },
|
];
|
|
var Rectangle = sgworld.Creator.CreateRectangle(
|
"矩形",
|
position,
|
{ fillColor: "#00000060" },
|
"0",
|
function (rectangle) {}
|
);
|
|
var data = {
|
far: 20000000,
|
heightReference: 0,
|
layertype: "polygonlayer",
|
near: 0,
|
outline: true,
|
outlineColor: "#fff",
|
outlineWidth: 1,
|
extrudedHeight: 2000,
|
material: "#00f",
|
};
|
var dx = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
|
"",
|
PolygonJSON,
|
data,
|
"0",
|
true,
|
function (response) {
|
var entities = response.entities._entities._array;
|
for (var i in entities) {
|
var entity = entities[i];
|
var name = entities[i].name;
|
var polyPositions = entity.polygon._hierarchy.getValue(
|
Cesium.JulianDate.now()
|
).positions;
|
var polyCenter =
|
Cesium.BoundingSphere.fromPoints(polyPositions).center;
|
polyCenter =
|
Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
|
|
entity.polygon.material = Cesium.Color.fromCssColorString(
|
"rgba(208, 255, 251, 0.6)"
|
);
|
|
entity.position = polyCenter;
|
// entity.label = {
|
// text: entity.name,
|
// showBackground: false,
|
// scale: 0.7,
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
// 100.0,
|
// 2000000.0
|
// ),
|
// disableDepthTestDistance: 100000000.0,
|
// };
|
}
|
}
|
);
|
// var URL =
|
// GisServe +
|
// "/wfsserver/寿光市面?version=1.3.0&request=GetFeature&typename=寿光市-面&propertyname=*&bbox=118.540020466,36.719702574,119.125701064,37.3274334030001&format=json";
|
// var polygonfile = {
|
// far: 20000000,
|
// heightReference: 1,
|
// layertype: "polygonlayer",
|
// near: 0,
|
// outline: true,
|
// outlineColor: "#fff",
|
// outlineWidth: 1,
|
// extrudedHeight: undefined,
|
// material: "#00f",
|
// };
|
// var sgpolygon = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
|
// "SHOUGUANGCITY",
|
// URL,
|
// polygonfile,
|
// "0",
|
// true,
|
// function (layer_data) {
|
// for (
|
// var a = 0;
|
// a < layer_data.entities._entities._array.length;
|
// a++
|
// ) {
|
// var ent = layer_data.entities._entities._array[a];
|
// ent.polygon.material.color = new Cesium.Color.fromCssColorString(
|
// "rgba(10, 26, 44, 0.7)"
|
// );
|
// }
|
// }
|
// );
|
// var httpURL =
|
// GisServe +
|
// "/wfsserver/builder?version=1.3.0&request=GetFeature&typename=builder&propertyname=*&bbox=118.54432761,36.75653258,119.06755551,37.27167347&format=json";
|
// var data = {
|
// far: 20000000,
|
// heightReference: 1,
|
// layertype: "polygonlayer",
|
// near: 0,
|
// outline: true,
|
// outlineColor: "#078DCB",
|
// outlineWidth: 1,
|
// extrudedHeight: 1,
|
// material: "#00f",
|
// };
|
// var dx = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
|
// "SHOUGUANGCITY",
|
// httpURL,
|
// data,
|
// "0",
|
// true,
|
// function (layer_data) {
|
// for (
|
// var a = 0;
|
// a < layer_data.entities._entities._array.length;
|
// a++
|
// ) {
|
// var ent = layer_data.entities._entities._array[a];
|
// ent.polygon.material.color = new Cesium.Color(
|
// 7 / 255,
|
// 141 / 255,
|
// 203 / 255,
|
// 0.7
|
// );
|
// ent.polygon.extrudedHeight._value = parseFloat(
|
// ent.properties.height._value
|
// );
|
// }
|
// }
|
// );
|
},
|
getGisServerPline() {
|
var httpURL =
|
GisServe +
|
"/wfsserver/YJDL?version=1.3.0&request=GetFeature&typename=YJDL&propertyname=*&bbox=118.54257012,36.73906979274252,119.07605232,37.27684175 &format=json";
|
|
var pathLayer = sgworld.Creator.createPathLayer({
|
url: httpURL,
|
color: "#0033FF", //线的颜色
|
width: 10.0, //线的宽度
|
pointColor: "#FFFFFF", //移动点的颜色
|
speed: 5,
|
});
|
var httpURL =
|
GisServe +
|
"/wfsserver/XD?version=1.3.0&request=GetFeature&typename=XD&propertyname=*&bbox=118.54000685558364,36.76947476,119.00249899037806,37.26402827&format=json";
|
|
var pathLayer = sgworld.Creator.createPathLayer({
|
url: httpURL,
|
color: "#0033FF", //线的颜色
|
width: 10.0, //线的宽度
|
pointColor: "#FFFFFF", //移动点的颜色
|
speed: 5,
|
});
|
|
var httpURLone =
|
GisServe +
|
"/wfsserver/SD?version=1.3.0&request=GetFeature&typename=SD&propertyname=*&bbox=118.55028551709036,36.76709795789531,119.07654444329262,37.26668615&format=json";
|
var data = {
|
arcType: 0,
|
material: "#00f",
|
clampToGround: true,
|
far: 50000000,
|
layertype: "Streetscape",
|
near: 0,
|
opacity: "1",
|
width: 3,
|
};
|
var dx = sgworld.Creator.createStreetscapeGeoJsonFeatureLayer(
|
"",
|
httpURLone,
|
data,
|
"0",
|
true,
|
function (data) {}
|
);
|
},
|
getGisServerPoint() {
|
var httpURL =
|
GisServe +
|
"/wfsserver/POI1?version=1.3.0&request=GetFeature&typename=POI1&propertyname=*&bbox=118.585862999679,36.7560980010228,119.771591004822,37.8496130030385&format=json";
|
var data = {
|
far: 90000000,
|
color: "#020F1F",
|
outlineColor: "#020F1F",
|
layertype: "pointlayer",
|
near: 0,
|
outlineWidth: 2,
|
pixelSize: 10,
|
pointHeight: 10,
|
};
|
var dx = sgworld.Creator.createPointGeojsonFeatureLayer(
|
"",
|
httpURL,
|
data,
|
"0",
|
true,
|
function (data) {
|
sgworld.Navigate.flyToObj(data);
|
}
|
);
|
},
|
mapToolsmoveshenseboundry() {
|
//处理鼠标逻辑
|
var pickedFeature;
|
var viewer = sgworld.Viewer;
|
var selected = {
|
feature: undefined,
|
originalColor: new Cesium.Color(),
|
};
|
if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
|
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(
|
movement
|
) {
|
// Pick a new feature
|
pickedFeature = viewer.scene.pick(movement.endPosition);
|
if (!Cesium.defined(pickedFeature)) {
|
if (Cesium.defined(selected.feature) && selected.feature.polygon) {
|
selected.feature.polygon.material.color = selected.originalColor;
|
selected.feature.polygon.outlineWidth = 1;
|
}
|
// nameOverlay.style.display = "none";
|
return;
|
}
|
if (pickedFeature !== selected.feature) {
|
if (Cesium.defined(selected.feature) && selected.feature.polygon) {
|
//原始的对象需要还原
|
selected.feature.polygon.material.color = selected.originalColor;
|
selected.feature.polygon.outlineWidth = 1;
|
selected.feature.polygon.extrudedHeight = 2000;
|
// silhouetteBlue.selected = [pickedFeature.id];
|
}
|
selected.feature = pickedFeature.id;
|
selected.originalColor = pickedFeature.id.polygon.material.color;
|
}
|
pickedFeature.id.polygon.material.color = new Cesium.Color(
|
208 / 255,
|
255 / 255,
|
251 / 255,
|
0.9
|
);
|
pickedFeature.id.polygon.extrudedHeight = 2500;
|
pickedFeature.id.polygon.outlineWidth = 1;
|
},
|
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
}
|
},
|
},
|
mounted() {
|
this.init3DMap();
|
},
|
};
|
</script>
|
|
<style scoped>
|
#sdkContainer {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
</style>
|
