要在OSM地图的“信息”窗口中右键单击POI信息。

时间:2019-06-24 09:08:19

标签: javascript openlayers openstreetmap

我想在OSM映射中显示POI信息InfoWindow。我使用了开放层ol.js。我声明了Poi信息数组。想要获取Poi infoWindow以及功能名称,以纠正触发了哪个功能用户点击事件以及基于哪个我触发了用户单击事件的dataindex的基础,我将获得POI信息表Array,并在信息窗口中显示。我该怎么办。

 <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();
            });
        }

0 个答案:

没有答案