How to Draw Lines on a Map with Vue and OpenLayers

The article demonstrates a complete Vue component that visualizes a polyline on an OpenLayers map.

1. Import required OpenLayers modules

// Import core CSS
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Point, LineString } from "ol/geom";
import Feature from "ol/Feature";
import { Icon, Style, Stroke } from "ol/style";
// Import layer and source classes
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { TileWMS, Vector as VectorSource } from "ol/source";

2. Declare component data

data() {
  return {
    map: null,
    layer: null,
    lightLayer: null,
    houseLayer: null,
    lineLayer: null,
    lineSource: null,
    // Line coordinate array (nested arrays)
    lineData: [
      [986434.4063822062, 215782.0959711917],
      [989701.5290279881, 217149.84072807242],
      [990613.3107184113, 215946.4192185118]
    ]
  };
}

3. Create vector source and layer for the line

this.lineSource = new VectorSource({ wrapX: false });
this.lineLayer = new VectorLayer({ source: this.lineSource });

4. Add the line layer to the map

this.map = new Map({
  target: "map",
  layers: [this.layer, this.lightLayer, this.houseLayer, this.lineLayer],
  view: new View({
    center: [987777.93778, 213834.81024],
    zoom: 12,
    minZoom: 6,
    maxZoom: 19
  })
});

5. Draw the line

drawLine() {
  const pointData = this.lineData; // all points
  const feature = new Feature({
    type: "lineStyle",
    geometry: new LineString(pointData)
  });
  const lineStyle = new Style({
    stroke: new Stroke({ color: 'green', width: 4 })
  });
  feature.setStyle(lineStyle);
  this.lineSource.addFeature(feature);
}

6. Initialize other map layers (WMS, lights, houses) and invoke drawing

initMap() {
  // Base WMS layer
  this.layer = new TileLayer({
    source: new TileWMS({
      ratio: 1,
      url: "http://localhost:8000/geoserver/nyc/wms",
      params: { LAYERS: "nyc:nyc_roads", STYLES: "", VERSION: "1.1.1", tiled: true },
      serverType: "geoserver"
    })
  });
  // Light and house vector layers
  this.lightLayer = new VectorLayer({ source: new VectorSource() });
  this.houseLayer = new VectorLayer({ source: new VectorSource() });
  // Line source/layer (already created above)
  this.lineSource = new VectorSource({ wrapX: false });
  this.lineLayer = new VectorLayer({ source: this.lineSource });
  // Create the map (as shown earlier)
  this.map = new Map({ /* same config as step 4 */ });
  // Populate auxiliary layers and draw the line
  this.initLightData();
  this.initHouseData();
  this.drawLine();
  this.onPoint();
}

7. Auxiliary methods (light, house, point click)

// Example: initialize light icons
initLightData() {
  this.lightLayer.getSource().clear();
  this.lightData.forEach(item => {
    const feature = new Feature({ geometry: new Point([Number(item.x), Number(item.y)]) });
    const zoom = this.map.getView().getZoom();
    const style = new Style({
      image: new Icon({
        scale: 0.15 * (zoom - 13),
        src: "images/light.png",
        anchor: [0.48, 0.52]
      })
    });
    feature.setStyle(style);
    this.lightLayer.getSource().addFeature(feature);
  });
}

// Similar initHouseData() creates house icons.

// Click listener to log coordinates
onPoint() {
  this.map.on('singleclick', function(e) {
    console.log(e.coordinate);
  });
}

The full component template, script, and scoped style are provided in the original code listing, and the article links to the detailed blog posts for further reference.