vue 项目中 openlayer 新建图层

添加图层
// 引入1
import { Map, View } from "ol";
import Image from "ol/layer/Image";
import ImageWMS from "ol/source/ImageWMS";
// 新建
      this.map = new Map({
        view: new View({
            center: [110.14, 32.57],
            zoom: 9,
            projection: new Projection({
              code: "EPSG:4490",
              units: 'm',
            }),
            maxResolution: 1.40625 * 2 * 2,
            minZoom: 0,
            maxZoom: 20
        }),
        layers: [],
        target: 'map'
      })
      // 加载图层
      var layers = new Image({
              source: new ImageWMS({
                      url: 'url',
                      params: {
                        'LAYERS': 'name',
                        'VERSION': '1.1.1',
                        'STYLES': '',
                        'REQUEST': 'GetMap',
                        'SRS': 'EPSG:4490',
                        'exceptions': 'application/vnd.ogc.se_inimage'
                      },
                      serverType: 'geoserver',
                  })
              })
// 添加到指定位置
      this.map.getLayers().insertAt(1,layers)
// 添加图层, 层叠关系
      // this.map.addLayer(layers)
更新图层
// 获取到所有图层
let Layers = this.map.getLayers();
Layers.array_.forEach(e => {
// 遍历所有图层 找到当前图层
  if (e.ol_uid == activeList.ol_uid) {
    // 删除当前图层
    this.map.removeLayer(e)

   var layers = new Image({
              source: new ImageWMS({
                      url: 'url',
                      params: {
                        'LAYERS': 'name',
                        'VERSION': '1.1.1',
                        'STYLES': '',
                        'REQUEST': 'GetMap',
                        'SRS': 'EPSG:4490',
                        'exceptions': 'application/vnd.ogc.se_inimage'
                      },
                      serverType: 'geoserver',
                  })
              })
    // 重新添加图层
    this.map.addLayer(layers)
    // 还试过 e.getSource().refresh({ force: true, active: true }) 貌似没用
  }
})

你可能感兴趣的:(vue 项目中 openlayer 新建图层)