如何制作Google Maps API v3六边形拼接地图,最好是基于坐标的
How can I make a Google Maps API v3 hexagon tiled map, preferably coordinate-based?
http://econym.org.uk/gmap/example_eshapes.htm有一个Google Maps API v2示例,说明如何平铺六边形,尽管实现的规模很痛苦:它有一个中心六边形,然后在适当的方向上与之相邻的六个六边形,然后(在准递归中)与原始六边形相邻的一个六边形相邻的三个六边形。它有一个漂亮的边界和透明的填充。
我如何创建类似的效果,但最好是使用平铺,以便我指定(没有递归堆)我想要原点以东的六个六边形和四个60°从东方的北方瓦片到东方的六个六边形?
我正在寻找一些基于坐标的东西,最好是简单的。我已经找到了http://www.rootmetrics.com/check-coverage/它是有效的,但代码与它们的特定页面、标记等相耦合,所以模仿它们的代码需要一些解开。
以下示例演示如何渲染水平六边形网格:
function initialize() {
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var startPosition = new google.maps.LatLng(33.748589, -84.390392); //Atlanta, GA, USA
var radius = 40 * 1000; //radius in meters
drawHorizontalHexagonGrid(map,startPosition,radius,6);
map.setCenter(startPosition);
}
function drawHorizontalHexagonGrid(map,startPosition,radius,count){
var curPos = startPosition;
var width = radius * 2 * Math.sqrt(3)/2 ;
for(var i = 0;i < count; i++){
drawHorizontalHexagon(map,curPos,radius);
curPos = google.maps.geometry.spherical.computeOffset(curPos, width,90);
}
}
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,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
map.setCenter(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>
<div id="map-canvas"></div>
我移植了eshapes(和http://econym.org.uk/gmap/example_eshapes.htm)到谷歌地图API v3
http://www.geocodezip.com/v3_MW_example_eshapes.html
不清楚这是否是你想要的,但它似乎来自你问题的标题。
概念验证小提琴
代码片段:
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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 如何在d3.js中返回路径的y坐标
- 在谷歌地图上获取事件的x,y坐标
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- 如何在JS Leatflet绘图插件中获取圆的坐标
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 检查坐标存在于直线的两个点之间
- 使用jquery获取相对于图片的点击坐标
- Javascript/Canvas-查找相对于坐标网格位置的鼠标坐标
- Raphaël转换相对于画布的拖动回调坐标
- 获取当前单击的相对于图元的坐标
- 哪些javascript代码可以用来突出显示谷歌地图上的行政区域,可能带有坐标,类似于下图
- 获取元素相对于页面的坐标
- 添加可拖放元素后,使其相对于可拖放元素的坐标
- 如何在jQuery中获得鼠标点击相对于视口的光标坐标
- 如何查找元素相对于浏览器窗口的坐标
- 如何获得绝对坐标(相对于画布)后,在织物组缩放js
- 在Dojo/Javascript中获取相对于鼠标点击的x, y坐标
- 如何获得一个绝对定位的元素相对于另一个元素的放置坐标