This repository has been archived by the owner on Oct 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathturf-area.html
79 lines (61 loc) · 2.04 KB
/
turf-area.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Turf - count</title>
<style>
#mapDiv { width: 800px; height: 440px; }
.map-box{ padding: 10px; }
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/turf.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
</head>
<body onload="initMap()">
<div id="mapDiv"></div>
<script>
var map, infoWindow = new google.maps.InfoWindow({ content: "" });
function initMap() {
// 地圖初始設定
var mapOptions = {
center: new google.maps.LatLng(25.07824, 121.54876),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapElement = document.getElementById("mapDiv");
// Google 地圖初始化
map = new google.maps.Map(mapElement, mapOptions);
map.data.loadGeoJson('taipei.json', {}, function(features){
for (var i = 0; i < features.length; i++) {
features[i].toGeoJson(function(data){
features[i].setProperty('turf_area', turf.area(data));
});
}
});
map.data.addListener('mouseover', function(e) {
if( e.feature.getProperty('PTNAME') ){
map.data.setStyle(function(feature){
if( e.feature.getProperty('PTNAME') === feature.getProperty('PTNAME') ){
return { fillOpacity: 0.55, fillColor: '#2EB0A9', strokeWeight: 2, strokeColor: '#333', strokeOpacity: 1 };
}
});
}
});
map.data.addListener('mouseout', function(e) { map.data.revertStyle(); });
map.data.addListener('click', function(e) {
var anchor = new google.maps.MVCObject();
anchor.set("position", e.latLng);
if( e.feature.getProperty('AREA') ){
var str = [];
str.push('<div class="map-box"><strong>'+ e.feature.getProperty('PTNAME') + '</strong></div>');
str.push('<div class="map-box">面積約: '+ e.feature.getProperty('turf_area')/(1000*1000) + ' 平方公里</div>');
infoWindow.setContent(str.join(''));
infoWindow.open(map, anchor);
}else{
infoWindow.close();
}
});
}
</script>
</body>
</html>