OperLayers development experience ②---Added markers and Popovers

Adding tags and popovers, like the one introduced last time, can achieve the results we want by directly referring to the official Example. Since the Example generally only introduces one function, when we need different functions, we need to transplant the desired functions by ourselves.

Here is a direct introduction to the code

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Symbolizer</title>
    <!-- This is the link CSS If you have downloaded the source code, you can change it to the local relative path by yourself-->
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x I usually delete it -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <!--This is the js linking the source code. The function of linking other js is the same as CSS, which can be changed to a local relative path-->
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
    <!--Link below-->
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <!-- Here is the link to bootstrap in order to use the Popover plugin-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
      #map {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"><div id="popup"></div></div>
    <script>
      var iconFeature = new ol.Feature({

    //Set the initial point, this is based on EPSG 3857 so we need to use the previously mentioned ol.proj.fromLonLat([104.06, 30.65])
    
     geometry: new ol.geom.Point([0, 0]),

        name: 'Null Island',//Display text, here is the use of .set(key ,value, boolend) if you want to call the key to modify later;
        population: 4000,    
        rainfall: 500
      });

      var iconStyle = new ol.style.Style({ //Create style
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
        }))
      });

      iconFeature.setStyle(iconStyle); //Set the marker style

      var vectorSource = new ol.source.Vector({ //Adding a source means adding a marker
        features: [iconFeature]
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource //Set the source as a marker
      });

      var rasterLayer = new ol.layer.Tile({ //Set the tile
        source: new ol.source.TileJSON({
          url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
          crossOrigin: ''
        })
      });

      var map = new ol.Map ({
        layers: [rasterLayer, vectorLayer],
        target: document.getElementById('map'),
        view: new ol.View({    
          center: [0, 0], //Set the initial point
          zoom: 3 //zoom ratio
        })
      });
    //Start to set the popover and add the display here. If you don't understand it, you can refer to the introduction of Bootstarp's popover plug-in.
      var element = document.getElementById('popup');

      var popup = new ol.Overlay({ //Set the overlay to display the popover
        element: element,
        positioning: 'bottom-center',
        stopEvent: false,
        offset: [0, -50]
      });
      map.addOverlay(popup); //map add overlay layer

      // display popup on click
      map.on('click', function(evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature) {
              return feature;
            });
        if (feature) {
          var coordinates = feature.getGeometry().getCoordinates(); //Get marker coordinates
          popup.setPosition(coordinates);//Add display coordinates to popover
          $(element).popover({//Set popover display properties
            'placement': 'top',
            'html': true,
            'content': feature.get('name')
          });
          $(element).popover('show'); //显示popover
        } else {
          $(element).popover('destroy');//销毁popover
        }
      });

      // change mouse cursor when over marker
      map.on('pointermove', function(e) {
        if (e.dragging) {
          $(element).popover('destroy');
          return;
        }
        var pixel = map.getEventPixel(e.originalEvent);
        var hit = map.hasFeatureAtPixel(pixel);
        map.getTarget().style.cursor = hit ? 'pointer' : '';
      });
    </script>
  </body>
</html>

Here we only need to modify the tile to become the map we need. It should be noted that the coordinates and projection method of the point setting, use feature.set (key, value, boolend);

Here is a bootstarp reference URL Bootstarp

OperLayers development experience ②---Added markers and Popovers

Guess you like