openlayers添加坐標點

上一節說了一下vue接入openlayer，這一節說一下在openlayer上面繪制點。

其實呢，openlayer還是蠻強大的，但是入門我覺得不容易，分享一張大神做的簡化的openlayer結構圖。

所以說通過這張圖可以看出來，添加一個展示的坐標點，需要一個feature，一個source，一個layers。

下面是代碼

// 初始化地圖
      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()
      },

      // 繪制坐標點
      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)
      },

然后小點點就出來了呀！