Хотите отобразить информацию POI в информационном окне на карте OSM, щелкните правой кнопкой мыши.? - PullRequest
Новая
       18

Хотите отобразить информацию POI в информационном окне на карте OSM, щелкните правой кнопкой мыши.?

1 голос
/ 24 июня 2019

Я хочу отобразить информацию о POI InfoWindow в OSM Map. Я использовал Open Layer ol.js. Я объявил информационный массив Poi. Хотите получить информационное окно Poi, а также имя объекта, чтобы исправить, какое событие щелчка пользователя объекта было запущено и для какого индекса данных события пользовательского щелчка запущено, основываясь на том, что я получу информацию из POI в виде массива и отобразится в информационном окне. Как я могу получить это. 

 <div style="width:100%; z-index:0;" id="map_canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>

    var _poiData = [{"cityCode": "PHX","id": 474,"latitude": 33.288638,"longitude": -111.657894,"poiName": "Phoenix Mesa Gateway Airp","userID": null}]

    var map=null;

$(document).ready(function () {


            map = new ol.Map({
                target: document.getElementById('map_canvas'),
                loadTilesWhileAnimating: true,
                view: new ol.View(),
                layers: [
                  new ol.layer.Tile({
                      source: new ol.source.OSM()
                  }),
                ],
                loadTilesWhileAnimating: true,
                view: new ol.View({
                    center: [mapLng,mapLat],
                    zoom: 3
                })
            });

         showPointOfInterest();

        });

 function showPointOfInterest(){
            for (var i = 0; i < _poiData.length - 1; i++) {

                var style = new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.6, -0.4],
                        anchorXUnits: "fraction",
                        anchorYUnits: "fraction",
                        src: "/Images/ic_poi.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
                        })

                    })
                });

                vectorLayer = new ol.layer.Vector({
                    source: new ol.source.Vector(),
                    style: function (feature) {
                        style.getText().setText(feature.get('label'));
                        return style;
                    }
                });
                add_map_point(_poiData[i].longitude, _poiData[i].latitude, _poiData[i].poiName,'poi');
                map.addLayer(vectorLayer);

                map.getViewport().addEventListener('contextmenu', function (evt,i) {
                    evt.preventDefault();
                    openContextMenu(evt.x, evt.y);
                });

            }

            map.on('click', function (evt) {
                $('.contextMenu').hide();
            });
        }
...