Más contenido relacionado
La actualidad más candente (20)
Similar a Leaflet初級編 - Web地図サイトを構築してみよう- (20)
Leaflet初級編 - Web地図サイトを構築してみよう-
- 22. <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<!-- Leafletライブラリ読み込み -->
<script src="./library/leaflet-0.7.3/leaflet.js"></script>
<link href="./library/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<!-- CSS読み込み -->
<link href="./css/stylesheet.css" rel="stylesheet" />
</head>
<body>
<!-- Map読み込み -->
<div id="map"></div>
<!-- JS読み込み -->
<script src="./js/script.js"></script>
</body>
</html>
HTML
- 27. var map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>
contributors'
}).addTo(map);
map.setView([35.680899409847584, 139.76712226867676], 16);
JS
- 38. var t_pale = new
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: "<a
href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html'
target='_blank'>国土地理院</a>"
});
var t_ort = new
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: "<a
href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html'
target='_blank'>国土地理院</a>"
});
var o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>
contributors'
});
var m_mono = new
L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
attribution: "Maptiles by <a href='http://mierune.co.jp/'
target='_blank'>MIERUNE</a>, under CC BY. Data by <a
href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors,
under ODbL."
});
JS
- 39. var lat = 35.680899409847584;
var lng = 139.76712226867676;
var map = L.map('map', {
center: [lat, lng],
zoom: 15,
maxZoom: 18,
zoomControl: true,
layers: [m_mono]
});
var Map_BaseLayer = {
"地理院地図 淡色": t_pale,
"地理院地図 オルソ": t_ort,
"OpenStreetMap 標準": o_std,
"MIERUNE地図 MONO": m_mono
};
L.control.layers(
Map_BaseLayer,
null
).addTo(map);
JS
- 45. var map = L.map('map', {
center: [lat, lng],
zoom: 15,
maxZoom: 18,
zoomControl: false,
layers: [m_mono]
});
JS
- 48. var Map_Point = L.marker(
[35.68089940984, 139.7671222686]
).addTo(map);
var comment = '東京駅だよ!!';
Map_Point.bindPopup(comment);
JS
- 49. var IconPin01 = L.icon({
iconUrl: "./img/pin01.png",
iconSize: [25, 25],
iconAnchor: [0, 25],
popupAnchor: [0, -35]
});
var Map_Point = L.marker(
[35.68089940984, 139.7671222686],
{ icon: IconPin01 }
).addTo(map);
JS
- 51. var Map_Line = L.polyline([
[35.67500798914924,139.75952625274658],
[35.67845922918971,139.76094245910645],
[35.689369743530044,139.76420402526855]
],{
"color": "#2DE9C4",
"weight": 5,
"opacity": 0.6
}).addTo(map);
JS
- 53. var Map_Polygon = L.polygon([
[35.675949251235025,139.76617813110352],
[35.67410157813001,139.77188587188718],
[35.67455478492641,139.77227210998535],
[35.683757812281115,139.77862358093262],
[35.68431553740134,139.77343082427979],
[35.68469897115985,139.77094173431396],
[35.679923346539084,139.76871013641357],
[35.675949251235025,139.76617813110352]
],{
"color": "#E92D63",
"weight": 3,
"opacity": 0.8,
"fillColor": "#562DE9",
"fillOpacity": 0.4
}).addTo(map);
JS
- 55. var Map_AddLayer = {
"Point": Map_Point,
"Line": Map_Line,
"Polygon": Map_Polygon
};
L.control.layers(
Map_BaseLayer,
Map_AddLayer,
{collapsed:false}
).addTo(map);
JS
- 62. var sampledata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":
"urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "P13_003":
"北6条エルムの里公園" }, "geometry": { "type": "Point", "coordinates":
[ 141.34308642, 43.0666937 ] } },
{ "type": "Feature", "properties": { "P13_003":
"宮部記念緑地" }, "geometry": { "type": "Point",
"coordinates": [ 141.33550164, 43.0666937 ] } },
{ "type": "Feature", "properties": { "P13_003":
"偕楽園緑地" }, "geometry": { "type": "Point",
"coordinates": [ 141.34429626, 43.06828667 ] } },
{ "type": "Feature", "properties": { "P13_003":
"八軒コスモス公園" }, "geometry": { "type": "Point", "coordinates":
[ 141.32328053000001, 43.08470141 ] } }
]
};
GeoJSON
- 67. var lat = 42.333174;
var lng = 141.004646;
var IconPin02 = L.icon({
iconUrl: "./img/pin02.png",
iconSize: [25, 25],
iconAnchor: [15, 20],
popupAnchor: [-5, -30]
});
var PointAll = L.layerGroup().addTo(map);
var PointGeojson = L.geoJson(pointdata, {
onEachFeature: function (feature, layer) {
var field ="目標地点: " + feature.properties.OBJECTID;
layer.bindPopup(field);
},
pointToLayer: function (feature, layer) {
if (feature.properties.OBJECTID > 25) {
return L.marker(layer, { icon: IconPin01 });
}else if (feature.properties.OBJECTID <= 25) {
return L.marker(layer, { icon: IconPin02 });
}
}
}).addTo(PointAll);
JS
- 68. var Map_AddLayer = {
"目標地点": PointAll
};
L.control.layers(
Map_BaseLayer,
Map_AddLayer,
{collapsed:false}
).addTo(map);
JS
- 70. var LineAll = L.layerGroup().addTo(map);
var line_geojson = L.geoJson(linedata, {
style: {
"color": "#58BE89",
"weight": 3,
"opacity": 0.7,
"dashArray":[10, 5]
},
onEachFeature: function (feature, layer) {
var field ="距離(m): " + feature.properties.Shape_len;
layer.bindPopup(field);
},
clickable: true
}).addTo(LineAll);
var Map_AddLayer = {
"目標地点": PointAll,
"避難経路": LineAll
};
JS
- 72. var PolygonAll = L.layerGroup().addTo(map);
var PolygonGeojson = L.geoJson(polygondata, {
style: function(feature) {
if (feature.properties.MEANmax_ < 2) {
return {
"color": "#90D6E5",
"weight": 0.5,
"fill": true,
"fillColor":"#90D6E5",
"fillOpacity":0.4
};
}else if (feature.properties.MEANmax_ >= 2 &&
feature.properties.MEANmax_ < 4) {
return {
"color": "#2A5CAA",
"weight": 0.5,
"fill": true,
"fillColor":"#2A5CAA",
"fillOpacity":0.4
};
}else if (feature.properties.MEANmax_ >= 4 &&
feature.properties.MEANmax_ < 6) {
return {
"color": "#F4EE4F",
"weight": 0.5,
"fill": true,
"fillColor":"#F4EE4F",
"fillOpacity":0.6
};
}else if (feature.properties.MEANmax_ >= 6 &&
feature.properties.MEANmax_ < 8) {
JS