Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active February 19, 2019 07:59
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shimizu/925bd1a92b63753608ef to your computer and use it in GitHub Desktop.
Save shimizu/925bd1a92b63753608ef to your computer and use it in GitHub Desktop.
leaflet.js Voronoi Diagram
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-language" content="ja">
<title>Mapbox(leaflet.js) Voronoi Diagram</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
<style>
html, body{
height: 100%;
padding: 0px;
margin: 0px;
}
#map {
width:100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
<script>
d3.json('point.geojson', function(geojson){
mapDraw(geojson);
});
function mapDraw(geojson){
var pointdata = geojson.features;
//leaflet初期設定
var map = L.map('map');
map.setView([36.3894816, 139.0634281], 14);
map.on("viewreset moveend", update);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Map data &copy; ' + mapLink,
maxZoom: 18
}
).addTo(map);
// オーバーレイレイヤ追加
map._initPathRoot();
var svg = d3.select("#map").select("svg");
var g = svg.append("g").attr("class", "leaflet-zoom-hide");
//ボロノイジェネレーター
var voronoi = d3.geom.voronoi()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
update();
function update() {
//ピクセルポジション情報保存用
var positions = [];
//位置情報→ピクセルポジション変換
pointdata.forEach(function(d) {
var latlng = new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]);
positions.push({
x :map.latLngToLayerPoint(latlng).x,
y :map.latLngToLayerPoint(latlng).y
});
});
//前サークルを削除
d3.selectAll('.AEDpoint').remove();
//サークル要素を追加
var circle = g.selectAll("circle")
.data(positions)
.enter()
.append("circle")
.attr("class", "AEDpoint")
.attr({
"cx":function(d, i) { return d.x; },
"cy":function(d, i) { return d.y; },
"r":2,
fill:"red"
});
//ボロノイ変換関数
var polygons = voronoi(positions);
polygons.forEach(function(v) { v.cell = v; });
//前ボロノイPathを削除
svg.selectAll(".volonoi").remove();
//path要素を追加
svg.selectAll("path")
.data(polygons)
.enter()
.append("svg:path")
.attr("class", "volonoi")
.attr({
"d": function(d) {
if(!d) return null;
return "M" + d.cell.join("L") + "Z";
},
stroke:"black",
fill:"none"
});
}
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment