OpenLayers绘制多边形边界图层

1.准备多边形图层

地图初始化略

const vectorLayer = new VectorLayer({
        style: new Style({
            //图层样式
            fill: new Fill({
                //填充颜色
                color: 'rgba(128,216,255,0.1)',
            }),
            stroke: new Stroke({
                color: '#0091ea', //边框颜色
                width: 2, // 边框宽度
            }),
            image: new Circle({
                radius: 5,
                stroke: new Stroke({
                    color: '#FF0000', //边框颜色
                    width: 3,
                }),
                fill: new Fill({
                    color: '#ffffff', //填充颜色
                }),
            }),

        }),

        className: "polygonLayer",
        visible: false,
    });

2.根据边界坐标点绘制图形

    function drawPolygon(boundary: any[]) {
        // 将高地图的经纬度格式转换为OpenLayers所需的格式
        const coordinates = boundary.map((point: Record<string, number>) => {
            const lat = point.lat
            const lng = point.lng
            return fromLonLat([lat, lng], 'EPSG:4326')
        })
        // 创建多边形几何
        const polygon = new Polygon([coordinates]);
        // 创建矢量特征
        const feature = new Feature(polygon);
        // 添加到矢量源
        const vectorSource = new Vector({

        });
        vectorSource.addFeature(feature);
        map.getLayers()
            .getArray()
            .forEach((layer) => {
                if (layer.getClassName() === 'polygonLayer') {
                    layer.setSource(vectorSource)
                    layer.setVisible(true)  
                }
            });
    }

3.让地图中心和缩放比自适应

 map.getLayers()
    .getArray()
    .forEach((layer) => {
        if (layer.getClassName() === 'polygonLayer') {
            const extent = layer.getSource().getExtent()
            extent && map.getView().fit(extent, { duration: 2 });
        }
    });