-
Notifications
You must be signed in to change notification settings - Fork 0
/
index - 副本.html
71 lines (62 loc) · 2.78 KB
/
index - 副本.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Mapbox GL JS and D3.js China Map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
<link href='style.css' rel='stylesheet' /> <!-- 引用外部CSS文件 -->
<title>Random Points Inside GeoJSON Boundary</title>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf"></script> <!-- 引用 Turf.js 库 -->
</head>
<body>
<div id='map'></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="script.js"></script> <!-- 引用外部JavaScript文件 -->
<script>
map.on('load', function () {
// 使用 Fetch API 加载 GeoJSON 数据
fetch('https://mercurydrinker.github.io/GeoMapData_CN-master/citys/320100.json')
.then(response => response.json())
.then(data => {
// 添加 GeoJSON 数据到地图
map.addSource('city-boundary', {
'type': 'geojson',
'data': data
});
// 添加边界图层
map.addLayer({
'id': 'city-boundary-layer',
'type': 'line',
'source': 'city-boundary',
'paint': {
'line-color': 'white', // 边界线颜色
'line-width': 3 // 边界线宽度
}
});
// 使用 Turf.js 在边界内生成随机点
var boundary = turf.polygon(data.features[0].geometry.coordinates);
var numberOfPoints = 100; // 替换为您想要生成的随机点数量
var randomPoints = turf.randomPoint(numberOfPoints, { bbox: turf.bbox(boundary) });
// 添加随机点图层
map.addSource('random-points', {
'type': 'geojson',
'data': randomPoints
});
map.addLayer({
'id': 'random-points-layer',
'type': 'circle',
'source': 'random-points',
'paint': {
'circle-radius': 4,
'circle-color': 'blue' // 随机点颜色
}
});
})
.catch(error => {
console.error('Error fetching GeoJSON:', error);
});
});
</script>
</body>