| | |
| | | > |
| | | <mapol></mapol> |
| | | </div> |
| | | <add-online-map ref="addOnlineMap" /> |
| | | <add-online-ol-map ref="addOnlineOlMap"></add-online-ol-map> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | import mapsdk from "./mapsdk" |
| | | import mapol from "./mapol" |
| | | import { transform } from "ol/proj" |
| | | import ol from "ol" |
| | | import $ from "jquery" |
| | | import AddOnlineMap from '../views/Tools/AddOnlineMap.vue' |
| | | import AddOnlineOlMap from '../views/Tools/AddOnlineOLMap.vue' |
| | | export default { |
| | | name: "", |
| | | |
| | | components: { |
| | | mapsdk, |
| | | mapol, |
| | | AddOnlineMap, |
| | | AddOnlineOlMap |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | methods: { |
| | | changeMap(res) { |
| | | this.isSplitFlag = res |
| | | this.getMapViewCenter(this.isSplitFlag); |
| | | |
| | | switch (res) { |
| | | case 1: |
| | | this.isShowCeMap = true |
| | |
| | | this.isShowOlMap = true |
| | | this.isSdkMapFlag = true |
| | | var that = this |
| | | |
| | | this.$store.state.setChangeBaseMap = false; |
| | | setTimeout(function () { |
| | | |
| | | window.map.updateSize() |
| | | that.showSplitMap() |
| | | }, 500) |
| | |
| | | this.isShowDs = false |
| | | this.isShowOlMap = false |
| | | this.isOlMapFlag = true |
| | | var val = this.$store.state.Map3; |
| | | setTimeout(function () { |
| | | window.map.updateSize() |
| | | window.map.getView().setCenter([val[0], val[1]]) |
| | | window.map.getView().setZoom(val[2]) |
| | | }, 300) |
| | | break |
| | | case 3: |
| | |
| | | this.isShowOlMap = false |
| | | this.isOlMapFlag = false |
| | | this.isShowCeMap = false |
| | | var val = this.$store.state.Map3; |
| | | this.$store.state.setChangeBaseMap = true; |
| | | window.Viewer.camera.setView({ |
| | | destination: Cesium.Cartesian3.fromDegrees(val[0], val[1], val[2]), |
| | | }) |
| | | |
| | | break |
| | | } |
| | | }, |
| | | getMapViewCenter(res) { |
| | | switch (res) { |
| | | case 2: |
| | | var position = window.Viewer.camera.position |
| | | var ellipsoid = window.Viewer.scene.globe.ellipsoid |
| | | var cartographic = ellipsoid.cartesianToCartographic(position) |
| | | var lat = Cesium.Math.toDegrees(cartographic.latitude) |
| | | var lng = Cesium.Math.toDegrees(cartographic.longitude) |
| | | var level = this.getLevel(cartographic.height) |
| | | this.$store.state.Map3 = [lng, lat, level] |
| | | break; |
| | | case 3: |
| | | var position = window.map.getView().getCenter() |
| | | var level = this.getHeight(parseInt(window.map.getView().getZoom())) |
| | | this.$store.state.Map3 = [position[0], position[1], level] |
| | | break; |
| | | } |
| | | |
| | | }, |
| | | showSplitMap() { |
| | | var that = this |
| | |
| | | // var pos = transform(position, 'EPSG:3857', 'EPSG:4326'); |
| | | var pos = position |
| | | var level = that.getHeight(parseInt(window.map.getView().getZoom())) |
| | | |
| | | window.Viewer.camera.setView({ |
| | | destination: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], level), |
| | | }) |
| | |
| | | var lat = Cesium.Math.toDegrees(cartographic.latitude) |
| | | var lng = Cesium.Math.toDegrees(cartographic.longitude) |
| | | var level = this.getLevel(cartographic.height) |
| | | |
| | | var value |
| | | // window.map |
| | | // .getView() |
| | |
| | | } |
| | | return this.levelArray[this.levelArray.length - 1] |
| | | }, |
| | | showBaseMapLayer(res) { |
| | | this.closeAllBaseMapLayer(); |
| | | if(res.type == 'ol'){ |
| | | this.$refs && this.$refs.addOnlineOlMap && this.$refs.addOnlineOlMap.open("2D在线地图", null); |
| | | }else{ |
| | | this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.open("3D在线地图", null); |
| | | } |
| | | }, |
| | | closeAllBaseMapLayer(){ |
| | | this.$refs && this.$refs.addOnlineOlMap && this.$refs.addOnlineOlMap.close(); |
| | | this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.close(); |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.$bus.$on("setChangeBaseMapLayer", (res) => { |
| | | this.showBaseMapLayer(res) |
| | | |
| | | |
| | | }) |
| | | // |
| | | this.$bus.$on("changemap", e => { |
| | | if (this.isSplitFlag == 1) { |
| | | this.changeMap(3) |
| | |
| | | width: 100%; |
| | | } |
| | | .sdkMapTwo { |
| | | width: calc(50% - 1px); |
| | | width: calc(50% - 2px); |
| | | } |
| | | .olMap { |
| | | height: 100%; |
| | |
| | | width: 100%; |
| | | } |
| | | .olMapTwo { |
| | | width: calc(50% - 1px); |
| | | width: calc(50% - 2px); |
| | | } |
| | | #ds { |
| | | height: 100%; |