openlayers缩放地图切换图层

鑫空闪烁

已于 2022-09-11 19:00:42 修改

阅读量1.5k

点赞数 2

文章标签：前端 vue.js

于 2022-09-11 18:59:39 首次发布

本文链接：https://blog.csdn.net/qq_41560089/article/details/126808026

版权

openlayers 缩放地图切换地图展示

openlayers官网

我在做一个项目中的时候遇到这样一个需求，就是刚进入首页加载一个地图，但是当地图进行放大或缩小到某个级别后需要切换地图显示，这个问题让我苦恼了一阵子，因为刚开始想法思路错了，所以导致后面想了很久，浪费了很多时间。所以今天我来整理一下这个思路。这个项目我用到的技术是vue+openlayers

思路：

先给页面一个容器，用来展示地图(记得给容器宽高，要不然显示不出来)

<template>
  <div class="app">
    <div id="map" ref="map">
    </div>
  </div>
</template>

首次加载页面初始化地图,先创建两个图层

// 初始化地图
    initMap() {
      // 线路图
      this.roadmap = new TileLayer({
        visible: true,
        name: '电子图',
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8 ',
          // 离线瓦片跨域处理
          crossOrigin: 'anonymous'
        })
      })
      // 卫星地图
      this.satellite = new TileLayer({
        visible: false,
        name: '卫星图',
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6 ',
          crossOrigin: 'anonymous'
        })
      })
    },

后在创建一个地图，并且把上面两个图层添加到地图的图层容器中

this.map = new Map({
        // 创建一个地图
        layers: [this.roadmap, this.satellite],
        // 挂载的地图元素
        target: 'map',
        view: new View({
          // 地图打开的默认中心点：我这里设置的是北京
          center: [116.403218, 39.92372],
          zoom: 7,
          maxZoom: 18,
          projection: 'EPSG:4326'
        })
      })

然后添加地图的缩放事件，监听缩放等级，到达指定等级之后隐藏和显示不同的图层

mapEvent() {
      // 地图缩放事件
      this.map.on('moveend', () => {
        // 获取当前地图的缩放级别
        let zoom = this.map.getView().getZoom()
        console.log('地图缩放级别', zoom)
        if (zoom >= 10) {
          // 控制地图图层不可见
          this.roadmap.setVisible(false)
          this.satellite.setVisible(true)
        } else {
          this.roadmap.setVisible(true)
          this.satellite.setVisible(false)
        }
      })
    }

页面效果
1. 缩放等级10以前
2. 缩放等级10以后

完整源码

<template>
  <div class="app">
    <div id="map" ref="map">
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import XYZ from 'ol/source/XYZ'
import './App.css'
export default {
  name: 'App',
  data() {
    return {
      // 地图实例
      map: null,
      roadmap: null,
      satellite: null
    }
  },
  mounted() {
    // 调用初始化地图服务
    this.initMap()
    // 地图的监听事件
    this.mapEvent()
  },
  methods: {
    // 初始化地图
    initMap() {
      // 线路图
      this.roadmap = new TileLayer({
        visible: true,
        name: '电子图',
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8 ',
          // 离线瓦片跨域处理
          crossOrigin: 'anonymous'
        })
      })
      // 卫星地图
      this.satellite = new TileLayer({
        visible: false,
        name: '卫星图',
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6 ',
          crossOrigin: 'anonymous'
        })
      })
      this.map = new Map({
        // 创建一个地图
        layers: [this.roadmap, this.satellite],
        // 挂载的地图元素
        target: 'map',
        view: new View({
          // 地图打开的默认中心点：我这里设置的是北京
          center: [116.403218, 39.92372],
          zoom: 7,
          maxZoom: 18,
          projection: 'EPSG:4326'
        })
      })
    },
    // 地图的事件
    mapEvent() {
      // 地图缩放事件
      this.map.on('moveend', () => {
        // 获取当前地图的缩放级别
        let zoom = this.map.getView().getZoom()
        console.log('地图缩放级别', zoom)
        if (zoom >= 10) {
          // 控制地图图层不可见
          this.roadmap.setVisible(false)
          this.satellite.setVisible(true)
        } else {
          this.roadmap.setVisible(true)
          this.satellite.setVisible(false)
        }
      })
    }
  }
}
</script>

<style scoped>
.app {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}
</style>