OperLayers开发经历②---新增标记和Popover

添加标记和Popover像上次介绍到的,直接借鉴官方Example就可以达到我们想要的结果,由于Example一般都只介绍一种功能,所以我们需要不同功能时,要自行移植想要功能部分。

这里直接上代码介绍

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Symbolizer</title>
    <!-- 这是链接CSS  下载了源码的话,自行改为本地相对路径即可   -->
    <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   一般我直接删掉了  -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <!--这是链接源码的js  主要处理链接其他js的功能  同CSS 一样改为 本地相对路径即可-->
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
    <!--下面链接 -->
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <!--下面是链接bootstrap 为了使用Popover插件 -->
    <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({
    //设置初始点,  这是基于EPSG 3857  所以需要我们用之前提到的ol.proj.fromLonLat([104.06, 30.65])
    
     geometry: new ol.geom.Point([0, 0]),  
        name: 'Null Island',//显示文本 ,这里是后面要调用key  修改的话使用  .set(key ,value, boolend);
        population: 4000,    
        rainfall: 500
      });

      var iconStyle = new ol.style.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);  //设置标记点风格

      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/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],   //设置初始点
          zoom: 3            //缩放比例
        })
      });
    //这里开始设置popover 并添加显示  这里不太明白可以查阅Bootstarp 的popover插件的使用介绍
      var element = document.getElementById('popup');

      var popup = new ol.Overlay({  //设置重叠层 用于显示popover
        element: element,
        positioning: 'bottom-center',
        stopEvent: false,
        offset: [0, -50]
      });
      map.addOverlay(popup);  //map 添加重叠层

      // 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();  //获取标记点坐标
          popup.setPosition(coordinates);//给popover添加显示坐标
          $(element).popover({//设置popover显示属性
            '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>

这里只需要我们修改瓦片就可以变成我们需要的地图了,需要注意的是点设置的坐标和投影方式,使用feature.set(key,value,boolend);

这里提供一个bootstarp参考网址Bootstarp


展开阅读全文

没有更多推荐了,返回首页