ol加载多面、多点、多线、并隐藏或删除图层

// 加载多面
export function addMultiPolygon1(map,id,data){
  const layers = map.getLayers().getArray()
  let layer = layers.find((item) => item.values_.id === id)
  if (layer) {
    layer.getSource().clear()
    layer.setVisible(true)
  }else {
    layer = new VectorLayer({
      source: new VectorSource(),
      properties: {
        id: id
      }
    })
    map.addLayer(layer)
  }
  data.forEach(item => {
    item.valueName = id
    let polygonData = JSON.parse(item.geojson);
    let polygon = null;
    if (polygonData.type === "Polygon") {
        polygon = new Polygon(polygonData.coordinates);
    } else if (polygonData.type === "MultiPolygon") {
        polygon = new MultiPolygon(polygonData.coordinates);
    }
    let feature = new Feature({
      type: 'polygon',
      properties: item, // 传递数据,点击面展示可用
      geometry: polygon,
      id
    });
    feature.setStyle(
      new Style({
        fill: new Fill({
          color: 'rgba(0, 255, 0, 0.4)'
        }),
        stroke: new Stroke({
          color: '#0000FF',
          width: 1,
        }),
      })
    )
    // 添加到之前的创建的layer中去
    layer.getSource().addFeature(feature)
  });
  layer.setZIndex(10)
}


// 添加多点
export function addMarkerMore(map,id,graphics,icon){
  const layers = map.getLayers().getArray()
  let layer = layers.find((item) => item.values_.id === id)
  console.log(layer,'layer',layers);
  if (layer) {
    layer.getSource().clear()
    layer.setVisible(true)
  } else {
    layer = new VectorLayer({
      source: new VectorSource(),
      properties: {
        id: id
      }
    })
    map.addLayer(layer)
  }
  let jdwd
  let rotation
  
  graphics.forEach((item) => {
    item.valueName = id
    if(id === 'shuiwen' || id === 'yuliang' || id === 'xingbian' || id === 'shenya' || id === 'shipin'){
      jdwd = {
        coordinates:[item.lgtd,item.lttd]
      }
    }else {
      jdwd = JSON.parse(item.geojson)
    }
    if(id === 'shuiwen'){
      rotation = item.angle ? item.angle : 0
    }
    // 创建一个Feature,并设置好在地图上的位置
    const feature = new Feature({
      geometry: new Point(jdwd.coordinates),
      properties: item
    })
    // 设置样式,在样式中就可以设置图标
    feature.setStyle(
      new Style({
        image: new Icon({
          anchor: [16, 32],
          anchorXUnits: 'pixels',
          anchorYUnits: 'pixels',
          src: icon,
          rotation: rotation,
        })
      })
    )
    // 添加到之前的创建的layer中去
    layer.getSource().addFeature(feature)
  })
  layer.setZIndex(10)
}

// 添加单个标记图层
 export function addMarker(lonlat,map,id) {
  let feature = new Feature({
    id:id,
    geometry: new Point(lonlat)
  });
  feature.setStyle(
    new Style({
      image: new CircleStyle({
        radius: 3,
        fill: new Fill({
          color: '#00AAFF',
        }),
        stroke: new Stroke({
          color: '#00AAFF',
          width: 16
        })
      })
    })
  );
  let source = new VectorSource()
  source.addFeature(feature)
  let layer = new VectorLayer({
    opacity: 1,
    properties: {
      layerId: id
    },
    zIndex:9999
  })
  layer.setSource(source)
  // 添加到之前的创建的layer中去
  map.addLayer(layer)
}

// 添加多线段
export function addMultiLineString(map,id,graphics){
  const layers = map.getLayers().getArray()
  let layer = layers.find((item) => item.values_.id === id)
  if (layer) {
    layer.getSource().clear()
    layer.setVisible(true)
  } else {
    layer = new VectorLayer({
      source: new VectorSource(),
      properties: {
        id: id
      }
    })
    map.addLayer(layer)
  }
  graphics.forEach((item) => {
    item.valueName = id
    let jdwd = JSON.parse(item.geojson)
    const feature = new Feature({
      geometry: new MultiLineString(jdwd.coordinates),
      properties: item
    })
    feature.setStyle(
      new Style({
        // 线样式
        stroke: new Stroke({
          color: '#f00',
          width: 4,
        }),
      })
    )
    layer.getSource().addFeature(feature)

  })
  layer.setZIndex(10)
}

// 根据id隐藏图层
export function hideLayerById(map,layerId) {
  const layers = map.getLayers().getArray()
  const layer = layers.find((item) => item.values_.id === layerId)
  if (layer) {
    layer.setVisible(false)
  }
}


// 根据id删除图层
export function removeMarker(map,id){
  const layers = map.getLayers().getArray()
  const layer = layers.find((item) => item.values_.layerId === id)
  map.removeLayer(layer)
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值