openlayer Overlay

最新推荐文章于 2024-06-02 13:11:41 发布

Lucky_wangtao

最新推荐文章于 2024-06-02 13:11:41 发布

阅读量560

点赞数

分类专栏： openlayer openlayer 文章标签： openlayer Overlay

本文链接：https://blog.csdn.net/qq_36178899/article/details/81195892

版权

openlayer 同时被 2 个专栏收录

21 篇文章 3 订阅

订阅专栏

openlayer

12 篇文章 3 订阅

订阅专栏

弹出窗口是使用Bootstrap中的Popovers创建的。

<!DOCTYPE html><html>

  <head>

    <title>Overlay</title>

    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">

    

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

    <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>

      #marker {

        width: 20px;

        height: 20px;

        border: 1px solid #088;

        border-radius: 10px;

        background-color: #0FF;

        opacity: 0.5;

      }

      #vienna {

        text-decoration: none;

        color: white;

        font-size: 11pt;

        font-weight: bold;

        text-shadow: black 0.1em 0.1em 0.2em;

      }

      .popover-content {

        min-width: 180px;

      }

    </style>

  </head>

  <body>

    <div id="map" class="map"></div>

    <div style="display: none;">

      

      <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>

      <div id="marker" title="Marker"></div>

      

      <div id="popup" title="Welcome to OpenLayers"></div>

    </div>

    <script>

      import Map from 'ol/Map.js';

      import Overlay from 'ol/Overlay.js';

      import View from 'ol/View.js';

      import {toStringHDMS} from 'ol/coordinate.js';

      import TileLayer from 'ol/layer/Tile.js';

      import {fromLonLat, toLonLat} from 'ol/proj.js';

      import OSM from 'ol/source/OSM.js';

      var layer = new TileLayer({

        source: new OSM()

      });

      var map = new Map({

        layers: [layer],

        target: 'map',

        view: new View({

          center: [0, 0],

          zoom: 2

        })

      });

      var pos = fromLonLat([16.3725, 48.208889]);

      // Vienna marker

      var marker = new Overlay({

        position: pos,

        positioning: 'center-center',

        element: document.getElementById('marker'),

        stopEvent: false

      });

      map.addOverlay(marker);

      // Vienna label

      var vienna = new Overlay({

        position: pos,

        element: document.getElementById('vienna')

      });

      map.addOverlay(vienna);

      // Popup showing the position the user clicked

      var popup = new Overlay({

        element: document.getElementById('popup')

      });

      map.addOverlay(popup);

      map.on('click', function(evt) {

        var element = popup.getElement();

        var coordinate = evt.coordinate;

        var hdms = toStringHDMS(toLonLat(coordinate));

        $(element).popover('destroy');

        popup.setPosition(coordinate);

        $(element).popover({

          placement: 'top',

          animation: false,

          html: true,

          content: '<p>The location you clicked was:</p><code>' + hdms + '</code>'

        });

        $(element).popover('show');

      });

    </script>

  </body></html>

Lucky_wangtao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openlayer Overlay

弹出窗口是使用Bootstrap中的Popovers创建的。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;Overlay&lt;/title&gt; &lt;link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/cs
复制链接

扫一扫