OpenLayers加载鹰眼、比例尺、坐标显示

OpenLayers加载鹰眼、比例尺、坐标

• 主要内容
• 加载鹰眼控件
• 加载比例尺控件
• 加载坐标显示
• 关键代码

主要内容

上一期说的如何基于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>