### 回答1：
这是一个示例代码：
map.on('load', function () {
map.addSource('places', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'description': '<strong>示例地点1</strong><p>这是一个示例地点。</p>',
'icon': 'theatre'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.03238901390978, 38.913188059745586]
}
},
{
'type': 'Feature',
'properties': {
'description': '<strong>示例地点2</strong><p>这是另一个示例地点。</p>',
'icon': 'theatre'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.03238901390978, 38.913188059745586]
}
}
]
}
});
// 添加气泡显示
属性信息
map.addLayer({
'id': 'places',
'type': 'symbol',
'source': 'places',
'
layout': {
'icon-image': '{icon}-15',
'icon-allow-overlap': true
}
});
// 添加气泡弹出框
map.on('click', 'places', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
// 构建弹出框
new
mapboxgl.Popup()
.setLngLat(coordinates)
.set
HTML(description)
.addTo(map);
});
});
### 回答2：
以下是一个使用
Mapbox的面图形并在气泡
中显示
属性信息的简单示例代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset='utf-8' />
<title>
Mapbox 面图形 气泡显示
属性信息</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.
mapbox.com/
mapbox-gl-js/v2.3.1/
mapbox-gl.js'></script>
<link href='https://api.
mapbox.com/
mapbox-gl-js/v2.3.1/
mapbox-gl.
css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOUR_
MAPBOX_ACCESS_TOKEN'; // 在https://www.
mapbox.com获取到的访问令牌
// 初始化地图
var map = new
mapboxgl.Map({
container: 'map',
style: '
mapbox://styles/
mapbox/streets-v11',
center: [-74.5, 40], // 默认
中心点
zoom: 9 // 默认缩放级别
});
// 添加面图形数据源
map.on('load', function () {
map.addSource('polygon', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[[-74.0, 40.7], [-74.0, 40.9], [-73.8, 40.9], [-73.8, 40.7], [-74.0, 40.7]]
]
},
'properties': {
'name': '示例区域',
'description': '这是一个示例区域的
属性信息'
}
}
});
// 添加面图形
图层
map.addLayer({
'id': 'polygon-layer',
'type': 'fill',
'source': 'polygon',
'
layout': {},
'
paint': {
'fill-color': '#088',
'fill-opacity': 0.4
}
});
// 添加气泡弹出框
var popup = new
mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
// 当鼠标悬停在面图形上时显示气泡
map.on('mousemove', 'polygon-layer', function (e) {
// 获取面图形的
属性信息
var properties = e.features[0].properties;
// 设置气泡内容
var popupContent = '<h3>' + properties.name + '</h3><p>' + properties.description + '</p>';
// 设置气泡位置并显示
popup.setLngLat(e.lngLat).set
HTML(popupContent).addTo(map);
});
// 当鼠标移出面图形时隐藏气泡
map.on('mouseleave', 'polygon-layer', function () {
popup.remove();
});
});
</script>
</body>
</
html>
```
请确保替换`YOUR_
MAPBOX_ACCESS_TOKEN`为您在
Mapbox上获取到的访问令牌。此示例代码会在地图上显示一个示例区域的面图形，并在鼠标悬停时以气泡的形式显示该区域的
属性信息。您可以根据需要修改示例区域的坐标和
属性信息。
### 回答3：
下面是一个使用
Mapbox的面图形（Polygon）和气泡（Popup）来显示
属性信息的样例代码：
```
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8" />
<title>
Mapbox 面图形气泡示例</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.
mapbox.com/
mapbox-gl-js/v2.3.0/
mapbox-gl.js'></script>
<link href='https://api.
mapbox.com/
mapbox-gl-js/v2.3.0/
mapbox-gl.
css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOUR_
MAPBOX_ACCESS_TOKEN'; // 替换为你的
Mapbox Access Token
// 初始化地图对象
var map = new
mapboxgl.Map({
container: 'map',
style: '
mapbox://styles/
mapbox/streets-v11',
center: [-122.4194, 37.7749], // 设置地图
中心坐标
zoom: 12 // 设置初始缩放级别
});
// 添加面图形
map.on('load', function () {
map.addSource('my-polygon', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[-122.422, 37.78],
[-122.422, 37.76],
[-122.419, 37.76],
[-122.419, 37.78],
[-122.422, 37.78]
]
]
},
'properties': {
'name': '示例面图形',
'description': '这是一个示例的面图形对象'
}
}
});
map.addLayer({
'id': 'my-polygon',
'type': 'fill',
'source': 'my-polygon',
'
layout': {},
'
paint': {
'fill-color': '#088',
'fill-opacity': 0.8
}
});
// 添加气泡
var popup = new
mapboxgl.Popup({ closeOnClick: false, closeButton: false });
map.on('mousemove', 'my-polygon', function (e) {
var coordinates = e.lngLat.toArray();
var properties = e.features[0].properties;
popup.setLngLat(coordinates)
.set
HTML('<h3>' + properties.name + '</h3><p>' + properties.description + '</p>')
.addTo(map);
});
});
</script>
</body>
</
html>
```
以上代码示例实现了以下功能：
1. 创建一个
Mapbox地图对象，设置初始配置参数。
2. 添加一个面图形表示示例，通过`geojson`数据定义了一个多边形的边界坐标，并设置了相关
属性信息。
3. 通过添加
图层来渲染这个面图形对象。
4. 监听鼠标移动事件，在鼠标移动到面图形上时，使用气泡显示面图形的
属性信息。
扫一扫
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
