Question

我想将它与https://jsfiddle.net/b2L6qppd/2/连接起来：https://jsfiddle.net/jonataswalker/ooxs1w5d/并在上下文菜单中添加一个添加弹出窗口的选项。

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

请帮助

Answer 1

1）在HTML代码中添加popup div。

2）使用您的HTML Overlay ID添加popup。

new ol.Overlay(({
    element: document.getElementById('popup'),    
}));
mapTiles.addOverlay(overlay);

3）添加contextMenu外部库https://unpkg.com/ol3-contextmenu

这是有效的jsfiddle

proj4.defs('EPSG:2180', "+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +no_defs");

var p = ol.proj.get('EPSG:2180');

var mapTiles = new ol.Map({
  target: 'map',
  renderer: 'canvas',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: 'http://mapy.geoportal.gov.pl/wss/service/img/guest/ORTO/MapServer/WMSServer',
        params: {
          'LAYERS': 'Raster',
          'CRS': 'EPSG:2180',
          'VERSION': '1.1.1'
        }
      }),
      isBaseLayer: true,
      projection: p
    })
  ],

  view: new ol.View({
    center: ol.proj.transform([19, 52], 'EPSG:4326', 'EPSG:2180'),
    zoom: 6,
    projection: p
  })
});

var contextmenu_items = [{
    text: 'add popup',
    classname: 'bold',
    callback: popup
  },
  '-' // this is a separator
];

var contextmenu = new ContextMenu({
  width: 180,
  items: contextmenu_items
});
mapTiles.addControl(contextmenu);
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};




function popup(obj) {
  overlay = new ol.Overlay( /** @type {olx.OverlayOptions} */ ({
    element: document.getElementById('popup'),
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
  }));

  mapTiles.addOverlay(overlay);
  content.innerHTML = '<p>You clicked here:</p><code>' + obj.coordinate + '</code>';
  overlay.setPosition(obj.coordinate);

}

.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;
}

.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: "✖";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
<script src="https://unpkg.com/ol3-contextmenu@2.5.0/build/ol3-contextmenu.js"></script>

<link href="https://unpkg.com/ol3-contextmenu@latest/build/ol3-contextmenu.min.css" rel="stylesheet" />

<body>
  <div id="map"></div>
  <div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
  </div>
</body>

如何将自定义上下文菜单添加到地图

1 个答案: