渲染的 KML 图层不填充多边形
Rendered KML layer doesn't fills polygons
我正在尝试在 Gmaps API 项目上渲染一些简单的 kml 图层,但我发现,无论我怎样尝试,多边形都不会填充。
我使用以下代码加载 KML 图层:
var kmlLayerCenter = new google.maps.KmlLayer('<kmlFileRoute>', {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
这是 KML 代码:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Folder>
<name>Distrito_Centro_KML</name>
<Placemark>
<Style>
<LineStyle>
<color>ff0000ff</color>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<color>ff0000ff</color>
<outline>1</outline>
</PolyStyle>
</Style>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-5.67256283331951,43.5397440536399
----- LOTS OF POINTS ------
-5.67256283331951,43.5397440536399
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Folder>
</Document>
</kml>
带红色边框的多边形渲染正常,但没有任何填充颜色。我尝试在 KML 中到处触摸值,但没有成功。
任何帮助将不胜感激。
看起来 Google Maps KML 渲染器现在对缠绕方向很敏感(您在问题中没有提供)。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122b.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.9439,45.254695
-5.408402,45.284535
-5.67256283331951,44.5397440536399
</coordinates>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.408402,45.284535
-5.9439,45.254695
-5.67256283331951,44.5397440536399
</coordinates>
唯一不同的是缠绕方向(中间两点的顺序)
好吧,令人难以置信但真实...似乎 KML 图层上的点应该逆时针排序以允许 Gmaps API 呈现填充颜色。
我完全不明白为什么会这样,但它似乎工作正常。
我找到了有关解决方案的信息 here,虽然 geocodezip 答案或多或少在同一方向上,但直到我反转坐标字符串中的每个点才出现填充颜色。
我正在尝试在 Gmaps API 项目上渲染一些简单的 kml 图层,但我发现,无论我怎样尝试,多边形都不会填充。
我使用以下代码加载 KML 图层:
var kmlLayerCenter = new google.maps.KmlLayer('<kmlFileRoute>', {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
这是 KML 代码:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Folder>
<name>Distrito_Centro_KML</name>
<Placemark>
<Style>
<LineStyle>
<color>ff0000ff</color>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<color>ff0000ff</color>
<outline>1</outline>
</PolyStyle>
</Style>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-5.67256283331951,43.5397440536399
----- LOTS OF POINTS ------
-5.67256283331951,43.5397440536399
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Folder>
</Document>
</kml>
带红色边框的多边形渲染正常,但没有任何填充颜色。我尝试在 KML 中到处触摸值,但没有成功。
任何帮助将不胜感激。
看起来 Google Maps KML 渲染器现在对缠绕方向很敏感(您在问题中没有提供)。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122b.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.9439,45.254695
-5.408402,45.284535
-5.67256283331951,44.5397440536399
</coordinates>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.408402,45.284535
-5.9439,45.254695
-5.67256283331951,44.5397440536399
</coordinates>
唯一不同的是缠绕方向(中间两点的顺序)
好吧,令人难以置信但真实...似乎 KML 图层上的点应该逆时针排序以允许 Gmaps API 呈现填充颜色。
我完全不明白为什么会这样,但它似乎工作正常。
我找到了有关解决方案的信息 here,虽然 geocodezip 答案或多或少在同一方向上,但直到我反转坐标字符串中的每个点才出现填充颜色。