前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Openlayer画线

Openlayer画线

作者头像
tianyawhl
发布2021-03-02 16:21:20
8450
发布2021-03-02 16:21:20
举报
文章被收录于专栏:前端之攻略前端之攻略

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

代码语言:javascript
复制
    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,只能单个移除图层,暂时没看到移除多个图层的方法

代码语言:javascript
复制
layers.forEach(innerItem=>{
    this.OLMap.removeLayer(innerItem)
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档