使用编码多段线的多边形中的孔

问题描述：

我们看到有关此问题的冲突文档，但可以使用编码多段线来渲染复杂多边形（那些带孔/圆环）？使用编码多段线的多边形中的孔

我认为颠倒缠绕方向应该可行，但开发人员告诉我们编码折线不支持这一点。

任何帮助，非常感谢。

嗨，欢迎SO。你在编程什么语言？代码在哪里？ –

JavaScript .... extJS框架。 –

你能提供一个例子吗？你是否尝试过分别编码外边界和内孔？ – geocodezip

答

这是可能的，你需要编码/解码独立的内部和外部路径。

var donut = new google.maps.Polygon({ 
      paths: [google.maps.geometry.encoding.decodePath(encodedOP), 
      google.maps.geometry.encoding.decodePath(encodedIP)], 
      strokeColor: "#0000FF", 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: "#FF0000", 
      fillOpacity: 0.35 
      });

代码片段：

function initialize() { 
 
    var myOptions = { 
 
    zoom: 7, 
 
    center: new google.maps.LatLng(-33.9, 151.2), 
 
    mapTypeControl: true, 
 
    mapTypeControlOptions: { 
 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
 
    }, 
 
    navigationControl: true, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 

 
    var encodedOP = "~a|mEsmnd\\{[email protected][email protected]@~l^[email protected]|[email protected]@[email protected]@[email protected][email protected]`[email protected]@[email protected]@|[email protected]@~l^`[email protected]@[email protected]`[email protected]@_m^[email protected]}[email protected]@[email protected]`[email protected][email protected]{jaAslD{[email protected]@[email protected]@[email protected]}[email protected]@_m^[email protected]{[email protected]"; 
 
    var encodedIP = "pp`mEwaa_\\lpZqgBlpZpgBpnYvtH`lW`vNtkT|cTzpPzwXn`L`l\\``Gb|^xuA|d`@yuA|d`@a`Gb|^o`L`l\\{pPzwXukT|cTalW`vNqnYvtHmpZpgBmpZqgBqnYwtHalWavNukT}cT{pP{wXo`Lal\\a`Gc|^yuA}d`@xuA}d`@``Gc|^n`Lal\\zpP{wXtkT}cT`lWavNpnYwtH"; 
 
    var donut = new google.maps.Polygon({ 
 
    paths: [google.maps.geometry.encoding.decodePath(encodedOP), 
 
     google.maps.geometry.encoding.decodePath(encodedIP) 
 
    ], 
 
    strokeColor: "#0000FF", 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: "#FF0000", 
 
    fillOpacity: 0.35 
 
    }); 
 
    donut.setMap(map); 
 

 

 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas"></div>

谢谢。我非常感谢帮助。 –

答

谷歌地图的路径编码能够一维阵列，而不是二维阵列（我的意思是阵列<阵列>是不可能的）。

但绘制一个有孔的多边形需要两个维数组。（你可能知道）

所以代码应该是这样的：

var exteriorBoundary = google.maps.geometry.encoding.decode("<encoded polyline string>"; 
var hole = google.maps.geometry.encoding.decode("<another encoded polyline string>"; 

var polygon = new google.maps.Polygon({ 
    paths: [exteriorBoundary, hole], 
    map: map, 
    ... 
});

使用编码多段线的多边形中的孔

相关推荐