openlayers学习(一)

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

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


openlayers官网

初始化地图

要想在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)

相关推荐
YKPG14 分钟前
C++学习-入门到精通【17】自定义的模板化数据结构
数据结构·c++·学习
1569917 分钟前
大语言模型原理与书生大模型提示词工程实践-学习笔记
笔记·学习·语言模型
武昌库里写JAVA3 小时前
iview组件库:关于分页组件的使用与注意点
java·vue.js·spring boot·学习·课程设计
人有一心4 小时前
【论文阅读】多任务学习起源类论文《Multi-Task Feature Learning》
论文阅读·学习
HaiQinyanAN4 小时前
【学习笔记】虚函数+虚析构函数
c++·笔记·学习
虾球xz4 小时前
CppCon 2015 学习:Give me fifteen minutes and I’ll change your view of GDB
开发语言·c++·学习
Sleepless_斑马4 小时前
【FFmpeg学习(2)】视频概念
学习·ffmpeg·音视频
止于怠5 小时前
学习时困了怎么办
学习·解困
qq_29494019106 小时前
清新文艺手绘学习教育培训竞标汇报PPT模版分享
学习·ppt模版·清新ppt·通用ppt模版
SunsPlanter6 小时前
Word-- 制作论文三线表
学习