WebGIS实战：Vue+Openlayers实现网络地图的加载与切换

最新推荐文章于 2025-07-06 23:39:56 发布

原创

最新推荐文章于 2025-07-06 23:39:56 发布 · 3.5k 阅读

29 ·

CC 4.0 BY-SA版权

本文介绍如何使用Openlayers和Ol-ext实现在线地图加载与切换。通过具体步骤和代码示例展示了地图容器、底图管理和交互控件的配置过程，并预告了后续控件使用的教程。

前言

1、效果图

卫星地图

在这里插入图片描述

Open Street Map
百度地图【由于百度地图的加载相对上面两种加载比较复杂，因此没有将对应代码贴上。感兴趣的同学可以私信我具体的实现方法】
百度自定义地图【由于百度地图的加载相对上面两种加载比较复杂，因此没有将对应代码贴上。感兴趣的同学可以私信我具体的实现方法】

2、实现步骤

步骤1：在main.js文件中添加Openlayers与Ol-ext的样式表；
在这里插入图片描述
步骤2：在components文件夹下

新建组件BaseMap.vue（用于绑定地图容器）
新建baselayer.js（用于管理底图）
新建controls.js（用于管理相关地图控件）

baselayers.js

import {
   
   Group as LayerGroup, Tile as TileLayer, Vector as VectorLayer} from "ol/layer"
import {
   
   OSM, Stamen, BingMaps, Vector as VectorSource} from "ol/source"
import {
   
   Style, Fill, Stroke, Circle} from "ol/style"

export default class Baselayers{
   
   
  //创建底图组
  static BaseLayersGroup(layers){
   
   
    return new LayerGroup({
   
   
        title: 'Base Layers',
      allwaysOnTop: true,
      openInLayerSwitcher: true,
      layers: layers
    });
  }
  //创建Open Street Map
  static OSMLayer(isBaseLayer, isVisible){
   
   
    return new TileLayer({
   
   
      title: 'OSM',
      baseLayer: isBaseLayer,
      source