openLayer使用Feature添加点线面图层

添加点线面图层首先要知道需要完成那些步骤?

1.创建矢量图层对象

2.创建数据源

3.利用创建Feature创建(点|线|面)要素,要素的样式

4.将feature添加到数据源中

5.将数据源添加到矢量图层对象

6.将图层对象放入map对象中

通过这六步完成添加点线面图层,可以按照这六步骤拆解问题,进而解决问题.同时不了解什么是矢量对象,数据源等等,可以查看文章openlayers核心架构思维导图-CSDN博客,文章简短的介绍了openlayers的各个方面都有哪些东西,有什么作用.

Feature是什么,以及有哪些属性方法构成

Feature（要素） 是表示地理空间中实体的核心数据结构。它是将 ** 几何图形（Geometry）与属性数据（Attributes）** 相结合的对象，用于在地图上表示和操作地理实体（如点、线、面等）。

一 Feature的核心组成部分

1. 几何图形（Geometry）

   • 定义要素的空间形状，例如：
     • Point（点）：表示单个位置（如城市、建筑物）。
     • LineString（线）：表示路径或边界（如道路、河流）。
     • Polygon（面）：表示区域（如国家、湖泊）。
     • 复合类型：MultiPoint、MultiLineString、MultiPolygon 等。

2. 属性数据（Attributes）

   • 描述要素的非空间信息，例如：
     • 点：城市名称、人口、GDP。
     • 线：道路名称、类型、限速。
     • 面：国家名称、面积、人口密度。

3. 样式（Style）

   • 控制要素在地图上的显示方式（颜色、大小、透明度等）。

二 在openlayer中的实现

import Feature from 'ol/Feature';
import {Point} from 'ol/geom';

// 创建一个点（位置：经度116.404，纬度39.915，使用EPSG:4326坐标系）
const pointGeometry = new Point([116.404, 39.915]);

// 创建要素，包含几何图形和属性
const cityFeature = new Feature({
  geometry: pointGeometry,
  name: '北京',
  population: 21540000,
  country: '中国'
});

// 设置样式（可选，默认使用地图图层的样式）
cityFeature.setStyle(/* ... */);

其中除了geometry是必须得,name,country等是可选属性 

添加点图层

interface ParamsObj{
    [key:string]:any;
}

const addPointFeaturelayer = (obj:ParamsObj,coordinateName:string,styleList:object[]) => {
    //创建点图层
    const pointLayer = new VectorLayer({
        source:undefined
    })
    //创建点要素数据源,数据源用来管理feature创建的点要素
    const pointSource = new VectorSource({});
    pointLayer.setSource(pointSource as any);//将数据源设置到点图层中
    //使用Feature创建一个点要素
    const pointFeature = new Feature({
        geometry : new Point(obj[coordinateName]),//几何体属性,这边几何体属性是点
        name:"点要素"//除了geometry属性,其他都是可选属性
    })
    pointFeature.setStyle(styleList as any);//设置点要素的样式
    //定义样式
    pointSource.addFeature(pointFeature);//将点要素添加到数据源中
    return pointLayer;//将点图层返回出去
}

//添加点位图层方法
function addImgTextLayer(){
      // 图标样式
      const iconStyle = new Style({
        image: new Icon({
          src: '/src/static/map/bluePoint.png',
          scale:0.3,
        }),
      })
      // 文本样式
      const textStyle = new Style({
        text: new Text({
          text: '测试点位',
          font: 'bold 12px Microsoft YaHei',
          fill: new Fill({ color: '#ffffff' }),
          offsetY: 40,
          textAlign: 'center',
        }),
      });

      let styleList:object[] = [iconStyle,textStyle];//样式数组

      //调用自定义的创建点要素的方法,将其添加到map中
      //传入符合自定义方法的坐标对象
      let obj:object = {
        boundline:[118.339408, 32.261271]
      }
      let coordinateName:string = "boundline"//坐标字段名称
      let pointerLayer=addPointFeaturelayer(obj,coordinateName,styleList);
      console.log(pointerLayer,'pointerlayer');
      map.value.addLayer(pointerLayer)//将图层添加到map对象中
}

按照开头的步骤中实现addPointFeaturelayer()方法,最后传入点信息,样式信息等

添加线图层

interface ParamsObj{
    [key:string]:any;
}
//使用feature添加线图层
//Feature添加点图层方法,
//传入坐标的格式,一个对象包含数组.
//obj = {},
//对象中坐标点的键名,用来去对象中的坐标点,坐标点格式[[lon,lat],[lon,lat]....]
const addLineFeatureLayer = (obj:ParamsObj,coordinateName:string,styleList:object[])=>{
    //先创建一个空的图层,用来后面添加数据源
    let lineLayer:VectorLayer = new VectorLayer({
        source:undefined
    })
    //创建一个空的数据源,用来放Feature创建的线要素
    let lineSource:VectorSource = new VectorSource({});
    //先将数据源设置到空的图层中,让图层有一个数据源,然后下一步对空的数据源添加Feature
    lineLayer.setSource(lineSource);
    //使用Feature创建一个线要素
    let lineFeature:Feature = new Feature({
        geometry:new LineString(obj[coordinateName]),//几何体属性,这边几何体属性是线
        name:"线要素"//除了geometry属性,其他都是可选属性
    })
    //设置Feature线要素的样式
    lineFeature.setStyle(styleList as any)
    //将线要素放入数据源中
    lineSource.addFeature(lineFeature);
    //将线图层返回出去
    return lineLayer;
}

function addLineLayer(){
  let obj:object = {
      boundline:[[117.063112,28.425517],[117.231698,28.537743]]
  } 
    let lineStyle:Style = new Style({
      stroke: new Stroke({
        color: 'red', // 线的颜色
        width: 3 // 线的宽度
      })
    })
    let styleList:object[] = [lineStyle];
    let coordinateName:string = "boundline"//坐标字段名称
    let lineLayer = addLineFeatureLayer(obj,coordinateName,styleList);
    map.value.addLayer(lineLayer)
}

添加面图层

interface ParamsObj{
    [key:string]:any;
}
//使用feature添加线图层
//Feature添加面图层方法,
//传入坐标的格式,一个对象包含数组.
//obj = {},
//对象中坐标点的键名,用来去对象中的坐标点,坐标点格式[[[lon,lat],[lon,lat]....]]
export const addPolygonFeatureLayer = (obj:ParamsObj,coordinateName:string,styleList:object[])=>{
    //先创建一个空的图层,用来后面添加数据源
    let PolygonLayer:VectorLayer = new VectorLayer({
        source:undefined
    })
    //创建一个空的数据源,用来放Feature创建的线要素
    let PolygonSource:VectorSource = new VectorSource({});
    //先将数据源设置到空的图层中,让图层有一个数据源,然后下一步对空的数据源添加Feature
    PolygonLayer.setSource(PolygonSource);
    //使用Feature创建一个面要素
    let PolygonFeature:Feature = new Feature({
        geometry:new Polygon(obj[coordinateName]),//几何体属性,这边几何体属性是面
        name:"线要素"//除了geometry属性,其他都是可选属性
    })
    //设置Feature面要素的样式
    PolygonFeature.setStyle(styleList as any)
    //将面要素放入数据源中
    PolygonSource.addFeature(PolygonFeature);
    //将面图层返回出去
    return PolygonLayer;
}


function addPolygonLayer(){
  let obj:object = {
      boundline:[[[116.912097,28.887120],[	116.954170,28.899487],[116.964717,28.870190],[116.903980,28.852672]]]
  } 
    let polygonStyle:Style = new Style({
      fill: new Fill({
        color: 'rgba(255, 0, 0, 0.3)' // 面的填充颜色（带透明度）
      }),
      stroke: new Stroke({
        color: 'red',       // 面的边界颜色
        width: 2            // 面的边界宽度
      })
    })
    let styleList:object[] = [polygonStyle];
    let coordinateName:string = "boundline"//坐标字段名称
    let polygonLayer = addPolygonFeatureLayer(obj,coordinateName,styleList);
    map.value.addLayer(polygonLayer)
}

会用到的导入的openlayer的插件

import { Map, View } from 'ol'      // 地图实例方法、视图方法
import TileLayer from 'ol/layer/Tile'  // 瓦片渲染方法
import OSM from 'ol/source/OSM'    // OSM瓦片【OSM不能在实际开发中使用，因为OSM里中国地图的边界有点问题！！！！】
import 'ol/ol.css'                  // ol样式
import { defaults as Defaults } from 'ol/control.js'
import XYZ from 'ol/source/XYZ';//加载xyz瓦片图层
import WMTS from 'ol/source/WMTS';//加载wmts图层
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import { Vector as VectorLayer } from 'ol/layer';
import { TileWMS, Vector as VectorSource } from 'ol/source';
import { Icon, Style, Text, Fill, Stroke } from 'ol/style'
import Feature from 'ol/Feature'
import { Point,LineString, Polygon } from 'ol/geom';