Question

我定义了以下标记，如何执行以下操作： -添加onclick侦听器 -触发onclick侦听器后显示弹出窗口

var marker = new ol.Feature({
    name: 'TRUCK TR1',
    population: 4000,
    rainfall: 500,
    geometry: new ol.geom.Point(
      ol.proj.fromLonLat([-74.006,40.7127])  // new Point([0, 0])
    ),  // Cordinates of New York's Town Hall
});

Answer 1

您可以使用我的代码，只需使用click事件而不是pointermove。这是链接ol popup on click event

<!DOCTYPE html>
<html>
<head>
  <style>
      .ol-popup {
            position: absolute;
            background-color: white;
            /*--webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));*/
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 180px;
        }

        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
    </style>
<meta name="description" content="Display popup on features">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"></link>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
  <script>
  var straitSource;
    var map;
  </script>

</head>

<body>
 <div id="map" style="height:600px;width:1024px;"></div>
  <div id="popup" title="myproject" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-content"></div></div>

</body>

<script>
content = document.getElementById('popup-content');
var center = ol.proj.transform([76.26, 9.93], 'EPSG:4326', 'EPSG:3857'); //initial position of map
    var view = new ol.View({
        center: center,
        zoom: 2
    });

//raster layer on map
   var OSMBaseLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

 straitSource = new ol.source.Vector({ wrapX: true });
    var straitsLayer = new ol.layer.Vector({
        source: straitSource
    });

 map = new ol.Map({
        layers: [OSMBaseLayer, straitsLayer],
        target: 'map',
        view: view,
        controls: [new ol.control.FullScreen(), new ol.control.Zoom()]
    });

   // Popup showing the position the user clicked
    var container = document.getElementById('popup');
    var popup = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });
    map.addOverlay(popup);

  /* Add a pointermove handler to the map to render the popup.*/
    map.on('pointermove', function (evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel, function (feat, layer) {
            return feat;
        }
        );

        if (feature && feature.get('type') == 'Point') {
            var coordinate = evt.coordinate;    //default projection is EPSG:3857 you may want to use ol.proj.transform

            content.innerHTML = feature.get('desc');
            popup.setPosition(coordinate);
        }
        else {
            popup.setPosition(undefined);

        }
    });

var data=[{"Lon":19.455128,"Lat":41.310575},{"Lon":19.455128,"Lat":41.310574},{"Lon":19.457388,"Lat":41.300442},{"Lon":19.413507,"Lat":41.295189},{"Lon":16.871931,"Lat":41.175926},{"Lon":16.844809,"Lat":41.151096},{"Lon":16.855165,"Lat":45}];

function addPointGeom(data) {

        data.forEach(function(item) { //iterate through array...
            var longitude = item.Lon,
                latitude = item.Lat,
                iconFeature = new ol.Feature({
                    geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
                        'EPSG:3857')),
                  type: 'Point',
                    desc: '<pre> <b>Waypoint Details </b> ' + '<br>' + 'Latitude : ' + latitude + '<br>Longitude: ' + longitude + '</pre>'}),
                iconStyle = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 5,
                        stroke: new ol.style.Stroke({
                            color: 'blue'
                        }),
                        fill: new ol.style.Fill({
                            color: [57, 228, 193, 0.84]
                        }),
                    })
                });

            iconFeature.setStyle(iconStyle);

            straitSource.addFeature(iconFeature);
        });
    }// End of function showStraits()

addPointGeom(data);

</script>

</html>

在OpenLayer上收听Marker onClick

1 个答案: