|
|
@@ -0,0 +1,791 @@
|
|
|
+<template>
|
|
|
+ <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;">
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ iconList,
|
|
|
+ getDeviceList
|
|
|
+ } from '@/api/components/supermap.js'
|
|
|
+ import {
|
|
|
+ getConfigKey
|
|
|
+ } from '@/api/system/config'
|
|
|
+ import Cookies from 'js-cookie'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'supermap-2.5d',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chooseMode: [
|
|
|
+ Cesium.DrawMode.Line,
|
|
|
+ Cesium.DrawMode.Polygon,
|
|
|
+ ],
|
|
|
+ markerList: [],
|
|
|
+ bindPopupHtml: null,
|
|
|
+ mapshow: false,
|
|
|
+ superMapRootUrl: null,
|
|
|
+ layerList: [],
|
|
|
+ viewer: null,
|
|
|
+ scene: null,
|
|
|
+ handler: null,
|
|
|
+ pick: null,
|
|
|
+ back_position: null,
|
|
|
+ type: null,
|
|
|
+ content: null,
|
|
|
+ mvtMap0: null,
|
|
|
+ shuixi_name: null,
|
|
|
+ mvtMap1: null,
|
|
|
+ mvtMap2: null,
|
|
|
+ mvtMap3: null,
|
|
|
+ road_name: null,
|
|
|
+ layer_xiangzhenjie_name: null,
|
|
|
+ markerboxEntity: [],//地图落点实体
|
|
|
+ connectBoxEntity: null,//地图线实体
|
|
|
+ graphicsBoxEntity: null,//地图面实体
|
|
|
+ markerboxEntityRadius: [],//地图落点实体
|
|
|
+ connectBoxEntityTwo: null,//地图线实体
|
|
|
+ /*************************原地图属性*********************/
|
|
|
+ isEditableLayers: false, //绘图控件
|
|
|
+
|
|
|
+ /*************************原地图属性*********************/
|
|
|
+ aac: null,
|
|
|
+ queryParams: {
|
|
|
+ name: null,
|
|
|
+ mapData: null,
|
|
|
+ mapName: null
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.superMapInfo();
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ putSmUserID_layer: null,
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ superMapInfo(type, obj,NB) {
|
|
|
+ getConfigKey('superMap.iServer').then(response => {
|
|
|
+ this.superMapRootUrl = response.msg;
|
|
|
+ this.onload(type, obj,NB);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //清除所有
|
|
|
+ clearAll() {
|
|
|
+ this.viewer.entities.removeAll()
|
|
|
+ },
|
|
|
+ //移除之前添加的点
|
|
|
+ clearMRadius() {
|
|
|
+ if (this.markerboxEntityRadius != null && this.markerboxEntityRadius.length > 0) {
|
|
|
+ for (let i = 0; i < this.markerboxEntityRadius.length; i++) {
|
|
|
+ this.viewer.entities.remove(this.markerboxEntityRadius[i])
|
|
|
+ }
|
|
|
+ this.markerboxEntityRadius = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //移除之前添加的线
|
|
|
+ clearTwoC() {
|
|
|
+ if (this.connectBoxEntityTwo != null) {
|
|
|
+ this.viewer.entities.remove(this.connectBoxEntityTwo)
|
|
|
+ this.connectBoxEntityTwo = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图落点-覆盖范围
|
|
|
+ */
|
|
|
+ setMarkersRadius(makerList) {
|
|
|
+ let that = this
|
|
|
+ that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
|
|
+ for (let i in makerList) {
|
|
|
+ let longitude = makerList[i].lng;
|
|
|
+ let latitude = makerList[i].lat;
|
|
|
+ let marker = 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.markerboxEntityRadius.push(marker)
|
|
|
+ //绘制摄像头的圈（覆盖范围）
|
|
|
+ let markerRadius = that.viewer.entities.add({
|
|
|
+ position: Cesium.Cartesian3.fromDegrees(makerList[i].lng, makerList[i].lat, 2),
|
|
|
+ ellipse: {
|
|
|
+ semiMinorAxis: makerList[i].radius,
|
|
|
+ semiMajorAxis: makerList[i].radius,
|
|
|
+ height: 0.0,
|
|
|
+ material: Cesium.Color.DODGERBLUE.withAlpha(0.4),
|
|
|
+ outline: true,
|
|
|
+ outlineColor: Cesium.Color.DEEPSKYBLUE.withAlpha(1),
|
|
|
+ outlineWidth: 1,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ that.markerboxEntityRadius.push(markerRadius)
|
|
|
+ }
|
|
|
+ that.viewer.scene.globe.depthTestAgainstTerrain = false
|
|
|
+ that.createLeftClickDescription()
|
|
|
+ that.createRightClickDescription()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图画线(贴地)
|
|
|
+ */
|
|
|
+ setConnectTwoList(connectList, color, withAlpha) {
|
|
|
+ let that = this
|
|
|
+ //Cesium.Color.fromCssColorString('#67ADDF') 16进制颜色设置
|
|
|
+ let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
|
|
|
+ that.connectBoxEntityTwo = that.viewer.entities.add({
|
|
|
+ Type: 'Polyline',
|
|
|
+ polyline: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(connectList),
|
|
|
+ clampToGround: true,//贴地 true,不贴地 false
|
|
|
+ width: 5,
|
|
|
+ material: material
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //移除之前添加的点
|
|
|
+ clearM() {
|
|
|
+ if (this.markerboxEntity != null && this.markerboxEntity.length > 0) {
|
|
|
+ for (let i = 0; i < this.markerboxEntity.length; i++) {
|
|
|
+ this.viewer.entities.remove(this.markerboxEntity[i])
|
|
|
+ }
|
|
|
+ this.markerboxEntity = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearAllByQin(val) {
|
|
|
+
|
|
|
+ this.viewer.entities.removeAll();
|
|
|
+ this.entityHandler(val-2)
|
|
|
+ },
|
|
|
+ //移除之前添加的线
|
|
|
+ clearC() {
|
|
|
+ if (this.connectBoxEntity != null) {
|
|
|
+ this.viewer.entities.remove(this.connectBoxEntity)
|
|
|
+ this.connectBoxEntity = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //移除之前添加的面
|
|
|
+ clearG() {
|
|
|
+ if (this.graphicsBoxEntity != null) {
|
|
|
+ this.viewer.entities.remove(this.graphicsBoxEntity)
|
|
|
+ this.graphicsBoxEntity = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reload(list) {
|
|
|
+ this.removeAll();
|
|
|
+ this.layerList = list;
|
|
|
+ for (let i = 0; i < this.layerList.length; i++) {
|
|
|
+ if (this.layerList[i] == "lindi") {
|
|
|
+ this.loadLindi();
|
|
|
+ } else if (this.layerList[i] == "shuixi") {
|
|
|
+ this.loadShuixi();
|
|
|
+ } else if (this.layerList[i] == "road") {
|
|
|
+ this.loadRoad();
|
|
|
+ } else if (this.layerList[i] == "nongtian") {
|
|
|
+ this.loadNongtian();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadShuixi() {//水系
|
|
|
+ let that = this;
|
|
|
+ if (that.mvtMap0 != null) {
|
|
|
+ that.mvtMap0.show = true;
|
|
|
+ that.shuixi_name.then(function (layers) {
|
|
|
+ let textlayer = that.viewer.scene.layers.find('ShuiXi@SiPing#1');//文字图层
|
|
|
+ textlayer.visible = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadLindi() {//林地
|
|
|
+ if (this.mvtMap1 != null) {
|
|
|
+ this.mvtMap1.show = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadNongtian() {//农田
|
|
|
+ if (this.mvtMap2 != null) {
|
|
|
+ this.mvtMap2.show = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadRoad() {//路网
|
|
|
+ let that = this;
|
|
|
+ if (that.mvtMap3 != null) {
|
|
|
+ that.mvtMap3.show = true;
|
|
|
+ that.road_name.then(function (layers) {
|
|
|
+ let provinceRoad_textLayer = that.viewer.scene.layers.find('ProvinceRoad_L@SiPing#1');//文字图层
|
|
|
+ let countyRoad_textLayer = that.viewer.scene.layers.find('CountyRoad_L@SiPing#1');//文字图层
|
|
|
+ let stateRoad_textLayer = that.viewer.scene.layers.find('StateRoad_L@SiPing#1');//文字图层
|
|
|
+ provinceRoad_textLayer.visible = true;
|
|
|
+ countyRoad_textLayer.visible = true;
|
|
|
+ stateRoad_textLayer.visible = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ removeAll() {
|
|
|
+ let that = this;
|
|
|
+ // 移除方法，暂存：this.viewer.scene.removeVectorTilesMap(this.mvtMap3.name);
|
|
|
+ if (that.mvtMap0 != null) {
|
|
|
+ that.mvtMap0.show = false;
|
|
|
+ //that
|
|
|
+ that.shuixi_name.then(function (layers) {
|
|
|
+ let textlayer = that.viewer.scene.layers.find('ShuiXi@SiPing#1');//文字图层
|
|
|
+ textlayer.visible = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (that.mvtMap1 != null) {
|
|
|
+ that.mvtMap1.show = false
|
|
|
+ }
|
|
|
+ if (that.mvtMap2 != null) {
|
|
|
+ that.mvtMap2.show = false
|
|
|
+ }
|
|
|
+ if (that.mvtMap3 != null) {
|
|
|
+ that.mvtMap3.show = false
|
|
|
+
|
|
|
+ //NAME隐藏
|
|
|
+ that.road_name.then(function (layers) {
|
|
|
+ let provinceRoad_textLayer = that.viewer.scene.layers.find('ProvinceRoad_L@SiPing#1');//文字图层
|
|
|
+ let countyRoad_textLayer = that.viewer.scene.layers.find('CountyRoad_L@SiPing#1');//文字图层
|
|
|
+ let stateRoad_textLayer = that.viewer.scene.layers.find('StateRoad_L@SiPing#1');//文字图层
|
|
|
+ provinceRoad_textLayer.visible = false;
|
|
|
+ countyRoad_textLayer.visible = false;
|
|
|
+ stateRoad_textLayer.visible = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onload(type, obj,NB) {
|
|
|
+ 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: false,
|
|
|
+ navigation: false
|
|
|
+ }, {
|
|
|
+ contextOptions: {
|
|
|
+ msaaLevel: 4,
|
|
|
+ requestWebgl2: true
|
|
|
+ },
|
|
|
+ orderIndependentTranslucency: false
|
|
|
+ });
|
|
|
+ let scene = that.viewer.scene;
|
|
|
+ that.viewer.cesiumWidget.creditContainer.style.display = "none" // 去掉超图logo水印
|
|
|
+
|
|
|
+ //2.添加SuperMap iServer发布的影像服务
|
|
|
+ let layer = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
+ url: that.superMapRootUrl + "/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
|
|
|
+ }));
|
|
|
+
|
|
|
+ //3.添加SuperMap 建筑场景
|
|
|
+ let aaaa = that.superMapRootUrl + "/3D-local3DCache-Data3/rest/realspace";
|
|
|
+ scene.open(aaaa);
|
|
|
+
|
|
|
+ //飞行值坐标点,每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)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }, 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)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }, 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)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }, 3000);
|
|
|
+
|
|
|
+ //开始加载专题图等数据，8秒后开始执行
|
|
|
+ setTimeout(function () {
|
|
|
+ //3.水系
|
|
|
+ let shuixi = that.superMapRootUrl + "/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
|
|
|
+ that.mvtMap0 = scene.addVectorTilesMap({
|
|
|
+ url: shuixi,
|
|
|
+ canvasWidth: 512,
|
|
|
+ name: 'mvt_map0',
|
|
|
+ viewer: that.viewer
|
|
|
+ });
|
|
|
+ that.mvtMap0.selectedColor = new Cesium.Color(6, 169, 254, 0.5);
|
|
|
+ that.mvtMap0.show = false;
|
|
|
+
|
|
|
+ //4.林地
|
|
|
+ let lindi = that.superMapRootUrl + "/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
|
|
|
+ that.mvtMap1 = scene.addVectorTilesMap({
|
|
|
+ url: lindi,
|
|
|
+ canvasWidth: 512,
|
|
|
+ name: 'mvt_map1',
|
|
|
+ viewer: that.viewer
|
|
|
+ });
|
|
|
+ that.mvtMap1.selectedColor = new Cesium.Color(6, 254, 181, 0.5);
|
|
|
+ that.mvtMap1.show = false;
|
|
|
+
|
|
|
+ //5.农田
|
|
|
+ let nongtian = that.superMapRootUrl + "/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian";
|
|
|
+ that.mvtMap2 = scene.addVectorTilesMap({
|
|
|
+ url: nongtian,
|
|
|
+ canvasWidth: 512,
|
|
|
+ name: 'mvt_map2',
|
|
|
+ viewer: that.viewer
|
|
|
+ });
|
|
|
+ that.mvtMap2.selectedColor = new Cesium.Color(250, 236, 246, 1.0);
|
|
|
+ that.mvtMap2.show = false;
|
|
|
+
|
|
|
+ //6.路网
|
|
|
+ let road = that.superMapRootUrl + "/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian";
|
|
|
+ that.mvtMap3 = scene.addVectorTilesMap({
|
|
|
+ url: road,
|
|
|
+ canvasWidth: 512,
|
|
|
+ name: 'mvt_map3',
|
|
|
+ viewer: that.viewer
|
|
|
+ });
|
|
|
+ that.mvtMap3.show = false;
|
|
|
+
|
|
|
+ //7.添加路网NAME
|
|
|
+ let road_name_url = that.superMapRootUrl + '/3D-road_Name_S/rest/realspace';
|
|
|
+ that.road_name = scene.open(road_name_url);
|
|
|
+
|
|
|
+ that.road_name.then(function (layers) {
|
|
|
+ let provinceRoad_textLayer = scene.layers.find('ProvinceRoad_L@SiPing#1');//文字图层
|
|
|
+ let countyRoad_textLayer = scene.layers.find('CountyRoad_L@SiPing#1');//文字图层
|
|
|
+ let stateRoad_textLayer = scene.layers.find('StateRoad_L@SiPing#1');//文字图层
|
|
|
+ //加载后隐藏
|
|
|
+ provinceRoad_textLayer.visible = false;
|
|
|
+ countyRoad_textLayer.visible = false;
|
|
|
+ stateRoad_textLayer.visible = false;
|
|
|
+ //关闭避让
|
|
|
+ provinceRoad_textLayer.isOverlapDisplayed = true;
|
|
|
+ countyRoad_textLayer.isOverlapDisplayed = true;
|
|
|
+ stateRoad_textLayer.isOverlapDisplayed = true;
|
|
|
+ });
|
|
|
+ // 8.添加水系NAME
|
|
|
+ let shuixi_name_url = that.superMapRootUrl + '/3D-shuixi_Name/rest/realspace';
|
|
|
+ that.shuixi_name = scene.open(shuixi_name_url);
|
|
|
+ that.shuixi_name.then(function (layers) {
|
|
|
+ let textlayer = scene.layers.find('ShuiXi@SiPing#1');//文字图层
|
|
|
+ //加载后隐藏
|
|
|
+ textlayer.visible = false;
|
|
|
+ //关闭避让
|
|
|
+ textlayer.isOverlapDisplayed = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ //9.添加县界和乡镇界
|
|
|
+ let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
+ url: that.superMapRootUrl + "/map-SIPING/rest/maps/XianJie_XiangZhenJie",
|
|
|
+ }));
|
|
|
+
|
|
|
+ //10.添加区县乡镇村名称
|
|
|
+ let layer_xiangzhenjie_name = that.superMapRootUrl + '/3D-Name_he/rest/realspace';
|
|
|
+ scene.open(layer_xiangzhenjie_name);
|
|
|
+ that.road_name.then(function (layers) {
|
|
|
+ let xianJie_textLayer = scene.layers.find('XianJie@SiPing#1');//区县文字图层
|
|
|
+ let xiangZhenJie_textLayer = scene.layers.find('XiangZhenJie@SiPing#2');//乡镇文字图层
|
|
|
+ let cun_textLayer = scene.layers.find('Cun@SiPing#1');//村文字图层
|
|
|
+ //关闭避让
|
|
|
+ xianJie_textLayer.isOverlapDisplayed = true;
|
|
|
+ xiangZhenJie_textLayer.isOverlapDisplayed = true;
|
|
|
+ cun_textLayer.isOverlapDisplayed = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ // //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",
|
|
|
+ // }));
|
|
|
+
|
|
|
+ // //11.添加县界名称 此处要先添加县界名称 否则县界名会不显示
|
|
|
+ // let layer_xianjie_name = that.superMapRootUrl+'/3D-XianJie_Name/rest/realspace';
|
|
|
+ // scene.open(layer_xianjie_name);
|
|
|
+ //
|
|
|
+ // //12.添加乡镇界名称
|
|
|
+ // let layer_xiangzhenjie_name = that.superMapRootUrl+'/3D-XiangZhenJie_Name/rest/realspace';
|
|
|
+ // scene.open(layer_xiangzhenjie_name);
|
|
|
+
|
|
|
+ }, 3000);
|
|
|
+ if (NB!='NB') {
|
|
|
+ if (type == 1) {//拾取点位
|
|
|
+ that.getLeftClickDescription(obj);
|
|
|
+ }
|
|
|
+ if (type == 2) {//标线
|
|
|
+ that.entityHandler(0);
|
|
|
+ that.setConnectList(obj.graphicsList, obj.color, obj.withAlpha);
|
|
|
+ }
|
|
|
+ if (type == 3) {//标面
|
|
|
+ that.entityHandler(1);
|
|
|
+ that.setGraphicsList1(obj.graphicsList, obj.color, obj.withAlpha);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (NB=='NB' && type == 2){
|
|
|
+ // console.log(obj)
|
|
|
+ that.entityHandler(0);
|
|
|
+ // that.setConnectList(obj.graphicsList, obj.color, obj.withAlpha);
|
|
|
+ for (let i = 0; i < obj.length; i++) {
|
|
|
+ let arrayBlue = [];
|
|
|
+ let arrayRed = [];
|
|
|
+ // if (Array.isArray(obj[i].params)){
|
|
|
+ for (let j = 0; j < obj[i].params.length; j++) {
|
|
|
+ if (obj[i].id===666){
|
|
|
+ arrayBlue.push(obj[i].params[j].lng);
|
|
|
+ arrayBlue.push(obj[i].params[j].lat);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ arrayRed.push(obj[i].params[j].lng);
|
|
|
+ arrayRed.push(obj[i].params[j].lat);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.setConnectTwoList(
|
|
|
+ Array.isArray(arrayRed) && arrayRed.length > 0 ? arrayRed : [],
|
|
|
+ "rgba(232,14,14,0)",
|
|
|
+ 0.8
|
|
|
+ );
|
|
|
+ that.setConnectTwoList(
|
|
|
+ Array.isArray(arrayBlue) && arrayBlue.length > 0 ? arrayBlue : [],
|
|
|
+ "rgba(14,25,231,0)",
|
|
|
+ 0.8
|
|
|
+ );
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.viewer.selectedEntityChanged.addEventListener(function (entity) {
|
|
|
+ if (entity != undefined && Reflect.has(entity, 'layerID')) {
|
|
|
+ that.putSmUserID_layer(entity);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ entityHandler(chooseDrawMode) {
|
|
|
+ let that = this;
|
|
|
+ that.markerList = [];
|
|
|
+ that.handler = new Cesium.DrawHandler(that.viewer, that.chooseMode[chooseDrawMode]);
|
|
|
+ that.handler.activeEvt.addEventListener(function (isActive) {
|
|
|
+ if (isActive == true) {
|
|
|
+ that.viewer.enableCursorStyle = false;
|
|
|
+ that.viewer._element.style.cursor = '';
|
|
|
+ } else {
|
|
|
+ that.viewer.enableCursorStyle = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ that.viewer.scene.globe.depthTestAgainstTerrain = false
|
|
|
+ that.handler.activate();
|
|
|
+ var newhandler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
|
|
|
+ newhandler.setInputAction(function (event) {
|
|
|
+ // 屏幕坐标转世界坐标——关键点
|
|
|
+ var ellipsoid = that.viewer.scene.globe.ellipsoid;
|
|
|
+ var cartesian = that.viewer.camera.pickEllipsoid(event.position, ellipsoid);
|
|
|
+ //将笛卡尔坐标转换为地理坐标
|
|
|
+ var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
|
|
+ //将弧度转为度的十进制度表示
|
|
|
+ var lon = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
+ var lat = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
+ let draw = {lng: 0, lat: 0};
|
|
|
+ draw.lng = lon;
|
|
|
+ draw.lat = lat;
|
|
|
+ if (!that.markerList.includes(draw)) {
|
|
|
+ that.markerList.push(draw);
|
|
|
+ that.$emit("showLatLng", {markerList: that.markerList});
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
|
|
+ },
|
|
|
+ getLeftClickDescription(obj) {
|
|
|
+ let that = this
|
|
|
+ that.handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
|
|
|
+ if (obj.longitude) {
|
|
|
+ //在点击位置添加对应点
|
|
|
+ that.viewer.entities.add({
|
|
|
+ name: '',
|
|
|
+ position: Cesium.Cartesian3.fromDegrees(obj.longitude, obj.latitude),
|
|
|
+ billboard: {
|
|
|
+ image: iconList['marker'],
|
|
|
+ width: 48,
|
|
|
+ height: 48,
|
|
|
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //设置鼠标左键单击回调事件
|
|
|
+ that.handler.setInputAction(function (e) {
|
|
|
+ //首先移除之前添加的点
|
|
|
+ that.viewer.entities.removeAll();
|
|
|
+ //获取点击位置笛卡尔坐标
|
|
|
+ let position = that.viewer.scene.pickPosition(e.position);
|
|
|
+ //将笛卡尔坐标转化为经纬度坐标
|
|
|
+ let cartographic = Cesium.Cartographic.fromCartesian(position);
|
|
|
+ let longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
+ let latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
+ that.$emit("showLatLng", {latitude: latitude, longitude: longitude})
|
|
|
+ //在点击位置添加对应点
|
|
|
+ that.viewer.entities.add({
|
|
|
+ name: '',
|
|
|
+ position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
|
+ billboard: {
|
|
|
+ image: iconList['marker'],
|
|
|
+ width: 48,
|
|
|
+ height: 48,
|
|
|
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
|
+ },
|
|
|
+ })
|
|
|
+ that.markerboxEntity.push(marker)
|
|
|
+ that.viewer.scene.globe.depthTestAgainstTerrain = false
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图落点
|
|
|
+ */
|
|
|
+ setMarkers(makerList) {
|
|
|
+ let that = this
|
|
|
+ that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
|
|
+ for (let i in makerList) {
|
|
|
+ let longitude = makerList[i].lng;
|
|
|
+ let latitude = makerList[i].lat;
|
|
|
+ let marker = 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.markerboxEntity.push(marker)
|
|
|
+ }
|
|
|
+ that.viewer.scene.globe.depthTestAgainstTerrain = false
|
|
|
+ that.createLeftClickDescription()
|
|
|
+ that.createRightClickDescription()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *鼠标左击事件是原来的气泡
|
|
|
+ */
|
|
|
+ createLeftClickDescription() {
|
|
|
+ let that = this;
|
|
|
+ that.handler.setInputAction(function (movement) {
|
|
|
+ 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 html = id._description;
|
|
|
+ if (html != undefined && html._value != null && html._value != '') {
|
|
|
+ that.bindPopupHtml = html
|
|
|
+ that.mapshow = true
|
|
|
+ } else {
|
|
|
+ that.mapshow = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ that.mapshow = false
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *鼠标右击事件是原来的点击
|
|
|
+ */
|
|
|
+ createRightClickDescription() {
|
|
|
+ let that = this;
|
|
|
+ that.handler.setInputAction(function (movement) {
|
|
|
+ that.mapshow = false
|
|
|
+ // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口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);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 落点定位
|
|
|
+ */
|
|
|
+ dropLocation(lat, lng) {
|
|
|
+ this.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图画线(贴地)
|
|
|
+ */
|
|
|
+
|
|
|
+ setGraphicsList1(graphicsList, color, withAlpha) {
|
|
|
+ let that = this;
|
|
|
+ that.viewer.entities.removeAll(); // 移除地图标点
|
|
|
+ let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
|
|
|
+ for (let i = 0; i < graphicsList.length; i++) {
|
|
|
+ let positions = Cesium.Cartesian3.fromDegreesArray(graphicsList[i].latLng);
|
|
|
+ let name = graphicsList[i].name.toString();
|
|
|
+ let center = Cesium.BoundingSphere.fromPoints(positions).center;
|
|
|
+ let namePosition = Cesium.Cartographic.fromCartesian(center);
|
|
|
+ namePosition.height = 0; // 将名称高度设置为0，使其贴地显示
|
|
|
+
|
|
|
+ that.graphicsBoxEntity = that.viewer.entities.add({
|
|
|
+ polygon: {
|
|
|
+ hierarchy: positions,
|
|
|
+ clampToGround: true,
|
|
|
+ width: 5,
|
|
|
+ material: material
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ that.viewer.entities.add({
|
|
|
+ position: center,
|
|
|
+ label: {
|
|
|
+ text: name ,
|
|
|
+ font: 'Bold 12px sans-serif',
|
|
|
+ fillColor: Cesium.Color.BLACK,
|
|
|
+ outlineColor: Cesium.Color.WHITE,
|
|
|
+ outlineWidth: 2,
|
|
|
+ pixelOffset: new Cesium.Cartesian2(0, 0),
|
|
|
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // setTimeout(() => {
|
|
|
+ // if(graphicsList!=null&&Array.isArray(graphicsList)&&graphicsList.length>0){
|
|
|
+ // that.viewer.camera.flyTo({
|
|
|
+ // destination: Cesium.Cartesian3.fromDegrees(graphicsLists[0],graphicsLists[1],6500),
|
|
|
+ // complete: function () {
|
|
|
+ // // 飞行结束后设置相机的高度
|
|
|
+ // var newHeight = 6500;
|
|
|
+ // var destination = that.viewer.camera.position.clone();
|
|
|
+ // destination.z = newHeight;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // }, 3000);
|
|
|
+ /**
|
|
|
+ * 地图图形(贴地)
|
|
|
+ */
|
|
|
+ setGraphicsList(graphicsList, color, withAlpha) {
|
|
|
+ let that = this
|
|
|
+ //Cesium.Color.fromCssColorString('#67ADDF') 16进制颜色设置
|
|
|
+ console.log(graphicsList)
|
|
|
+ let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
|
|
|
+ for (let i = 0; i < graphicsList.length; i++) {
|
|
|
+ that.graphicsBoxEntity = that.viewer.entities.add({
|
|
|
+ polygon: {
|
|
|
+ hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList[i].latLng),
|
|
|
+ clampToGround: true,//贴地 true,不贴地 false
|
|
|
+ width: 5,
|
|
|
+ material: material
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // setTimeout(() => {
|
|
|
+ // if(graphicsList!=null&&Array.isArray(graphicsList)&&graphicsList.length>0){
|
|
|
+ // that.viewer.camera.flyTo({
|
|
|
+ // destination: Cesium.Cartesian3.fromDegrees(graphicsList[0],graphicsList[1],6500),
|
|
|
+ // complete: function () {
|
|
|
+ // // 飞行结束后设置相机的高度
|
|
|
+ // var newHeight = 6500;
|
|
|
+ // var destination = that.viewer.camera.position.clone();
|
|
|
+ // destination.z = newHeight;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // }, 3000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+ .map-tit {
|
|
|
+ position: absolute;
|
|
|
+ top: 90px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translatex(-50%);
|
|
|
+ border: 1px solid #15519b;
|
|
|
+ z-index: 9999;
|
|
|
+ background: linear-gradient(rgba(4, 23, 62, 0.6), rgba(0, 28, 70, 0.6));
|
|
|
+ min-width: 300px;
|
|
|
+
|
|
|
+ .top-tit {
|
|
|
+ width: 100%;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #15519b80;
|
|
|
+ padding: 0px 10px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ i {
|
|
|
+ color: #10ccff;
|
|
|
+ font-size: 18px;
|
|
|
+ text-shadow: 0px 0px 5px #23b3b3;;
|
|
|
+ }
|
|
|
+
|
|
|
+ span img {
|
|
|
+ display: block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-txt {
|
|
|
+ padding: 10px 15px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .d-l-con {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-enter-active,
|
|
|
+ .fade-leave-active {
|
|
|
+ transition: 1s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-enter,
|
|
|
+ .fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-10rem);
|
|
|
+ }
|
|
|
+</style>
|
zhaowenrui