地図上のパスを滑らかに表示
Last active
October 25, 2016 01:56
-
-
Save shimizu/1d32c3dfc6cec3b337f2 to your computer and use it in GitHub Desktop.
Smooth path
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment