OpenLayers 多个图层

OpenLayers 多个图层

创建地图的方法, 绘制 TileLayer图层, VectorLayer图层, ImageLayer图层

map.value = new Map({
  target: 'container',
  layers: [
    new TileLayer({
      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 VectorLayer({
      source: new VectorSource({
        url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
        format: new GeoJSON(),
      }),
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 0, 0, 0.1)',
        }),
        stroke: new Stroke({
          color: 'rgba(255, 0, 0, 1)',
        })
      })
    }),
    new ImageLayer({
      source: new Static({
        url: 'https://api.lolimi.cn/API/meizi/api.php?type=image',
        imageExtent: [119, 31, 119.1, 31.1],
      }),
    }),
  ],
  view: new View({
    center: center,               // 地图中心点标系
    projection: 'EPSG:4326',      // 地图坐标系
    zoom: 12,     // 默认缩放级别
  })
})

创建多个图层完整代码

<script setup>
import { ref, onMounted, onUnmounted, shallowRef } from 'vue' // vue相关方法
import { Map, View } from 'ol'      // 地图实例方法、视图方法
import { XYZ } from 'ol/source'
import TileLayer from 'ol/layer/Tile'
import ImageLayer from "ol/layer/Image";
import Static from "ol/source/ImageStatic";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { GeoJSON } from "ol/format";
import { Style, Fill, Stroke } from "ol/style";
import { Feature } from "ol";
import { Point } from "ol/geom";
import { Icon } from "ol/style";
import 'ol/ol.css'

const map = shallowRef(null) // 存放地图实例

onMounted(() => {

  initMap()
  window.addEventListener('keydown', kenDown)

  // 创建新的图层
  const layer = new VectorLayer({
    source: new VectorSource()
  })
  // 创建新的要素
  const feature = new Feature({
    geometry: new Point([118.6, 31]),
  })
  // 设置图标
  feature.setStyle(new Style({
    image: new Icon({
      src: 'https://api.lolimi.cn/API/meizi/api.php?type=image',
      scale: 0.1, // 图标大小, 缩放倍率
    })
  }))

  layer.getSource().addFeature(feature) // 添加要素到图层
  map.value.addLayer(layer)             // 添加图层到地图中

})

onUnmounted(() => {
  window.removeEventListener('keydown', kenDown)
})

const kenDown = (e) => {
  const view = map.value.getView()
  const center = view.getCenter()
  const jump = 1
  switch (e.keyCode) {
    case 38:
      center[1] += jump
      break;
    case 40:
      center[1] -= jump
      break;
    case 37:
      center[0] -= jump
      break;
    case 39:
      center[0] += jump
      break;
  }
  view.animate({
    center: center,
    duration: 300,
  })
  map.value.render()
}

function initMap(center = [119, 31]) {
  map.value = new Map({
    target: 'container',
    layers: [
      new TileLayer({
        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 VectorLayer({
        source: new VectorSource({
          url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
          format: new GeoJSON(),
        }),
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 0, 0, 0.1)',
          }),
          stroke: new Stroke({
            color: 'rgba(255, 0, 0, 1)',
          })
        })
      }),
      new ImageLayer({
        source: new Static({
          url: 'https://api.lolimi.cn/API/meizi/api.php?type=image',
          imageExtent: [119, 31, 119.1, 31.1],
        }),
      }),
    ],
    view: new View({
      center: center,               // 地图中心点标系
      projection: 'EPSG:4326',      // 地图坐标系
      zoom: 12,     // 默认缩放级别
    })
  })
}

</script>

<template>
  <div class="title">openlayers vue3 地图示例</div>

  <div id="container"></div>
</template>

<style scoped>
.title {
  margin: 20px 0;
  width: 100%;
  color: #48bb78;
  text-align: center;
  font-size: 2.2em;
  font-weight: bold;
  text-shadow: #000 0 2px 7px;
  position: fixed;
  z-index: 999;
}

#container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>