openlayers添加坐标点

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)
      },

然后小点点就出来了呀！