leaflet ver 0.8以降で仕様が変わったため、viewresetではなくmoveendイベントでD3の再描画を行わないと正常に描画されなくなった。
Built with blockbuilder.org
license: mit |
leaflet ver 0.8以降で仕様が変わったため、viewresetではなくmoveendイベントでD3の再描画を行わないと正常に描画されなくなった。
Built with blockbuilder.org
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> | |
<title></title> | |
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" /> | |
<style> | |
html, body { | |
padding: 0px; | |
margin: 0px; | |
} | |
html, body, #map { | |
width: 100%; | |
height: 100%; | |
} | |
.tick line { | |
stroke-dasharray: 2 2 ; | |
stroke: #ccc; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script> | |
<script> | |
!(function(){ | |
"use strict"; | |
var map; | |
d3.json("japan.geojson",main); | |
function main(data) { | |
addLmaps(); | |
drawFeatures(data); | |
} | |
function addLmaps() { | |
map = L.map('map').setView([39.702053 , 141.15448379999998], 5); | |
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
}).addTo(map); | |
L.svg().addTo(map); | |
} | |
function projectPoint(x, y) { | |
var point = map.latLngToLayerPoint(new L.LatLng(y, x)); | |
this.stream.point(point.x, point.y); | |
} | |
function drawFeatures(data) { | |
var svg = d3.select("#map").select("svg"); | |
var transform = d3.geoTransform({point: projectPoint}); | |
var path = d3.geoPath().projection(transform); | |
var featureElement = svg.selectAll("path") | |
.data(data.features) | |
.enter() | |
.append("path") | |
.attr("stroke", "gray") | |
.attr("fill", "green") | |
.attr("fill-opacity", 0.6); | |
map.on("moveend", update); | |
update(); | |
function update() { | |
featureElement.attr("d", path); | |
} | |
} | |
}()); | |
</script> | |
</body> | |
</html> |