1500字范文 > WebGIS实战：Vue+Openlayers实现网络地图的加载与切换

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

时间：2021-08-23 19:03:17

前言

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 Mapstatic OSMLayer(isBaseLayer, isVisible){return new TileLayer({title: 'OSM',baseLayer: isBaseLayer,source: new OSM(),visible: isVisible});}///Application，申请key的地址//创建Bing Mapstatic 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

import {defaults} from 'ol/control'import LayerSwitcher from 'ol-ext/control/LayerSwitcher'/*** 地图控件*/export const controls = {// 地图图层切换switcher: new LayerSwitcher({show_progress: true,extent: true}),// 默认控件（）default: defaults() // 没有new};

BaseMap.vue

<template><div><div id="map"></div></div></template><script>import Baselayers from "@c/js/baselayers";//地图管理import {Map, View} from 'ol';//Openlayers的地图容器import {fromLonLat} from 'ol/proj';//经纬度转投影坐标import {controls} from "@c/js/controls";//地图交互控件export default {name: "base-map",data(){return{}},components: {},methods: {},computed: {},mounted() {let bingMap = Baselayers.BingMapLayer(Baselayers.BingMapLayerTypes.AerialWithLabels);//卫星地图let osm = Baselayers.OSMLayer(true, false);//Open Street Maplet baseLayerGroup = Baselayers.BaseLayersGroup([bingMap, osm]);//整合为一个地图组let centerPoint = fromLonLat([118.8, 32.0]);//南京的经纬度//设置定位的点及缩放等级let view = new View({center: centerPoint,zoom: 11});//配置地图容器new Map({target: 'map',layers: [baseLayerGroup],overlays: [],controls: [controls.switcher],loadTilesWhileInteracting: true,view: view});}}</script>//设置地图为铺满全屏<style lang="scss" scoped>#map {height: 100%;width: 100%;position: fixed;}</style>

步骤3：在views文件下新建Index.vue（用于挂载BaseMap.vue组件）

<template><div class="'index"><base-map></base-map> </div></template><script>import BaseMap from "@c/BaseMap.vue";export default {//用于展示例子name: "Index",data(){return{}},components: {BaseMap},methods: {}}</script><style lang="scss" scoped></style>

步骤4：在router文件夹下修改router/index.js，添加BaseMap.vue组件

步骤5：修改App.vue，添加router-view，用于实现页面导航

<template><div id="app"><router-view> </router-view></div></template><style lang="scss">#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}</style>