还在用原生ol做WebGIS开发？

背景介绍

OpenLayers作为老牌地图库，经常作为WebGIS开发的利器，但随着技术的更新迭代其使用方法也在不断地改变，我大致梳理了下几个关键的时间节点，涵盖不同技术阶段的时间节点和典型使用方式：

OpenLayers使用方式演进表

技术阶段	时间节点	使用方式	特点与说明
jQuery时代	2006-2015年	CDN引用	直接通过`<script>`标签引入OpenLayers 2.x。
造轮子时代	2010-2018年	CDN引用	技术大佬们基于公司业务做常用的功能封装工具类，通常名字叫做olHelper.js或者olMap.js,也可能是跟公司名称相关。
模块化时代	2016-2018年	模块化引入	通过npm安装`ol`包，使用`import { Map, View } from 'ol'`按需导入核心类。
vue2时代	2018-2022年	模块化引入	技术大佬们再次根据vue2造轮子封装组件库，并且部分公司逐渐有了开源意识，开始开源（比如新德汇的@xdh/my）。我当时在中农的时候团队也做了一款，但最终没开源。
vue3时代	2022年至今	模块化引入	出现了开源项目vue3-openlayers，把openlayers和Vue3的特性结合起来，并且项目活跃度高，有专人维护，目前也出现了衍生的 vue3-openlayers-styled-controls，符合国内习惯的工具条组件库

关键说明

jQuery时代：OpenLayers 2.x的API设计依赖全局命名空间
模块化时代：OpenLayers 5.x后全面拥抱ES Modules，npm成为主流依赖管理方式。
模块化封装时代：现代前端框架（如React/Vue）的流行推动组件化封装，上述表格只以vue技术栈做了描述。

vue3-openlayers基础使用

安装核心库：

bash 复制代码

npm i ol ol-ext ol-contextmenu    # install the peerDependencies
npm i vue3-openlayers             # install this library

基础地图示例：

vue 复制代码

  <ol-map style="height: 400px">
    <ol-view
      :center="center"
      :zoom="zoom"
      :projection="projection"
    />
    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>
  </ol-map>

当前我只是简单的描述了下，具体的用法可以看这里传送门

衍生插件：vue3-openlayers-styled-controls

该插件提供预置样式的UI控件，解决原生控件样式定制复杂的问题。

安装与使用：

bash 复制代码

npm install vue3-openlayers-styled-controls

示例代码：

vue 复制代码

<template>
  <ol-map style="width: 100%; height: 320px; position: relative">
    <ol-view :center="[0, 0]" :zoom="2" />
    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>
    <ol-styled-control-bar>
      <ol-styled-zoom-in-control />
      <ol-styled-zoom-out-control />
    </ol-styled-control-bar>
  </ol-map>
</template>

当前我只是简单的描述了下，具体的用法可以看这里传送门