webgis开发之mapbox（1）
MAPBOX
01、mapbox加载地图
mapbox
*{
margin: 0;
padding: 0;
}
#map{
width: 100vw;
height: 100vh;
}
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container:'map', //指定地图容器id
style:'mapbox://styles/mapbox/streets-v12', //地图风格
center:[114.30,30.50], //地图中心坐标
zoom:12, //缩放比例
pitch:45, //俯仰角 默认是0（0-90）
bearing:90 //水平角 默认是0 （-180-180）
});
console.log(map.getBearing)
console.log(map.getCenter)
// setInterval(() => {
// let bearing = map.getBearing()
// bearing++
// map.setBearing(bearing)
// }, 20);
02、切换风格、投影方式
mapbox
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
z-index: 1;
}
select{
position: absolute;
top: 2%;
left: 2%;
z-index: 2;
}
Mapbox Light
Mapbox Dark
Mercator
Globe
Albers
Equal Earth
Equirectangular
Lambert Conformal Conic
Natural Earth
Winkel Tripel
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/streets-v12', //地图风格
center: [114.30, 30.50], //地图中心坐标
// zoom: 10, //缩放比例
pitch: 45, //俯仰角 默认是0（0-90）
bearing: 90 //水平角 默认是0 （-180-180）
});
function changeStyle(event){
// console.log(event)
map.setStyle(event.target.value)
}
function changeProjection(event){
// console.log(event)
map.setProjection(event.target.value)
}
03、加载高德底图
mapbox
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
z-index: 1;
}
select {
position: absolute;
top: 2%;
left: 2%;
z-index: 2;
}
Mapbox Light
Mapbox Dark
Mercator
Globe
Albers
Equal Earth
Equirectangular
Lambert Conformal Conic
Natural Earth
Winkel Tripel
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
/* 将地图挂载到对应的DOM上 相当于ol的target */
container: "map",
/* 相当于ol的layers */
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
"tileSize": 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [114.30, 30.50],
zoom: 6,
projection: 'globe'
})
function changeStyle(event) {
// console.log(event)
map.setStyle(event.target.value)
}
function changeProjection(event) {
// console.log(event)
map.setProjection(event.target.value)
}
04、设置大气层样式
mapbox
*{
margin: 0;
padding: 0;
}
#map{
width: 100vw;
height: 100vh;
}
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container:'map', //指定地图容器id
style:'mapbox://styles/mapbox/streets-v12', //地图风格
center:[114.30,30.50], //地图中心坐标
zoom:2, //缩放比例
});
map.on('style.load',()=>{
map.setFog({
'color':'blue',
'high-color':'black',
'space-color':'red'
})
})
05、地图事件
mapbox
*{
margin: 0;
padding: 0;
}
#map{
width: 100vw;
height: 100vh;
}
btn1{
position: fixed;
top: 2%;
left: 2%;
z-index: 99;
}
btn2{
position: fixed;
top: 2%;
left: 6%;
z-index: 99;
}
跳转
移除
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container:'map', //指定地图容器id
style:'mapbox://styles/mapbox/streets-v12', //地图风格
center:[114.30,30.50], //地图中心坐标
zoom:12, //缩放比例
});
function mapTo(){
// map.setCenter([114.3,30.5]) //设置地图中心坐标 直接跳转地图
map.flyTo({ //飞行到某个点，带飞行动画
center:[118,38.5],
zoom:8,
speed:0.5,
})
// map.easeTo({ //缓慢的移过去 有过渡效果
// center:[112,30],
// duration:5000 //过渡时间 毫秒
// })
}
// function showLonlat(e){
// console.log(e)
// }
// map.on('click',showLonlat)
// function removeEvent(){
// map.off('click',showLonlat)
// }
06、定时器自转
mapbox
*{
margin: 0;
padding: 0;
}
#map{
width: 100vw;
height: 100vh;
}
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container:'map', //指定地图容器id
style:'mapbox://styles/mapbox/streets-v12', //地图风格
center:[114.30,30.50], //地图中心坐标
zoom:1, //缩放比例
});
setInterval(() => {
let center =map.getCenter()
center.lng+=1
map.easeTo({
center:[center.lng,center.lat],
duration:10,
})
// map.setCenter([c.lng++,lat++])
}, 20);
07、事件自转
mapbox
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: absolute;
top: 2%;
left: 2%;
z-index: 2;
}
Stop
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/streets-v12', //地图风格
center: [114.30, 30.50], //地图中心坐标
zoom: 1, //缩放比例
});
function stop() {
map.off('moveend', animatian)
}
function animatian() {
let center = map.getCenter()
center.lng += 1
map.easeTo({
center: [center.lng, center.lat],
duration: 2,
})
}
map.on('moveend', animatian)
08、点击控制自转
mapbox
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: absolute;
top: 2%;
left: 2%;
z-index: 2;
}
Stop
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/streets-v12', //地图风格
center: [114.30, 30.50], //地图中心坐标
zoom: 1, //缩放比例
});
function animatian() {
let center = map.getCenter()
center.lng += 1
map.easeTo({
center: [center.lng, center.lat],
duration: 2,
})
}
function toMove() {
map.on('moveend', animatian)
animatian()
}
function stopMove() {
map.off('moveend', animatian)
}
let moving = false
map.on('click', () => {
if (moving) {
toMove()
} else {
stopMove()
}
moving = !moving
})
文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。
还没有评论，来说两句吧...