Question

由于Google API收费，我想将Google Maps集成到OSM中。所以我想在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中显示带有标签的标记

1 个答案: