OpenLayers 入门指南：从零开始的地图应用开发（三）

图层管理

1. 内置图层类型

TileLayer

显示 OpenStreetMap

import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

// 创建 OpenStreetMap 图层
const osmLayer = new TileLayer({
  source: new OSM()
});

显示其他瓦片地图服务

import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'

// 创建其他瓦片地图服务图层（例如 高德地图）
const AmapLayer = new TileLayer({
  source: new XYZ({
    attributions: '前端小菜鸟吖',
    url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    maxZoom: 20,
  }),
})

VectorLayer

显示矢量要素 点

import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Point from 'ol/geom/Point';
import Feature from 'ol/Feature';

// 创建矢量源
const vectorSource = new VectorSource();

// 创建点要素
const pointFeature = new Feature({
  geometry: new Point([0, 0])
});

// 添加要素到矢量源
vectorSource.addFeature(pointFeature);

// 创建矢量图层
const vectorLayer = new VectorLayer({
  source: vectorSource
});

自定义样式和标签

import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Text from 'ol/style/Text';

// 创建样式
const style = new Style({
  image: new Circle({
    radius: 8,
    fill: new Fill({ color: 'blue' }),
    stroke: new Stroke({ color: 'red', width: 2 })
  }),
  text: new Text({
    text: '点',
    fill: new Fill({ color: 'black' }),
    stroke: new Stroke({ color: 'white', width: 2 }),
    offsetY: -12 // 调整标签位置
  })
});

// 应用样式到要素
pointFeature.setStyle(style);

通过上述代码，你可以实现在地图上显示 OpenStreetMap、其他瓦片地图服务以及自定义样式和标签的矢量要素。

2. 自定义图层

ImageLayer

使用 ImageWMS 显示 WMS 服务图层

import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';

// 创建 ImageWMS 图层
const wmsLayer = new ImageLayer({
  source: new ImageWMS({
    url: 'http://your-wms-server-url',
    params: { 'LAYERS': 'your-wms-layer-name', 'TILED': true },
    serverType: 'mapserver'
  })
});

自定义图层参数和样式

import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';

// 创建 ImageWMS 图层
const customWMSLayer = new ImageLayer({
  source: new ImageWMS({
    url: 'http://your-wms-server-url',
    params: {
      'LAYERS': 'your-wms-layer-name',
      'TILED': true,
      'TIME': '2018-01-01' // 自定义参数，例如时间
    },
    ratio: 1,
    serverType: 'mapserver',
    crossOrigin: 'anonymous' // 解决跨域问题
  }),
  opacity: 0.7, // 图层透明度
  visible: true // 图层可见性
});

XYZLayer

创建 XYZ 图层显示切片图像

import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

// 创建 XYZ 图层
const xyzLayer = new TileLayer({
  source: new XYZ({
    url: 'http://your-xyz-tile-server-url/{z}/{x}/{y}.png'
  })
});

添加 XYZ 图层的额外功能

import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { Attribution, defaults as defaultControls } from 'ol/control';

// 创建 XYZ 图层
const customXYZLayer = new TileLayer({
  source: new XYZ({
    url: 'http://your-xyz-tile-server-url/{z}/{x}/{y}.png',
    attributions: [
      new Attribution({
        html: 'Your custom attribution text'
      })
    ]
  }),
  // 添加图层控制
  controls: defaultControls({
    attribution: false, // 禁用默认的归属信息
    zoom: true
  })
});

通过以上代码，你可以自定义 ImageWMS 图层和 XYZ 图层，并设置各种参数，以满足你的需求。在实际使用时，请替换示例中的 URL 和参数为你自己的图层信息。

3. 图层样式和标签

使用 Style 定义图层样式

定义填充样式

import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';

// 定义填充样式
const fillStyle = new Style({
  fill: new Fill({
    color: 'rgba(255, 0, 0, 0.6)' // 红色半透明填充
  })
});

// 应用填充样式到图层
yourLayer.setStyle(fillStyle);

定义描边样式

import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';

// 定义描边样式
const strokeStyle = new Style({
  stroke: new Stroke({
    color: 'blue', // 蓝色描边
    width: 2 // 描边宽度
  })
});

// 应用描边样式到图层
yourLayer.setStyle(strokeStyle);

使用 Text 添加标签

定义文本样式和位置

import Style from 'ol/style/Style';
import Text from 'ol/style/Text';

// 定义文本样式和位置
const textStyle = new Style({
  text: new Text({
    text: 'Your Label', // 标签文本
    font: '12px Calibri,sans-serif', // 字体样式
    fill: new Fill({
      color: 'black' // 标签颜色
    }),
    stroke: new Stroke({
      color: 'white', // 描边颜色
      width: 2 // 描边宽度
    }),
    offsetY: -10 // 文本在要素上方的偏移量
  })
});

// 应用文本样式到图层
yourLayer.setStyle(textStyle);

动态标签和样式的应用

import Style from 'ol/style/Style';
import Text from 'ol/style/Text';

// 根据要素属性动态设置标签和样式
const dynamicStyle = new Style({
  text: new Text({
    text: (feature) => feature.get('label'), // 从要素属性获取标签文本
    font: '12px Calibri,sans-serif',
    fill: new Fill({
      color: 'green'
    }),
    stroke: new Stroke({
      color: 'white',
      width: 2
    }),
    offsetY: -10
  })
});

// 应用动态样式到图层
yourLayer.setStyle(dynamicStyle);

通过上述代码，你可以定义图层的填充样式、描边样式，以及添加文本标签。在实际使用中，根据需要调整颜色、字体、大小等样式属性。

4. 图层叠加和控制

图层叠加顺序

import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

// 创建地图容器
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
      zIndex: 1 // 设置图层叠加顺序
    }),
    // 添加其他图层
  ]
});

图层可见性控制

import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { LayerGroup } from 'ol/layer';

// 创建地图容器
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
      visible: true // 设置图层可见性
    }),
    // 添加其他图层
  ]
});

// 获取图层
const yourLayer = new TileLayer({
  // ...
});

// 控制图层可见性
yourLayer.setVisible(false); // 隐藏图层
yourLayer.setVisible(true); // 显示图层

图层透明度调整

import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

// 创建地图容器
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
      opacity: 0.7 // 设置图层透明度
    }),
    // 添加其他图层
  ]
});

图层分组管理

import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { LayerGroup } from 'ol/layer';

// 创建地图容器
const map = new Map({
  target: 'map',
  layers: [
    new LayerGroup({
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        // 添加其他图层
      ]
    }),
    // 添加其他图层组
  ]
});

通过上述代码，你可以设置图层的叠加顺序、可见性、透明度，并且实现图层的分组管理。在实际应用中，你可以根据需要动态调整这些属性。

其他

如果你想深入了解更多实例，请访问我的网站 Map Demo ，感谢你的阅读！