在 OSM 中显示带有标签的标记

Question

我想将 Google 地图集成到 OSM 中，因为 Google API 收费。所以我想在 OSM 地图中显示 MarkerWithLabels。我将如何实现它？用于在特定位置显示图标的函数 LoadVehicledata() 工作正常。但是函数 DisplayMarker() 不会在特定经纬度上显示标签。我想结合上述功能在那个经度上显示一个带有图标的标签。我尝试了很多方法。有什么建议吗？

<link href="~/Content/themes/ol.css" rel="stylesheet" />
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="~/Scripts/ol.js"></script>
<body>
    <div id="map" style="width: 100vw; height: 100vh;"></div>
    <div id="overlay" style="background-color: yellow; width: 20px; height: 20px; border-radius: 10px;">
        <label id="lblVehicle"> Vehicle </label>
    </div>
    <script>

        var map;
        var mapLat = 33.540008;
        var mapLng = -111.869822;
        var mapDefaultZoom = 6;
        var _vehData = [{ "vehicleID": 69, "latitude": 33.540008, "longitude": -111.869822, "course": 3.0, "speed": 0.0, "gpsDateTime": "2019-05-10T02:08:20", "cityCode": "PHX", "details": "69 st:2 ", "minsSinceLastGPS": 0, "status": 8, "assignedStatus": 0, "stops": 0, "guests": 0, "airportID": "CHT", "fleet": "ECAR", "peggedStatus": 1 }];
        initialize_map();
        function initialize_map() {
            map = new ol.Map({
                target: "map",
                layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([mapLng, mapLat]),
                    zoom: mapDefaultZoom
                })
            });
        }

        function LoadVehicledata(){
            for (var i = 0; i < _vehData.length-1; i++) {
                add_map_point(_vehData[i].latitude, _vehData[i].longitude);

            }
        }
        function add_map_point(lat, lng) {
            var vectorLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [new ol.Feature({
                        geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
                    })]
                }),
                style: new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, -10],
                        anchorXUnits: "fraction",
                        anchorYUnits: "fraction",
                        src: "/Images/ic_info.png"
                    })
                })
            });
            map.addLayer(vectorLayer);

        }

        function DisplayMarker() {
            var layer = new ol.layer.Tile({
                source: new ol.source.OSM()
            });


            var interaction = new ol.interaction.DragRotateAndZoom();


            var control = new ol.control.FullScreen();


            for (var i = 0; i < _vehData.length - 1; i++) {

                var overlay = new ol.Overlay({

                    position: ol.proj.fromLonLat([_vehData[i].latitude, _vehData[i].longitude], 'EPSG:4326', 'EPSG:3857'),
                    element: document.getElementById('overlay')
                });


                var view = new ol.View({

                    center: ol.proj.fromLonLat([_vehData[i].latitude, _vehData[i].longitude], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 6
                });

                map.addOverlay(overlay);
                map.setView(view);

            }
        }
    </script>
</body>

Answer 1

叠加层通常用于在您单击或悬停在地图项上时显示信息。要始终显示带有特征的标签，请在样式中添加文本样式，并使用样式函数为每个特征设置标签文本，应将其设置为特征的属性。将您的功能放在一个图层中而不是为每个功能创建一个图层会更有效。

function LoadVehicledata(){
    for (var i = 0; i < _vehData.length-1; i++) {
        add_map_point(_vehData[i].latitude, _vehData[i].longitude, _vehData[i].vehicleID);
    }
}

var style = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, -10],
        anchorXUnits: "fraction",
        anchorYUnits: "fraction",
        src: "/Images/ic_info.png"
    }),
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        fill: new ol.style.Fill({
            color: '#000'
        }),
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 3
        })
    })                       
});

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: function(feature) {
        style.getText().setText(feature.get('label'));
        return style;
    }
});
map.addLayer(vectorLayer);

function add_map_point(lat, lng, label) {
    vectorLayer.getSource().addFeature(
        new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
            label: label
        })
    )
}

文本样式基于https://openlayers.org/en/v4.6.5/examples/vector-layer.html您可能需要根据您的应用程序对其进行优化。

在 OSM 中显示带有标签的标记

Display Marker With Labels in OSM

openlayers

openstreetmap