vue openlayers【十一】地圖工具 - 添加放大縮小控件 zoom

1. 效果圖

① 在控制器中設置 zoom：true 則顯示，設置false則隱藏控件
② 默認爲zoom：true
③ 官方參考文檔：https://openlayers.org/en/latest/apidoc/module-ol_control_Zoom-Zoom.html

1.1 設置爲true

controls: defaultControls({ zoom: true }).extend([])

1.2 設置其他參數參考

2. 完整代碼

<template>
    <div id="content">
        <div id="map" ref="map"></div>
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { defaults as defaultControls } from "ol/control";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";

export default {
    name: "tree",
    data() {
        return {
            map: null
        };
    },
    methods: {
        initMap() {
            let target = "map"; //跟頁面元素的 id 綁定來進行渲染
            let tileLayer = [
                new TileLayer({
                    source: new XYZ({
                        url:
                            "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
                    })
                })
            ];
            let view = new View({
                center: fromLonLat([104.912777, 34.730746]), //地圖中心座標
                zoom: 4.5 //縮放級別
            });
            this.map = new Map({
                target: target, //綁定dom元素進行渲染
                layers: tileLayer, //配置地圖數據源
                view: view, //配置地圖顯示的options配置（座標系，中心點，縮放級別等）
                controls: defaultControls({ zoom: true }).extend([])
            });
        }
    },
    mounted() {
        this.initMap();
    }
};
</script>
<style lang="scss" scoped>
// 此處非核心已刪除
</style>