|
@@ -1,791 +0,0 @@
|
|
|
-<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>
|