From 7976e60dfd49be4d2f68d2b371353df6637aee91 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期二, 07 二月 2023 14:48:58 +0800
Subject: [PATCH] 二维地图比例尺&指北针
---
src/components/mapol.vue | 68 +++++++++++++++++++++-------------
1 files changed, 42 insertions(+), 26 deletions(-)
diff --git a/src/components/mapol.vue b/src/components/mapol.vue
index 3ad3f60..fe89722 100644
--- a/src/components/mapol.vue
+++ b/src/components/mapol.vue
@@ -14,62 +14,78 @@
</template>
<script>
-import TileLayer from 'ol/layer/Tile';
-import XYZ from 'ol/source/XYZ';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import { transform } from 'ol/proj';
+import TileLayer from "ol/layer/Tile"
+import XYZ from "ol/source/XYZ"
+import Map from "ol/Map"
+import View from "ol/View"
+import { transform } from "ol/proj"
+import {
+ OverviewMap,
+ defaults as defaultControls,
+ FullScreen,
+ ScaleLine,
+ Rotate,
+} from "ol/control.js"
+import {
+ DragRotateAndZoom,
+ defaults as defaultInteractions,
+} from 'ol/interaction.js';
export default {
- name: '',
+ name: "",
data() {
return {
centerFlag: false,
isActive: true,
isMenuLayer: false,
- };
+ }
},
mounted() {
- this.init2DMap();
+ this.init2DMap()
},
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}',
+ 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}',
+ url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
}),
- });
+ })
window.map = new Map({
- target: 'mapol',
+ target: "mapol",
layers: [imageLayer, vectorLayer],
view: new View({
- center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
+ center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
zoom: 4,
- projection: 'EPSG:3857',
+ projection: "EPSG:3857",
}),
- });
+ controls: defaultControls().extend([
+ new FullScreen(),
+ new ScaleLine(),
+ ]),
+ interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
+ })
},
changeMenulayer() {
- this.isActive = !this.isActive;
- this.isMenuLayer = !this.isMenuLayer;
- this.setLayerVisible();
+ this.isActive = !this.isActive
+ this.isMenuLayer = !this.isMenuLayer
+ this.setLayerVisible()
},
setLayerVisible() {
if (this.isActive == true) {
- map.getLayers().item(0).setVisible(false);
- map.getLayers().item(1).setVisible(true);
+ map.getLayers().item(0).setVisible(false)
+ map.getLayers().item(1).setVisible(true)
} else {
- map.getLayers().item(0).setVisible(true);
- map.getLayers().item(1).setVisible(false);
+ map.getLayers().item(0).setVisible(true)
+ map.getLayers().item(1).setVisible(false)
}
},
},
-};
+}
</script>
<style scoped>
@@ -118,7 +134,7 @@
.active {
width: 100%;
height: 100%;
- background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
+ background: url("../assets/img/Layer/imgLayer2.png") no-repeat center;
position: absolute;
background-size: 100% 100%;
border-radius: 5px;
@@ -126,7 +142,7 @@
.menuLayer {
width: 100%;
height: 100%;
- background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
+ background: url("../assets/img/Layer/imgLayer1.png") no-repeat center;
position: absolute;
background-size: 100% 100%;
border-radius: 5px;
--
Gitblit v1.9.3