|
|
@@ -1,14 +1,15 @@
|
|
|
<template>
|
|
|
- <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;" >
|
|
|
+ <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;">
|
|
|
<!--地图top 显示 开始-->
|
|
|
<transition name='fade'>
|
|
|
<div class="map-tit" v-show="mapshow">
|
|
|
<div class="top-tit">
|
|
|
<i class="iconfont sj-icon-jkzx"></i>
|
|
|
- <span><img src="../assets/images/close.svg" @click="mapshow=false"/></span>
|
|
|
+ <span><img src="../assets/images/close.svg" @click="mapshow=false" /></span>
|
|
|
</div>
|
|
|
<div class="map-txt" v-html="bindPopupHtml">
|
|
|
</div>
|
|
|
+ <div id="super2" />
|
|
|
</div>
|
|
|
</transition>
|
|
|
<!--地图top 显示 结束-->
|
|
|
@@ -16,81 +17,160 @@
|
|
|
</template>
|
|
|
|
|
|
<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 {
|
|
|
+ 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 {
|
|
|
bindPopupHtml: null,
|
|
|
mapshow: false,
|
|
|
- superMapRootUrl:null,
|
|
|
- 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,
|
|
|
- markerboxEntity: [],//地图落点实体
|
|
|
- connectBoxEntity: null,//地图线实体
|
|
|
- graphicsBoxEntity: null,//地图面实体
|
|
|
- markerboxEntityRadius: [],//地图落点实体
|
|
|
- connectBoxEntityTwo: null,//地图线实体
|
|
|
- /*************************原地图属性*********************/
|
|
|
- isEditableLayers: false, //绘图控件
|
|
|
-
|
|
|
- /*************************原地图属性*********************/
|
|
|
- aac:null,
|
|
|
- queryParams: {
|
|
|
- name:null,
|
|
|
- mapData: null,
|
|
|
- mapName: null
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {},
|
|
|
- created() {
|
|
|
- this.superMapInfo();
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- },
|
|
|
- props: {},
|
|
|
- methods: {
|
|
|
- //清除所有
|
|
|
- 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 = []
|
|
|
+ superMapRootUrl: null,
|
|
|
+ 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,
|
|
|
+ markerboxEntity: [], //地图落点实体
|
|
|
+ connectBoxEntity: null, //地图线实体
|
|
|
+ graphicsBoxEntity: null, //地图面实体
|
|
|
+ markerboxEntityRadius: [], //地图落点实体
|
|
|
+ connectBoxEntityTwo: null, //地图线实体
|
|
|
+ /*************************原地图属性*********************/
|
|
|
+ isEditableLayers: false, //绘图控件
|
|
|
+ selOptV: 2, // 贴地量算
|
|
|
+ clampMode: 1, // 空间模式
|
|
|
+ handlerDis: null, // 距离
|
|
|
+ handlerArea: null, // 面积
|
|
|
+ /*************************原地图属性*********************/
|
|
|
+ aac: null,
|
|
|
+ queryParams: {
|
|
|
+ name: null,
|
|
|
+ mapData: null,
|
|
|
+ mapName: null
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
- mapShow() {
|
|
|
- this.mapshow = false,
|
|
|
- clearInterval(this.timer)
|
|
|
- },
|
|
|
- //移除之前添加的线
|
|
|
- clearTwoC() {
|
|
|
- if (this.connectBoxEntityTwo != null) {
|
|
|
- this.viewer.entities.remove(this.connectBoxEntityTwo)
|
|
|
- this.connectBoxEntityTwo = null
|
|
|
- }
|
|
|
+ watch: {},
|
|
|
+ created() {
|
|
|
+ this.superMapInfo();
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
+ props: {},
|
|
|
+ methods: {
|
|
|
+ choseMeasuringAreaAll() {
|
|
|
+ if (this.handlerDis != null) {
|
|
|
+ this.handlerDis.clear()
|
|
|
+ }
|
|
|
+ if (this.handlerArea != null) {
|
|
|
+ this.handlerArea.clear()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 测量距离
|
|
|
+ choseMeasuringDistance() {
|
|
|
+ let that = this
|
|
|
+ if (that.handlerDis != null) {
|
|
|
+ that.handlerDis.deactivate()
|
|
|
+ that.handlerDis.clear()
|
|
|
+ }
|
|
|
+ //初始化测量距离
|
|
|
+ that.handlerDis = new Cesium.MeasureHandler(that.viewer, Cesium.MeasureMode.Distance, that.clampMode);
|
|
|
+ that.handlerDis.clampMode = 1;
|
|
|
+ //注册测距功能事件
|
|
|
+ that.handlerDis.measureEvt.addEventListener(function(result) {
|
|
|
+ var dis = Number(result.distance);
|
|
|
+ var selOptV = that.selOptV;
|
|
|
+ if (selOptV == 3 || selOptV == 4) {
|
|
|
+ dis = Number(calcClampDistance(positions));
|
|
|
+ };
|
|
|
+ var distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis.toFixed(2) + 'm';
|
|
|
+ that.handlerDis.disLabel.text = '距离:' + distance;
|
|
|
+
|
|
|
+ });
|
|
|
+ that.handlerDis.activeEvt.addEventListener(function(isActive) {
|
|
|
+ if (isActive == true) {
|
|
|
+ that.viewer.enableCursorStyle = false;
|
|
|
+ that.viewer._element.style.cursor = '';
|
|
|
+ $('#super2').removeClass('measureCur').addClass('measureCur');
|
|
|
+ that.viewer.scene.pickPointEnabled = false;
|
|
|
+ } else {
|
|
|
+ that.viewer.enableCursorStyle = true;
|
|
|
+ $('#super2').removeClass('measureCur');
|
|
|
+ that.viewer.scene.pickPointEnabled = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ that.handlerDis.activate();
|
|
|
+ },
|
|
|
+ // 测量面积
|
|
|
+ choseMeasuringArea() {
|
|
|
+ let that = this
|
|
|
+ if (that.handlerArea != null) {
|
|
|
+ // that.handlerArea.deactivate()
|
|
|
+ that.handlerArea.clear()
|
|
|
+ }
|
|
|
+
|
|
|
+ //初始化测量面积
|
|
|
+ that.handlerArea = new Cesium.MeasureHandler(that.viewer, Cesium.MeasureMode.Area, that.clampMode);
|
|
|
+
|
|
|
+ that.handlerArea.clampMode = 1;
|
|
|
+ that.handlerArea.measureEvt.addEventListener(function(result) {
|
|
|
+ var mj = Number(result.area);
|
|
|
+ var area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj.toFixed(2) + '㎡'
|
|
|
+ that.handlerArea.areaLabel.text = '面积:' + area;
|
|
|
+ });
|
|
|
+ that.handlerArea.activeEvt.addEventListener(function(isActive) {
|
|
|
+ if (isActive == true) {
|
|
|
+ that.viewer.enableCursorStyle = false;
|
|
|
+ that.viewer._element.style.cursor = '';
|
|
|
+ $('#super2').removeClass('measureCur').addClass('measureCur');
|
|
|
+ that.viewer.scene.pickPointEnabled = false;
|
|
|
+ } else {
|
|
|
+ that.viewer.enableCursorStyle = true;
|
|
|
+ that.viewer._element.style.cursor = '';
|
|
|
+ $('#super2').removeClass('measureCur');
|
|
|
+ that.viewer.scene.pickPointEnabled = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ that.handlerArea.activate();
|
|
|
+ },
|
|
|
+ //清除所有
|
|
|
+ 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 = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mapShow() {
|
|
|
+ this.mapshow = false,
|
|
|
+ clearInterval(this.timer)
|
|
|
+ },
|
|
|
+ //移除之前添加的线
|
|
|
+ clearTwoC() {
|
|
|
+ if (this.connectBoxEntityTwo != null) {
|
|
|
+ this.viewer.entities.remove(this.connectBoxEntityTwo)
|
|
|
+ this.connectBoxEntityTwo = null
|
|
|
+ }
|
|
|
+ },
|
|
|
/**
|
|
|
* 地图落点-覆盖范围
|
|
|
*/
|
|
|
@@ -134,325 +214,326 @@ export default {
|
|
|
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
|
|
|
+ /**
|
|
|
+ * 地图画线(贴地)
|
|
|
+ */
|
|
|
+ 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 = []
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- //移除之前添加的点
|
|
|
- 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])
|
|
|
+ },
|
|
|
+ //移除之前添加的线
|
|
|
+ clearC() {
|
|
|
+ if (this.connectBoxEntity != null) {
|
|
|
+ this.viewer.entities.remove(this.connectBoxEntity)
|
|
|
+ this.connectBoxEntity = null
|
|
|
}
|
|
|
- this.markerboxEntity = []
|
|
|
- }
|
|
|
- },
|
|
|
- //移除之前添加的线
|
|
|
- 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
|
|
|
- }
|
|
|
- },
|
|
|
- superMapInfo(){
|
|
|
- getConfigKey('superMap.iServer').then(response => {
|
|
|
- this.superMapRootUrl = response.msg;
|
|
|
- this.onload();
|
|
|
- })
|
|
|
- },
|
|
|
- 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:false,
|
|
|
- navigation: false
|
|
|
- }, {
|
|
|
- contextOptions: {
|
|
|
- msaaLevel: 4,
|
|
|
- requestWebgl2: true
|
|
|
- },
|
|
|
- orderIndependentTranslucency: false
|
|
|
- });
|
|
|
- that.scene = that.viewer.scene;
|
|
|
- that.viewer.cesiumWidget.creditContainer.style.display = "none" // 去掉超图logo水印
|
|
|
+ },
|
|
|
+ //移除之前添加的面
|
|
|
+ clearG() {
|
|
|
+ if (this.graphicsBoxEntity != null) {
|
|
|
+ this.viewer.entities.remove(this.graphicsBoxEntity)
|
|
|
+ this.graphicsBoxEntity = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ superMapInfo() {
|
|
|
+ getConfigKey('superMap.iServer').then(response => {
|
|
|
+ this.superMapRootUrl = response.msg;
|
|
|
+ this.onload();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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: false,
|
|
|
+ navigation: false
|
|
|
+ }, {
|
|
|
+ contextOptions: {
|
|
|
+ msaaLevel: 4,
|
|
|
+ requestWebgl2: true
|
|
|
+ },
|
|
|
+ orderIndependentTranslucency: false
|
|
|
+ });
|
|
|
+ that.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",
|
|
|
- }));
|
|
|
+ //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)
|
|
|
- }
|
|
|
- });
|
|
|
+ //飞行值坐标点,每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, 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);
|
|
|
+ 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);
|
|
|
+ }, 3000);
|
|
|
|
|
|
- //开始加载专题图等数据，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,
|
|
|
- // });
|
|
|
+ //开始加载专题图等数据，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,
|
|
|
+ // });
|
|
|
|
|
|
- // //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);
|
|
|
+ // //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);
|
|
|
|
|
|
- //9.添加县界和乡镇界
|
|
|
- let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
- url : that.superMapRootUrl+"/map-SIPING/rest/maps/XianJie_XiangZhenJie",
|
|
|
- }));
|
|
|
+ //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';
|
|
|
- that.scene.open(layer_xiangzhenjie_name);
|
|
|
- that.road_name.then(function (layers) {
|
|
|
- let xianJie_textLayer = that.scene.layers.find('XianJie@SiPing#1');//区县文字图层
|
|
|
- let xiangZhenJie_textLayer = that.scene.layers.find('XiangZhenJie@SiPing#2');//乡镇文字图层
|
|
|
- let cun_textLayer = that.scene.layers.find('Cun@SiPing#1');//村文字图层
|
|
|
- //关闭避让
|
|
|
- xianJie_textLayer.isOverlapDisplayed = true;
|
|
|
- xiangZhenJie_textLayer.isOverlapDisplayed = true;
|
|
|
- cun_textLayer.isOverlapDisplayed = true;
|
|
|
- });
|
|
|
+ //10.添加区县乡镇村名称
|
|
|
+ let layer_xiangzhenjie_name = that.superMapRootUrl + '/3D-Name_he/rest/realspace';
|
|
|
+ that.scene.open(layer_xiangzhenjie_name);
|
|
|
+ that.road_name.then(function(layers) {
|
|
|
+ let xianJie_textLayer = that.scene.layers.find('XianJie@SiPing#1'); //区县文字图层
|
|
|
+ let xiangZhenJie_textLayer = that.scene.layers.find('XiangZhenJie@SiPing#2'); //乡镇文字图层
|
|
|
+ let cun_textLayer = that.scene.layers.find('Cun@SiPing#1'); //村文字图层
|
|
|
+ //关闭避让
|
|
|
+ xianJie_textLayer.isOverlapDisplayed = true;
|
|
|
+ xiangZhenJie_textLayer.isOverlapDisplayed = true;
|
|
|
+ cun_textLayer.isOverlapDisplayed = true;
|
|
|
+ });
|
|
|
|
|
|
- }, 3000);
|
|
|
+ }, 3000);
|
|
|
|
|
|
- },
|
|
|
- /**
|
|
|
- * 地图落点
|
|
|
- */
|
|
|
- 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
|
|
|
- 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;
|
|
|
- clearInterval(that.timer)
|
|
|
- if (html != undefined && html._value != null && html._value != '' && html != 'cgq') {
|
|
|
- that.bindPopupHtml = html
|
|
|
- that.mapshow = true
|
|
|
- } else if (html == 'cgq') {
|
|
|
- that.timer = setInterval(function() {
|
|
|
- var color = "green";
|
|
|
- var value = Math.random();
|
|
|
- var up = "▲";
|
|
|
- var down = "▼";
|
|
|
- if (value > 0.5) {
|
|
|
- color = "red";
|
|
|
- value = value + "" + up;
|
|
|
- } else {
|
|
|
- value = value + "" + down;
|
|
|
- }
|
|
|
- that.bindPopupHtml = "<span style='color:" + color + "'>当前传感器数值: " + value + "</span>";
|
|
|
- }, 1000)
|
|
|
- that.mapshow = true
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图落点
|
|
|
+ */
|
|
|
+ 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
|
|
|
+ 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;
|
|
|
+ clearInterval(that.timer)
|
|
|
+ if (html != undefined && html._value != null && html._value != '' && html != 'cgq') {
|
|
|
+ that.bindPopupHtml = html
|
|
|
+ that.mapshow = true
|
|
|
+ } else if (html == 'cgq') {
|
|
|
+ that.timer = setInterval(function() {
|
|
|
+ var color = "green";
|
|
|
+ var value = Math.random();
|
|
|
+ var up = "▲";
|
|
|
+ var down = "▼";
|
|
|
+ if (value > 0.5) {
|
|
|
+ color = "red";
|
|
|
+ value = value + "" + up;
|
|
|
+ } else {
|
|
|
+ value = value + "" + down;
|
|
|
+ }
|
|
|
+ that.bindPopupHtml = "<span style='color:" + color + "'>当前传感器数值: " + value + "</span>";
|
|
|
+ }, 1000)
|
|
|
+ that.mapshow = true
|
|
|
+ } else {
|
|
|
+ that.mapshow = false
|
|
|
+ clearInterval(that.timer)
|
|
|
+ }
|
|
|
} else {
|
|
|
that.mapshow = false
|
|
|
clearInterval(that.timer)
|
|
|
}
|
|
|
- } else {
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *鼠标右击事件是原来的点击
|
|
|
+ */
|
|
|
+ createRightClickDescription() {
|
|
|
+ let that = this;
|
|
|
+ that.handler.setInputAction(function(movement) {
|
|
|
that.mapshow = false
|
|
|
- clearInterval(that.timer)
|
|
|
- }
|
|
|
- }, 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);
|
|
|
- },
|
|
|
+ // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口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),
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 地图画线(贴地)
|
|
|
- */
|
|
|
- setConnectList(connectList,color,withAlpha) {
|
|
|
- let that = this
|
|
|
- //Cesium.Color.fromCssColorString('#67ADDF') 16进制颜色设置
|
|
|
- let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
|
|
|
- that.connectBoxEntity = that.viewer.entities.add({
|
|
|
- Type: 'Polyline',
|
|
|
- polyline: {
|
|
|
- positions: Cesium.Cartesian3.fromDegreesArray(connectList),
|
|
|
- clampToGround: true,//贴地 true,不贴地 false
|
|
|
- width: 5,
|
|
|
- material: material
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 地图图形(贴地)
|
|
|
- */
|
|
|
- setGraphicsList(graphicsList,color,withAlpha) {
|
|
|
- let that = this
|
|
|
- //Cesium.Color.fromCssColorString('#67ADDF') 16进制颜色设置
|
|
|
+ /**
|
|
|
+ * 落点定位
|
|
|
+ */
|
|
|
+ dropLocation(lat, lng) {
|
|
|
+ this.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图画线(贴地)
|
|
|
+ */
|
|
|
+ setConnectList(connectList, color, withAlpha) {
|
|
|
+ let that = this
|
|
|
+ //Cesium.Color.fromCssColorString('#67ADDF') 16进制颜色设置
|
|
|
+ let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
|
|
|
+ that.connectBoxEntity = that.viewer.entities.add({
|
|
|
+ Type: 'Polyline',
|
|
|
+ polyline: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(connectList),
|
|
|
+ clampToGround: true, //贴地 true,不贴地 false
|
|
|
+ width: 5,
|
|
|
+ material: material
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图图形(贴地)
|
|
|
+ */
|
|
|
+ setGraphicsList(graphicsList, color, withAlpha) {
|
|
|
+ let that = this
|
|
|
+ //Cesium.Color.fromCssColorString('#67ADDF') 16进制颜色设置
|
|
|
|
|
|
- let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
|
|
|
- that.graphicsBoxEntity = that.viewer.entities.add({
|
|
|
- polygon: {
|
|
|
- hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
|
|
|
- clampToGround: true,//贴地 true,不贴地 false
|
|
|
- width: 5,
|
|
|
- material: material
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
-}
|
|
|
+ let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
|
|
|
+ that.graphicsBoxEntity = that.viewer.entities.add({
|
|
|
+ polygon: {
|
|
|
+ hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
|
|
|
+ clampToGround: true, //贴地 true,不贴地 false
|
|
|
+ width: 5,
|
|
|
+ material: material
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
@@ -513,4 +594,4 @@ export default {
|
|
|
opacity: 0;
|
|
|
transform: translateY(-10rem);
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
JX.LI