在google maps api v3中绘制(倒置)几何圆圈
我正在寻找一种方法来绘制谷歌地图api v3中的倒转几何(不是地理)圈。
本质上,目标是将地图变暗(除了围绕地图对象),以便使地图对象脱颖而出。 为此,我采用了倒置覆盖图,并在我的“阴影覆盖图”中创建了一个圆形“洞”。
然而,我用来获得经纬度坐标来产生这个圆的方法被调整为墨卡托投影,并且不是一致的大小或形状,因为它相对于赤道的位置。 该方法需要创建一个圆圈(不使用谷歌的圆对象 - 或使用它的方式来提取它的路径),该圆将基于不采用墨卡托投影的半径字段从中心计算纬度/经度点考虑到 - 这样它就会在地图上绘制的任何地方显示一个完美的圆。
它不应该很难,但我努力将此函数转换为不应用墨卡托投影到结果中:
function getCircleCoords(point, radius) {
var d2r = Math.PI / 180; // degrees to radians
var points = 90;
var circleLatLngs = new Array();
var circleLat = radius * 0.621371192 * 0.014483;
var circleLng = circleLat / Math.cos( point.lat() * d2r);
for (var i = 0; i < points+1; i++) {
var theta = Math.PI * (i / (points / 2));
var vertexLat = point.lat() + (circleLat * Math.sin(theta));
var vertexLng = point.lng() + (circleLng * Math.cos(theta));
var vertexLat = point.lat() + (circleLat * (theta));
var vertexLng = point.lng() + (circleLng * (theta));
var vertextLatLng = new google.maps.LatLng(vertexLat, vertexLng);
circleLatLngs.push( vertextLatLng );
}
return circleLatLngs;
}
这会被调用如下:
feature = new google.maps.Polygon({
paths: [[my_shadow_layer_path],[getCircleCoords(latLng_, 800)] ],
fillColor: '#ff0000',
fillOpacity: 0.5,
map: map_
});
}
思考?
要使用多边形,需要使用fromPointToLatLng来计算像素(世界)坐标中的圆坐标,然后使用fromPointToLatLng将它们转换为地理坐标,以获取该圆的适当坐标。 或者使用正确大小的覆盖图并自行处理缩放更改。
你可以试试这个库https://github.com/raihan2006i/google-map-inverted-circle。 它适用于谷歌地图V3。 请参阅下面的示例代码块
var iCircle;
var map;
function initialize() {
var mapDiv = document.getElementById('gMap');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
iCircle = new InvertedCircle({
center: map.getCenter(),
map: map,
radius: 5000, // 5 km
editable: true,
stroke_weight: 5,
fill_opacity: 0.5,
fill_color: "#ff0000"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
链接地址: http://www.djcxy.com/p/68959.html