基础认知

openlayers简介

openlayers是一个用于实现web地图的JavaScript类库，它有种类繁多的API供你使用，可以实现气象中的风场和台风路径演变等等展示，也可以在里面增加各种交互。
接下来让我们一起开启openlayers的学习之路吧

使用

安装

npm i ol

vue3 中使用

<template>
    <div class="olMap" id="map" ref="olMap"></div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {Map, View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import * as olInteraction from 'ol/interaction'
import * as olControl from 'ol/control'
import * as olProj from 'ol/proj'

const olMap = ref(null)
const state = reactive({
    map: null,
    // 这里使用的高德矢量地图
    mapUrl: 'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
})

// 创建地图图层
const createMapLayer = () => {
    return new TileLayer({  
        source: new XYZ({
            url: state.mapUrl,
            crossOrigin: 'anonymous',
            maxZoom: 14,
      })
    })
}

// 地图初始化设置
state.map = new Map({
    // 最初添加到映射的控件。如果未指定，则使用模块: ol/control ~ defaults。
    // 设置地图默认控件，如放大/缩小按钮
    controls: olControl.defaults({
        // 控件显示映射中与图层源关联的所有属性。此控件是映射中包含的默认控件之一。
        // 默认情况下，它将显示在地图的右下角，但是这可以通过使用 css 选择器。
        attribution: false,
        rotate: false, // 用于将旋转重置为0的按钮控件。
        zoom: false,
        zoomOptions: {
            delta: 0.5, // 每次单击时应用缩放增量
        },
    }),
    
    
    // 最初添加到映射中的交互。如果没有指定，则使用模块: ol/interaction ~ defaults。
    // 设置地图的交互效果，如果双击缩放等交互
    interactions: olInteraction.defaults({
        doubleClickZoom: false, // 允许用户通过双击地图来缩放。
        pinchRotate: false, // 允许用户在触摸屏上用两个手指旋转地图。
    }),
    
    
    // 图层。如果没有定义，那么将呈现一个没有图层的映射
    layers: [createMapLayer()],

    // 除非在构建时或通过模块指定，否则不会获取任何层源: ol/Map ~ Map # setview。
    view: new View({
        projection: 'EPSG:3857', // 默认的投影是球面墨卡托。 默认为'EPSG: 3857'
        center: olProj.fromLonLat([120, 30]), // 地图中心点
        zoom: 8, // 初始缩放级别
        minZoom: 4, // 最小缩放级别
    }),
})

// 挂载地图
onMounted(() => {
    state.map.setTarget(olMap.value)
})
</script>

<style>
.olMapBox {
    width: 100vw;
    height: 100vh;
}
</style>

注意事项

1. 加载地图时需要在挂载之后
2. 记得给地图加上宽高属性，否则无法展示