Mapbox-图层
GeoJSON
一种基于JSON的地理空间数据格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据
GeoJSON单个要素:
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [114, 30]
}
}
MapBox GL JS source数据:
{
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [114.3, 30.5]
},
properties: {
title: 'My Point'
}
}
]
}
}
要素类型:
- 点
{
"type": "Point",
"coordinates": [114.3, 30.5]
}
- 多点
{
"type": "MultiPoint",
"coordinates": [
[114.3, 30.5],
[116, 30.5]
]
}
- 线
{
"type": "LineString",
"coordinates": [
[114.3, 30.5],
[116, 30.5]
]
}
- 多线
{
"type": "MultiLineString",
"coordinates": [
[
[114.3, 30.5],
[116, 30.5]
],
[
[114.3, 31.5],
[116, 31.5]
]
]
}
- 多边形
{
"type": "Polygon",
"coordinates": [
[
[114.3, 30.5],
[116, 30.5],
[116, 31.5],
[114.3, 31.5],
[114.3, 30.5]
]
]
}
- 多多边形
{
"type": "MultiPolygon",
"coordinates": [
[
[
[114.3, 30.5],
[116, 30.5],
[116, 31.5],
[114.3, 31.5],
[114.3, 30.5]
]
],
[
[
[114.3, 32.5],
[116, 32.5],
[116, 33.5],
[114.3, 33.5],
[114.3, 32.5]
]
]
]
}
- 几何集合
{
"type": "GeometryCollection",
"geometries": [
{
"type": "Point",
"coordinates": [114.3, 30.5]
},
{
"type": "LineString",
"coordinates": [
[114.3, 30.5],
[116, 30.5]
]
}
]
}
加载图层
加载关系: map=>source=>layer=>geometry
图层类型:
-
Circle（圆形）：用于在地图上绘制圆形标记，可以设置圆形的半径、颜色、透明度等属性。
-
Line（线）：用于在地图上绘制线条，可以设置线条的颜色、宽度、透明度等属性。
-
Fill（填充）：用于在地图上绘制填充区域，可以设置填充的颜色、透明度等属性。
-
Symbol（符号）：用于在地图上添加文本或图标标记，可以设置符号的字体、颜色、大小等属性。
-
Raster（栅格）：用于在地图上显示栅格图像，可以设置图像的透明度、亮度等属性。
-
Hillshade（山体阴影）：用于在地图上显示山体阴影效果，可以设置阴影的颜色、透明度等属性。
-
通过source加载layer:
// 定义数据
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [114.3, 30.5],
},
},
],
}
// 加载数据
map.on('load', () => {
// 创建数据源
map.addSource('wuhan', {
type: 'geojson',
data,
})
// 创建图层
map.addLayer({
id: 'wuhan-circle',
type: 'circle',
source: 'wuhan',
paint: {
'circle-radius': 15,
'circle-color': '#ff2d51',
'circle-opacity': 0.5,
},
})
})
- 直接加载layer
map.on('load', () => {
// 创建图层
map.addLayer({
id: 'hubei-fill',
type: 'circle',
source: {
type: 'geojson',
data,
},
paint: {
'circle-radius': 15,
'circle-color': '#ff2d51',
},
})
})
图形绘制
基于坐标绘制
- 绘制点
map.on('load', () => {
map.addSource('point', {
type: 'geojson',
data: {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [114.3, 30.5],
},
},
})
map.addLayer({
id: 'Point',
type: 'circle',
source: 'point',
paint: {
'circle-opacity': 0.8,
'circle-radius': 15,
'circle-color': '#ff2d51',
//设置边线
'circle-stroke-opacity': 0.5,
'circle-stroke-width': 4,
'circle-stroke-color': '#ffcc33',
},
})
})
map.on('click', () => {
// 设置点的属性
map.setPaintProperty('Point', 'circle-color', '#faafee')
})
- 绘制线
map.on('load', () => {
addLine()
})
function addLine() {
var geometryLine = {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[114.3, 30.5],
[116, 30.5],
],
},
}
map.addLayer({
id: 'Line',
type: 'line',
source: {
type: 'geojson',
data: geometryLine,
},
//设置线型
layout: {
//线条末端样式
'line-cap': 'round',
//线条相交处样式
'line-join': 'round',
},
//设置绘制参数
paint: {
'line-color': 'red',
'line-width': 4,
'line-opacity': 0.6,
},
})
}
- 绘制圆
map.on('load', () => {
addCircle()
})
function addCircle() {
var geometryCircle = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [114.3, 30.5],
},
}
map.addLayer({
id: 'Circle',
type: 'circle',
source: {
type: 'geojson',
data: geometryCircle,
},
//设置绘制参数
paint: {
'circle-radius': 30,
'circle-color': 'white',
//设置边线宽度
'circle-stroke-width': 2,
'circle-stroke-color': '#ffcc33',
},
})
}
- 绘制矩形
map.on('load', () => {
addRectangle()
})
function addRectangle() {
var geometryRectangle = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[114.3, 30.5],
[114.5, 30.5],
[114.5, 30.6],
[114.3, 30.6],
],
],
},
},
],
}
map.addLayer({
id: 'Rectangle',
//指定类型为fill（填充区域）
type: 'fill',
source: {
type: 'geojson',
data: geometryRectangle,
},
paint: {
'fill-color': '#ffcc33',
'fill-opacity': 0.9,
},
})
}
交互式绘制
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css"
type="text/css">
const draw = new MapboxDraw({
//不允许使用键盘交互绘制
keybindings: false,
//设置为ture，可按住shift+拉框来拾取图形
boxSelect: true,
//点击要素时的响应半径（像素单位）
clickBuffer: 5,
//默认控件显示方式。如果设置为true，则会添加所有的绘图控件
displayControlsDefault: false,
//添加指定的绘制控件
controls: {
//绘制线控件
line_string: true,
//绘制多边形控件
polygon: true,
//绘制点控件
point: true,
//删除图形控件
trash: true,
},
})
//将绘制控件添加到左上角
map.addControl(draw, 'top-left')
map.on('draw.create', handleDraw)
function handleDraw(e) {
var position = e.features[0].geometry.coordinates
console.log(position)
}
标注
对地图上某个点的说明, 包括
- 图片标注
- 文本标注
Markers and controls API: Mapbox GL JS
默认标注
map.on('load', () => {
// 1. 创建标注对象
const marker = new mapboxgl.Marker()
// 2. 设置属性
marker.setLngLat([114.3, 30.5]) // 设置经纬度
// 3. 添加到map地图
marker.addTo(map)
})
可拖动标注
var marker = new mapboxgl.Marker({
draggable: true,
}).setLngLat([114.3, 30.5])
map.on('load', () => {
marker.addTo(map)
})
marker.on('dragend', onDragEnd)
function onDragEnd() {
var lngLat = marker.getLngLat()
console.log(lngLat)
}
| marker的属性 | 说明 |
|---|---|
| draggable(boolean) | true/false 是否可以拖动 |
| color | 设置颜色 |
| rotation | 旋转 |
自定义标注
<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>
<body>
<!-- 2. 创建地图容器 -->
<div id="map"></div>
<!-- 3. 创建地图对象 -->
<script>
const map = new mapboxgl.Map({
container: 'map', // 指定地图容器的id
style: 'mapbox://styles/mapbox/streets-v12', // 地图样式/风格
center: [114.3, 30.5], // 中心坐标点
zoom: 12, // 缩放比例
projection: 'equalEarth', // 投影方式
})
// <div id="marker"></div>
const element = document.createElement('div')
element.id = 'marker'
const marker = new mapboxgl.Marker({
element: element,
}).setLngLat([114.3, 30.5])
map.on('load', () => {
marker.addTo(map)
})
</script>
</body>
</html>
