openlayers6 显示矢量框(已知四个点坐标)


没有四角坐标创造四角坐标

getPolygon(row) {

/*右上角坐标经度*/

    let rightUpLon = row.dmUrLon;

    /*右上角坐标纬度*/

    let rightUpLat = row.dmUrLat;

    /*左上角坐标经度*/

    let leftUpLon = row.dmUlLon;

    /*左上角坐标纬度*/

    let leftUpLat = row.dmUlLat;

    /*右下角坐标经度*/

    let rightDownLon = row.dmLrLon;

    /*右下角坐标纬度*/

    let rightDownLat = row.dmLrLat;

    /*左下角坐标经度*/

    let leftDownLon = row.dmLlLon;

    /*左下角坐标纬度*/

    let leftDownLat = row.dmLlLat;

    let rightUp = [rightUpLon, rightUpLat],

        leftUp = [leftUpLon, leftUpLat],

        rightDown = [rightDownLon, rightDownLat],

        leftDown = [leftDownLon, leftDownLat];

    let newCoordinates = [];

    newCoordinates.push(rightUp, leftUp, leftDown, rightDown, rightUp);

    return new this.Polygon([newCoordinates]);

},

showVectorBox(row) {

let layer =this.getLayerByName(row.id);

    if (layer.length >0) {

layer.forEach(item => {

this.map.removeLayer(item);

        });

    }else {

let polygon =this.getPolygon(row);

        let features = [];

        let routeFeature ="";

        routeFeature =new Feature({

geometry: polygon

});

        routeFeature.setStyle(

new Style({

stroke:new Stroke({

width:3, //边界宽度

                    color: [71, 137, 227, 1]//边界颜色

                }),

            })

);

        features.push(routeFeature);

        // 设置图层

        let routeLayer =new this.VectorLayer({

name: row.id,

            source:new this.VectorSource({

features: features

}),

            zIndex:this.getAllLayers().length +1

        });

        // 添加图层

        this.map.addLayer(routeLayer);

    }

},

你可能感兴趣的:(openlayers6 显示矢量框(已知四个点坐标))