不同分辨率显示不同图层

• 在限制的范围之内时显示图层，在限制的范围之外时不显示图层
• 只有当指定图层在 minResolution 和 maxResolution 范围内，才显示。

function initMap() {
  map.value = new Map({
    target: 'map',
    layers: [

      new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',

        })
      }),
      new Tile({
        source: new XYZ({
          url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png',
        
        }),

        // 当图层在 2000 至 20000 时显示
        minResolution: 2000,
        maxResolution: 20000
      })
    ],
    view: new View({
      center: [653600, 5723680],
      zoom: 5
    })
  })
}

不同区域显示不同图层

const overlay = ref(null)

const area = reactive({
  India: [68.17665, 7.96553, 97.40256, 35.49401],
  Argentina:[-73.41544, -55.25, -53.62835, -21.83231],
  Nigeria: [2.6917, 4.24059, 14.57718, 13.86592],
  Sweden: [11.02737, 55.36174, 23.90338, 69.10625]
})

function initMap() {
  overlay.value = new Tile({
    extent: area.India,
    preload: Infinity, // 预加载
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
  })

   
  map.value = new Map({
    target: 'map',
    layers: [
      new Tile({
        source: new TileJSON({
          url: 'https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:raster:HYP_HR_SR_OB_DR/map/tiles/WebMercatorQuad?f=tilejson',
          crossOrigin: 'anonymous'
        }) 
      }),
      overlay.value
    ],
    view: new View({
      projection: "EPSG:4326",
      center: [0, 0],
      zoom: 1
    })
  })
}
/**
 * 触发函数
 */
function replaceTheRegion(data) {
  overlay.value.setExtent(area[data]) // 设置要显示的区域
}

markerUse

// 创建图标特性
let iconFeature = new Feature({
  geometry: new Point([100, 36]), // 图标展示的位置
  name: '你点我了',
  population: 4000,
  rainfall: 500
})

// 创建图标样式
let iconStyle = new style.Style({
  image: new style.Icon({ // 定义图标锚点
    anchor: [0.5, 46], // 根据图标的大小，对应上面 [0, 0] 的坐标
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    // 图标所使用的图片文件
    // src: require('../../assets/images/icon.png')
    // 或者
    src: iconPng
  })
})
           



// 把样式应用到图标上
iconFeature.setStyle(iconStyle)

// 创建矢量容器，将图标特性添加进容器中
let vectorSource = new sourceVector({
  features: [iconFeature]
})

// 创建矢量图层
let vectorLayer = new layerVecor({
  source: vectorSource
})
map.addLayer(vectorLayer)