Why use mapbox?
You can search for the above-mentioned or other webGIS frameworks or integration service providers, and you can easily compare the advantages of mapbox:
- Support 3D terrain and 3D models
- Supports multiple coordinate system projections
- Mapbox studio edits map styles online. Only one link is needed when using it, and the link does not need to be modified when updating (irreplaceable)
- Beautiful (who can argue?)
- Simple and easy to use (compare Cesium and Openlayers)
- Geographic data full format support (Image, KML, WMS, WMTS, GeoJson)
- Fully functional, mapbox is no longer a vase, it is now a powerful and complete large-scale framework
Register a mapbox account
Mapbox prohibits the registration of new users in China. You need to turn on the global magic and enter the mapbox official website to register.
If you are asked to enter an overseas bank card number, please refer to: Zhihu: Why do I need to fill in the card number when registering for Mapbox? Is there any bank requirement? I read online that it does not need to be filled in. How to do it specifically? Please give me some advice. ?
After completing the registration, you will see the following screen
The red box on the upper left allows you to create and edit map styles online. The red box below is the public key, which can be used to access the public map you created.
Create your personalized map
You can explore what each layer is by yourself. I only added a satellite image here. The more layers there are, the slower it will be when loading and the laggy it will be when using it.
Click the 3D button in the upper left corner to open the 3D view. Mapbox will simulate the terrain based on global contour information.
The picture above shows Tai'an City, Shandong Province. Also supports:
- Custom light source
- Custom coordinate system
- Customized terrain exaggeration
- Fog (visible range of vision, appropriate settings help optimize performance)
Using mapBox in VUE project
This article uses vue3, and the options are as follows:
- router
- vuex
- less
-
Install, install via NPM
-
npm i mapbox-gl
-
-
introduce
-
import mapboxgl from 'mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
-
-
initialization
-
mapboxgl.accessToken='pk.eyJ1IjoiemJiZW4iLCJhIjoiACtpemtnOXRoMDRhcDMwbG43aGYxbXhqYyJ9.YOJzSXzubABBJeK7SXg60w'; //这是一个无效的公钥，上面提到了公钥在哪里可以获取到 this.map = new mapboxgl.Map({ container: "basicMapbox", style: 'mapbox://styles/xxx/ckus1uok22m4117aif4pg9qa6', //这是个假链接，在上面有提到分享按钮，那里有你自己的链接 center: [118, 28], zoom: 3, //zoom你都不懂就别看了 pitch: 0, // 相对于地面3D视角的角度 bearing: 0, // 东西南北 方向，正北方为 0 projection: 'globe', // 为 3D 地球 antialias: false, //抗锯齿，通过false关闭提升性能 essential: true, //不知道什么意思，我看人家写我就写了 renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效 skipOnboarding: true,//可选择不等待瓦片加载 }); // ### 标签汉化 // this.map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' })); // ### 添加导航控制条 // this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');
-
-
Listen for events
-
this.map.on("eventName",()=>{}) // 常用事件有：load、moveend、render等，自行探索
-
-
Common methods
-
this.map.setFog({}); //开启宇宙、星空 this.map.flyTo({ center: [109.926476, 19.088415], //目标中心点 海南省琼中县湾岭镇 zoom: 11, //目标缩放级别 bearing: 56.50, //目标方位角 pitch: 47.50, //目标倾斜角 },duration: 7000,) //飞行 let shape = await request.get("some_geoJosn") this.map.addSource('customSourceName'{ type:"geojson" //可选： raster || image || 等 // 每个类型所需的参数不一样，自行探索，这里用geojson举例。 "data": shape }) //添加资源 this.map.getSource('customSourceName') && this.map.removeSource('customSourceName') //获取资源、删除资源 this.map.addLayer({ id: 'measure-lines', type: 'line', source: 'customSourceName', //使用刚刚添加的资源 layout: { 'line-cap': 'round', 'line-join': 'round' }, paint: { 'line-color': '#00FFF4', 'line-width': 2.5, 'line-opacity': 1, 'line-gap-width': 0, }, }); // 添加图层，如上使用 名为 customSourceName 的资源 添加了一个用线勾勒轮廓的图层。 this.map.getLayer('measure-lines') && this.map.removeLayer('measure-lines') // 获取图层、删除图层 -
Insertion point, the following is a simple example of an insertion point, you can use the vue component to render the response pop-up window of the insertion point:
import mapboxPopView from '../mapboxPopView/mapboxPopView.vue'; //弹窗组件需提前引入 async setMaker(makerList) { if (!makerList) { return } // console.log('makerList::: ', makerList); for (let item of makerList) { let dom = document.createElement('img') dom.src = require(`../../../public/static/img/${item.deviceType}.png`) //这里使用了自定义图片来替换默认插点图标 dom.style.width = '52.4px' dom.style.height = 'auto' //可以保持比例 dom.id = `marker-${item.deviceId}` dom.classList.add("markerCustom") dom.addEventListener("click", () => { this.setPopContent(item) }) let marker = new mapboxgl.Marker({ element: dom, offset: [0, -50], //图标偏移量 }).setLngLat([item.lon, item.lat]).addTo(this.map); // 添加标记的弹窗事件 var popup = new mapboxgl.Popup({ offset: [0, -100], //弹窗偏移量 }).setHTML(`<div id="popup-content-${item.deviceId}"></div>`) // this.setPopContent(item) marker.setPopup(popup); this.markerList.push(marker) // 点击标记时显示弹窗 } this.$store.dispatch('addLayer') }, setPopContent(item) { const MyNewPopup = defineComponent({ extends: mapboxPopView, setup() { const deviceItem = item return { deviceItem } //这里的常量可以直接在组件的this对象中获取 }, }) setTimeout(() => { createApp(MyNewPopup).mount(`#popup-content-${item.deviceId}`) //挂载到刚刚定义的拥有唯一ID的DOM节点上 }, 10); },The effect of inserting points is as follows:
-
At this point, the basic functions of mapbox have been introduced. In addition, mapbox supports custom image sources. The following is an example of using sky map tiles:
setTiandituLaryer() {
this.map.addSource('tianditu', {
type: 'raster',
tiles: [
'你的天地图链接',
],
tileSize: 256,
});
this.map.addLayer({
id: 'tianditu',
type: 'raster',
source: 'tianditu',
});
},
If you use other image sources, remember to close or delete useless layers in mapbox studio.