Отображение маркера с метками в OSM - PullRequest
Новая
       22

Отображение маркера с метками в OSM

0 голосов
/ 13 мая 2019

Я хочу интегрировать Google Maps в OSM из-за платы за API Google.Поэтому я хочу показать MarkerWithLabels на карте OSM.Как бы я этого достиг?Функция LoadVehicledata (), используемая для отображения иконки в определенном месте, работает нормально.Но функция DisplayMarker () не отображает метку на определенном Lat Long.Я хочу объединить вышеупомянутые функции, чтобы показать ярлык с иконкой на этом Lat Long.Я пробовал так много способов.Есть предложения? 

<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>

1 Ответ

3 голосов
/ 13 мая 2019

Наложения обычно используются для отображения информации при нажатии или наведении курсора на функцию Чтобы всегда отображать метки с элементами, добавьте стиль текста к стилю и используйте функцию стиля, чтобы задать текст метки для каждого элемента, который должен быть установлен как свойство элемента. Будет эффективнее поместить ваши объекты в один слой, а не создавать один для каждого объекта. 

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, вам, вероятно, потребуется уточнить его для вашего приложения.

...