Vue+Openlayers实现地图上绘制线

场景

Vue+Openlayers实现显示图片并分优先级多图层加载：

Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面是添加多个点的图层，如果添加线的图层，形如下面的效果

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、导入新的模块

//导入基本模块
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 { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'

2、声明一个线的图层和数据源

  data() {
    return {
      map: null, // map地图
      layer:null, //地图图层
      lightLayer:null, //灯图层
      houseLayer:null, //房子图层
      lineLayer:null, //线图层
      lineSource:null, //线数据源

3、添加要绘制的线的坐标数组

注意这里必须是数组嵌套数组的格式

      //线的数据
      lineData:[
        [986434.4063822062, 215782.0959711917],
        [989701.5290279881,217149.84072807242],
        [990613.3107184113,215946.4192185118],
      ],

这里是三个坐标点，会将这三个点依次连接起来

4、线的图层进行赋值

      //线的图层
      this.lineSource = new VectorSource({ wrapX: false });
      this.lineLayer = new VectorLayer({
          source: this.lineSource,
      });

5、map中加入线的图层

      this.map = new Map({
        //地图容器ID
        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,
        }),
      });

6、页面加载完调用初始化地图的方法，方法中调用画线的方法

    //画线
    drawLine(){
      let pointData = this.lineData; // 所有点位信息
      //下边来添加一线feature
      var feature = new Feature({
          type: "lineStyle",
          geometry: new LineString(
              pointData // 线的坐标
          ),
      });
      let color = 'green';
      let lineStyle = new Style({
          stroke: new Stroke({
              color: color,
              width: 4,
          }),
      });
      // 添加线的样式
      feature.setStyle(lineStyle);
      // 添加线的fature
      this.lineSource.addFeature(feature);
    },

7、完整示例代码

​






​