ol3之添加点、线

ol3之添加点、线

添加图层：

let source = new ol.source.Vector();
      let layer = new ol.layer.Vector({
        source: source,
      });
      this.map.addLayer(layer);

添加点：

var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([120.41, 36.82])),
      });
      var iconStyle = new ol.style.Style({
        image: new ol.style.Circle({
          //点样式
          radius: 7,
          fill: new ol.style.Fill({
            color: "#00c033",
          }),
        }),
      });
      iconFeature.setStyle(iconStyle);
      source.addFeature(iconFeature);

添加线：

var coords = [
          [110, 30],
          [120.41, 36.82],
          [120.3, 36.82],
      ];
      var lineString = new ol.geom.LineString(coords);
      lineString.transform("EPSG:4326", "EPSG:3857");
      let line = new ol.Feature({
        geometry: lineString
      });
      let style = new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: "#ff00ff",
          width: 2,
        }),
      });
      line.setStyle(style);
      source.addFeature(line);

 

 

钻研不易，转载请注明出处。。。。。。