控件

上次更新 2025年8月20日星期三 3:16:20 字数 0 字 时长 0 分钟

OpenLayers 提供了一系列内置控件,可以通过配置 controls 选项来添加和自定义这些控件。

示例

新标签页预览

代码实现

<template>
  <div id="map" class="w-full h-96"></div>
</template>

<script setup>
import { onMounted } from "vue";
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import {
  ScaleLine,
  Zoom,
  ZoomSlider,
  FullScreen,
  MousePosition,
  Rotate,
} from "ol/control";
import { createStringXY } from "ol/coordinate";

onMounted(() => {
  // 创建地图
  const map = new Map({
    target: "map",
    layers: [
      new TileLayer({
        source: new XYZ({
          url: "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d32c6748c80f81a44acd8633cea41dfd",
        }),
      }),
    ],
    view: new View({
      center: fromLonLat([117.33083, 39.094899]), // 天津
      zoom: 4,
    }),
    controls: [
      // 添加比例尺控件
      new ScaleLine(),
      // 添加缩放控件
      new Zoom(),
      // 添加缩放滑块控件
      new ZoomSlider(),
      // 添加全屏控件
      new FullScreen(),
      // 添加鼠标位置控件
      new MousePosition({
        coordinateFormat: createStringXY(4),
        projection: "EPSG:4326",
        className: "ol-mouse-position",
      }),
      // 添加旋转控件
      new Rotate(),
    ],
  });

  // 添加影像图层
  const satelliteLayer = new TileLayer({
    source: new XYZ({
      url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d32c6748c80f81a44acd8633cea41dfd",
    }),
    visible: false,
  });
  map.addLayer(satelliteLayer);
});
</script>

<style scoped>
.w-full {
  width: 100%;
}
.h-96 {
  height: 24rem;
}

.ol-mouse-position {
  position: absolute;
  bottom: 10px;
  right: 10px;
  top: unset;
  color: #111;
}
</style>