# openlayer 绘制线-CFANZ编程社区

# openlayer 绘制线

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