<template>
|
<div id="sdkContainer">
|
<div
|
id="PopupTop"
|
class="upEventContiner"
|
v-show="isShow"
|
style="position: absolute; left: 15%; top: 15%"
|
>
|
<div id="Popup_close" @click="PopupClose"><span>X</span></div>
|
<div id="Popup_video">
|
<video
|
class="video-js"
|
id="mapVideo"
|
controls
|
data-setup="{}"
|
style="object-fit: fill; width: 100%; height: 100%; border-radius: 4%"
|
autoplay="autoplay"
|
muted
|
>
|
<source
|
src="http://111.35.21.92:8002/stream/37078313001310604367/index.m3u8"
|
type="application/x-mpegURL"
|
/>
|
</video>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { GisServe, SgsServe } 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,
|
addrss: [
|
{
|
url: "/dist/A-1.591355/tileset.json",
|
},
|
{
|
url: "/dist/A-2.591356/tileset.json",
|
},
|
{
|
url: "/dist/B-2.591358/tileset.json",
|
},
|
{
|
url: "/dist/C-1.591359/tileset.json",
|
},
|
{
|
url: "/dist/C-2.591360/tileset.json",
|
},
|
{
|
url: "/dist/D.591361/tileset.json",
|
},
|
{
|
url: "/dist/E.591362/tileset.json",
|
},
|
{
|
url: "/dist/F.591363/tileset.json",
|
},
|
{
|
url: "/dist/G.591364/tileset.json",
|
},
|
{
|
url: "/dist/H.591365/tileset.json",
|
},
|
{
|
url: "/dist/I.591366/tileset.json",
|
},
|
{
|
url: "/dist/_唐宁7号和园.591367/tileset.json",
|
},
|
],
|
};
|
},
|
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: {
|
PopupClose() {},
|
|
init3DMap() {
|
// window.sgworld = new SmartEarth.SGWorld("sdkContainer", Cesium, {
|
// url: this.earthimg, //不含单张地图图片url则使用在线地图
|
// sceneMode: Cesium.SceneMode.SCENE2D,
|
// });
|
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();
|
//加载mpt影像数据
|
// this.getMPTDate();
|
//加载3d模型
|
this.getC3DModel();
|
// 加载点数据
|
this.getGisServerPoint();
|
// 加载线数据
|
// this.getGisServerPline();
|
// 加载面数据
|
// this.getGisServerPolygon();
|
//跳转视角
|
sgworld.Navigate.jumpTo({
|
destination: new Cesium.Cartesian3.fromDegrees(
|
118.78163769788802,
|
36.858502654619926,
|
237.73308962594658
|
),
|
|
orientation: {
|
heading: 5.8653385935931865,
|
pitch: -0.24090990327488826,
|
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);
|
|
this.Mapvideo = videojs(
|
"mapVideo",
|
{
|
autoplay: true,
|
controls: false, // 是否显示控制条
|
},
|
function onPlayerReady() {
|
this.play();
|
}
|
);
|
},
|
getMPTDate() {
|
var urls = SgsServe + "/streamer.ashx/Imagery";
|
var dx = sgworld.Creator.createImageryProvider(
|
"mpt影像",
|
"wms",
|
{
|
url: urls,
|
layers: "627.mpt.I.mpt",
|
},
|
"0",
|
undefined,
|
true,
|
""
|
);
|
},
|
getC3DModel() {
|
var url1 = "http://127.0.0.1:8099";
|
var tiltModel1;
|
for (var i in this.addrss) {
|
var value_Address = url1 + this.addrss[i].url;
|
var name = "dist" + i;
|
tiltModel1 = sgworld.Creator.create3DTilesets(
|
name,
|
value_Address,
|
{},
|
{},
|
"0",
|
true,
|
function (data) {}
|
);
|
}
|
},
|
getGisServerPolygon() {
|
var httpURL =
|
GisServe +
|
"/wfsserver/寿光市面?version=1.3.0&request=GetFeature&typename=寿光市-面&propertyname=*&bbox=118.540020466,36.719702574,119.125701064,37.3274334030001&format=json";
|
var data = {
|
far: 20000000,
|
heightReference: 1,
|
layertype: "polygonlayer",
|
near: 0,
|
outline: true,
|
outlineColor: "#fff",
|
outlineWidth: 1,
|
extrudedHeight: undefined,
|
material: "#00f",
|
};
|
var dx = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
|
"SHOUGUANGCITY",
|
httpURL,
|
data,
|
"0",
|
true,
|
function (layer_data) {}
|
);
|
},
|
getGisServerPline() {
|
var httpURL =
|
GisServe +
|
"/wfsserver/主干道路?version=1.3.0&request=GetFeature&typename=主干道路&propertyname=*&bbox=118.540060461,36.7391040247307,119.076533164318,37.2667331700001&format=json";
|
|
var pathLayer = sgworld.Creator.createPathLayer({
|
url: httpURL,
|
color: "#8CF9FC", //线的颜色
|
width: 4.0, //线的宽度
|
pointColor: "#FFFFFF", //移动点的颜色
|
speed: 2,
|
});
|
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) {}
|
);
|
},
|
async getGisServerPoint() {
|
const { data: dt } = await this.$http.get(
|
"/jeecg-boot/rediotree/rediotree/queryall"
|
);
|
this.sendVideo(dt.result);
|
},
|
sendVideo(response) {
|
var valuedata = response;
|
var pointEntities = [];
|
for (var i = 0; i < valuedata.length; i++) {
|
var lng = parseFloat(valuedata[i].lon);
|
var lat = parseFloat(valuedata[i].lat);
|
var entity = new Cesium.Entity({
|
id: valuedata[i].code,
|
position: Cesium.Cartesian3.fromDegrees(lng, lat),
|
name: valuedata[i].pointname,
|
billboard: {
|
image: this.imgurl,
|
width: 70, // 宽高必须设置，否则首次无法聚合
|
height: 70,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
},
|
});
|
pointEntities.push(entity);
|
}
|
var dataSourceMap = new Map();
|
var dataSource = new Cesium.CustomDataSource("cluster");
|
Viewer.dataSources.add(dataSource);
|
for (var i = 0; i < pointEntities.length; i++) {
|
dataSource.entities.add(pointEntities[i]);
|
}
|
var pixelRange = 25;
|
var minimumClusterSize = 5;
|
var enabled = true;
|
dataSource.clustering.enabled = enabled;
|
dataSource.clustering.pixelRange = pixelRange;
|
dataSource.clustering.minimumClusterSize = minimumClusterSize;
|
var removeListener;
|
var singleDigitPins = new Array(5);
|
customStyle();
|
dataSourceMap.set(name, dataSource);
|
function customStyle() {
|
if (Cesium.defined(removeListener)) {
|
removeListener();
|
removeListener = undefined;
|
} else {
|
removeListener = dataSource.clustering.clusterEvent.addEventListener(
|
function (clusteredEntities, cluster) {
|
cluster.label.show = false;
|
cluster.billboard.show = true;
|
cluster.billboard.id = cluster.label.id;
|
cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
|
|
var numArr = [
|
1000, 940, 880, 820, 760, 700, 640, 580, 520, 460, 400, 340,
|
280, 220, 160, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 5,
|
];
|
for (var i = 0; i < numArr.length; i++) {
|
var num = clusteredEntities.length;
|
if (num >= 5 && num < 10) {
|
cluster.billboard.image = singleDigitPins[num - 5];
|
break;
|
}
|
if (num >= numArr[i]) {
|
break;
|
}
|
}
|
}
|
);
|
}
|
}
|
var mhandler = new Cesium.ScreenSpaceEventHandler(sgworld.Viewer.canvas);
|
mhandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //解除绑定
|
var that = this;
|
mhandler.setInputAction(function (event) {
|
//左键点击事件
|
var pickedFeature = sgworld.Viewer.scene.pick(event.position);
|
if (Cesium.defined(pickedFeature)) {
|
// videoSend()
|
// this.bus.$emit("videosend","PKQ")
|
that.$emit("fromChild", pickedFeature);
|
} else {
|
console.log("未选中");
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
},
|
|
mounted() {
|
this.init3DMap();
|
},
|
};
|
</script>
|
|
<style scoped>
|
#sdkContainer {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
|
.upEventContiner {
|
height: 50%;
|
width: 20%;
|
background: url("../assets/img/Map/组 7790.png") no-repeat 100% 100%;
|
background-size: cover;
|
padding-left: 10px;
|
padding-right: 10px;
|
z-index: 31;
|
}
|
|
.up-event {
|
/* width: 80px; */
|
/* border: 1px solid red; */
|
padding-top: 5px;
|
height: 30px;
|
line-height: 30px;
|
font-size: 14px;
|
font-family: Alibaba-PuHuiTi-B;
|
line-height: 11px;
|
color: #ffffff;
|
opacity: 1;
|
position: relative;
|
}
|
|
#Popup_close {
|
width: 100%;
|
height: 5%;
|
border: 1px solid blue;
|
/* position: absolute;
|
top: 10px;
|
right: 10px;
|
height: 500px;
|
|
cursor: pointer;
|
background: url("../assets/img/Map/路径 5179.png") no-repeat; */
|
}
|
#Popup_close span {
|
font-size: 50px;
|
color: white;
|
right: 2%;
|
position: absolute;
|
cursor: pointer;
|
}
|
#Popup_video {
|
width: 99%;
|
border: 1px solid red;
|
height: 93%;
|
position: absolute;
|
}
|
</style>
|
