Question

我尝试用任何颜色填充国家/地区。我正在加载国家/地区边界，例如：http://www.openstreetmap.org/api/0.6/relation/148838/full，但它不起作用。边框是彩色的，但数字没有被填充。

我使用以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>
<div style="margin: 30px;">
    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.1/css/ol.css" type="text/css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <script src="https://openlayers.org/en/v4.3.1/build/ol.js"></script>
    <div id="map" class="map" style="width: 500px; height: 500px;"></div>
    <script>
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'map',
            view: new ol.View({
                center: ol.proj.fromLonLat([0, 0]),
                zoom: 1
            })
        });

        var areaLayer = new ol.layer.Vector({
            title: 'Boundaries',
            source: new ol.source.Vector({
                url: 'http://www.openstreetmap.org/api/0.6/relation/148838/full',
                format: new ol.format.OSMXML()
            }),
            style: new ol.style.Style({
                zIndex: 100,
                stroke: new ol.style.Stroke({
                    color: 'rgba(246, 99, 79, 1.0)',
                    width: 3
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(246, 99, 79, 1.0)'
                })
            })
        });

        map.addLayer(areaLayer);
    </script>

</div>
</body>
</html>

如何用彩色填充这个国家？

Answer 1

您正在调用的OSM API返回不支持填充颜色的线串几何。

如果您感到好奇，可以按如下方式查看geom：

areaLayer.getSource().getFeatures()[0].getGeometry()

我还建议您在开发时使用调试版本（ol-debug.js）。

无法在openstreetmap中填充颜色的国家/地区

1 个答案: