openlayers初始化方法

一、前置准备

‌基础要求‌：掌握HTML、CSS、JavaScript基础语法，熟悉VS Code等代码编辑器的基本操作。
‌环境引入‌：提供两种主流引入方式，按需选择即可。

‌CDN直接引入‌：无需本地安装依赖，适合快速验证demo

ini 复制代码

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol/ol.js"></script>

‌npm安装‌：适合现代前端工程化项目

css 复制代码

bash
npm install ol

二、核心基础概念

OpenLayers的所有功能都围绕6个核心组件展开，理解后可快速搭建各类地图场景：

‌Map（地图容器） ‌：所有图层、控件、交互的挂载载体，是地图初始化的核心入口。
‌View（视图） ‌：控制地图的显示状态，包含中心点坐标、缩放级别、投影坐标系三大核心配置。
‌Layer（图层） ‌：类似PS的图层概念，支持多图层叠加显示，分为瓦片图层、矢量图层等类型。
‌Source（数据源） ‌：定义图层的数据来源，支持OSM、高德瓦片、GeoJSON等多种格式。
‌Control（控件） ‌：地图自带的交互组件，比如缩放按钮、比例尺、全屏控件等。
‌Interaction（交互） ‌：实现用户与地图的拖拽、缩放、绘制等操作能力。

三、第一个基础地图示例

完整可运行的最简地图代码，直接复制到HTML文件中即可打开查看效果：

xml 复制代码

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css">
  <style>
    #map {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // 初始化地图
    const map = new ol.Map({
      target: 'map', // 绑定页面的DOM容器
      layers: [
        // 添加OSM开源底图
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        // 将经纬度转换为Web墨卡托投影坐标
        center: ol.proj.fromLonLat([116.404, 39.915]),
        zoom: 10 // 初始缩放级别
      })
    })
  </script>
</body>
</html>

四、常用基础操作

‌切换投影坐标系‌

常用的两种投影：EPSG:4326（WGS84经纬度坐标系）、EPSG:3857（Web墨卡托投影，网页地图通用）
坐标转换示例：

javascript 复制代码

javascript
import { fromLonLat, toLonLat } from 'ol/proj'
// 把GPS经纬度转为Web墨卡托坐标
const webPoint = fromLonLat([116.4, 39.9])
// 把Web墨卡托坐标转回GPS经纬度
const gpsPoint = toLonLat(webPoint)

‌添加自定义标记点 ‌
通过矢量图层添加点位标记，支持自定义图标样式：

php 复制代码

javascript
// 创建矢量图层
const vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector()
})
map.addLayer(vectorLayer)

// 创建标记点要素
const pointFeature = new ol.Feature({
  geometry: new ol.geom.Point(fromLonLat([116.404, 39.915]))
})
vectorLayer.getSource().addFeature(pointFeature)

‌绑定地图点击事件 ‌
监听用户点击地图的操作，获取点击位置的要素信息：

javascript 复制代码

javascript
map.on('click', (evt) => {
  map.forEachFeatureAtPixel(evt.pixel, (feature) => {
    console.log('点击的要素属性：', feature.getProperties())
  })
})