-
Notifications
You must be signed in to change notification settings - Fork 0
/
leaflet_imgoverlay_world.html
78 lines (64 loc) · 2.12 KB
/
leaflet_imgoverlay_world.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script type="text/javascript" src="./proj4.js"></script>
<script type="text/javascript" src="./proj4leaflet.js"></script>
<script type="text/javascript" src="./L.Graticule.js"></script>
<style>
html,
body {
height: 95%;
}
#map {
width: 1300px;
height: 850px;
#background: #e5ffff;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var lcc_attrs = {
proj4string: "+proj=eqc +lat_0=0 +lat_ts=0 +lon_0=126 +x_0=0 +y_0=0 +ellps=WGS84 +units=m +no_defs",
resolutions: [ 31000, 15733.3333, 10488.8889,
6992.5296, 1655.8025, 1103.8683,
735.9122, 490.6081, 327.0721, 218.0481],
zoom: {
min: 0,
max: 8
}
};
var lcc_crs = new L.Proj.CRS('EPSG:32662', lcc_attrs.proj4string,
{
resolutions: lcc_attrs.resolutions //rss
}
);
var map = L.map('map', {
maxZoom: lcc_attrs.zoom.max, //6,
minZoom: lcc_attrs.zoom.min, //0,
crs: lcc_crs,
continuousWorld: false
}).setView([0, 126], 0);
L.graticule({ interval:20, style:{dashArray:4, color:'#333', weight:1}, pmIgnore:true, snapIgnore:true}).addTo(map);
fnGeoJson();
function fnGeoJson() {
var url = "https://raw.githubusercontent.com/hunter3789/geojson/b1a289dfc2186eb3b7a0d88a8e1211ab601d9d6d/countries.geojson";
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.timeout = 60000;
xhr.overrideMimeType("application/x-www-form-urlencoded; charset=euc-kr");
xhr.onreadystatechange = function () {
if (xhr.readyState != 4 || xhr.status != 200) return;
else {
var json = JSON.parse(xhr.responseText);
L.geoJSON(json, {style: {color: "black", fillColor: "#ffffe5", weight: 1, fillOpacity: 0}}).addTo(map);
}
};
xhr.send();
}
</script>
</body>
</html>