<template>
<div class="vm">
<h2 class="h-title">旋转 rotation</h2>
<div id="map" class="map-x"></div>
<div class="btn-x">
<button @click="rotateLeft">↻</button>
<button @click="rotateRight">↺</button>
</div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from 'ol/proj';
export default {
name: "RotationMap",
data() {
return {
map: null,
};
},
methods: {
initMap() {
this.map = new Map({
target: "map",
layers: [
new Tile({
name: "defaultLayer",
source: new XYZ({
url:
"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
}),
}),
],
view: new View({
// projection: "EPSG:4326", // 坐标系,有EPSG:4326和EPSG:3857
center: fromLonLat([114.064839, 22.548857]), // 深圳坐标
rotation: 0,
zoom: 6, // 地图缩放级别(打开页面时默认级别)
}),
});
},
rotateLeft() {
let currentRotation = this.map.getView().getRotation();
this.map.getView().setRotation(currentRotation + 1);
},
rotateRight() {
let currentRotation = this.map.getView().getRotation();
this.map.getView().setRotation(currentRotation - 1);
},
},
mounted() {
this.initMap();
},
};
</script>
<style lang="scss" scoped>
.btn-x {
text-align: center;
margin-top: 20px;
button {
margin: 0 10px;
}
}
</style>
openlayers 入门(11)旋转
最新推荐文章于 2024-04-08 19:17:21 发布
本文介绍了如何使用JavaScript库Ol.js创建一个可旋转的在线地图,通过`rotateLeft`和`rotateRight`方法实现地图视图的顺时针和逆时针旋转,展示了如何在Vue组件中集成和控制地图的旋转功能。
摘要由CSDN通过智能技术生成