二十五、openlayers官网示例CustomOverviewMap解析——实现鹰眼地图、预览窗口、小窗窗口地图、旋转控件

官网demo地址:

 Custom Overview Map

这个示例展示了如何在地图上增加一个小窗窗口的地图并跟随着地图的旋转而旋转视角。

首先加载了一个地图。其中 DragRotateAndZoom是一个交互事件,它可以实现按住shift键鼠标拖拽旋转地图。

 const map = new Map({
      interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          }),
          zIndex: 1,
        }),
      ],
      target: "map",
      view: new View({
        center: [500000, 6000000],
        zoom: 7,
      }),
    });

然后是实例化了OverviewMap类来实现鹰眼地图。

const overviewMapControl = new OverviewMap({
      className: "ol-overviewmap ol-custom-overviewmap",
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          }),
          zIndex: 1,
        }),
      ],
      // 设置控制面板折叠时显示的标签,"\u00BB" 是一个右双尖括号(»)。
      collapseLabel: "\u00BB",
      //设置控制面板展开时显示的标签,"\u00AB" 是一个左双尖括号(«)
      label: "\u00AB",
      //设置 OverviewMap 控件初始化时是否是折叠状态。false 表示默认展开。
      collapsed: false,
    });

collapseLabel接受两种类型的参数string | HTMLElement ,所以也可以自己定义一个图标。

<i class="el-icon-edit" ref="edit_icon"></i>
collapseLabel: this.$refs.edit_icon

因为地图设置了按住shift键旋转,所以这个小窗口也需要设置一下是否跟随旋转。setRotateWithView(true/false) 

overviewMapControl.setRotateWithView(this.checked);

然后,在初始化map的时候将overviewMapControl加进去就可以了。

const map = new Map({
      controls: defaultControls().extend([overviewMapControl]),
})

 小细节:

new OverviewMap的className参数要么不传,要传自定义类名的话需要加上它的默认值.ol-overviewmap

我原本以为可以随便自定义,于是只写了一个test。

const overviewMapControl = new OverviewMap({
      className: "test",
})

调整样式后发现点击折叠按钮无法控制它显示隐藏。

翻看文档和源码后得知,展示/折叠的按钮点击事件中是通过是否加上ol-collapsed类名来控制小窗显隐的。

而起隐藏作用的css是这样写的,带上了它原本的默认类名.ol-overviewmap

所以,如果要自定义类名要在加上它的默认值ol-overviewmap 

  //   className: "ol-overviewmap test",

完整代码:

<template>
  <div class="box">
    <h1>OverviewMap</h1>
    <div id="map" class="map"></div>
    <div>
      <label
        ><input type="checkbox" id="rotateWithView" /> Rotate with view</label
      >
    </div>
    <i class="el-icon-edit" ref="edit_icon"></i>
    <i class="el-icon-share" ref="share_icon"></i>
  </div>
</template>

<script>
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import { XYZ } from "ol/source";
import {
  DragRotateAndZoom,
  defaults as defaultInteractions,
} from "ol/interaction.js";
import { OverviewMap, defaults as defaultControls } from "ol/control.js";

export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    const rotateWithView = document.getElementById("rotateWithView");

    const overviewMapControl = new OverviewMap({
      className: "ol-overviewmap ol-custom-overviewmap",
      //   className: "ol-overviewmap test",
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          }),
          zIndex: 1,
        }),
      ],
      // 设置控制面板折叠时显示的标签,"\u00BB" 是一个右双尖括号(»)。
      //collapseLabel: "\u00BB",
      //设置控制面板展开时显示的标签,"\u00AB" 是一个左双尖括号(«)
      //label: "\u00AB",
      label: this.$refs.share_icon,
      collapseLabel: this.$refs.edit_icon,
      //设置 OverviewMap 控件初始化时是否是折叠状态。false 表示默认展开。
      collapsed: false,
    });

    rotateWithView.addEventListener("change", function () {
      overviewMapControl.setRotateWithView(this.checked);
    });

    const map = new Map({
      controls: defaultControls().extend([overviewMapControl]),
      interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          }),
          zIndex: 1,
        }),
      ],
      target: "map",
      view: new View({
        center: [500000, 6000000],
        zoom: 7,
      }),
    });
  },
  methods: {},
};
</script>

<style lang="scss" >
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}

.map .ol-custom-overviewmap,
.map .ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
}

.map .ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid black;
}

.map .ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
}

.map .ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
}

.map .ol-custom-overviewmap:not(.ol-collapsed) button {
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
}
.map .ol-rotate {
  top: 170px;
  right: 0;
}
.map .ol-overviewmap-map {
  height: 150px;
}
// 以下为测试代码
.map .test {
  border: none;
  width: 200px;
  height: 150px;
  border: 2px solid red;
  position: absolute;
  right: 0;
}
.map .test:not(.ol-collapsed) button {
  position: absolute;
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
}

.test.ol-collapsed .ol-overviewmap-map,
.test.ol-uncollapsible button {
  display: none;
}
</style>

  • 18
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Openlayers地图的全屏显示,可以使用浏览器提供的Fullscreen API来实现。具体步骤如下: 1. 创建一个按钮或者一个链接,用于触发全屏显示。 2. 绑定该按钮或链接的点击事件,在事件处理函数中调用地图对象的requestFullscreen()方法,请求浏览器进入全屏模式。 3. 监听Fullscreen API的fullscreenchange事件。当该事件被触发时,检查当前是否处于全屏模式。如果是,则设置地图的尺寸为浏览器窗口的尺寸。 下面是一个实现Openlayers地图全屏显示的示例代码: ``` // 创建地图对象 var map = new ol.Map({ target: 'map', layers: [ // 添加地图图层 new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ // 设置地图中心点和缩放级别 center: ol.proj.fromLonLat([120, 30]), zoom: 10 }) }); // 创建全屏按钮 var fullscreenBtn = document.createElement('button'); fullscreenBtn.innerText = '全屏'; // 点击按钮进入全屏模式 fullscreenBtn.addEventListener('click', function() { if (document.fullscreenElement) { document.exitFullscreen(); } else { map.getTargetElement().requestFullscreen(); } }); // 监听Fullscreen API的fullscreenchange事件 document.addEventListener('fullscreenchange', function() { if (document.fullscreenElement) { // 进入全屏模式时设置地图大小为浏览器窗口大小 map.setSize([window.innerWidth, window.innerHeight]); } else { // 退出全屏模式时恢复地图原来的大小 map.setSize([500, 500]); } }); // 将按钮添加到页面中 document.body.appendChild(fullscreenBtn); ``` 该示例代码中创建了一个地图对象,并添加了一个OpenStreetMap图层。然后创建了一个全屏按钮,点击该按钮可以进入或退出全屏模式。最后监听了Fullscreen API的fullscreenchange事件,在事件处理函数中设置了地图的大小。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值