基于openlayer4实现多个popu展示

最新推荐文章于 2023-06-12 22:56:13 发布

AI视觉网奇

最新推荐文章于 2023-06-12 22:56:13 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/jacke121/article/details/84948257

版权

这个超出屏幕能自动平移，没有试：

https://blog.csdn.net/qq_27186245/article/details/82227282

https://blog.csdn.net/qq_27186245/article/details/82227234

基于openlayer4实现多个popu展示

最近一个项目需要基于openlayer4实现类似于popu方式展现渔场具体信息。翻看官网有点击弹出demo,基于此逻辑编写动态生成overlay图层及其所需要的dom节点。
在编写改demo时，遇到一个特别问题：地图加载osm底图，坐标点使用的是随机三个坐标点，popu始终表现为一个，最终通过设置view的投影，效果正常。

源码

<!DOCTYPE html>
<html>
  <head>
    <title>Popup</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/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>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <style>
      .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 50px;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖";
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
        var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source:  new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
             projection:"EPSG:4326",
          center: [115.55145, 23.01361],
          zoom: 9
        })
      });
          //popu弹出层
      var points=[[115.55145, 23.01361],[115.55145, 24.01361],[116.55145, 23.01361]];

      points.forEach(function(v,i){
          var tmp=document.createElement('div');
          tmp.id="popup_"+i;
          tmp.className='ol-popup';
          tmp.innerHTML='<div>hi hi</div>';
          var overlay_tmp= new ol.Overlay({
            element: tmp,
            autoPan: true,
            autoPanAnimation: {
              duration: 250
            },
            type:"mulPopu",
            position:v
          });
          map.addOverlay(overlay_tmp);
      });

       map.on('singleclick', function(evt) {
      });
    </script>
  </body>
</html>

AI视觉网奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于openlayer4实现多个popu展示

这个超出屏幕能自动平移，没有试：https://blog.csdn.net/qq_27186245/article/details/82227282https://blog.csdn.net/qq_27186245/article/details/82227234基于openlayer4实现多个popu展示最近一个项目需要基于openlayer4实现类似于popu方式展现...
复制链接

扫一扫