vue如何利用openlayers加載天地圖和高德地圖

這篇文章給大家分享的是有關vue如何利用openlayers加載天地圖和高德地圖的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、天地圖部分

1、在vue中安裝openlayers

npm i --save ol

這里說的vue是基于腳手架構建的。 新建個頁面，也就是vue文件，配置好路由。接著就是可以直接放入我的代碼運行顯示了。

<template>

  <div class="wrapper">

    <div>天地圖</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], //中心點經緯度

          zoom: 4, //圖層縮放大小

          projection: "EPSG:4326",

        }),

        controls: defaultControls({
          zoom: true,

          attribution: false,

          rotate: false,

        }),

      });

      this.map = map;

      // 添加地圖

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

      url = `${

   url}&T=vec_c&tk=替代你的key`;

      const source = new XYZ({
     url: url,

        projection: "EPSG:4326",

      });

      const tdtLayer = new TileLayer({

        source: source,

      });

      this.map.addLayer(tdtLayer);

      // 添加注記

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

      url = `${

   url}&T=cva_c&tk=替代你的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>

天地圖就可以顯示出來了。

效果圖：

二、高德地圖部分

相對于天地圖，高德地圖就容易多了，直接上代碼

<template>

  <div class="wrapper">

    <div>高德地圖</div>

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

  </div>

</template>
<script>

import {

 Map,View,Feature} from 'ol'



import * as olProj from 'ol/proj'

import {

 Point} from 'ol/geom'

import {

  Style, Fill, Stroke, Circle as sCircle } from "ol/style";

// 添加圖層

import Tilelayer from 'ol/layer/Tile'

import {

 Vector as VectorLayer} from 'ol/layer'

import {

 XYZ,Vector as VectorSource} from 'ol/source'

//引入樣式文件

import "ol/ol.css"
export default {
  data() {

  return {
    map:null

    }

  },

  mounted() {

  this.init();

   this.setMarker();

  },

  methods: {

    init(){

       this.map=new Map({

         target:'map',

         layers:[new Tilelayer({

           source: new XYZ({

               url:'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',

           })

         })

         ],

        view:new View({


            // 將西安作為地圖中心 

            // olProj.fromLonLat方法將經緯度轉換成對應的坐標

          center:olProj.fromLonLat([108.945951, 34.465262]),

          zoom:2

        }),

       })

    },

    setMarker(){

        let _style = new Style({

            image:new sCircle({

                radius:10,

                stroke:new Stroke({

                    color:"#fff",

                }),

                fill: new Fill({

                    color:'#3399CC',

                }),

            }),

        });

        let _feature = new Feature({

 

            geometry:new Point(olProj.fromLonLat([108.945951, 34.465262])),

        });

        _feature.setStyle(_style);

        let _marker = new VectorLayer({


            source: new VectorSource({

               feature:[_feature],

            }),

        });

        this.map.addLayer(_marker);

    },

  },

}

</script>

<style scoped>

  #map{

      /* 屏幕寬高 */

    width: 100vw;

    height: 100vh;

  }

</style>

感謝各位的閱讀！關于“vue如何利用openlayers加載天地圖和高德地圖”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！