初始化一个地图

TIP

基于vue

首先npm安装openlayers

npm i -S ol

完整代码

<template>
    <div id="mapcontainer" class="mapcontainer"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Map, View } from "ol"; // 地图实例方法、视图方法
import { overlay } from './mapconfig.js'
// import { fromLonLat, transform } from "ol/proj";

/**
 * 1、将地理坐标（EPSG:4326）转为投影坐标（EPSG:3857）
 * ol.proj.transform(pos, 'EPSG:4326', 'EPSG:3857')
 * 
 * 2、将投影坐标转为地理坐标
 * ol.proj.transform(pos, 'EPSG:3857', 'EPSG:4326')
 */
import "ol/ol.css"; // 地图样式

const map = ref(null); // 存放地图实例

const inintMap = () => {
    map.value = new Map({
        target: "mapcontainer", // 对应页面里 id 为 map 的元素
        layers: [overlay],
        view: new View({
            // 地图视图
            projection: "EPSG:4326", // 数据格式EPSG:4326 转为 EPSG:3857

            /**
             * openlayers 中默认的坐标就是google的摩卡托坐标 => EPSG:3857
             * 数据格式：[12914838.35,4814529.9]
             * 缺点：数据的可读性差和数值大存储比较占用内存
             * 
             * EPSG:4326 坐标系（地理坐标）
             * 数据格式：[22.37，114.05]
             * 缺点：使用此坐标系会导致页面变形。
             * 
             * 通常：数据存储在EPSG:4326中，显示在EPSG:3857中
             */

            center: [104.03228760, 30.72147313], // 地v图中心点
            minZoom: 12, // 地图缩放最小级别
            maxZoom: 18, // 地图缩放最大级别
            zoom: 14, // 地图缩放级别（打开页面时默认级别）
        }),
    })
}

onMounted(() => {
    inintMap()
})
</script>

<style lang="scss" scoped>
.mapcontainer {
    width: 100vw;
    height: 100vh;
}
</style> 

TIP

因为是基于离线环境，地图瓦片自行启一个本地服务 同级目录下mapconfig.js

import TileLayer from "ol/layer/Tile";
import { XYZ } from "ol/source";

const mapUrl = 'http://192.168.1.4:8000'

// 电子地图
export const overlay = new TileLayer({
    source: new XYZ({
        url: `${mapUrl}/overlay/{z}/{x}/{y}.png`
    }),
    visible: true
});

// 卫星地图
export const satellite = new TileLayer({
    source: new XYZ({
        url: `${mapUrl}/satellite/{z}/{x}/{y}.jpg`,
    }),
    visible: true
});

效果图

new Map(options)

查看参数选项类型详情👌 (opens new window)

参数选项	说明
controls	最初添加到地图的控件。 如果未指定，则使用 module:ol/control.defaults (opens new window)
pixelRatio	设备上的物理像素和与设备无关的像素 (dip) 之间的比率。
interactions
keyboardEventTarget	要侦听键盘事件的元素。这决定了 KeyboardPan 和 KeyboardZoom 交互的触发时间。例如，如果将此选项设置为document键盘交互，则将始终触发交互。如果未指定此选项，则库侦听键盘事件的元素是映射目标（即用户为映射提供的 div）。如果不是document，则目标元素需要聚焦以发出关键事件，要求目标元素具有 tabindex属性。
layers	图层 ，如果未定义，则将渲染没有图层的地图。请注意，图层按提供的顺序渲染，因此，例如，如果您希望矢量图层显示在切片图层的顶部，则该图层必须位于切片图层之后。
maxTilesLoading	要同时加载的最大切片数。默认为 16
moveTolerance	默认 （1） 光标必须移动的最小距离（以像素为单位）才能被检测为地图移动事件，而不是单击。增加此值可以更轻松地在地图上单击。
overlays	最初添加到地图的叠加层。默认情况下，不会添加覆盖。
target	映射的容器，可以是元素本身，也可以是元素的 id 容器。如果在构造时未指定 module:ol/Map~Map#setTarget (opens new window)必须调用才能渲染地图。如果按元素传递，则容器可以位于辅助文档中。 S
view	🎭视图。 除非在构建时或通过指定，否则不会获取任何层源 module:ol/Map~Map#setView (opens new window)

总结

要初始化一幅地图，需要一个target，layers，view。

TIP

后续会深入了解这些对象

• target 主要是用来跟页面的元素进行绑定显示
• layers 是一个数组形式，那就说明它可以存在多个图层，后续图层切换将会使用它
• view 通过new View() 创建了一个视图对象 【以下是视区参数】
  • center 设置默认地图中心点位置
  • minZoom 地图缩放最小级别
  • maxZoom 地图缩放最大级别
  • zoom 地图缩放级别（打开页面时默认级别）

初始化后地图已经成功加载到网页中，并且可以进行缩放，平移及拖动操作（map默认此功能）当然并不局限于此