“This is the second day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

One, foreword

Due to the recent needs of the project, I need to use OpenLayers in the VUE project to develop GIS map. The article on OpenLayers is not too big on the Internet, so I take this opportunity to share some of my experience in the actual use of the project.

This series will share some of the feature points implemented over the course of the project. Past Catalogue:

  1. Vue +OpenLayers Project Practice (I) : Basic drawing and clicking pop-ups

Since the project needs to support overseas users, other maps need to be introduced. We introduced Autonavi map in the last article, but now we need to introduce another Bing map. This paper mainly introduces how to realize the function of multi-map switching.

Second, concrete implementation

1. Apply for the BingMap key

To use BingMap, you need to apply for the corresponding key, which will not be expanded here. You can directly go to www.bingmapsportal.com/ to apply, the method is relatively simple.

At present, BingMap is not charged for non-commercial use, so you can rest assured to use it.

2. Implement Bing map display

Add the common utility functions folder utils to the SRC directory, and add the OpenLayers folder to utils. The subsequent utility functions related to OpenLayers are stored in this directory.

Create mapType.js in the OpenLayers directory

// maptype.js

import { XYZ, BingMaps } from "ol/source";

let list = [
  {
    name: amap.value: new XYZ({
      url: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",}).id: "0"}, {name: Bing Maps.value: new BingMaps({
      key: "BingMap key".imagerySet: "RoadOnDemand",}).id: "1",},];export default list;
Copy the code

Package the godhwa slice map source and BingMap configured in home.vue into a list. If you need to add other maps later, you can also modify them directly in this file.

New BingMaps() provides an API for Openlayers. Other apis can be found in the official documentation.

Next modify home.vue:

// import
import mapType from "@/utils/openlayers/maptype";

// data
data() {
  return {
    tileLayer: null./ / map layer
    mapList: null.// Map list
    locaMap: "1"}; },mounted() {
  this.mapList = mapType;
  this.tileLayer = new TileLayer({
    source: mapType.find((e) = > e.id === this.locaMap).value,
  });
  this.initMap();
},

// methods
initMap() {
  this.openMap = new Map({
    target: "map".layers: [this.tileLayer],
    view: new View({
      center: olProj.fromLonLat([108.945951.34.465262]),
      zoom: 1,}).controls: [],}); . },Copy the code

When you change locaMap to “1”, you can see that the map has become a Bing map.

3. Switch button

Ok, we have realized the basic function of switching map, now we implement a button on the page to trigger switching map transformation.

Use the elemental-UI selector directly, introduce the elemental-UI, introduce the Select Option as needed, and then implement a drop-down selection in the bottom right corner of the page.

// main.js
import "element-ui/lib/theme-chalk/index.css";
import { Select, Option } from "element-ui";
Vue.use(Select);
Vue.use(Option);
// Home.vue
// template
<div class="map-toolbar">
  <! -- Map selection -->
  <el-select v-model="locaMap" style="width: 150px">
    <el-option
      v-for="item in mapList"
      :label="item.name"
      :value="item.id"
      :key="item.id"
      @click.native="setMapSource(item)"
    ></el-option>
  </el-select>
</div>
// methods Add toggle map methods
setMapSource(e) {
  this.tileLayer.setSource(e.value);
},
Copy the code

4. Store map selection

In this case, locaMap is stored in localStorage.

Add webstorage. js to utils directory

// webStorage.js
const locaMap = "locaMap";

export function getMap() {
  return localStorage.getItem(locaMap);
}

export function setMap(e) {
  return localStorage.setItem(locaMap, e);
}
Copy the code

The exposed storage method is added to home.vue

import { getMap, setMap } from "@/utils/webStorage";

data() {
  return {
    locaMap: getMap() || "0"}; },// Toggle the map
setMapSource(e) {
  this.tileLayer.setSource(e.value);
  setMap(e.id)
},
Copy the code

Of course, you can also add to Vuex at the same time, this can be done by itself. I’m not going to add it here.

The last

Gitee address: gitee.com/shtao_056/v…

Thank you for reading

It would be a great honor if I could help you.

In the future, more functions will be updated, as well as some problems encountered in the project, interested partners can click favorites/follow.