1.首先通过npm 安装mapbox-gl
npm install mapbox-gl
2.页面代码
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
// import * as THREE from 'three'
// import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import geojson from './chongqing1.json'
export default {
data() {
return {
title: 'Mapgis',
hs: 'aad',
positionLocation: [106.21176144800006, 29.59098730870005],
//positionLocation: [106.697157, 29.501613],
zoom: 16,
pitch: 60, //地图的角度,不写默认是0,取值是0-60度,一般在3D中使用
bearing: 10,
antialias: false, //抗锯齿,通过false关闭提升性能
maxPitch: 60,
container: 'map',
lonlats: [],
baseUrl: 'api/service-count',
markerRe: [], //标点
x_PI: (3.14159265358979324 * 3000.0) / 180.0,
PI: 3.1415926535897932384626,
a: 6378245.0,
ee: 0.00669342162296594323,
layer: '',
}
},
mounted() {
this.init()
},
methods: {
init: function () {
let that = this
mapboxgl.accessToken =
'token'
let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/abcd19886/ckgbsqb68214i1apr7qifwpvm',
maxPitch: this.maxPitch,
center: this.positionLocation,
zoom: this.zoom,
pitch: this.pitch,
bearing: this.bearing,
})
//console.log(typeof geojson.geometries)
map.on('style.load', function () {
that.chuliData()
})
window.mapBox = map
},
// 处理数据
chuliData() {
let featureArray = []
for (let i in geojson.geometries) {
let feature = {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: geojson.geometries[i].coordinates,
},
}
featureArray.push(feature)
}
mapBox.addLayer({
id: 'maine',
type: 'fill',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: featureArray,
},
},
layout: {},
paint: {
'fill-color': '#088',
'fill-opacity': 0.8,
},
})
},
},
}
</script>
<style scoped>
/* mapbox css*/
@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
#map {
position: absolute;
top: 40px;
bottom: 0;
width: 100%;
margin-left: -24px;
}
</style>
3.展现效果