[英]Can't fill a country with color in openstreetmap
I'm trying fill country with any color. 我正在尝试用任何颜色填充国家/地区。 I'm loading country borders like: http://www.openstreetmap.org/api/0.6/relation/148838/full , but it doesn't work.
我正在加载国家边界,例如: http : //www.openstreetmap.org/api/0.6/relation/148838/full ,但是它不起作用。 Borders are colored, but figure is not being filled.
边框是彩色的,但未填充图形。
I'm using following code: 我正在使用以下代码:
<!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>
How to fill the country with color? 如何用颜色填充整个国家?
The OSM API you are calling returns linestring geometries, which do not support a fill color. 您正在调用的OSM API将返回不支持填充颜色的线串几何。
If you're curious, you can view the geom as follows: 如果您好奇,可以按以下方式查看几何图形:
areaLayer.getSource().getFeatures()[0].getGeometry()
I would also recommend that you use the debug version when developing (ol-debug.js). 我还建议您在开发时使用调试版本(ol-debug.js)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.