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

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

四章-29-实现一个简单标记
Markdown简单教程
JAVA的内存分配和垃圾收集2:垃圾回收的方法
Markdown 入门
实践之路-《MarkDown文档语法教程》
Markdown 语法入门
vue学习之做事列表todoList
第四十节暂停游戏
《洋葱阅读法》曾国藩训练营15
iOS通讯录的简单实现

本文基于腾讯课堂老胡的课《跟我学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>