<template>
|
<div id="sdkContainer"></div>
|
</template>
|
|
<script>
|
import { GisServe, SgsServe, TMS } from "../utils/config";
|
import axios from "axios";
|
export default {
|
name: "mapindex",
|
props: ["toChild"],
|
data() {
|
return {
|
earthimg: require("../assets/img/Map/earth.jpg"),
|
imgurl: require("../assets/img/Map/dibiao.png"),
|
Mapvideo: null,
|
isShow: false,
|
};
|
},
|
// watch: {
|
// toChild (oldval, newval) {
|
// if (oldval.platform != null && oldval.pointname != null) {
|
// var lat = parseFloat(oldval.platform);
|
// var lon = parseFloat(oldval.pointname);
|
// sgworld.Navigate.jumpTo({
|
// //跳转视角
|
// destination: new Cesium.Cartesian3.fromDegrees(lat, lon, 5000),
|
// orientation: {
|
// heading: 0,
|
// pitch: -45,
|
// },
|
// });
|
// }
|
// },
|
// },
|
methods: {
|
init3DMap() {
|
window.sgworld = new SmartEarth.SGWorld(
|
"sdkContainer",
|
Cesium,
|
this.earthimg,
|
null,
|
function () {}
|
);
|
window.Viewer = sgworld._Viewer;
|
sgworld.Navigate.Stop(); //取消飞行状态
|
sgworld.Navigate.jumpTo({
|
//跳转视角
|
destination: new Cesium.Cartesian3.fromDegrees(
|
120.47058173784418,
|
31.793114225237154,
|
7709.279139522159
|
),
|
orientation: {
|
heading: 0.6775942765589988,
|
pitch: -0.6531148539291864,
|
},
|
});
|
//显示fps
|
sgworld._Viewer.scene.debugShowFramesPerSecond = false;
|
window.Viewer = sgworld._Viewer;
|
// Viewer.imageryLayers.removeAll();
|
//加载mpt影像数据
|
this.getMPTDate();
|
//加载3d模型
|
// this.getC3DModel();
|
// 加载点数据
|
// this.getGisServerPoint();
|
// 加载线数据
|
// this.getGisServerPline();
|
// 加载面数据
|
// this.getGisServerPolygon();
|
//跳转视角
|
sgworld.Navigate.jumpTo({
|
destination: new Cesium.Cartesian3.fromDegrees(
|
118.771203,
|
36.857924,
|
1000
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(-90.0),
|
pitch: Cesium.Math.toRadians(-25.0),
|
roll: 0.0,
|
},
|
});
|
// var arrLoc = [];
|
// var pickPosition = { x: null, y: null };
|
// var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.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);
|
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 = TMS + "/TMS/tms.xml";
|
// var layer = sgworld.Creator.createUrlTemplateImageryProvider(
|
// "tms服务",
|
// {
|
// url: Cesium.buildModuleUrl(urls + "/{z}/{x}/{reverseY}.png"),
|
// },
|
// "0",
|
// undefined,
|
// true,
|
// ""
|
// );
|
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,
|
""
|
);
|
},
|
getC3DModel() {
|
var url1 = SgsServe + "/b3dm/A-1.591355/tileset.json";
|
var tiltModel1 = sgworld.Creator.create3DTilesets(
|
"",
|
url1,
|
{},
|
{},
|
"0",
|
true,
|
function (data) {
|
sgworld.Navigate.jumpTo(data);
|
}
|
);
|
var url1 = SgsServe + "/b3dm/A-2.591356/tileset.json";
|
var tiltModel1 = sgworld.Creator.create3DTilesets(
|
"",
|
url1,
|
{},
|
{},
|
"0",
|
true,
|
function (data) {}
|
);
|
var url1 = SgsServe + "/b3dm/B-1.591357/tileset.json";
|
var tiltModel1 = sgworld.Creator.create3DTilesets(
|
"",
|
url1,
|
{},
|
{},
|
"0",
|
true,
|
function (data) {}
|
);
|
var url1 = SgsServe + "/b3dm/B-2.591358/tileset.json";
|
var tiltModel1 = sgworld.Creator.create3DTilesets(
|
"",
|
url1,
|
{},
|
{},
|
"0",
|
true,
|
function (data) {}
|
);
|
var url1 = SgsServe + "/b3dm/C-1.591359/tileset.json";
|
var tiltModel1 = sgworld.Creator.create3DTilesets(
|
"",
|
url1,
|
{},
|
{},
|
"0",
|
true,
|
function (data) {}
|
);
|
var url1 = SgsServe + "/b3dm/C-2.591360/tileset.json";
|
var tiltModel1 = sgworld.Creator.create3DTilesets(
|
"",
|
url1,
|
{},
|
{},
|
"0",
|
true,
|
function (data) {}
|
);
|
},
|
getGisServerPline() {
|
var httpURLone =
|
GisServe +
|
"/wfsserver/寿光市线?version=1.3.0&request=GetFeature&typename=寿光市线&propertyname=*&bbox=118.540060461,36.7391040247307,119.076533164318,37.2667331700001&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() {},
|
},
|
|
mounted() {
|
this.init3DMap();
|
},
|
};
|
</script>
|
|
<style scoped>
|
#sdkContainer {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
#RowMenu {
|
border: 1px solid red;
|
position: absolute;
|
z-index: 30;
|
top: 6%;
|
left: 32.5%;
|
}
|
</style>
|
