vueはopenlayersを使用してスカイマップとガオードマップをロードする

npm i --save ol

<template>

  <div class="wrapper">

    <div>skymap</div>

    <div class="map" id="olMap"></div>

  </div>

</template>

<script>

import "ol/ol.css";

import {

  Tile as TileLayer } from "ol/layer";

import XYZ from "ol/source/XYZ";

import {

  defaults as defaultControls } from "ol/control";

import Map from "ol/Map.js";

import View from "ol/View.js";
export default {

  data() {
   return {

      map: null,

      parser: null,

    };

  },

  mounted() {
    this.initMap();

  },

  methods: {

    initMap() {

     const map = new Map({
       target: "olMap",

        view: new View({

 

          center: [0, 0], // center point latitude and longitude

          zoom: 4, // layer zoom size

          projection: "EPSG:4326",

        }),

        controls: defaultControls({
          zoom: true,

          attribution: false,

          rotate: false,

        }),

      });

      this.map = map;

      // Add a map

      let url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";

      url = `${

   url}&T=vec_c&tk=replace your key`;

      const source = new XYZ({
     url: url,

        projection: "EPSG:4326",

      });

      const tdtLayer = new TileLayer({

        source: source,

      });

      this.map.addLayer(tdtLayer);

      // Add a note

      url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";

      url = `${

   url}&T=cva_c&tk=replace your key`;

      const sourceCVA = new XYZ({
        url: url,

        projection: "EPSG:4326",

      });

      const tdtcvaLayer = new TileLayer({

        source: sourceCVA,

      });

      this.map.addLayer(tdtcvaLayer);

    },

  },

};

</script>
<style scoped>

.map {

  width: 100%;

  height: 100vh;

}

</style>

{{コード