vue3+openlayers学习：初始化地图

vue3+openlayers学习：初始化地图
本次学习openlayers官网初始化地图的例子
刚开始学习openlayers会很疑惑map、view、target等是什么吧？下面对几个比较常见的api进行简单介绍，具体介绍可以到官网查看。
官网链接

Map类及其配置项

• Map：是openlayers的核心类，想要动图进行渲染，则至少要有三个配置，分别为layers，target和view。
  layers：数组，名为图层，没有定义就不能成功渲染，数组换而言之就是可以放置多个图层，感觉像是类似于ArcGIS的叠加图层的意思。
  target：存放地图的容器，换句话说就是地图放置位置的html容器名称。此处必须为id选择器，不可以是类选择器。
  view：视图，地图最终显示效果，center配置地图的中心点的文字，zoom配置地图的层级，数字越小，显示的范围越大，反之则越小。

初始化地图主要思路

1. 首先要引入相关类及其配置项，最基本的Map和View；
2. 然后new一个Map，配置最基本的layers、target和view；
3. layers至少存放一个图层，每个图层需要有一个数据源，数据源可以是自身发布的，也可以是现有的，如高德底图、OSM等；
4. view必要要设置视图的中心点，就是你在页面看到的图层中心点，还有图层的缩放级别。
5. 基本配置完后对图层进行挂载，显示成功就可以了。

核心代码如下

组件代码如下

<template>
	<button id="zoom_in">zoom in</button>
	<button id="zoom_out">zoom out</button>
	<div id="map_container"></div>
</template>

<script>
//引入相关类及配置项
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'
//引入vue的api
import { onMounted } from 'vue'
export default {
	name: 'Map',
	setup() {
		let map
		function initMap() {
			map = new Map({
				layers: [
					new TileLayer({
						source: new XYZ({
							// url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', //高德交通图
							url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"//深色底图
							// url: "https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}" //谷歌底图
						}),
					}),
				],
				target: 'map_container',
				view: new View({
					center: fromLonLat([113, 25]),
					zoom: 2,
				}),
			})
			console.log(map)
			document.getElementById('zoom_in').onclick = () => {
				const view = map.getView()
				const zoom = view.getZoom()
				view.setZoom(zoom + 1)
			}
			document.getElementById('zoom_out').onclick = () => {
				const view = map.getView()
				const zoom = view.getZoom()
				view.setZoom(zoom - 1)
			}
		}
		//挂载到页面
		onMounted(() => {
			initMap()
		})
	},
}
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
}
#map_container {
	width: 100%;
	height: 600px;
}
</style>

如有不足之处，请在评论区提出呀
一起入门openlayers呀，加油~~