-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
130 lines (125 loc) · 4.53 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>GEOJSON生成插件</title>
<script>
window.HOST_TYPE = 2
</script>
<script src="https://api.map.baidu.com/getscript?v=3.0&ak=OV7wpmL1NrhoH2Gvua9L7vD6xy9jbW4U&t=1"></script>
<script type="text/javascript" src="./src/bmapGeo.js"></script>
<script type="text/javascript" src="./src/data.js"></script>
</head>
<body>
<div>
<div>基于百度生成GEO数据</div>
<p style="color:red">大数据产品注意:大数据项目地图给后台录入数据的时候,点和区域要分来。也就是学校数据和地区数据不能混在一起。</p>
<div class="map-wrapper">
<div id="container" style="width: 800px; height: 500px;"></div>
<p>当前选中区域和点有:</p>
<ul id="selectList">
</ul>
<p>GEO JSON1:</p>
<div id="result"></div>
</div>
<div>
</div>
</div>
<script>
console.log(globalData)
var geojson = ''
// var geojson = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "bmapId": "feature__1" }, "geometry": { "type": "Point", "coordinates": [116.469151, 39.947221] } }, { "type": "Feature", "properties": { "bmapId": "feature__2" }, "geometry": { "type": "Polygon", "coordinates": [[[116.466276, 39.920665], [116.43983, 39.897198], [116.493297, 39.897198]]] } }] }
var geo = {}
function inita () {
var map = new BMap.Map('container', { enableMapClick: false })
// var point = new BMap.Point(116.404, 39.915)
// map.centerAndZoom(point, 12)
if (!geojson) {
// map.centerAndZoom("北京", 12)
var point = new BMap.Point('104.753337', '31.810175');
map.centerAndZoom(point, 12)
}
map.enableScrollWheelZoom(true) // 允许鼠标滚动
var size = new BMap.Size(10, 20);
map.addControl(new BMap.CityListControl({ // 增加城市切换控件
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size
// 切换城市之间事件
// onChangeBefore: function(){
// alert('before');
// },
// 切换城市之后事件
// onChangeAfter:function(){
// alert('after');
// }
}));
// setTimeout(() => {
// var bdary = new BMap.Boundary()
// bdary.get("遂宁市蓬溪县", function (rs) { //获取行政区域
// console.log(22)
// console.log(rs)
// // map.clearOverlays(); //清除地图覆盖物
// var count = rs.boundaries.length; //行政区域的点有多少个
// if (count === 0) {
// alert('未能获取当前输入行政区域');
// return;
// }
// var pointArray = [];
// for (var i = 0; i < count; i++) {
// var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 1, strokeColor: "#ff00f0", fillOpacity: 0.3 }); //建立多边形覆盖物
// map.addOverlay(ply); //添加覆盖物
// pointArray = pointArray.concat(ply.getPath());
// }
// map.setViewport(pointArray); //调整视野
// });
// }, 6000)
geo = new BmapGeo(map, geojson)
// geo.open(1)
// geo.on('complete', function () {
// console.log(arguments)
// })
geo.showControl({
point: true,
polygon: true,
area: true
})
geo.on('add', function (type, result) {
showResult(result)
})
geo.on('delete', function (type, result) {
showResult(result)
})
geo.on('change', function (type, result) {
showResult(result)
})
globalData.forEach(item => {
geo._drawPointClick({
point: {
lng: item.x,
lat: item.y
}
})
})
// geo._drawPointClick({
// point: {
// lng: '116.57436363773311',
// lat: '39.934828179598014'
// }
// })
console.log('globalData', globalData)
}
inita()
function showResult (text) {
document.getElementById('result').innerText = JSON.stringify(text)
var lis = ''
for (var i = 0; i < text.features.length; i++) {
var feature = text.features[i]
lis += '<li>名字:' + feature.properties.name + '; ' + ' bmapId: ' +feature.properties.bmapId+ '</li>'
}
document.getElementById('selectList').innerHTML = lis
}
</script>
</body>
</html>