shimizu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    高崎市　燃料給油所(GS)　ボロノイ図

D3 ver.4を使ったGoogleMap上でのボロノイ図描画サンプル。
燃料給油所のデータは国土数値情報より。

  
## gasStation.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              gasStation.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
#map {
	width:980px;
	height: 500px;
}

.SvgOverlay {
	position: relative;
	width: 900px;
	height: 600px;
}

.SvgOverlay svg {
	position: absolute;
	top: -4000px;
	left: -4000px;
	width: 8000px;
	height: 8000px;
}

</style>
</head>
<body>
<div id="map"></div>


<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>
<script>
d3.json('gasStation.geojson', main);

function main(pointjson) {

	//Google Map 初期化
	const map = new google.maps.Map(document.getElementById('map'), {
		zoom: 11,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: new google.maps.LatLng(36.322356, 139.013057),
	});


	const overlay = new google.maps.OverlayView(); //OverLayオブジェクトの作成

	//オーバレイ追加
	overlay.onAdd = function () {

		const layer = d3.select(this.getPanes().overlayLayer).append("div").attr("class", "SvgOverlay");
		const svg = layer.append("svg");
		const svgOverlay = svg.append("g").attr("class", "AdminDivisions");
		const pointLayer = svgOverlay.append("g");
		const voronoiLayer = svgOverlay.append("g");
		const markerOverlay = this;
		const overlayProjection = markerOverlay.getProjection();

		//Google Mapの投影法設定
		const googleMapProjection =  coordinates =>  {
			const googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
			const pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
			return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
		}


		//再描画時に呼ばれるコールバック
		overlay.draw = function () {
			const width = svg.node().clientWidth;
			const height = svg.node().clientHeight;

			//母点位置情報
			const pointdata = pointjson.features;
			//ピクセルポジション情報
			const positions = [];

			pointdata.forEach(d => {
				positions.push(googleMapProjection(d.geometry.coordinates)); //位置情報→ピクセル
			});


			//母点表示
			const updatePoint = pointLayer.selectAll(".point").data(positions)
			const enterPoint = updatePoint.enter()
				.append("circle")
				.attr("class", "point")
				.attr("r", 2);

			const point = updatePoint.merge(enterPoint)
				.attr("transform", d =>  `translate(${d[0]}, ${d[1]})` )


			//ボロノイ変換関数
			const voronoi = d3.voronoi()
				.extent([[-1, -1],[width+1, height+1]]);

			//ボロノイ境界ポリゴンデータを生成する
			const polygons = voronoi(positions).polygons();

			//境界表示
			voronoiLayer.selectAll(".cell").remove(); //一旦全消しして際appendする方がスムーズに地図が動いた。
			voronoiLayer.selectAll(".cell").data(polygons)
				.enter()
				.append("path")
				.attr("class", "cell")
				.attr("fill", "none")
				.attr("stroke", "red")
        .attr("d", d => {
            if(!d) return null
            return "M" + d.filter( df => df != null ).join("L") + "Z"
        })
		};

	};

	//作成したSVGを地図にオーバーレイする
	overlay.setMap(map);


};

</script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	}
	#map {
	width:980px;
	height: 500px;
	}

	.SvgOverlay {
	position: relative;
	width: 900px;
	height: 600px;
	}

	.SvgOverlay svg {
	position: absolute;
	top: -4000px;
	left: -4000px;
	width: 8000px;
	height: 8000px;
	}

	</style>
	</head>
	<body>
	<div id="map"></div>


	<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>
	<script>
	d3.json('gasStation.geojson', main);

	function main(pointjson) {

	//Google Map 初期化
	const map = new google.maps.Map(document.getElementById('map'), {
	zoom: 11,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	center: new google.maps.LatLng(36.322356, 139.013057),
	});


	const overlay = new google.maps.OverlayView(); //OverLayオブジェクトの作成

	//オーバレイ追加
	overlay.onAdd = function () {

	const layer = d3.select(this.getPanes().overlayLayer).append("div").attr("class", "SvgOverlay");
	const svg = layer.append("svg");
	const svgOverlay = svg.append("g").attr("class", "AdminDivisions");
	const pointLayer = svgOverlay.append("g");
	const voronoiLayer = svgOverlay.append("g");
	const markerOverlay = this;
	const overlayProjection = markerOverlay.getProjection();

	//Google Mapの投影法設定
	const googleMapProjection = coordinates => {
	const googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
	const pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
	return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
	}



	//再描画時に呼ばれるコールバック
	overlay.draw = function () {
	const width = svg.node().clientWidth;
	const height = svg.node().clientHeight;

	//母点位置情報
	const pointdata = pointjson.features;
	//ピクセルポジション情報
	const positions = [];

	pointdata.forEach(d => {
	positions.push(googleMapProjection(d.geometry.coordinates)); //位置情報→ピクセル
	});


	//母点表示
	const updatePoint = pointLayer.selectAll(".point").data(positions)
	const enterPoint = updatePoint.enter()
	.append("circle")
	.attr("class", "point")
	.attr("r", 2);

	const point = updatePoint.merge(enterPoint)
	.attr("transform", d => `translate(${d[0]}, ${d[1]})` )


	//ボロノイ変換関数
	const voronoi = d3.voronoi()
	.extent([[-1, -1],[width+1, height+1]]);

	//ボロノイ境界ポリゴンデータを生成する
	const polygons = voronoi(positions).polygons();

	//境界表示
	voronoiLayer.selectAll(".cell").remove(); //一旦全消しして際appendする方がスムーズに地図が動いた。
	voronoiLayer.selectAll(".cell").data(polygons)
	.enter()
	.append("path")
	.attr("class", "cell")
	.attr("fill", "none")
	.attr("stroke", "red")
	.attr("d", d => {
	if(!d) return null
	return "M" + d.filter( df => df != null ).join("L") + "Z"
	})
	};

	};

	//作成したSVGを地図にオーバーレイする
	overlay.setMap(map);


	};

	</script>

	</body>
	</html>