美文网首页openlayers学习笔记
四章-29-实现一个简单标记

四章-29-实现一个简单标记

作者: 彩云飘过 | 来源:发表于2020-04-20 17:51 被阅读0次

    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers 5.3.x api。

    源码 见 1029.html ,对应的 官网示例 https://openlayers.org/en/latest/examples/icon.html?q=style

    https://openlayers.org/en/latest/examples/icon.html?q=style

    https://openlayers.org/en/latest/examples/icon-negative.html?q=style

    image.png
    
    <!DOCTYPE html>
    <html>
    
    <head>
      <title></title>
      <link rel="stylesheet" href="../include/ol.css" type="text/css">
      <link rel="stylesheet" href="../include/bootstrap.css" type="text/css">
      <script src="../include/ol.js"></script>
      <script src="../include/jquery.js"></script>
      <script src="../include/bootstrap.min.js"></script>
    
    </head>
    
    <body>
      <div id="popup" style="width:40px"></div>
      <div id="map" class="map"></div>
    
      <script>
        var iconFeature = new ol.Feature({
          geometry: new ol.geom.Point([0, 0]),
          name: '虚无岛',
          population: 4000,
          rainfall: 500
        });
    
        var iconStyle = new ol.style.Style({
          image: new ol.style.Icon(({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: '../data/icon.png'
          }))
        });
    
        iconFeature.setStyle(iconStyle);
    
        var vectorSource = new ol.source.Vector({
          features: [iconFeature]
        });
    
        var vectorLayer = new ol.layer.Vector({
          source: vectorSource
        });
    
        var rasterLayer = new ol.layer.Tile({
          source: new ol.source.TileJSON({
            url: 'https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q',
            crossOrigin: ''
          })
        });
    
        var map = new ol.Map({
          layers: [rasterLayer, vectorLayer],
          target: 'map',
          view: new ol.View({
            center: [0, 0],
            zoom: 3
          })
        });
    
        var element = document.getElementById('popup');
    
    
        var popup = new ol.Overlay({
          element: element,
          positioning: 'bottom-center',
          stopEvent: false,
          offset: [0, -50]
        });
        map.addOverlay(popup);
    
    
        //当单击地图时,弹框Overlay,显示要素名称
        map.on('click', function (evt) {
          var feature = map.forEachFeatureAtPixel(evt.pixel,
            function (feature) {
              return feature;
            });
          if (feature) {
            var coordinates = feature.getGeometry().getCoordinates();
            popup.setPosition(coordinates);
            $(element).popover({
              title: "信息:",
              placement: 'top',
              html: true,
              content: '<div style="width:50px">' + feature.get('name') + '</div>'
            });
            $(element).popover('show');
          } else {
            $(element).popover('destroy');
          }
        });
    
    
        //以下用在触摸屏,当手指离开屏幕时,弹框消失
        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>
    

    相关文章

      网友评论

        本文标题:四章-29-实现一个简单标记

        本文链接:https://www.haomeiwen.com/subject/jjfcuhtx.html