openlayers创建要素并添加到地图

引入

1.创建点要素 Point

或者：

const myFeature = new Feature(new Point([pre.longitude, pre.latitude]));   

2.创建线要素 LineString

    const myFeature = new Feature({
      geometry: new LineString([
        [104.2979180563, 30.528298024],
        [104.2987389704, 30.527798338],
      ]),
    });

动态添加线的坐标：

let geometry = new LineString(); 
let coordinate = [
        [105.6005859375, 30.65681556429287],
        [107.95166015624999, 31.98944183792288],

       ...
    ];
function addPonitToGeometry(arr) {
    for (let i = 0; i < arr.length; i++) {
        geometry.appendCoordinate(arr[i]);
    }
}
addPonitToGeometry(coordinate);
const myFeature = new Feature(geometry); 

3.创建面要素 Polygon （首尾点坐标要相同）

const myFeature = new Feature({
      geometry: new Polygon([
        [
          [106, 33],
          [108.03955078125, 32.2313896627376],
          [108.25927734375, 33.15594830078649],
          [106, 33],
        ],
      ]),
    })

4.创建圆要素 CircleGeometry

// 创建圆形要素

const myFeature = new CircleGeometry({

  center: [104.2979180563, 30.528298024],

  radius: 1000000, // 半径，单位为米

})

// 创建圆形要素的样式

const circleStyle = new Style({

        image: new CircleStyle({

          radius: radius,

          declutterMode: 'none',

          fill: new Fill({

            color: color

          }),

          stroke: stroke

        })

      })

5.创建icon要素 Icon

// 创建一个Icon样式

const myFeature = new Icon({

anchor: [0.5, 30],

anchorOrigin: 'top-right',

anchorXUnits: 'fraction',

anchorYUnits: 'pixels',

offsetOrigin: 'top-right',

scale: 0.5,

src: '' // 图标图片路径

});

6.创建文本要素 Text

// 设置文本样式

const myFeature = new Text({

text: '',

overflow: true,

fill: new Fill({ color: '#000' }),

stroke: new Stroke({ color: '#fff', width: 2 }),

font: '14px Calibri,sans-serif',

textAlign: 'center', // 文本对齐

offsetY: 15, // 垂直偏移

})

7.创建矢量数据源

const vectorSource = new VectorSource({

features: [

new Feature({

geometry: myFeature ,

name: 'myFeature ',

}),

],

});

8.创建矢量图层并将其添加到地图上

①.创建图层

// 创建矢量图层并将其添加到地图上

const vectorLayer = new VectorLayer({

source: vectorSource, //数据源

style: circleStyle, //样式

});

map.addLayer(vectorLayer) //添加图层

②.已有图层 sV

1）getLayerById根据id找到需要添加的图层

const sV = getLayerById(map, '图层id')?.getSource() as VectorSource

2）清除图层

 sV.clear()

3）添加图层

features.push(myFeature)

sV.addFeatures(features)

欢迎补充，一起进步。