Openlayers学习记录（1）

1.简介

Openlayers 是开源的前端地图框架，它的作用主要是用于展现数据并且提供相应的地图操作工具。

2.相关文档

openlayers官网地址OpenLayers - Welcome

不喜欢看英文文档的朋友推荐阅读文档二维地图快速入门

也参考这位大佬的教程学习Webgis - YGY_Webgis糕手之路的专栏 - 掘金

3.学习之路

根据上述文档整理了一份思维导图，便于对ol有一个整体的的理解

ol包含1个总对象Map 管理以下4大对象（Layer(Source协同Layer),View,Controls,Interaction），2大系统（矢量图形系统，事件系统）

对ol有了初步的理解，接下来就开始实践吧。

3.1引入ol

1.创建一个vue项目

npm create vue@latest

npm i

npm run dev

2 安装openlayers

npm i ol

3.2 创建一个实例

1.引入Map,View,Tile,在onMounted中初始化map(必须给map一个有明确宽高的DOM容器),设置图层和地图视图

<template>
    <div class="container">
        <h3>加载XYZ地图</h3>
        <div id="vue-openlayers" class="map-x"></div>
    </div>
</template>
<script setup>
import 'ol/ol.css'
import {
    Map,
    View
} from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'; // 适配自定义瓦片URL格式
import { onMounted, ref } from 'vue';

// 高德矢量瓦片（国内免Key，非商用）
const amapSource = new XYZ({
    url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    crossOrigin: 'anonymous',
    timeout: 5000,
    // 高德瓦片 y 轴适配（OpenLayers 需反转）
    tileUrlFunction: (tileCoord) => {
        if (!tileCoord) return '';
        const z = tileCoord[0];
        const x = tileCoord[1];
        const y = 1 << z - tileCoord[2] - 1; // 适配高德 y 轴
        // 随机选择高德节点（1-4），避免单节点限流
        const server = Math.floor(Math.random() * 4) + 1;
        return `https://webrd0${server}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=${x}&y=${y}&z=${z}`;
    }
});

const map = ref()
/**初始化一个map */
function initMap() {
    // 核心容器对象
    map.value = new Map({
        target: "vue-openlayers", //DOM
        layers: [
            new Tile({
                source: amapSource
            })
        ],
        view: new View({
            projection: "EPSG:4326",
            center: [114.064839, 22.548857],
            zoom: 8
        })
    })
}

onMounted(() => {
    initMap()
})
</script>
<style scoped lang="scss">
.container {
    box-sizing: border-box;

    height: calc(100vh - 100px);
}
#vue-openlayers {
    width: 100%;
    height: 100%;
}

h3 {
    line-height: 40px;
}
</style>

初始化一个map就完成了。以上内容基于个人理解，如有不对之处请多多指教，后续学习会继续分享