在Google地图中将数据分为六边形网格

本文介绍了在Google地图中将数据分为六边形网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在Google地图上以六边形网格显示地理空间数据。为了达到这个目的，给定一个六边形网格大小

var map; var pointCount = 0; var locations = []; var gridWidth = 200000; // hex tile size in meters var bounds; var places = [ [44.13, -69.51], [45.23, -67.42], [46.33, -66.53], [44.43, -65.24], [46.53, -64.15], [44.63, -63.06], [44.73, -62.17], [43.83, -63.28], [44.93, -64.39], [44.13, -65.41], [41.23, -66.52], [44.33, -67.63], [42.43, -68.74], [44.53, -69.65], [40.63, -70.97], ] var SQRT3 = 1.73205080756887729352744634150587236; $(document).ready(function(){ bounds = new google.maps.LatLngBounds(); map = new google.maps.Map(document.getElementById("map_canvas"), {center: {lat: 0, lng: 0}, zoom: 2}); // Adding a marker just so we can visualize where the actual data points are. // In the end, we want to see the hex tile that contain them places.forEach(function(place, p){ latlng = new google.maps.LatLng({lat: place[0], lng: place[1]}); marker = new google.maps.Marker({position: latlng, map: map}) // Fitting to bounds so the map is zoomed to the right place bounds.extend(latlng); }); map.fitBounds(bounds); // Now, we draw our hexagons! (or try to) locations = makeBins(places); locations.forEach(function(place, p){ drawHorizontalHexagon(map, place, gridWidth); }) }); function drawHorizontalHexagon(map,position,radius){ var coordinates = []; for(var angle= 0;angle < 360; angle+=60) { coordinates.push(google.maps.geometry.spherical.computeOffset(position, radius, angle)); } // Construct the polygon. var polygon = new google.maps.Polygon({ paths: coordinates, position: position, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, geodesic: true }); polygon.setMap(map); } // Below is my attempt at porting binner.py to Javascript. // Source: https://github.com/coryfoo/hexbins/blob/master/hexbin/binner.py function distance(x1, y1, x2, y2){ console.log(x1, y1, x2, y2); result = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2))); console.log("Distance: ", result); return result; } function nearestCenterPoint(value, scale){ div = (value / (scale / 2)); mod = value % (scale / 2); if(div % 2 == 1){ increment = 1; } else { increment = 0; } rounded = (scale / 2) * (div + increment); if(div % 2 === 0){ increment = 1; } else { increment = 0; } rounded_scaled = (scale / 2) * (div + increment) result = [rounded, rounded_scaled]; return result; } function makeBins(data){ bins = []; data.forEach(function(place, p){ x = place[0]; y = place[1]; console.log("Original location:", x, y); px_nearest = nearestCenterPoint(x, gridWidth); py_nearest = nearestCenterPoint(y, gridWidth * SQRT3); z1 = distance(x, y, px_nearest[0], py_nearest[0]); z2 = distance(x, y, px_nearest[1], py_nearest[1]); console.log(z1, z2); if(z1 > z2){ bin = new google.maps.LatLng({lat: px_nearest[0], lng: py_nearest[0]}); console.log("Final location:", px_nearest[0], py_nearest[0]); } else { bin = new google.maps.LatLng({lat: px_nearest[1], lng: py_nearest[1]}); console.log("Final location:", px_nearest[1], py_nearest[1]); } bins.push(bin); }) return bins; }

for (var i = 0; i < hexgrid.length; i++) { if (google.maps.geometry.poly.containsLocation(place, hexgrid[i])) { if (!hexgrid[i].contains) { hexgrid[i].contains = 0; } hexgrid[i].contains++ } }