Openlayer画线

画线跟标记点类似都是先创建一个矢量图层,把feature添加到矢量图层中

    setMapLineOL(arr, color, typecode){
      let iconFeatures=[]  // 保存所有的点Feature      
      let path = arr.map(item=>{
        return [+item.longitude,+item.latitude]
      })    
      let PointerArr = arr.map(item=>{
         return {position:[+item.longitude,+item.latitude],
                 nodeTypeCode: item.nodeTypeCode
         }
      })      
      // 点的矢量图层
      let PointsLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
      });
      for(let i=0;i<PointerArr.length;i++){
        let iconFeature = new ol.Feature({ 
            geometry: new ol.geom.Point(   //绘制图形(点)
              PointerArr[i].position 
            ),
        }); 
        iconFeature.setStyle(         
            new ol.style.Style({
              image: new ol.style.Icon({
                  // scale:0.5,
                  //控制标注图片和文字之间的距离
                  // anchor: [0.2, 1],
                  //标注样式的起点位置
                  anchorOrigin: 'top-right',
                  //X方向单位:分数
                  anchorXUnits: 'fraction',
                  //Y方向单位:像素
                  anchorYUnits: 'pixels',
                  //偏移起点位置的方向
                  offsetOrigin: 'top-right',
                  //透明度
                  opacity: 1,
                  //图片路径
                  src:PointerArr[i].nodeTypeCode == "NT001"
                  ? require("@/assets/imgs/mark_normal.png")
                  : PointerArr[i].nodeTypeCode == "NT002"
                  ? require("@/assets/imgs/mark_pressure.png")
                  : require("@/assets/imgs/mark_Leak.png"),
              
              }),
            },
            )
          ); 
          iconFeatures.push(iconFeature)         
      }
      // 线的矢量图层
      let lineLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
      });
      let feature = new ol.Feature({ 
          type:"route",
          geometry: new ol.geom.LineString(  
            path
          ),
      }); 
      feature.setStyle(
        new ol.style.Style({
          stroke:new ol.style.Stroke({
            width:3,
            color:color // 不同颜色的线
          }),
          
        })
      )
      PointsLayer.getSource().addFeatures(iconFeatures)
      lineLayer.getSource().addFeature(feature)

      let filterData = this.olLines.filter((item) => {
        return item.typecode == typecode;
      });

      if (filterData.length) {
        filterData[0].lines.push(lineLayer);
        filterData[0].markers.push(PointsLayer);
      } else {
        let tempObj = {};
        tempObj.typecode = typecode;
        tempObj.lines = [];
        tempObj.markers = [];
        tempObj.lines.push(lineLayer);
        tempObj.markers.push(PointsLayer);
        this.olLines.push(tempObj);
      }

      this.OLMap.addLayer(lineLayer)
      this.OLMap.addLayer(PointsLayer)
    },

可以把图层保存在数组中,移除时采用removeLayer,只能单个移除图层,暂时没看到移除多个图层的方法

layers.forEach(innerItem=>{
    this.OLMap.removeLayer(innerItem)
})

 

showtooltip

 

上一篇:基于Vue+iView+OpenLayer在IE11上运行的方法总结


下一篇:VUE+OPENLAYER系列一:OSM