标签：Openlayer tempObj typecode 画线 item let push PointsLayer

画线跟标记点类似都是先创建一个矢量图层，把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

标签：Openlayer,tempObj,typecode,画线,item,let,push,PointsLayer
来源： https://www.cnblogs.com/coding8832/p/14425644.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。