Vue2+OpenLayers添加缩放、滑块缩放、拾取坐标、鹰眼、全屏控件（提供Gitee源码）

一、案例截图

二、安装OpenLayers库

三、代码实现

四、Gitee源码

一、案例截图

二、安装OpenLayers库

npm install ol

三、代码实现

废话不多说，直接给完整代码，替换成自己的KEY即可运行：

<template><div><div id="map-container"></div><div id="scaleLine-map"></div></div>
</template>
<script>
// 引入 OpenLayers 的 CSS
import "ol/ol.css";
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import {defaults as defaultControls,FullScreen,MousePosition,OverviewMap,ScaleLine,Zoom,ZoomSlider
} from 'ol/control';export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 0; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z);
}export default {data() {return {map:null,}},mounted(){this.initMap() // 加载矢量底图},methods:{initMap() {const KEY = '你申请的KEY'const overviewMapControl = new OverviewMap({className: "ol-overviewmap ol-custom-overviewmap",// 父元素ID// target: 'overview-map',//不使用主视图使用过的图层，否则会出现闪烁、空白的问题layers: [// 底图new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,layer: 'vec', // 矢量底图matrixSet: 'c', // c: 经纬度投影 w: 球面墨卡托投影style: "default",crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加format: "tiles", //请求的图层格式，这里指定为瓦片格式wrapX: true, // 允许地图在 X 方向重复（环绕）tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})}),// 标注new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,layer: 'cva', //矢量注记matrixSet: 'c',style: "default",crossOrigin: 'anonymous',format: "tiles",wrapX: true,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})})],//初始为展开显示方式collapsed: false,});// 添加比例尺控件const scaleLine = new ScaleLine({units: 'metric', // 设置为米制target: 'scaleLine-map',});// 添加缩放控件const zoom = new Zoom();// 添加滑块缩放控件const zoomSlider = new ZoomSlider();//全屏控件const fullScreen = new FullScreen();//拾取坐标控件const mousePosition = new MousePosition({// 设置空间参考系统为'EPSG:4326'projection:'EPSG:4326',})this.map = new Map({target: 'map-container',layers: [// 底图new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,layer: 'vec', // 矢量底图matrixSet: 'c', // c: 经纬度投影 w: 球面墨卡托投影style: "default",crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加format: "tiles", //请求的图层格式，这里指定为瓦片格式wrapX: true, // 允许地图在 X 方向重复（环绕）tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})}),// 标注new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,layer: 'cva', //矢量注记matrixSet: 'c',style: "default",crossOrigin: 'anonymous',format: "tiles",wrapX: true,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})})],view: new View({center: [113.082753,28.180449],projection: projection,zoom: 12,maxZoom: 17,minZoom: 1}),//加载控件到地图容器中controls: defaultControls({zoom: false,rotate: false,attribution: false}).extend([overviewMapControl,scaleLine,zoom,mousePosition,zoomSlider,fullScreen])})}}
}
</script>
<style scoped>
#map-container {width: 100%;height: 100vh;
}
#scaleLine-map {position: relative;margin-left: 200px;
}
</style>