openlayers 入门(11)旋转

本文介绍了如何使用JavaScript库Ol.js创建一个可旋转的在线地图,通过`rotateLeft`和`rotateRight`方法实现地图视图的顺时针和逆时针旋转,展示了如何在Vue组件中集成和控制地图的旋转功能。
摘要由CSDN通过智能技术生成
<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值