A006：如何在vue+openlayers中实现zoomslider控件(Controls篇)

---

前言

提示：如果对操作流程还不熟悉的话，可以参考之前的文章 ，这些内容会帮助你更好地了解 OpenLayers 的功能点。我们会持续更新相关内容，如果你感兴趣或有这方面的需求，欢迎关注并收藏。

---

一、示例效果图

二、示例简介

本示例介绍如何在openlayers中使添加使用zoomslider控件，实现添加zoomslider的效果。 直接复制下面的vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他数据源来练习

二、示例源码

<template>
  <div class="wrapper">
    <div>天地图</div>
    <div class="map" id="olMap"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Tile as TileLayer } from "ol/layer";
import XYZ from "ol/source/XYZ";
import {
  defaults as defaultControls,
  ZoomSlider,
  ZoomToExtent,
} from "ol/control";
import { Map, View } from "ol";
export default {
  data() {
    return {
      map: null,
      parser: null,
    };
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {

      const map = new Map({
        target: "olMap",
        view: new View({
          center: [0, 0], //中心点经纬度
          zoom: 4, //图层缩放大小
          projection: "EPSG:4326",
        }),
        controls: defaultControls({
          zoom: true,
          attribution: false,
          rotate: false,
        }),
      });

     // 添加地图
      this.map = map; 
      let url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
      url = `${url}&T=vec_c&tk=7f10e5bac8074b0640be5195096c86c7`;
      const source = new XYZ({
        url: url,
        projection: "EPSG:4326",
      });
      const tdtLayer = new TileLayer({
        source: source,
      });
     // 添加标注
      url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
      url = `${url}&T=cia_c&tk=7f10e5bac8074b0640be5195096c86c7`;
      const sourceCVA = new XYZ({
        url: url,
        projection: "EPSG:4326",
      });
      const tdtcvaLayer = new TileLayer({
        source: sourceCVA,
      });

      //图层添加到地图
      this.map.addLayer(tdtLayer);
      this.map.addLayer(tdtcvaLayer);


      //实例化ZoomSlider控件并加载到地图容器中
      var zoomslider = new ZoomSlider();
      //实例化zoomToExtent控件并加载到地图容器中
      var zoomToExtent = new ZoomToExtent({
        extent: [
          813079.7791264898, 5929220.284081122, 848966.9639063801,
          5936863.986909639,
        ],
      });
      this.map.addControl(zoomslider);
      this.map.addControl(zoomToExtent);
    },
  },
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 800px;
}
</style>