【OpenLayers】绘制基本几何图形

基本图形有以下几种：

• Circle
• LinearRing
• LineString
• MultiLineString
• MultiPoint
• MultiPolygon
• Point
• Polygon

LineString

let layer = new VectorLayer({
      style: new Style({
        stroke: new Stroke({ width: 2, color: "#FF8FFF" }),
      }),
    });
    layer.setSource(
      new VectorSource({
        features: [
          new Feature({
            geometry: new LineString([
              fromLonLat([114.02, 24.004]),
              fromLonLat([114.02, 24.001]),
              fromLonLat([114.03, 24.001]),
              fromLonLat([114.03, 23.999]),
            ]),
          }),
        ],
      })
    );
    map.addLayer(layer); //把线的图层添加到地图中

效果：

LinearRing

需要配合Polygon使用，不能单独使用

例子：

    var polygon = new Polygon([]);
    layer.setSource(
      new VectorSource({
        features: [
          new Feature({
            geometry: polygon,
          }),
        ],
      })
    );
    polygon.appendLinearRing(
      new LinearRing([
        fromLonLat([114.02, 24.008]),
        fromLonLat([114.02, 24.011]),
        fromLonLat([114.01, 24.001]),
      ])
    );
    map.addLayer(layer); //把线的图层添加到地图中

效果：

Circle

 let layer = new VectorLayer({
      style: new Style({
        fill: new Fill({ color: "#FF000055" }),
        stroke: new Stroke({ width: 3, color: "white" }),
      }),
    });
    layer.setSource(
      new VectorSource({
        features: [
          new Feature({
            geometry: new Circle(fromLonLat([114.02, 24]), 100),
          }),
        ],
      })
    );
    map.addLayer(layer); //把线的图层添加到地图中

效果：