如何在PHP生成的OpenStreetMap中显示红色填充点？

你当前的代码只显示透明图形，是因为创建的矢量图层没有设置样式（Style）——OpenLayers矢量要素默认无填充样式，所以看起来是透明的。只需给矢量图层添加包含红色填充的样式配置即可实现需求。

修改后的完整代码如下：

<?php

echo '
<html>
<head>
    <style>
        .map {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

<div id="map" class="map"></div>

<script>

var attribution = new ol.control.Attribution({
    collapsible: true
});
    
var map = new ol.Map({
    controls: ol.control.defaults({attribution: false}).extend([attribution]),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM({
                maxZoom: 18
            })
        })
    ],
    target: "map",
    view: new ol.View({
        center: ol.proj.fromLonLat([-4.561,37.019]),
        maxZoom: 18,
        zoom: 10
    })
});

// 添加样式配置
var fillStyle = new ol.style.Style({
    fill: new ol.style.Fill({
        color: "rgba(255, 0, 0, 0.7)" // 红色填充，0.7为透明度
    }),
    stroke: new ol.style.Stroke({
        color: "#000000", // 黑色边框
        width: 2
    })
});

var layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [
            new ol.Feature({';

echo "
                geometry: new ol.geom.Circle(ol.proj.fromLonLat([-4.561,37.019]),9000,'XY')})
            ]
    }),
    style: fillStyle // 给矢量图层绑定样式
});

map.addLayer(layer);

</script>
</body>
</html>";

?>

关键修改说明 #

• 添加了.map的CSS样式，确保地图容器有固定宽高，避免地图无法正常渲染
• 创建fillStyle对象，配置红色填充（带透明度）和黑色边框，让图形可见
• 在ol.layer.Vector配置中添加style: fillStyle，将样式绑定到矢量图层上

内容的提问来源于stack exchange，提问作者Gustavo Lopez Parejo