|
|
@@ -1,275 +1,313 @@
|
|
|
<template>
|
|
|
- <div id="cesium-container" style="width: 100%; height: 100%;background: none;">
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
+ <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;" />
|
|
|
</template>
|
|
|
-<script>
|
|
|
- import {
|
|
|
- iconList,
|
|
|
- } from '@/api/components/supermap.js'
|
|
|
- export default {
|
|
|
- name: 'sookaSuperMap',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- viewer:null,
|
|
|
- scene:null,
|
|
|
- handler:null,
|
|
|
-
|
|
|
- pick:null,
|
|
|
- back_position:null,
|
|
|
- content:null,
|
|
|
- stkTerrainProvider:null,
|
|
|
|
|
|
- aac:null,//定时
|
|
|
- /*************************原地图属性*********************/
|
|
|
- isEditableLayers: false, //绘图控件
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ iconList,
|
|
|
+ getDeviceList
|
|
|
+} from '@/api/components/supermap.js'
|
|
|
+import Cookies from 'js-cookie'
|
|
|
+import { getConfigKey } from "@/api/system/config";
|
|
|
+export default {
|
|
|
+ name: 'supermap-2.5d',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ superMapRootUrl:null,
|
|
|
+ layerList:[],
|
|
|
+ viewer:null,
|
|
|
+ scene:null,
|
|
|
+ handler:null,
|
|
|
+ pick:null,
|
|
|
+ back_position:null,
|
|
|
+ content:null,
|
|
|
+ mvtMap0:null,
|
|
|
+ shuixi_name:null,
|
|
|
+ mvtMap1:null,
|
|
|
+ mvtMap2:null,
|
|
|
+ mvtMap3:null,
|
|
|
+ road_name:null,
|
|
|
+ layer_xiangzhenjie_name:null,
|
|
|
+ /*************************原地图属性*********************/
|
|
|
+ isEditableLayers: false, //绘图控件
|
|
|
|
|
|
- /*************************原地图属性*********************/
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
+ /*************************原地图属性*********************/
|
|
|
+ aac:null,
|
|
|
+ queryParams: {
|
|
|
+ name:null,
|
|
|
+ mapData: null,
|
|
|
+ mapName: null
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ created() {
|
|
|
+ this.superMapInfo();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ methods: {
|
|
|
+ superMapInfo(){
|
|
|
+ getConfigKey('superMap.iServer').then(response => {
|
|
|
+ this.superMapRootUrl = response.msg;
|
|
|
+ this.onload();
|
|
|
+ })
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.viewer = new Cesium.Viewer('cesium-container')
|
|
|
- //添加SuperMap iServer发布的影像服务
|
|
|
- // var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
- // url: 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace'
|
|
|
- // }));
|
|
|
- // //添加SuperMap iServer发布的影像服务
|
|
|
- // var layer1 = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
- // url: 'http://121.36.228.94:8090/iserver/services/map-spyx4326/rest/maps/dem'
|
|
|
- // }));
|
|
|
-
|
|
|
- this.scene = this.viewer.scene;
|
|
|
- this.scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
|
|
|
- var urlStr = 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace';
|
|
|
- this.scene.open(urlStr);
|
|
|
-
|
|
|
- //将三维球定位到指定位置，camera是相机，是当前视野范围相机
|
|
|
- //destination是相机的目标位置，参数是经度、纬度、高度
|
|
|
- //orientation是相机朝向
|
|
|
- // heading-代表镜头左右方向,正值为右,负值为左
|
|
|
- // pitch-代表镜头上下方向,正值为上,负值为下.
|
|
|
- // roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
|
|
|
- this.viewer.camera.flyTo({
|
|
|
- destination: Cesium.Cartesian3.fromDegrees(124.5465087890625, 43.0869197845459, 25000),
|
|
|
- orientation: {
|
|
|
- heading : Cesium.Math.toRadians(348.4202942851978),
|
|
|
- pitch : Cesium.Math.toRadians(-30.74026687972041),
|
|
|
- roll : Cesium.Math.toRadians(0)
|
|
|
+ onload(){
|
|
|
+ let that = this;
|
|
|
+ //1.添加地形数据
|
|
|
+ that.viewer = new Cesium.Viewer('cesiumContainer',{
|
|
|
+ //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
|
|
|
+ terrainProvider : new Cesium.CesiumTerrainProvider({
|
|
|
+ url :that.superMapRootUrl+"/3D-sipingchangjing/rest/realspace/datas/dem@spyx4326",
|
|
|
+ //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
|
|
|
+ invisibility:true
|
|
|
+ }),
|
|
|
+ infoBox:true,
|
|
|
+ navigation: false
|
|
|
+ }, {
|
|
|
+ contextOptions: {
|
|
|
+ msaaLevel: 4,
|
|
|
+ requestWebgl2: true
|
|
|
},
|
|
|
- complete:function callback() {
|
|
|
- // 定位完成之后的回调函数
|
|
|
-
|
|
|
- }
|
|
|
+ orderIndependentTranslucency: false
|
|
|
});
|
|
|
- },
|
|
|
- props: {},
|
|
|
- methods: {
|
|
|
- //移除之前添加的点
|
|
|
- clearM(){
|
|
|
- this.viewer.entities.removeAll();
|
|
|
- },
|
|
|
- /**
|
|
|
- * 地图落点
|
|
|
- */
|
|
|
- setMarkers(makerList){
|
|
|
- let that = this;
|
|
|
- that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
|
|
|
- clearInterval(that.aac);
|
|
|
- for (let i in makerList) {
|
|
|
- let longitude = makerList[i].lng;
|
|
|
- let latitude = makerList[i].lat;
|
|
|
- that.viewer.entities.add({
|
|
|
- name:"",
|
|
|
- position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
|
- billboard: {
|
|
|
- image: iconList[makerList[i].icon],
|
|
|
- width: 48,
|
|
|
- height: 48,
|
|
|
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
- disableDepthTestDistance:Number.POSITIVE_INFINITY
|
|
|
- },
|
|
|
- description: makerList[i].bindPopupHtml,
|
|
|
- click: makerList[i].click,
|
|
|
- parameter: makerList[i].parameter,
|
|
|
- });
|
|
|
- }
|
|
|
- that.viewer.scene.globe.depthTestAgainstTerrain=false;
|
|
|
- that.createLeftClickDescription();
|
|
|
- that.createRightClickDescription();
|
|
|
- },
|
|
|
- /**
|
|
|
- *鼠标左击事件是原来的气泡
|
|
|
- */
|
|
|
- createLeftClickDescription() {
|
|
|
- let that = this;
|
|
|
- that.handler.setInputAction(function (movement) {
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- },
|
|
|
- /**
|
|
|
- * 地图落点(传感器)
|
|
|
- */
|
|
|
- setMarkers_cgq(makerList){
|
|
|
- let that = this;
|
|
|
- that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
|
|
|
+ that.scene = that.viewer.scene;
|
|
|
+ that.viewer.cesiumWidget.creditContainer.style.display = "none" // 去掉超图logo水印
|
|
|
|
|
|
- for (let i in makerList) {
|
|
|
- let longitude = makerList[i].lng;
|
|
|
- let latitude = makerList[i].lat;
|
|
|
- that.viewer.entities.add({
|
|
|
- name:"",
|
|
|
- position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
|
- billboard: {
|
|
|
- image: iconList[makerList[i].icon],
|
|
|
- width: 48,
|
|
|
- height: 48,
|
|
|
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
- disableDepthTestDistance:Number.POSITIVE_INFINITY
|
|
|
- },
|
|
|
- description: makerList[i].bindPopupHtml,
|
|
|
- click: makerList[i].click,
|
|
|
- parameter: makerList[i].parameter,
|
|
|
- });
|
|
|
- }
|
|
|
- that.viewer.scene.globe.depthTestAgainstTerrain=false;
|
|
|
- that.createLeftClickDescription_cgq();
|
|
|
- },
|
|
|
- /**
|
|
|
- *鼠标左击事件是原来的气泡(传感器)
|
|
|
- */
|
|
|
- createLeftClickDescription_cgq() {
|
|
|
- let that = this;
|
|
|
- clearInterval(that.aac);
|
|
|
- that.handler.setInputAction(function (movement) {
|
|
|
- that.aac = setInterval(function (){
|
|
|
- let color = "green";
|
|
|
- let value = Math.random();
|
|
|
- let up = "▲";
|
|
|
- let down = "▼";
|
|
|
- if(value>0.5){
|
|
|
- color = "red";
|
|
|
- value = value +""+ up;
|
|
|
- }else{
|
|
|
- value = value +""+ down;
|
|
|
- }
|
|
|
- let html = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
|
|
|
- window.parent.frames[0].document.querySelector(".cesium-infoBox-description").innerHTML = html;
|
|
|
- },1000);
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- },
|
|
|
- /**
|
|
|
- *鼠标右击事件是原来的点击
|
|
|
- */
|
|
|
- createRightClickDescription() {
|
|
|
- let that = this;
|
|
|
- that.handler.setInputAction(function (movement) {
|
|
|
- // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
|
|
|
- that.pick = that.viewer.scene.pick(movement.position);
|
|
|
- if (that.pick && that.pick) {
|
|
|
- let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(movement.position).primitive.id);
|
|
|
- let clickName = id._click;
|
|
|
- that.$emit(clickName, id._parameter)
|
|
|
+ //2.添加SuperMap iServer发布的影像服务
|
|
|
+ let layer = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
+ url : that.superMapRootUrl+"/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
|
|
|
+ }));
|
|
|
+
|
|
|
+ //飞行值坐标点,每3秒推进一级
|
|
|
+ //heading-代表镜头左右方向,正值为右,负值为左
|
|
|
+ //pitch-代表镜头上下方向,正值为上,负值为下.
|
|
|
+ //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
|
|
|
+ setTimeout(function() {
|
|
|
+ that.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 950000),
|
|
|
+ orientation: {
|
|
|
+ // heading : Cesium.Math.toRadians(346.4202942851978),
|
|
|
+ // pitch : Cesium.Math.toRadians(-56.74026687972041),
|
|
|
+ // roll : Cesium.Math.toRadians(0)
|
|
|
}
|
|
|
- }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
|
- },
|
|
|
- /**
|
|
|
- * 落点定位
|
|
|
- */
|
|
|
- dropLocation(lat, lng) {
|
|
|
- this.viewer.camera.flyTo({
|
|
|
- destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
|
|
|
});
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
- @import '@/assets/styles/base.scss';
|
|
|
-
|
|
|
- input[type=checkbox] {
|
|
|
- margin: 0px 4px 0 0px;
|
|
|
- }
|
|
|
-
|
|
|
- label {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- .param-container {
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .titleBox {
|
|
|
- margin-bottom: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- .sm-div-graphic {
|
|
|
- position: absolute;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ }, 3000);
|
|
|
+ setTimeout(function() {
|
|
|
+ that.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 650000),
|
|
|
+ orientation: {
|
|
|
+ // heading : Cesium.Math.toRadians(346.4202942851978),
|
|
|
+ // pitch : Cesium.Math.toRadians(-56.74026687972041),
|
|
|
+ // roll : Cesium.Math.toRadians(0)
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- #test .divpoint {
|
|
|
- background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
|
|
|
- background-size: cover;
|
|
|
- width: 128px;
|
|
|
- height: 216px;
|
|
|
- }
|
|
|
+ }, 3000);
|
|
|
+ setTimeout(function() {
|
|
|
+ that.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 350000),
|
|
|
+ orientation: {
|
|
|
+ // heading : Cesium.Math.toRadians(346.4202942851978),
|
|
|
+ // pitch : Cesium.Math.toRadians(-56.74026687972041),
|
|
|
+ // roll : Cesium.Math.toRadians(0)
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- #test3 .divpoint {
|
|
|
- background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
|
|
|
- background-size: cover;
|
|
|
- width: 230px;
|
|
|
- height: 150px;
|
|
|
- }
|
|
|
+ }, 3000);
|
|
|
|
|
|
- #test .label-wrap {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-content: center;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
+ //开始加载专题图等数据，8秒后开始执行
|
|
|
+ setTimeout(function() {
|
|
|
+ // // 3.水系
|
|
|
+ // let shuixi = that.superMapRootUrl+"/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
|
|
|
+ // that.mvtMap0 = that.scene.addVectorTilesMap({
|
|
|
+ // url: shuixi,
|
|
|
+ // canvasWidth: 512,
|
|
|
+ // name: 'mvt_map0',
|
|
|
+ // viewer: that.viewer,
|
|
|
+ // selectedColor:new Cesium.Color(6,169,254,0.5),
|
|
|
+ // show:true,
|
|
|
+ // });
|
|
|
|
|
|
- #test3 .label-wrap {
|
|
|
- padding-left: 100px;
|
|
|
- padding-top: 8px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+ // //4.林地
|
|
|
+ // let lindi = that.superMapRootUrl+"/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
|
|
|
+ // that.mvtMap1 = that.scene.addVectorTilesMap({
|
|
|
+ // url: lindi,
|
|
|
+ // canvasWidth: 512,
|
|
|
+ // name: 'mvt_map1',
|
|
|
+ // viewer: that.viewer,
|
|
|
+ // selectedColor:new Cesium.Color(6,254,181,0.5),
|
|
|
+ // show:true,
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // //5.农田
|
|
|
+ // let nongtian = that.superMapRootUrl+"/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian";
|
|
|
+ // that.mvtMap2 = that.scene.addVectorTilesMap({
|
|
|
+ // url: nongtian,
|
|
|
+ // canvasWidth: 512,
|
|
|
+ // name: 'mvt_map2',
|
|
|
+ // viewer: that.viewer,
|
|
|
+ // selectedColor:new Cesium.Color(250, 236, 246,1.0),
|
|
|
+ // show:true,
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // //6.路网
|
|
|
+ // let road = that.superMapRootUrl+"/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian";
|
|
|
+ // that.mvtMap3 = that.scene.addVectorTilesMap({
|
|
|
+ // url: road,
|
|
|
+ // canvasWidth: 512,
|
|
|
+ // name: 'mvt_map3',
|
|
|
+ // viewer: that.viewer,
|
|
|
+ // show:true,
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // //7.添加路网NAME
|
|
|
+ // let road_name_url = that.superMapRootUrl+'/3D-road_Name_S/rest/realspace';
|
|
|
+ // that.road_name = that.scene.open(road_name_url);
|
|
|
+ //
|
|
|
+ // // 8.添加水系NAME
|
|
|
+ // let shuixi_name_url = that.superMapRootUrl+'/3D-shuixi_Name/rest/realspace';
|
|
|
+ // that.shuixi_name = that.scene.open(shuixi_name_url);
|
|
|
|
|
|
- #test .pop-title {
|
|
|
- color: #fff;
|
|
|
- margin-top: 11px;
|
|
|
- margin-bottom: 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
+ //9.添加乡镇界
|
|
|
+ let layer_xiangzhenjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
+ url : that.superMapRootUrl+"/map-SIPING/rest/maps/XiangZhenJie",
|
|
|
+ }));
|
|
|
|
|
|
+ //10.添加县界
|
|
|
+ let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
+ url : that.superMapRootUrl+"/map-SIPING/rest/maps/XianJie",
|
|
|
+ }));
|
|
|
|
|
|
- #test .data-li {
|
|
|
- font-size: 14px;
|
|
|
- margin-top: 15px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
+ //11.添加县界名称 此处要先添加县界名称 否则县界名会不显示
|
|
|
+ let layer_xianjie_name = that.superMapRootUrl+'/3D-XianJie_Name/rest/realspace';
|
|
|
+ that.scene.open(layer_xianjie_name);
|
|
|
|
|
|
- #test3 .data-li {
|
|
|
- font-size: 14px;
|
|
|
- margin-top: 6px;
|
|
|
- }
|
|
|
+ //12.添加乡镇界名称
|
|
|
+ let layer_xiangzhenjie_name = that.superMapRootUrl+'/3D-XiangZhenJie_Name/rest/realspace';
|
|
|
+ that.scene.open(layer_xiangzhenjie_name);
|
|
|
|
|
|
- #test2 .divpoint {
|
|
|
- background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
|
|
|
- background-size: cover;
|
|
|
- width: 116px;
|
|
|
- height: 120px;
|
|
|
- }
|
|
|
+ }, 3000);
|
|
|
|
|
|
- #test2 .label-wrap {
|
|
|
- box-sizing: border-box;
|
|
|
- padding-top: 10px;
|
|
|
- padding-left: 51px;
|
|
|
- }
|
|
|
+ },
|
|
|
+ //移除之前添加的点
|
|
|
+ clearM(){
|
|
|
+ this.viewer.entities.removeAll();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图落点
|
|
|
+ */
|
|
|
+ setMarkers(makerList){
|
|
|
+ let that = this;
|
|
|
+ that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
+ clearInterval(that.aac);
|
|
|
+ for (let i in makerList) {
|
|
|
+ let longitude = makerList[i].lng;
|
|
|
+ let latitude = makerList[i].lat;
|
|
|
+ that.viewer.entities.add({
|
|
|
+ name:"",
|
|
|
+ position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
|
+ billboard: {
|
|
|
+ image: iconList[makerList[i].icon],
|
|
|
+ width: 48,
|
|
|
+ height: 48,
|
|
|
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
+ disableDepthTestDistance:Number.POSITIVE_INFINITY
|
|
|
+ },
|
|
|
+ description: makerList[i].bindPopupHtml,
|
|
|
+ click: makerList[i].click,
|
|
|
+ parameter: makerList[i].parameter,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ that.viewer.scene.globe.depthTestAgainstTerrain=false;
|
|
|
+ that.createLeftClickDescription();
|
|
|
+ that.createRightClickDescription();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *鼠标左击事件是原来的气泡
|
|
|
+ */
|
|
|
+ createLeftClickDescription() {
|
|
|
+ let that = this;
|
|
|
+ that.handler.setInputAction(function (movement) {
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *鼠标右击事件是原来的点击
|
|
|
+ */
|
|
|
+ createRightClickDescription() {
|
|
|
+ let that = this;
|
|
|
+ that.handler.setInputAction(function (movement) {
|
|
|
+ // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
|
|
|
+ that.pick = that.viewer.scene.pick(movement.position);
|
|
|
+ if (that.pick && that.pick) {
|
|
|
+ let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(movement.position).primitive.id);
|
|
|
+ let clickName = id._click;
|
|
|
+ that.$emit(clickName, id._parameter)
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图落点(传感器)
|
|
|
+ */
|
|
|
+ setMarkers_cgq(makerList){
|
|
|
+ let that = this;
|
|
|
+ that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
|
|
|
|
|
|
-</style>
|
|
|
+ for (let i in makerList) {
|
|
|
+ let longitude = makerList[i].lng;
|
|
|
+ let latitude = makerList[i].lat;
|
|
|
+ that.viewer.entities.add({
|
|
|
+ name:"",
|
|
|
+ position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
|
+ billboard: {
|
|
|
+ image: iconList[makerList[i].icon],
|
|
|
+ width: 48,
|
|
|
+ height: 48,
|
|
|
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
+ disableDepthTestDistance:Number.POSITIVE_INFINITY
|
|
|
+ },
|
|
|
+ description: makerList[i].bindPopupHtml,
|
|
|
+ click: makerList[i].click,
|
|
|
+ parameter: makerList[i].parameter,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ that.viewer.scene.globe.depthTestAgainstTerrain=false;
|
|
|
+ that.createLeftClickDescription_cgq();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *鼠标左击事件是原来的气泡(传感器)
|
|
|
+ */
|
|
|
+ createLeftClickDescription_cgq() {
|
|
|
+ let that = this;
|
|
|
+ clearInterval(that.aac);
|
|
|
+ that.handler.setInputAction(function (movement) {
|
|
|
+ that.aac = setInterval(function (){
|
|
|
+ let color = "green";
|
|
|
+ let value = Math.random();
|
|
|
+ let up = "▲";
|
|
|
+ let down = "▼";
|
|
|
+ if(value>0.5){
|
|
|
+ color = "red";
|
|
|
+ value = value +""+ up;
|
|
|
+ }else{
|
|
|
+ value = value +""+ down;
|
|
|
+ }
|
|
|
+ let html = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
|
|
|
+ window.parent.frames[0].document.querySelector(".cesium-infoBox-description").innerHTML = html;
|
|
|
+ },1000);
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 落点定位
|
|
|
+ */
|
|
|
+ dropLocation(lat, lng) {
|
|
|
+ this.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
王通