| | |
| | | <div |
| | | @click="changeMenulayer" |
| | | class="changeLayer" |
| | | style=" position: absolute; |
| | | bottom: 84px; |
| | | right: 46px; |
| | | height: 30px; |
| | | width: 30px; |
| | | z-index: 101; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | border: 1px solid rgba(255, 255, 255, 0.5);" |
| | | > |
| | | <div |
| | | title="底图切换" |
| | |
| | | <div |
| | | @click="changeMapType" |
| | | class="changeMapType" |
| | | v-if="$store.state.setChangeBaseMap" |
| | | style=" position: absolute; |
| | | |
| | | bottom: 52px; |
| | | right: 46px; |
| | | height: 30px; |
| | | width: 30px; |
| | | z-index: 101; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | border: 1px solid rgba(255, 255, 255, 0.5);" |
| | | > |
| | | <div |
| | | title="2/3维切换" |
| | |
| | | |
| | | <!-- </div>--> |
| | | <div |
| | | v-show="$store.state.isNaviget" |
| | | class="sindagis-map-compass" |
| | | style=" bottom: 130px; right: 40px;" |
| | | > |
| | | <span |
| | | class="left" |
| | |
| | | methods: { |
| | | |
| | | init2DMap() { |
| | | // var vectorLayer = new TileLayer({ |
| | | // source: new XYZ({ |
| | | // url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", |
| | | // }), |
| | | // }) |
| | | // var imageLayer = new TileLayer({ |
| | | // source: new XYZ({ |
| | | // url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}", |
| | | // }), |
| | | // }) |
| | | var layerBase = []; |
| | | // if (!is_production) { |
| | | // var vectorLayer = new TileLayer({ |
| | | // source: new XYZ({ |
| | | // url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", |
| | | // }), |
| | | // }) |
| | | // var imageLayer = new TileLayer({ |
| | | // source: new XYZ({ |
| | | // url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}", |
| | | // }), |
| | | // }) |
| | | // layerBase = [vectorLayer, imageLayer] |
| | | // } |
| | | window.map = new Map({ |
| | | target: "mapol", |
| | | layers: [], |
| | | // layers: layerBase, |
| | | view: new View({ |
| | | center: [105.02, 34.9], |
| | | zoom: 4, |
| | |
| | | interactions: defaultInteractions().extend([new DragRotateAndZoom()]), |
| | | }) |
| | | |
| | | window.olBaseMapLayer = new TileLayer({ |
| | | title: "高德地图", |
| | | source: new XYZ({ |
| | | url: gaoDeBaseUrl[1].url, |
| | | wrapX: false |
| | | |
| | | if (is_production) { |
| | | var base_ulr = window.sceneConfig.baseUrl; |
| | | if (base_ulr.indexOf('{host}') > -1) { |
| | | base_ulr = base_ulr.replace("{host}", iisHost) |
| | | } |
| | | window.olBaseMapLayer = new TileLayer({ |
| | | title: "高德地图", |
| | | source: new XYZ({ |
| | | url: base_ulr, |
| | | wrapX: false |
| | | }) |
| | | }); |
| | | window.map.addLayer(window.olBaseMapLayer); |
| | | } else { |
| | | window.olBaseMapLayer = new TileLayer({ |
| | | source: new XYZ({ |
| | | url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}", |
| | | }), |
| | | }) |
| | | window.map.addLayer(window.olBaseMapLayer); |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | var scaleLine = new ScaleLine({ |
| | | units: "metric" |
| | | }); |
| | | window.map.addLayer(window.olBaseMapLayer); |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | // var scaleLine = new ScaleLine({ |
| | | // units: "metric" |
| | | // }); |
| | | // map.addControl(scaleLine); |
| | | map.addControl(scaleLine); |
| | | |
| | | map.on("moveend", function (e) { |
| | | console.log(($(window).width() - $(".ol-scale-line-inner").width()) + "px"); |
| | |
| | | }, |
| | | |
| | | changeMenulayer() { |
| | | this.$bus.$emit("setChangeBaseMapLayer", true) |
| | | this.$bus.$emit("setChangeBaseMapLayer", {type:'ol',boolen:true}) |
| | | // this.isActive = !this.isActive |
| | | // this.isMenuLayer = !this.isMenuLayer |
| | | // this.setLayerVisible() |
| | |
| | | } |
| | | .ol-scale-line { |
| | | bottom: 55px !important; |
| | | right: 130px !important; |
| | | } |
| | | |
| | | .sindagis-map-compass { |
| | | position: absolute; |
| | | right: 50px; |
| | | bottom: 90px; |
| | | |
| | | z-index: 5; |
| | | right: 25px; |
| | | width: 52px; |
| | | height: 54px; |
| | | background: url("../assets/img/compass.png") 0% 0% / 266px no-repeat; |
| | |
| | | background-size: contain; |
| | | } |
| | | .changeMapType { |
| | | position: absolute; |
| | | bottom: 52px; |
| | | right: 46px; |
| | | height: 30px; |
| | | width: 30px; |
| | | z-index: 101; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | border: 1px solid rgba(255,255,255,.5); |
| | | //position: absolute; |
| | | //bottom: 1%; |
| | | //left: calc(1% + 75px); |
| | | //height: 40px; |
| | | //width: 60px; |
| | | //z-index: 101; |
| | | //display: flex; |
| | | //justify-content: center; |
| | | //align-items: center; |
| | | //// box-shadow: 3px 3px 6px #666; |
| | | //border-radius: 5px; |
| | | //// background: #fff; |
| | | //cursor: pointer; |
| | | } |
| | | .mapTypeTwo { |
| | | width: 100%; |
| | |
| | | background-repeat: no-repeat; |
| | | background-size: contain; |
| | | } |
| | | .changeLayer{ |
| | | position: absolute; |
| | | bottom: 84px; |
| | | right: 46px; |
| | | height: 30px; |
| | | width: 30px; |
| | | z-index: 101; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | border: 1px solid rgba(255,255,255,.5); |
| | | .changeLayer { |
| | | } |
| | | </style> |