鹰眼图

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

鹰眼图(Overview Map)是一个小型的地图窗口,显示当前地图的缩略图和可视范围,帮助用户了解当前视图在整个地图中的位置。

示例

新标签页预览

代码实现

<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 { Zoom, Attribution, ScaleLine, OverviewMap } from "ol/control";

onMounted(() => {
  // 创建地图图层
  const layer = 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",
      maxZoom: 18,
      minZoom: 0,
    }),
  });

  // 创建主地图
  const map = new Map({
    target: "map",
    layers: [layer],
    view: new View({
      center: fromLonLat([117.33083, 39.094899]), // 天津
      zoom: 12,
    }),
    controls: [
      new Zoom(),
      new Attribution(),
      new ScaleLine(),
      new OverviewMap({
        className: "ol-overviewmap",
        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",
            }),
          }),
        ],
        collapsed: false,
        rotateWithView: true,
      }),
    ],
  });
});
</script>

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

.ol-overviewmap {
  position: absolute;
  left: unset;
  right: 10px;
  bottom: 10px;
}

.ol-overviewmap.ol-collapsed {
  background: rgba(255, 255, 255, 0.8);
}

.ol-overviewmap .ol-overviewmap-map {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
}

.ol-overviewmap button {
  background-color: rgba(255, 255, 255, 0.8);
}

.ol-overlay-container.ol-selectable {
  border: 1px solid rgba(10, 10, 10, 0.8);
}

button[title="Overview map"] {
  display: none;
}
</style>