Skip to content

Instantly share code, notes, and snippets.

@shimizu

shimizu/README.md

Last active October 25, 2016 01:56
Show Gist options
  • Save shimizu/1d32c3dfc6cec3b337f2 to your computer and use it in GitHub Desktop.
Save shimizu/1d32c3dfc6cec3b337f2 to your computer and use it in GitHub Desktop.
Download ZIP
Smooth path
Raw
README.md

地図上のパスを滑らかに表示

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Smooth path</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#map1{
float: right;
width: 50%;
height: 100%;
}
#map2{
float: left;
width: 50%;
height: 100%;
}
.SvgOverlay {
position: relative;
width: 500px;
height: 500px;
}
.SvgOverlay svg {
position: absolute;
top: -4000px;
left: -4000px;
width: 8000px;
height: 8000px;
}
</style>
</head>
<body>
<div id="map1"></div>
<div id="map2"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script>
//Gmap スタイル指定
var style_array_from_above_here = [{"featureType":"water","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":-78},{"lightness":67},{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"hue":"#e9ebed"},{"saturation":-90},{"lightness":-8},{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":10},{"lightness":69},{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"hue":"#2c2e33"},{"saturation":7},{"lightness":19},{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":-2},{"visibility":"simplified"}]}];
//Google Map 初期化
var mapOpotion = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: style_array_from_above_here,
center: new google.maps.LatLng(24.3408621, 124.1614194),
}
var map1 = new google.maps.Map(document.getElementById('map1'), mapOpotion);
var map2 = new google.maps.Map(document.getElementById('map2'), mapOpotion);
//データセット読み込み
d3.json("line.geojson", function(json){
mapdraw(json);
});
function mapdraw(line) {
var drawAction = function () {
//オーバーレイ設定
var layer = d3.select(this.getPanes().overlayLayer).append("div").attr("class", "SvgOverlay");
var svg = layer.append("svg");
var layergroup = svg.append("g").attr("class", "d3maplayear");
var markerOverlay = this;
var overlayProjection = markerOverlay.getProjection();
//Google Projection作成
var googleMapProjection = function (coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
}
//パスジェネレーター作成
var path = d3.geo.path().projection(googleMapProjection);　
var interpolate = d3.svg.line()
.x(function(d){ return d[0] }).y(function(d){ return d[1] }).interpolate("basis")
var smoothPath = function(pstr){
var sp = path(pstr).replace(/M|Z/, "").split("L").map(function(d){ return d.split(",") });
return interpolate(sp);
}
//オーバーレイ描画イベント
this.draw = draw
function draw() {
currentMapv = this.getMap();
layergroup.selectAll("path.line")
.data(line.features)
.attr("d", function(d){
if (currentMapv == map2) return smoothPath(d);
return path(d);
})
.enter()
.append("path")
.attr({
"d": function(d){
if (currentMapv == map2) return smoothPath(d);
return path(d);
},
"class": "line",
"stroke": "orange",
"stroke-width":4,
"fill": "none",
});
};
};
var overlay1 = new google.maps.OverlayView(); //OverLayオブジェクトの作成
var overlay2 = new google.maps.OverlayView(); //OverLayオブジェクトの作成
overlay1.onAdd = drawAction;
overlay2.onAdd = drawAction;
//作成したSVGを地図にオーバーレイする
overlay1.setMap(map1);
overlay2.setMap(map2);
};
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
line.geojson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
140.80078125,
45.644768217751924
],
[
134.47265625,
41.96765920367816
],
[
138.25195312499997,
40.84706035607122
],
[
131.66015625,
38.34165619279595
],
[
134.12109375,
37.37015718405753
],
[
125.33203125,
31.57853542647338
],
[
130.166015625,
27.371767300523047
],
[
125.94726562499999,
18.646245142670608
],
[
134.560546875,
12.039320557540584
],
[
141.85546875,
14.008696370634658
],
[
150.29296875,
20.632784250388028
],
[
148.0078125,
14.093957177836236
],
[
152.138671875,
16.804541076383455
],
[
151.34765625,
13.239945499286312
],
[
153.193359375,
14.264383087562662
],
[
153.6328125,
11.78132529611229
]
]
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment