当前位置：首页 > article >正文

OpenLayers知识总结1

article 2025/1/30 20:44:53

一、OpenLayers 框架概述

OpenLayers 是一个强大的开源 JavaScript 库，用于在网页上创建交互式地图。它提供了丰富的 API 来实现各种地图功能，以面向对象的方式设计，方便开发者使用和扩展。

它支持多种地图源（如 OSM、高德、天地图等），并且可以加载矢量数据、静态图片等。

二、核心组件及使用

1.Map 类

是整个地图的容器，用于将各种图层、视图等元素组合在一起，创建一个完整的地图实例。

import Map from "ol/Map";
const map = new Map({
    target: "map",
    view: new View({...}),
    layers: [new TileLayer({...})]
});

target 属性指定了地图将挂载的 DOM 元素的 ID，这里是 map。
view 属性设置了地图的视图，包括中心点、缩放级别和投影等信息。
layers 属性是一个图层数组，地图可以包含多个图层，这些图层将按顺序渲染。

2.View 类

定义了地图的视角，包括中心位置、缩放级别和投影方式。

import View from "ol/View";
const view = new View({
    center: [114.25, 30.59],
    zoom: 10,
    projection: "EPSG:4326"
});

center 以经纬度数组的形式指定了地图的中心位置，例如 [114.25, 30.59] 表示一个地理坐标点。
zoom 表示地图的缩放级别，数值越大，显示的细节越清晰。
projection 用于指定地图的投影方式，这里使用的是 EPSG:4326 是一种经纬度坐标系，而 OpenLayers 默认使用的是墨卡托投影体系。

3.TileLayer 类和数据源

TileLayer 是一种基于瓦片的图层，它将地图划分成多个小的瓦片，从数据源加载并拼接显示。

import TileLayer from "ol/layer/Tile";
import { XYZ } from "ol/source";
const gaodeSource = new XYZ({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
});
const gaodeLayer = new TileLayer({
    source: gaodeSource
});

XYZ 是一种常见的瓦片地图源格式，{x}、{y}、{z} 分别表示瓦片的列号、行号和缩放级别。
XYZ 数据源可以从一个 URL 模板加载瓦片，其中 {x}、{y} 和 {z} 是动态的占位符，会根据当前的缩放级别和坐标自动替换。
可以使用不同的数据源 URL 来显示不同的地图服务，如高德、天地图等。

三、图层操作

1.添加和移除图层

使用 map.addLayer(layer) 方法可以向地图添加新的图层，使用 map.removeLayer(layer) 可以移除图层。

const map = new Map({...});
const newLayer = new TileLayer({...});
map.addLayer(newLayer);
// 移除图层
map.removeLayer(newLayer);

同时，可以使用 layer.setVisible(true/false) 来控制图层的可见性，而不是完全移除。

btn1.onclick = function () {
  gaodeLayer.setVisible(true); // 显示高德图层
};
btn2.onclick = function () {
  gaodeLayer.setVisible(false); // 隐藏高德图层
};

2.图层的顺序和 Z 索引

图层的渲染顺序是按照在 layers 数组中的顺序进行的。可以使用 layer.setZIndex(value) 来设置图层的 Z 索引，改变它们的显示顺序。

gaodeLayer.setZIndex(100);
satelliteLayer.setZIndex(50);
markerLayer.setZIndex(49);

四、地图交互操作

1.中心点的操作

可以使用 view.setCenter([longitude, latitude]) 来设置地图的中心位置。

const view = new View({...});
view.setCenter([116.46, 39.92]);

也可以使用 view.animate() 实现平滑的动画效果，将地图移动到新的位置，并且可以设置动画的持续时间。

view.animate({
    center: [116.46, 39.92],
    zoom: 6,
    duration: 2000
});

可以通过 view.getCenter() 获取当前的中心点坐标。

2.点击按钮进行交互

通过 document.querySelectorAll(".btns button") 获取页面上的按钮元素，并添加 onclick 事件处理函数，来实现对地图的交互操作，如改变中心点位置或调整地图显示。

const btn1 = document.querySelectorAll(".btns button")[0];
btn1.onclick = function () {
    view.animate({
        center: [116.46, 39.92],
        zoom: 6,
        duration: 2000
    });
};

五、不同类型的图层

1. 矢量图层（VectorLayer）

可以用来显示矢量数据，如 GeoJSON 格式的数据。

import VectorLayer from "ol/layer/Vector.js";
import VectorSource from "ol/source/Vector.js";
import GeoJSON from "ol/format/GeoJSON.js";
import Style from "ol/style/Style.js";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
const vectorSource = new VectorSource({
    url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
    format: new GeoJSON()
});
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: new Style({
        fill: new Fill({
            color: "rgba(255, 0, 0, 0.6)"
        }),
        stroke: new Stroke({
            color: "green"
        })
    })
});
map.addLayer(vectorLayer);

VectorSource 用来加载矢量数据，可以从 URL 中加载，并且可以指定数据的格式（如 GeoJSON）。
vectorSource.on("change", function () {...}) 可以监听数据源的变化，常用于处理异步加载的数据。
vectorSource.getFeatures() 可以获取数据源中的要素列表，vectorSource.getFeaturesAtCoordinate(coordinates) 可以根据坐标获取相应的要素。
可以为矢量图层设置样式，通过 Style、Fill 和 Stroke 类，如设置填充颜色和边框颜色。

2. 静态图片图层（ImageLayer）

可以在地图上显示静态的图片，通过 ImageLayer 和 ImageStatic 数据源。

import ImageLayer from "ol/layer/Image.js";
import Static from "ol/source/ImageStatic.js";
const staticImageLayer = new ImageLayer({
    source: new Static({
        url: "/img.png",
        imageExtent: extent
    })
});
map.addLayer(staticImageLayer);

imageExtent 属性定义了图片在地图上的范围，通常根据中心点和范围大小来确定。

六、数据源和地图服务

可以使用不同的数据源来加载不同的地图服务，如高德、天地图等。

// 高德数据源
const gaodeSource = new XYZ({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
});
// 天地图数据源
const TIANDITUKEY = "xxx";
const tiandituSource = new XYZ({
    url: `http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITUKEY}`
});

需要注意的是，部分服务可能需要 API 密钥（如天地图），并且有些服务可能受网络环境影响，如使用国外框架时。

七、事件处理

可以为地图添加事件监听器，如 map.on("pointermove", function (e) {...}) 可以监听鼠标在地图上的移动事件。

//鼠标移动到某一个省份(要素) 对应的省份高亮
map.on("pointermove", function (e) {
  //获取当前鼠标的坐标
  const coordinates = e.coordinate;
  //找当前鼠标位置是否具有要素信息
  const features = vectorSource.getFeaturesAtCoordinate(coordinates);
  const allFeatures = vectorSource.getFeatures();
  allFeatures.forEach((f) =>
    f.setStyle(
      new Style({
        fill: new Fill({
          color: "rgba(0, 0, 0, 0.5)",
        }),
        stroke: new Stroke({
          color: "green",
        }),
      })
    )
  );
  //获取的要素
  if (features[0]) {
    //给这个要素信息设置高亮
    features[0].setStyle(
      new Style({
        fill: new Fill({
          color: "rgba(255,0,0,0.5",
        }),
      })
    );
  }
});