Google地图在多边形内绘制一个较小的多边形 [英] Google Maps Draw a smaller Polygon inside a Polygon
本文介绍了Google地图在多边形内绘制一个较小的多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于矩形，我有以下代码，它可以工作：
var drawEdgesRectangle = function（shape）{
// shape是原始的父矩形
var NE，SW，childNE， childSW，填充，对角线，内部;
//将填充常数设置为1（即全部距离为1m）
padding = 1;
//从角落获得对角线距离
对角线= Math.sqrt（2）* padding;
//获得父元的元素
NE = shape.bounds.getNorthEast（）;
//获得父元的SW
SW = shape.bounds.getSouthWest（）;
//得到孩子NE，SW
childNE = google.maps.geometry.spherical.computeOffset（NE，diagonal，225）;
childSW = google.maps.geometry.spherical.computeOffset（SW，对角线，45）;
渲染内部形状
inner = new google.maps.Rectangle（{
strokeColor：'white'，
strokeOpacity：0.8，
strokeWeight ：1，
fillColor：'black'，
fillOpacity：0.35，
map：map，
界限：new google.maps.LatLngBounds（
childSW，
childNE
）
}）;
}
当然，对于多边形来说这是一个不同的鱼群。我知道我可以使用 getPaths（）来获得每一行的属性，但是要弄清楚如何放置内部行，并确实找出'内部'的位置是证明对我来说在概念上相当困难。
我想知道我想要达到的目标是否可以在google API下实现，并希望能够指出如何解决这个问题。
解决方案
如果多边形是简单（中心位于多边形内部且没有凹面） ，将会做类似于你对矩形做的事情（这是一个符合这些标准的四边形多边形）：使用
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， - 新的google.maps.LatLng（38.870080，-77.058604），新的google.maps.LatLng（38.868894，-77.055664），新的google.maps.LatLng（38.870598，-77.053346）]];函数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（地图）; 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）; //在地图上定义信息窗口。 infoWindow = new google.maps.InfoWindow（）;} google.maps.event.addDomListener（window，'load'，initialize）; var drawEdgesPoly = function（）{// shape是原始的父多边形var shape = poly; //将填充常数设置为1（即全部距离为1m）填充= 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 = [];对于（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）; //渲染内部形状inner = new google.maps.Polygon（{strokeColor：'white'，strokeOpacity：0.8，strokeWeight：1，fillColor：'black'，fillOpacity：0.35，map：map，editable：false，path：newPath }};};
< script src = https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry\"> ;</script><div id =map-canvasstyle =height：100％; width ：100％;>< / div>
So I am trying to render shapes on Google Maps (using V3 of the API), which contain the same shape, just smaller inside. Basically a box wthin a box or a polygon within a polygon.
For the rectangle I have the following code, which works:
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
)
});
}
Of course, doing this for a polygon is a different kettle of fish. I know I can use getPaths() to get the attributes of each line, but working out how to place the inner lines, and indeed, work out where 'inside' is is proving to be conceptually quite difficult for me.
I would like to know if what I want to achieve is possible given the google API, and would appreciate any pointers on how to tackle it.
解决方案
One option if you polygons are "simple" (the center is "inside" the polygon and there are no concave sides), would be to do something similar to what you did with the rectangle (which is a four sided polygon that meets those criteria):
Using the geometry library:
To include it:
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
Code (assumes global "poly" and others):
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
});
};
proof of concept fiddle Play with the polygon in the code snippet or the jsfiddle to see the constraints.
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 (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
});
};
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>
这篇关于Google地图在多边形内绘制一个较小的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
