主要内容

上一期说的如何基于Vue创建OpenLayers应用，这次说说如何加载常用的OpenLayers控件，主要有鹰眼、比例尺、坐标显示。

加载鹰眼控件

1.根据官方文档，首先引入依赖

我们可以这样引入

import { OverviewMap, defaults } from "ol/control";

2.添加鹰眼控件代码
定义map的control属性，实例化一个鹰眼地图，这里注意鹰眼图不显示或偏差问题：可能是因为你主地图和鹰眼图的坐标系不同导致的，我们可以为二者定义相同的view及空间参考(OpenLayers默认墨卡托)。

import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { OverviewMap, defaults } from "ol/control";
export default {
  mounted() {
    const map = new Map({
      target: "mapDiv",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 0
      }),
      controls: defaults().extend([
        // 添加一个鹰眼控件
        new OverviewMap({
          // 实例化一个OverviewMap类的对象，并加入到地图中
          collapsed: false,
          view: new View({
            center: [0, 0]
          }),
          layers: [
            new TileLayer({
              source: new OSM()
            })
          ]
        })
      ])
    });
  }
};

3.鹰眼控件加载效果图（地图加载较慢）

加载比例尺控件

1.查看官方文档,引入依赖

2.可以在鹰眼的基础上添加

import { OverviewMap, ScaleLine, defaults } from "ol/control";

3.在map的control属性中实例化添加一个比例尺控件，根据官方文档，可以用.ol-scale-line调整样式

// 添加比例尺
new ScaleLine({
	units: "metric"
})

.ol-scale-line {
  left: 200px;
}

4.查看比例尺控件添加效果

加载坐标显示

1.引入依赖

import { OverviewMap, ScaleLine, MousePosition, defaults } from "ol/control";
import {createStringXY} from 'ol/coordinate';

2.实例化一个坐标显示控件，并设置坐标显示格式

new MousePosition({
	coordinateFormat: createStringXY(6), // 保留6位小数位
})

3.查看坐标控件加载效果

关键代码

<template>
  <div id="mapDiv"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { OverviewMap, ScaleLine, MousePosition, defaults } from "ol/control";
import {createStringXY} from 'ol/coordinate';
export default {
  mounted() {
    const map = new Map({
      target: "mapDiv",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 0
      }),
      controls: defaults().extend([
        // 添加一个鹰眼控件
        new OverviewMap({
          // 实例化一个OverviewMap类的对象，并加入到地图中
          collapsed: false,
          view: new View({
            center: [0, 0]
          }),
          layers: [
            new TileLayer({
              source: new OSM()
            })
          ]
        }),
        // 添加比例尺
        new ScaleLine({
          units: "metric"
        }),
        new MousePosition({
          coordinateFormat: createStringXY(6), // 保留6位小数位
        })
      ])
    });
  }
};
</script>

<style scoped>
#mapDiv {
  width: 100%;
  height: 100%;
}
.ol-scale-line {
  left: 200px;
}
</style>