MAPBOX
01、控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapbox</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<script
src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css"
type="text/css">
<!-- 汉化 -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
#mouse-position {
position: fixed;
top: 0;
left: 50%;
z-index: 100;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map">
<div id="mouse-position">
</div>
</div>
<script>
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, //缩放比例
});
// 全屏控件
map.addControl(new mapboxgl.FullscreenControl())
const nav = new mapboxgl.NavigationControl(
{
//是否显示指南针按钮,默认为true
"showCompass": true,
//是否显示缩放按钮,默认为true
"showZoom": true
}
);
// 添加导航控件,控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种,
// 默认为'top - right'
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.AttributionControl({
//是否折叠属性信息
compact: true,
//⾃定义属性信息
customAttribution: ["中地数码", "GIS⾼校论坛"]
}));
// 比例尺控件
const scale = new mapboxgl.ScaleControl({
unit: 'metric|imperial' //默认为公⾥
})
map.addControl(scale);
// 鼠标移动事件
map.on('mousemove', function (e) {
const { lng, lat } = e.lngLat;
document.getElementById('mouse-position').innerHTML = `
经度:${lng.toFixed(2)},纬度:${lat.toFixed(2)}
`
});
// 搜索控件
// Add the control to the map.
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
zoom: 4,
placeholder: '请输⼊地址',
mapboxgl: mapboxgl,
reverseGeocode: true
})
);
// 汉化
map.addControl(new MapboxLanguage({
defaultLanguage: 'zh-Hans' // 设置默认语⾔
}))
</script>
</body>
</html>
02、marker点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapbox</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
#marker {
background-image: url('https://img.gejiba.com/images/db6e7706e2c3dcae834e44b0e888c767.jpg');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
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, //缩放比例
});
//设置位置 //添加到地图
// const marker = new mapboxgl.Marker()
// 拖拽的marker点
// const marker = new mapboxgl.Marker({
// draggable: true,
// }).setLngLat([114.30, 30.50]).addTo(map)
// marker.on('drag', () => {
// console.log(`output->marker`, marker.getLngLat())
// })
// 自定义标注
const element = document.createElement('div')
element.id = 'marker'
const marker = new mapboxgl.Marker({
element: element,
draggable: true,
}).setLngLat([114.30, 30.50]).addTo(map)
</script>
</body>
</html>
03、点击事件添加marker点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapbox</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
#marker {
background-image: url('https://img.gejiba.com/images/db6e7706e2c3dcae834e44b0e888c767.jpg');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="delMarker">删除所有marker</button>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
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, //缩放比例
});
//设置位置 //添加到地图
// const marker = new mapboxgl.Marker()
// 拖拽的marker点
// const marker = new mapboxgl.Marker({
// draggable: true,
// }).setLngLat([114.30, 30.50]).addTo(map)
// marker.on('drag', () => {
// console.log(`output->marker`, marker.getLngLat())
// })
// 自定义标注
// const marker = new mapboxgl.Marker({
// element: element,
// draggable: true,
// }).setLngLat([114.30, 30.50]).addTo(map)
let markerArr = []
function addMarker(e) {
createMarker()
markerArr.forEach(item => {
item.setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map)
});
}
function createMarker() {
const element = document.createElement('div')
element.id = 'marker'
const marker = new mapboxgl.Marker({
element: element,
draggable: true,
})
markerArr.push(marker)
console.log(`output->markerArr`,markerArr)
}
map.on('click', addMarker)
// let arr = []
// map.on('click',(e)=>{
// const marker = new mapboxgl.Marker().setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map)
// })
</script>
</body>
</html>
04、添加点要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapbox</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<script src="../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<button onclick="toLog()">查看</button>
<div id="map"></div>
<script>
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, //缩放比例
});
// let data = {
// "type": "Feature",
// "geometry": {
// "type": "Point",
// "coordinates": [114.30, 30.50],
// }
// }
// 利用turf库创建geojson数据
// let data = turf.point([114.30, 30.50],{name:'wh'})
// console.log(`output->data`,data)
// 利用turf创建geojson数据集合
const data = turf.featureCollection([
turf.point([114.4, 30.5], { name: 'Location A' }),
turf.point([114.4, 30.4], { name: 'Location B' }),
turf.point([114.3, 30.5], { name: 'Location C' })
]);
// 要素----》数据源----》图层----》地图
map.on('load', () => {
// 图层添加的形式是堆叠
map.addLayer({
id: 'point', //保证id唯一
type: 'circle', //指定类型为圆,点要素类型是圆
source: {
type: 'geojson',
data: data
},
//绘制参数
paint: {
'circle-opacity': 0.8,
"circle-radius": 15,
"circle-color": "#ff2d51",
"circle-stroke-width": 4,
//设置边线颜⾊
"circle-stroke-color": '#ffcc33'
}
})
})
function toLog(){
// console.log(map.getLayer('point'))
// console.log(`output->map.removeLayer('point')`,map.removeLayer('point'))
map.removeLayer('point')
}
</script>
</body>
</html>
05、添加线要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapbox</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<script src="../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: absolute;
top: 2%;
left: 2%;
z-index: 2;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<button onclick="toLog()">Clear</button>
<div id="map"></div>
<script>
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, //缩放比例
});
const data = turf.lineString([[114.3, 30.5],[114.4, 30.2]],name='line')
// 要素----》数据源----》图层----》地图
map.on('load', () => {
// 图层添加的形式是堆叠
map.addLayer({
id: 'line', //保证id唯一
type: 'line', //指定类型为线,点要素类型是线
source: {
type: 'geojson',
data: data
},
//绘制参数
paint: {
"line-width": 4,
"line-color": '#ff2d51',
"line-opacity":0.6
}
})
})
function toLog(){
// console.log(map.getLayer('point'))
// console.log(`output->map.removeLayer('point')`,map.removeLayer('point'))
map.removeLayer('line')
}
</script>
</body>
</html>
06、添加面要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapbox</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<script src="../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
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: 5, //缩放比例
});
// 要素----》数据源----》图层----》地图
map.on('load', () => {
fetch('https://geo.datav.aliyun.com/areas_v3/bound/420000_full.json').then(res=>res.json()).then(res=>{
map.addLayer({
id:'polygon',
type:'fill', //多边形为fill
source:{
type:'geojson',
data:res
},
//绘制参数
paint:{
'fill-color':'rgb(0,0,255)',
'fill-opacity':0.6
},
})
})
})
</script>
</body>
</html>
07、添加标注
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapbox</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<script src="../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
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, //缩放比例
});
// let data = {
// "type": "Feature",
// "geometry": {
// "type": "Point",
// "coordinates": [114.30, 30.50],
// }
// }
// 利用turf库创建geojson数据
// let data = turf.point([114.30, 30.50],{name:'wh'})
// console.log(`output->data`,data)
// 利用turf创建geojson数据集合
const data = turf.featureCollection([
turf.point([114.34, 30.52], { name: 'Location A' }),
turf.point([114.35, 30.49], { name: 'Location B' }),
turf.point([114.355, 30.51], { name: 'Location C' })
]);
// 要素----》数据源----》图层----》地图
map.on('load', () => {
map.loadImage('position.png', (error, image) => {
map.addImage('location', image)// 加到地图中且取名
// 图层添加的形式是堆叠
map.addLayer({
id: 'symbol', //保证id唯一
type: 'symbol', //指定类型为圆,点要素类型是圆
source: {
type: 'geojson',
data: data
},
//绘制参数
layout: {
'icon-image': 'location',
'text-field': ['get', 'name'], // 显示每个点的 'name' 属性作为文本
'icon-size': 0.3,
'icon-anchor': 'bottom', // 将图标底部与坐标对齐
}
})
})
})
function toLog() {
// console.log(map.getLayer('point'))
// console.log(`output->map.removeLayer('point')`,map.removeLayer('point'))
map.removeLayer('point')
}
</script>
</body>
</html>
08、popup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapbox</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<script src="../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
.mapboxgl-popup-content{
width: 100px;
height: 100px;
background-color: #0073ff;
color: white;
/* border-radius: 50%; */
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
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, //缩放比例
});
var data = {
type: "FeatureCollection",
features: [
{
type: 'Feature',
geometry: {
type: "Point",
coordinates: [114.30, 30.50]
},
properties: {
id: 1001,
name: "武昌"
}
},
{
type: 'Feature',
geometry: {
type: "Point",
coordinates: [114.24, 30.54]
},
properties: {
id: 1002,
name: "汉阳"
}
}
]
}
map.on('load', () => {
// 图层添加的形式是堆叠
map.addLayer({
id: 'city', //保证id唯一
type: 'circle', //指定类型为圆,点要素类型是圆
source: {
type: 'geojson',
data: data
},
//绘制参数
paint: {
'circle-opacity': 0.8,
"circle-radius": 15,
"circle-color": "#ff2d51",
"circle-stroke-width": 4,
//设置边线颜⾊
"circle-stroke-color": '#ffcc33'
}
})
})
map.on('click','city',(e)=>{
// console.log(e.features[0].properties.name);
const popup = new mapboxgl.Popup().setText(e.features[0].properties.name).setLngLat(e.lngLat).addTo(map)
})
// const popup = new mapboxgl.Popup().setText('中心点').setLngLat([114.30, 30.50]).addTo(map)
</script>
</body>
</html>