-
Notifications
You must be signed in to change notification settings - Fork 2
/
20_Projection.html
176 lines (161 loc) · 4.78 KB
/
20_Projection.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!doctype html>
<html lang="jp">
<head>
<title>OpenLayers 3 example 20 Projection</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/ol.css" type="text/css"/>
<link rel="stylesheet" href="css/sample.css" type="text/css"/>
<style>
body {
padding : 0;
margin : 0;
}
table {
width:80%;
border-collapse: separate;
border-spacing: 0px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
th{
padding: 4px;
text-align: left;
vertical-align: top;
color: #444;
background-color: #ccc;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
td{
padding: 4px;
background-color: #fafafa;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<select>
<option value="EPSG:4326" selected="selcted">EPSG 4326 (WGS 84 -- WGS84 - World Geodetic System 1984 正距円筒図法, used in GPS)</option>
<option value="EPSG:3857">EPSG 3857 (WGS 84 / Pseudo-Mercator -- Spherical Mercator 正角円筒図法, Google Maps, OpenStreetMap, Bing, ArcGIS, ESRI)</option>
<option value="EPSG:4087">EPSG:4087 (WGS 84 / World Equidistant Cylindrical 正積円筒図法)</option>
<option value="ESRI:54009">ESRI:54009 (World Mollweide 正積擬円筒図法)</option>
<option value="ESRI:54032">ESRI:54032 (World Azimuthal Equidistant 正距方位図法)</option>
<select>
<button onclick="javascript:location.reload()">refresh</button>
<div id="map" class="map"></div>
<table>
<tr><th>Code</th><th>Extent</th><th>Meters Per Unit</th><th>Unit</th><th>is Global?</th></tr>
<tr>
<td><span id="code"></span></td>
<td><span id="extent"></span></td>
<td><span id="meter"></span></td>
<td><span id="unit"></span></td>
<td><span id="isGlobal"></span></td>
</tr>
</table>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script>
<script src="https://epsg.io/3410.js"></script>
<script src="https://epsg.io/4087.js"></script>
<script src="https://epsg.io/54009.js"></script>
<script src="https://epsg.io/54032.js"></script>
<script src="js/ol-debug.js"></script>
<script type="text/javascript">
var wgs84Sphere = new ol.Sphere(6378137);
// --(1) Create World Map
function createWorldMapLayer() {
var worldMapSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'js/countries.geojson'
});
var worldMapStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'lightgreen',
width: 2
}),
fill : new ol.style.Fill({
color: 'rgba(250, 255, 250, 1)'
}),
});
var worldMapLayer = new ol.layer.Vector({
source: worldMapSource,
style: worldMapStyle
});
return worldMapLayer;
}
// --(2) Create Circles (Tissot's indicatrix)
function createCircles(projection) {
var featureArray = new ol.Collection();
for (var lat = -60; lat < 90; lat +=30) {
for (var lng = -180; lng < 180; lng += 30) {
var geom = ol.geom.Polygon.circular(wgs84Sphere, [lng, lat], 800000, 32);
geom.transform('EPSG:4326', projection);
featureArray.push(new ol.Feature(geom));
}
}
var circleLayer = new ol.layer.Vector({
source : new ol.source.Vector({
features: featureArray
})
});
return circleLayer;
}
// --(3) Projection Info
function showProjectionInfo(proj) {
$('#code').text(proj.getCode());
var extentAry = proj.getExtent();
if (extentAry) {
$('#extent').text("(" + extentAry[0] + "," + extentAry[1] + ") - (" + extentAry[2] + "," + extentAry[3] + ")");
} else {
$('#extent').text('');
}
$('#meter').text(proj.getMetersPerUnit());
$('#unit').text(proj.getUnits());
$('#isGlobal').text(proj.isGlobal() ? 'Global' : 'Local');
}
// --(4) Create Map
var map = new ol.Map({
target: 'map',
layers: [createWorldMapLayer(), createCircles('EPSG:4326')],
view: new ol.View({
projection : 'EPSG:4326',
center: [0,0],
zoom: 2
})
});
showProjectionInfo(map.getView().getProjection());
// -- (5) Create the graticule component
var graticule = new ol.Graticule({
maxLines: 6,
strokeStyle: new ol.style.Stroke({
color: 'lightblue',
width: 2,
lineDash: [0.5, 4]
})
});
graticule.setMap(map);
// -- (6) Projection Change
$('select').on('change', function(e) {
var projection = $(this).val();
for (var cnt = 0; cnt < 100 && map.getLayers().getLength() > 0; cnt++) {
map.getLayers().forEach(function(elem, idx, ary){
map.removeLayer(elem);
});
}
var center = ol.proj.transform(map.getView().getCenter(), map.getView().getProjection(), projection);
var zoom = map.getView().getZoom();
map.setView(new ol.View({
projection : projection,
center: center,
zoom: zoom
}));
showProjectionInfo(map.getView().getProjection());
map.addLayer(createWorldMapLayer());
map.addLayer(createCircles(projection));
});
</script>
</body>
</html>