[英]Draw a smaller Polygon inside a Polygon using Google Maps
我正在嘗試在Google Maps(使用API的V3)上渲染形狀,這些形狀包含相同的形狀,但內部較小。 基本上是一個盒子內的一個盒子或一個多邊形內的一個多邊形。
對於矩形,我有以下代碼可以正常工作:
var drawEdgesRectangle = function (shape) {
// shape is the original, parent rectangle
var NE, SW, childNE, childSW, padding, diagonal, inner;
// set padding constant to 1 (i.e. 1m distance all around)
padding = 1;
// get diagonal distance from corner
diagonal = Math.sqrt(2) * padding;
// get NE of parent
NE = shape.bounds.getNorthEast();
// get SW of parent
SW = shape.bounds.getSouthWest();
// get child NE, SW
childNE = google.maps.geometry.spherical.computeOffset(NE, diagonal, 225);
childSW = google.maps.geometry.spherical.computeOffset(SW, diagonal, 45);
// render inner shape
inner = new google.maps.Rectangle({
strokeColor: 'white',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: 'black',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
childSW,
childNE
)
});
}
當然,對多邊形執行此操作是另一回事。 我知道我可以使用getPaths()
來獲取每一行的屬性,但是要弄清楚如何放置內部行,並且確實要弄清“內部”的位置在概念上對我來說非常困難。
我想知道如果使用Google API,我想實現的目標是否可行。
如果多邊形是“簡單的”(中心在多邊形的“內部”並且沒有凹入的邊),則一種選擇是做與矩形(類似於滿足這些條件的四邊形多邊形)相似的操作):
使用幾何庫 :
要包括它:
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
代碼(假設全局“多邊形”等):
var drawEdgesPoly = function() {
// shape is the original, parent polygon
var shape = poly;
// set padding constant to 1 (i.e. 1m distance all around)
padding = 50;
var vertices = shape.getPath();
var polybounds = new google.maps.LatLngBounds();
for (var i = 0; i < vertices.getLength(); i++) {
polybounds.extend(vertices.getAt(i));
}
var center = polybounds.getCenter();
if (centerMarker && centerMarker.setMap) {
centerMarker.setMap(null);
}
centerMarker = new google.maps.Marker({
position: center,
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
}
});
if (polylines && (polylines.length > 0)) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
}
polylines = [];
var newPath = [];
for (var i = 0; i < vertices.getLength(); i++) {
polylines.push(new google.maps.Polyline({
path: [center, vertices.getAt(i)],
map: map,
strokeWidth: 2,
strokeColor: 'red'
}));
newPath[i] = google.maps.geometry.spherical.computeOffset(vertices.getAt(i),
padding,
google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
}
if (inner && inner.setMap)
inner.setMap(null);
// render inner shape
inner = new google.maps.Polygon({
strokeColor: 'white',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: 'black',
fillOpacity: 0.35,
map: map,
editable: false,
path: newPath
});
};
概念證明小提琴在代碼片段或jsfiddle中玩多邊形以查看約束。
var map; var infoWindow; var poly; var inner; var polylines = []; var centerMarker; var paths = [ [ new google.maps.LatLng(38.872886, -77.054720), new google.maps.LatLng(38.872602, -77.058046), new google.maps.LatLng(38.870080, -77.058604), new google.maps.LatLng(38.868894, -77.055664), new google.maps.LatLng(38.870598, -77.053346) ] ]; function initialize() { var mapOptions = { center: new google.maps.LatLng(38.8714, -77.0556), zoom: 15 }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); poly = new google.maps.Polygon({ paths: paths, strokeWeight: 3, fillColor: '#55FF55', fillOpacity: 0.5, editable: true }); poly.setMap(map); drawEdgesPoly(); google.maps.event.addListener(poly.getPath(), 'insert_at', drawEdgesPoly); google.maps.event.addListener(poly.getPath(), 'remove_at', drawEdgesPoly); google.maps.event.addListener(poly.getPath(), 'set_at', drawEdgesPoly); // Define an info window on the map. infoWindow = new google.maps.InfoWindow(); } google.maps.event.addDomListener(window, 'load', initialize); var drawEdgesPoly = function() { // shape is the original, parent polygon var shape = poly; // set padding constant to 1 (ie 1m distance all around) padding = 50; var vertices = shape.getPath(); var polybounds = new google.maps.LatLngBounds(); for (var i = 0; i < vertices.getLength(); i++) { polybounds.extend(vertices.getAt(i)); } var center = polybounds.getCenter(); if (centerMarker && centerMarker.setMap) { centerMarker.setMap(null); } centerMarker = new google.maps.Marker({ position: center, map: map, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(4, 4) } }); if (polylines && (polylines.length > 0)) { for (var i = 0; i < polylines.length; i++) { polylines[i].setMap(null); } } polylines = []; var newPath = []; for (var i = 0; i < vertices.getLength(); i++) { polylines.push(new google.maps.Polyline({ path: [center, vertices.getAt(i)], map: map, strokeWidth: 2, strokeColor: 'red' })); newPath[i] = google.maps.geometry.spherical.computeOffset(vertices.getAt(i), padding, google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center)); } if (inner && inner.setMap) inner.setMap(null); // render inner shape inner = new google.maps.Polygon({ strokeColor: 'white', strokeOpacity: 0.8, strokeWeight: 1, fillColor: 'black', fillOpacity: 0.35, map: map, editable: false, path: newPath }); };
html, body, #map-canvas { height: 100%; width: 100%; }
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script> <div id="map-canvas" style="height:100%; width:100%;"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.