openlayers学习（一）

首先感谢大佬们写的文章，博客链接已在文章最后贴出，在接下来的内容中，我将会引用其中的一些定义结论。

之前文章写过一个Arcgis api for js的小demo，openlayers项目代码就继续在写这个小demo框架上。

初始化地图

要想在vue项目里使用openlayers，需要先安装openlayers包

复制代码

npm install ol

下面来写核心代码：

javascript 复制代码

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

<script>
import 'ol/ol.css';
import { Map, View } from "ol";//地图,视图
import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
import TileLayer from "ol/layer/Tile"; //可以理解为图层
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    createMap() {
      this.map = new Map({
        target: "map",             // 关联到对应的div容器
        layers: [
          new TileLayer({          // 瓦片图层
            source: new OSM(),   // OpenStreetMap数据源
          }),
        ],
        view: new View({           // 地图视图
          center: [0, 0],
          projection: "EPSG:3857",
          zoom: 8,
        }),
      });
    },
  },
  mounted() {
    this.createMap();
  },
};
</script>

<style>
#map {
  position:relative;
  height: 100%;
  width: 100%;
}
</style>

运行可以看到OpenStreetMap地图已经显示出来了

实战：

上面已经掌握了基本的创建地图的知识，下面来实战一下

在此之前，先安装ol-ext库

复制代码

npm i ol-ext

在main.js全局引入ol和ol-ext的样式表

管理底图及控件

components文件夹下新建MapView用于存放我们的相关vue组件和js文件

baselayers.js:

javascript 复制代码

//用于管理底图
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: new OSM(),
      visible: isVisible
    });
  }

  //https://www.bingmapsportal.com/Application，申请key的地址
  //创建Bing Map

  static BingMapLayer(layerName){
    let apiKey = '自己去申请一个key';
    return new TileLayer({
      preload: Infinity,
      baseLayer: true,
      title: upperCaseFirst.call(this, layerName),
      visible: true,
      source: new BingMaps({
        key: apiKey,
        imagerySet: layerName
      })
    });
  }
}
//Bing Map的类型
Baselayers.BingMapLayerTypes = {
  Road: 'Road',
  Aerial: 'Aerial',
  AerialWithLabels: 'AerialWithLabels',
  collinsBart: 'collinBart',
  ordnanceSurvey: 'ordnanceSurvey'
}

function upperCaseFirst(str){
  return str[0].toUpperCase() + str.substring(1);
}

controls.js:

javascript 复制代码

//管理相关地图控件
import {defaults} from 'ol/control'  //defaults方法返回一个包含OpenLayers地图默认控件的对象
import LayerSwitcher from 'ol-ext/control/LayerSwitcher'  //LayerSwitcher是一个扩展控件，它提供了一个用户界面来切换地图上的不同图层。

/**
 * 地图控件
 */
export const controls = {
  // 地图图层切换
  switcher: new LayerSwitcher({
    show_progress: true,  //在图层加载时显示进度条
    extent: true  //显示图层的范围
  }),
  // 默认控件
  default: defaults() // 没有new defaults是一个函数
};

BaseMap.vue:

html 复制代码

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

<script>
import { Map, View } from "ol"; //地图,视图
import Baselayers from "./js/baselayers.js"; //地图管理
import { controls } from "./js/controls"; //地图交互控件
import { fromLonLat } from "ol/proj"; //经纬度转投影
import TileLayer from "ol/layer/Tile"; //可以理解为图层
export default {
  data() {
    return {
      map: null,
      bingMap: Baselayers.BingMapLayer(
        Baselayers.BingMapLayerTypes.AerialWithLabels
      ), //卫星地图
      osm: Baselayers.OSMLayer(true, false),
      baseLayerGroup: null,
      view: new View({
        center: fromLonLat([118.8, 32.0]), //南京的经纬度
        zoom: 11,
      }),
    };
  },
  methods: {
    createMap() {
      this.map = new Map({
        target: "map", // 关联到对应的div容器
        layers: [this.baseLayerGroup],
        overlays: [],
        controls: [controls.switcher],
        loadTilesWhileInteracting: true,
        view: this.view,
      });
    },
  },
  mounted() {
    this.baseLayerGroup=Baselayers.BaseLayersGroup([this.bingMap, this.osm])
    this.createMap();
  },
};
</script>

<style>
#map {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>

参考文章：

WebGIS实战：Vue+Openlayers实现网络地图的加载与切换_openlayers加载甘肃省地图-CSDN博客 OpenLayers教程二：实现简单的地图显示 - 知乎 (zhihu.com)