openlayer 繪製線

上一小節說了一下openlayer繪製座標標記點，這一次說一下繪製線，其實也很簡單。

	// 初始化地圖
      initMap() {
        map = new Map({
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
          ],
          target: 'map',
          view: new View({
            center: [116.403218, 39.92372],
            zoom: 12,
            maxZoom: 18,
            projection: 'EPSG:4326',
            constrainResolution: true,  // 設定縮放級別為整數 
            smoothResolutionConstraint: false,  // 關閉無級縮放地圖
          }),
        });

        this.addPoint()
        this.addLine()
      },

      // 繪製座標點
      addPoint() {
        let feature = new Feature({
          title: 'beijing',
          geometry: new Point([116.403218, 39.92372]),
        })
        feature.setStyle(
          new Style({
            image: new CircleStyle({
              fill: new Fill({
                color: 'blue',
              }),
              radius: 4,
            }),
          })
        );
        let source = new VectorSource()
        source.addFeature(feature)
        let layer = new VectorLayer()
        layer.setSource(source)
        map.addLayer(layer)
      },

      // 繪製連線
      addLine() {
        let featureLine = new Feature({
          geometry: new LineString([
            [116.403218, 39.92372],
            [116.503218, 39.62372],
          ]),
        });
        let source = new VectorSource()
        source.addFeature(featureLine)
        let layer = new VectorLayer()
        layer.setSource(source)
        map.addLayer(layer)
      }
 

偶買噶！太簡單了吧這也！