這篇文章給大家分享的是有關Vue單頁面組件mapbox gl怎么用  的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創新互聯建站是專業的高昌網站建設公司，高昌接單;提供網站設計制作、網站設計,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行高昌網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

使用Vue開發地圖的時候，鑒于也不熟悉Vue，就將mapbox gl以單頁面的形式做成了組件，共享map實例進行地圖操作開發。

具體的實現如下：  

安裝mapbox gl 類庫：通過npm install mapbox-gl --save安裝類庫，或者國內的cnpm也可以。

新建Vue的模版頁：div承載mapbox gl地圖  

<template>

  <div>

    <div ref="basicMapbox"></div>

  </div>

</template>

通過腳本代碼添加mapbox的對象：需要在mounted里，進行mapbox gl的初始化，container屬性，通過ref指向div。

<script>

import mapboxgl from "mapbox-gl";

export default {

  data() {

    return {};

  },

  mounted() {

    this.init();

  },

  created: function() { 

  },

  methods: {

    created() {},

    // 初始化

    init() {

      mapboxgl.accessToken =

        "yourtoken";

      const map = new mapboxgl.Map({

        container: this.$refs.basicMapbox,

        maxZoom: 17, 

        style: {

          version: 8,

          name: "mapboxdata",

          sources: {

            tdtbase: {

              type: "raster",

              tiles: [

                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}" 

              ],

              tileSize: 256

            } 

          },

          layers: [

            {

              id: "tdtbase",

              type: "raster",

              source: "tdtbase",

              minzoom: 0,

              maxzoom: 18

            } 

          ]

        }, 

      }); 

    }

  } 

};

在頁面上應用組件：

先引用組件

import map2d from "./組件路徑";

在頁面上加載

<div  >

      <map2d  ></map2d>

    </div>

這樣就能夠將組件加載上去。

對于需要操作map對象，可以通過store的方式進行共享，各組件調用  map實例，進行功能實現。  

 this.$store.commit("set2dmap", map);

感謝各位的閱讀！關于“Vue單頁面組件mapbox gl怎么用  ”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前名稱：Vue單頁面組件mapboxgl怎么用
當前URL：http://vcdvsql.cn/article22/gjosjc.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、App開發、電子商務、定制網站、自適應網站、靜態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯