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

最新推荐文章于 2023-04-26 10:08:23 发布

易鹤鹤.

最新推荐文章于 2023-04-26 10:08:23 发布

阅读量411

点赞数

分类专栏： openlayers相关文章标签：前端 javascript css

本文链接：https://blog.csdn.net/ssy001128/article/details/129682694

版权

openlayers相关专栏收录该内容

8 篇文章 1 订阅

订阅专栏

// 加载多面
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)
}