如何制作Google Maps API v3六边形平铺地图，最好是基于坐标的地图？ [英] How can I make a Google Maps API v3 hexagon tiled map, preferably coordinate-based?
本文介绍了如何制作Google Maps API v3六边形平铺地图，最好是基于坐标的地图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
http://econym.org.uk/gmap/example_eshapes.htm 有一个谷歌地图API v2如何平铺六边形的例子，虽然实施规模很痛苦：它有一个中心六边形，然后在相应的方向与它相邻的六个六边形，然后（在准递归中）与六边形中的一个相邻的三个六边形毗邻原六角形。如何创建一个类似的效果，但最好用平铺，以便我指定（无递归堆），我想要原点东侧有六个六角形的瓦片和四个六角形的60°角;从东西方向的瓦片六个六边形到东边？
我正在寻找基于坐标的东西，最好是简单的东西。我查看了 http://www.rootmetrics.com/check-coverage/，它的工作原理，但代码耦合到他们的具体页面，标记等，所以模仿他们的代码将需要一些解开。
解决方案
我移植了eshapes（和 http://econym.org.uk/gmap /example_eshapes.htm ）到Google Maps API v3
http://www.geocodezip.com/v3_MW_example_eshapes.html
不清楚这是你想要的，但它似乎是来自你问题的标题。
代码段：
var map = null;函数initMap（）{var myOptions = {zoom：8，center：new google.maps.LatLng（43，-79.5），mapTypeControl：true，mapTypeControlOptions：{style：google.maps.MapTypeControlStyle.DROPDOWN_MENU}，navigationControl：true，mapTypeId：google.maps.MapTypeId。 ROADMAP} map = new google.maps.Map（document.getElementById（map），myOptions）; // ===六角形网格=== var point = new google.maps.LatLng（42，-78.8）; map.setCenter（点）; var hex1 = google.maps.Polygon.RegularPoly（point，25000，6，90，＃000000，1,1，＃00ff00，0.5）; hex1.setMap（地图）; var d = 2 * 25000 * Math.cos（Math.PI / 6）; var hex30 = google.maps.Polygon.RegularPoly（EOffsetBearing（point，d，30），25000,690，＃000000，1,1，＃00ffff，0.5）; hex30.setMap（地图）; var hex90 = google.maps.Polygon.RegularPoly（EOffsetBearing（point，d，90），25000,690，＃000000，1,1，＃ffff00，0.5）; hex90.setMap（地图）; var hex150 = google.maps.Polygon.RegularPoly（EOffsetBearing（point，d，150），25000,690，＃000000，1,1，＃00ffff，0.5）; hex150.setMap（地图）; var hex210 = google.maps.Polygon.RegularPoly（EOffsetBearing（point，d，210），25000,690，＃000000，1,1，＃ffff00，0.5）; hex210.setMap（地图）; hex270 = google.maps.Polygon.RegularPoly（EOffsetBearing（point，d，270），25000,690，＃000000，1,1，＃ffff00，0.5）; hex270.setMap（地图）; var hex330 = google.maps.Polygon.RegularPoly（EOffsetBearing（point，d，330），25000,690，＃000000，1,1，＃ffff00，0.5）; hex330.setMap（地图）; var hex30_2 = google.maps.Polygon.RegularPoly（EOffsetBearing（EOffsetBearing（point，d，30），d，90），25000,690，＃000000，1,1，＃ff0000，0.5）; hex30_2.setMap（地图）; var hex150_2 = google.maps.Polygon.RegularPoly（EOffsetBearing（EOffsetBearing（point，d，150），d，90），25000,690，＃000000，1,1，＃0000ff，0.5） hex150_2.setMap（地图）; var hex90_2 = google.maps.Polygon.RegularPoly（EOffsetBearing（EOffsetBearing（point，d，90），d，90），25000,690，＃000000，1,1＃00ff00，0.5）; （）; // EShapes.js ////基于一个想法和一些代码行，通过thetoy/ ///此Javascript由Mike Williams //社区教会Javascript团队提供// http://www.bisphamchurch.org.uk/ // http://econym.org.uk/gmap/////这项工作是根据知识共享协议授权的// http://creativecommons.org/licenses/by/2.0/uk/////版本0.0 04 / Apr / 2008尚未完成//版本1.0 10 / Apr / 2008初始发布//版本3.0 12 / Oct / 2011移植到v3由Lawrence Ross // EShapes.jsgoogle.maps.Polygon.Shape =函数的子集（point，r1，r2，r3，r4，rotation，vertexCount，strokeColour，strokeWeight， Strokepacity，fillColour，fillOpacity，opts，tilt）{var rot = -rotation * Math.PI / 180; var points = []; var latConv = google.maps.geometry.spherical.computeDistanceBetween（point，new google.maps.LatLng（point.lat（）+ 0.1，point.lng（）））* 10; var lngConv = google.maps.geometry.spherical.computeDistanceBetween（point，new google.maps.LatLng（point.lat（），point.lng（）+ 0.1））* 10; var step =（360 / vertexCount）|| 10; var flop = -1; if（tilt）{var I1 = 180 / vertexCount; } else {var I1 = 0; } for（var i = I1; i <= 360.001 + I1; i + = step）{var r1a = flop？ r1：r3; var r2a =翻牌？ r2：r4; flop = -1 - flop; var y = r1a * Math.cos（i * Math.PI / 180）; var x = r2a * Math.sin（i * Math.PI / 180）; var lng =（x * Math.cos（rot）-y * Math.sin（rot））/ lngConv; var lat =（y * Math.cos（rot）+ x * Math.sin（rot））/ latConv; points.push（new google.maps.LatLng（point.lat（）+ lat，point.lng（）+ lng））; } {google.maps.Polygon.RegularPoly = function（point，point， radius，vertexCount，rotation，strokeColour，strokeWeight，Strokepacity，fillColour，fillOpacity，opts）{rotation = rotation || 0; var tilt =！（vertexCount& 1）;返回google.maps.Polygon.Shape（点，半径，半径，半径，旋转，vertexCount，strokeColour，strokeWeight，Strokepacity，fillColour，fillOpacity，opts，tilt）}函数EOffsetBearing（point，dist，bearing）{var latConv = google.maps.geometry.spherical.computeDistanceBetween（point，new google.maps.LatLng（point.lat（）+ 0.1，point.lng（）））* 10; var lngConv = google.maps.geometry.spherical.computeDistanceBetween（point，new google.maps.LatLng（point.lat（），point.lng（）+ 0.1））* 10; var lat = dist * Math.cos（bearing * Math.PI / 180）/ latConv; var lng = dist * Math.sin（bearing * Math.PI / 180）/ lngConv; return new google.maps.LatLng（point.lat（）+ lat，point.lng（）+ lng）}
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
http://econym.org.uk/gmap/example_eshapes.htm has a Google Maps API v2 example of how to tile hexagons, although the implementation scales painfully: it has a center hexagon, then six hexagons adjacent to it in the appropriate directions, then (in quasi-recursion) three hexagons adjacent to one of the hexagons adjacent to the original hexagon. And it has a nice border with transparent fill.
How can I create a similar effect, but preferably with tiling so that I specify (without mounds of recursion) that I want a tile six hexagons to the east of the origin and four hexagons 60° north of east from the tile six hexagons to the east?
I'm looking for something coordinate-based and preferably simple. I've looked at the source for http://www.rootmetrics.com/check-coverage/ and it works, but the code is coupled to their specific page, markup, etc., so imitating their code would take a bit of untangling.
解决方案
I ported eshapes (and http://econym.org.uk/gmap/example_eshapes.htm) to the Google Maps API v3
http://www.geocodezip.com/v3_MW_example_eshapes.html
Not clear if that is what you are looking for, but it seems to be from the title of your question.
code snippet:
var map = null;
function initMap() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43, -79.5),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"),
myOptions);
// === Hexagonal grid ===
var point = new google.maps.LatLng(42, -78.8);
map.setCenter(point);
var hex1 = google.maps.Polygon.RegularPoly(point, 25000, 6, 90, "#000000", 1, 1, "#00ff00", 0.5);
hex1.setMap(map);
var d = 2 * 25000 * Math.cos(Math.PI / 6);
var hex30 = google.maps.Polygon.RegularPoly(EOffsetBearing(point, d, 30), 25000, 6, 90, "#000000", 1, 1, "#00ffff", 0.5);
hex30.setMap(map);
var hex90 = google.maps.Polygon.RegularPoly(EOffsetBearing(point, d, 90), 25000, 6, 90, "#000000", 1, 1, "#ffff00", 0.5);
hex90.setMap(map);
var hex150 = google.maps.Polygon.RegularPoly(EOffsetBearing(point, d, 150), 25000, 6, 90, "#000000", 1, 1, "#00ffff", 0.5);
hex150.setMap(map);
var hex210 = google.maps.Polygon.RegularPoly(EOffsetBearing(point, d, 210), 25000, 6, 90, "#000000", 1, 1, "#ffff00", 0.5);
hex210.setMap(map);
hex270 = google.maps.Polygon.RegularPoly(EOffsetBearing(point, d, 270), 25000, 6, 90, "#000000", 1, 1, "#ffff00", 0.5);
hex270.setMap(map);
var hex330 = google.maps.Polygon.RegularPoly(EOffsetBearing(point, d, 330), 25000, 6, 90, "#000000", 1, 1, "#ffff00", 0.5);
hex330.setMap(map);
var hex30_2 = google.maps.Polygon.RegularPoly(EOffsetBearing(EOffsetBearing(point, d, 30), d, 90), 25000, 6, 90, "#000000", 1, 1, "#ff0000", 0.5);
hex30_2.setMap(map);
var hex150_2 = google.maps.Polygon.RegularPoly(EOffsetBearing(EOffsetBearing(point, d, 150), d, 90), 25000, 6, 90, "#000000", 1, 1, "#0000ff", 0.5);
hex150_2.setMap(map);
var hex90_2 = google.maps.Polygon.RegularPoly(EOffsetBearing(EOffsetBearing(point, d, 90), d, 90), 25000, 6, 90, "#000000", 1, 1, "#00ff00", 0.5);
hex90_2.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
// EShapes.js
//
// Based on an idea, and some lines of code, by "thetoy"
//
// This Javascript is provided by Mike Williams
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//
// This work is licenced under a Creative Commons Licence
// http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0 04/Apr/2008 Not quite finished yet
// Version 1.0 10/Apr/2008 Initial release
// Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross
// subset of EShapes.js
google.maps.Polygon.Shape = function(point, r1, r2, r3, r4, rotation, vertexCount, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts, tilt) {
var rot = -rotation * Math.PI / 180;
var points = [];
var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
var step = (360 / vertexCount) || 10;
var flop = -1;
if (tilt) {
var I1 = 180 / vertexCount;
} else {
var I1 = 0;
}
for (var i = I1; i <= 360.001 + I1; i += step) {
var r1a = flop ? r1 : r3;
var r2a = flop ? r2 : r4;
flop = -1 - flop;
var y = r1a * Math.cos(i * Math.PI / 180);
var x = r2a * Math.sin(i * Math.PI / 180);
var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv;
var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv;
points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng));
}
return (new google.maps.Polygon({
paths: points,
strokeColor: strokeColour,
strokeWeight: strokeWeight,
strokeOpacity: Strokepacity,
fillColor: fillColour,
fillOpacity: fillOpacity
}))
}
google.maps.Polygon.RegularPoly = function(point, radius, vertexCount, rotation, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) {
rotation = rotation || 0;
var tilt = !(vertexCount & 1);
return google.maps.Polygon.Shape(point, radius, radius, radius, radius, rotation, vertexCount, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts, tilt)
}
function EOffsetBearing(point, dist, bearing) {
var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
var lat = dist * Math.cos(bearing * Math.PI / 180) / latConv;
var lng = dist * Math.sin(bearing * Math.PI / 180) / lngConv;
return new google.maps.LatLng(point.lat() + lat, point.lng() + lng)
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>
这篇关于如何制作Google Maps API v3六边形平铺地图，最好是基于坐标的地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
