Shulou(Shulou.com)06/01 Report--

This article is about how to use mapbox gl, a single-page component of Vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

When using Vue to develop maps, in view of not being familiar with Vue, we made mapbox gl into a component in the form of a single page, and shared map instances for map operation and development. The specific implementation is as follows:

Install the mapbox gl class library: install the class library through npm install mapbox-gl-- save, or domestic cnpm. Create a template page for Vue: div hosts mapbox gl maps

Add the object of mapbox through the script code: you need to initialize the mapbox gl in mounted, container attribute, and point to div through ref.

Import mapboxgl from "mapbox-gl"

Export default {

Data () {

Return {}

}

Mounted () {

This.init ()

}

Created: function () {

}

Methods: {

Created () {}

/ / initialize

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

}

]

}

});

}

}

}

Apply components on the page:

Reference the component first

Import map2d from ". / component path"

Load on the page

This allows the component to be loaded.

For map objects that need to be manipulated, they can be shared through store, and each component calls the map instance to realize the function.

This.$store.commit ("set2dmap", map)

Thank you for reading! On "Vue single page component mapbox gl how to use" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.