Skip to content

Instantly share code, notes, and snippets.

@junkor-1011

junkor-1011/README.md

Last active November 28, 2020 13:17
Show Gist options
  • Save junkor-1011/1024411a48bbcfaa146346cf45e094db to your computer and use it in GitHub Desktop.
Save junkor-1011/1024411a48bbcfaa146346cf45e094db to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet Read GeoJSON Test2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<title>Leaflet Read GeoJSON-Tile(LineString) Test</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.min.js"></script>
<script src="https://unpkg.com/[email protected]/leaflet-hash.js"></script>
<style>
#map {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.leaflet-control-container::after {
content: url(https://maps.gsi.go.jp/image/map/crosshairs.png);
z-index: 1000;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Initalize map
const map = L.map("map", L.extend({
// minZoom: 2,
minZoom: 14,
zoom: 18,
maxZoom: 22,
center: [35.6, 139.6],
}, L.Hash.parseHash(location.hash)));
map.zoomControl.setPosition("bottomright");
L.hash(map);
map.on('click', function(e) {
let popup = L.popup()
.setLatLng(e.latlng)
.setContent(`
<p class="p-small">
lat: ${e.latlng.lat}
</p>
<p class="p-small">
lng: ${e.latlng.lng}
</p>
`)
.openOn(map);
} );
// GeoJSON VectorTileLayer
const gsi_river = Object.assign(new L.GridLayer({
attribution: "<a href='https://github.com/gsi-cyberjapan/experimental_rvrcl' target='_blank'>地理院地図情報（河川中心線）</a>",
minZoom: 4,
maxZoom: 22,
maxNativeZoom: 16,
minNativeZoom: 16,
}), {
createTile: function(coords) {
const template = "https://cyberjapandata.gsi.go.jp/xyz/experimental_rvrcl/{z}/{x}/{y}.geojson";
const div = document.createElement('div');
div.group = L.layerGroup();
fetch(L.Util.template(template, coords)).then(a => a.ok ? a.json() : null).then(geojson => {
if (!div.group) return;
if (!this._map) return;
if (!geojson) return;
geojson.features.filter(x => x.properties.rivCtg.match(/^一級河川/)).forEach(x => {
const lines = x.geometry.type === "LineString" ? [x.geometry.coordinates] : x.geometry.coordinates;
lines.forEach(line => {
const head = line[0];
const tail = line[line.length - 1];
let bearing = turf.bearing(head, tail);
if (bearing < 0) bearing += 180;
if (bearing > 90) bearing -= 90;
div.group.addLayer(L.polyline(line.map(a => [a[1], a[0]]), {
color: `hsl(${45 - bearing*4},90%,45%)`
}).bindPopup("type: " + x.properties.type));
});
div.group.addTo(this._map);
}
)});
return div;
}
}).on("tileunload", function(e) {
if (e.tile.group) {
if (this._map) this._map.removeLayer(e.tile.group);
delete e.tile.group;
}
});
// basemap layers
const osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors",
// minZoom: 10,
maxNativeZoom: 18,
maxZoom: 22,
});
// Stamen Terrain
const stamen_terrain = L.tileLayer(
'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png',
{
attribution: '<a id="home-link" target="_top" href="http://maps.stamen.com/">Map tiles</a> by <a target="_top" href="http://stamen.com">Stamen Design</a>, under <a target="_top" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data © <a target="_top" href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>.',
maxNativeZoom: 14,
maxZoom: 22,
});
const stamen_toner = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
{
attribution: '<a id="home-link" target="_top" href="../">Map tiles</a> by <a target="_top" href="http://stamen.com">Stamen Design</a>, under <a target="_top" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
maxNativeZoom: 18,
maxZoom: 22,
});
const stamen_watercolor = L.tileLayer(
'http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png',
{
attribution: 'Map tiles by <a href="https://stamen.com/" target="_blank">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>. © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors.',
maxNativeZoom: 16,
maxZoom: 22,
});
// ArcGIS World Imaginary
const arcgis_world_imaginary = L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxNativeZoom: 17,
maxZoom: 22,
});
const gsi_std = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
{
attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル（標準地図）</a>",
maxNativeZoom: 18,
maxZoom: 22,
opacity:1
});
const gsi_pale = L.tileLayer(
'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
{
attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル（淡色地図）</a>",
maxNativeZoom: 18,
maxZoom: 22,
});
const gsi_ort = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',
{
attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル（オルソ）</a>",
maxNativeZoom: 17,
maxZoom: 22,
opacity:0.9
});
const gsi_blank = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',
{
attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル（白地図）</a>",
maxNativeZoom: 14,
maxZoom: 22,
opacity:1,
});
const gsi_relief = L.tileLayer(
"https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",
{
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>",
maxNativeZoom: 15,
maxZoom: 22,
});
L.control.scale({
imperial: false,
metric: true,
}).addTo(map);
const baseLayers ={
"地理院タイル（標準地図）": gsi_std,
"地理院タイル（淡色地図）": gsi_pale,
"地理院タイル（オルソ）": gsi_ort,
"地理院タイル（白地図）": gsi_blank,
"地理院タイル（標高図）": gsi_relief,
"Stamen Terrain": stamen_terrain,
"Stamen Toner": stamen_toner,
"Stamen WaterColor": stamen_watercolor,
"World Imaginary": arcgis_world_imaginary,
'osm': osm.addTo(map),
};
const overlays = {"gsi_river": gsi_river};
L.control.layers(baseLayers, overlays,{position:'topright',collapsed:true}).addTo(map);
const hash = L.hash(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment