如何在 OpenLayers 中的地图上放置 HTML 元素
How to place a HTML element on a map in OpenLayers
我正在使用 jQuery 3.21 开发 Openlayers 5.13。我试图在 openlayers 中的地图视口上放置一个 html div
元素。这个元素应该有两个复选框来过滤掉地图上的一些内容。
为此,我使用了一个 Overlay
实例。
有两个问题:
1) 当我放大或缩小时,叠加层的尺寸往往会增加和减小,这不是我所期望的。
我希望叠加层(html div 元素)保持其大小。
2) 我一直想不出如何将叠加层放置在右上角。
叠加层是用 position
属性 实例化的,我不知道要设置什么。
我也不知道如果叠加层是我应该设法在地图上显示一些静态元素。 (我非常怀疑叠加是正确的方式)
这是我的代码:
css-
<style>
.ol-panel {
position: absolute;
background-color: white;
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: 100px;
}
</style>
html-
<div id="panel" class="ol-panel">
<div id="content">
<table>
<tr>
<td>
Ports <input type="checkbox">
</td>
</tr>
<tr>
<td>
Vessels <input type="checkbox">
</td>
</tr>
</table>
</div>
</div>
<div id="map"></div>
脚本-
map = new ol.Map({
logo: 'false',
target: 'map',
layers: [new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
panelDiv = document.getElementById("panel");
var panel = new ol.Overlay({
element: panelDiv,
stopEvent: false,
//offset:[0,0],
autoPan: true,
position: ol.proj.transform([82,80 ], 'EPSG:4326', 'EPSG:3857'),
positioning: 'top-right',
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(panel);
这是我当前的输出:
这就是我所期待的,一个固定在某个位置的元素:
参考 - [http://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html]
我在这里得到了我想要的东西 [http://openlayers.org/en/latest/examples/custom-controls.html?q=custom-controls]
/** Create a checkbox to toggle visibility of straits on map
* You can create different controls for different operations
*/
var strait_cbx = document.createElement('input');
strait_cbx.type = "checkbox";
strait_cbx.id = "strait_cbx";
strait_cbx.checked = true;
/**
* This is a container element which holds input elements which are controls for the map
* You can add as many as you want depending upon use.
* The element is a div which would act like a panel to add controls on map like toggling visibility of the layers
*/
var element = document.createElement('div');
element.className = 'ol-control-panel ol-unselectable ol-control';
element.innerHTML="<b>Straits</b> "
element.appendChild(strait_cbx);
/*A custom control which has container holding input elements etc*/
var controlPanel = new ol.control.Control({
element: element
});
map.addControl(controlPanel);
我正在使用 jQuery 3.21 开发 Openlayers 5.13。我试图在 openlayers 中的地图视口上放置一个 html div
元素。这个元素应该有两个复选框来过滤掉地图上的一些内容。
为此,我使用了一个 Overlay
实例。
有两个问题:
1) 当我放大或缩小时,叠加层的尺寸往往会增加和减小,这不是我所期望的。
我希望叠加层(html div 元素)保持其大小。
2) 我一直想不出如何将叠加层放置在右上角。
叠加层是用 position
属性 实例化的,我不知道要设置什么。
我也不知道如果叠加层是我应该设法在地图上显示一些静态元素。 (我非常怀疑叠加是正确的方式)
这是我的代码: css-
<style>
.ol-panel {
position: absolute;
background-color: white;
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: 100px;
}
</style>
html-
<div id="panel" class="ol-panel">
<div id="content">
<table>
<tr>
<td>
Ports <input type="checkbox">
</td>
</tr>
<tr>
<td>
Vessels <input type="checkbox">
</td>
</tr>
</table>
</div>
</div>
<div id="map"></div>
脚本-
map = new ol.Map({
logo: 'false',
target: 'map',
layers: [new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
panelDiv = document.getElementById("panel");
var panel = new ol.Overlay({
element: panelDiv,
stopEvent: false,
//offset:[0,0],
autoPan: true,
position: ol.proj.transform([82,80 ], 'EPSG:4326', 'EPSG:3857'),
positioning: 'top-right',
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(panel);
这是我当前的输出:
这就是我所期待的,一个固定在某个位置的元素:
参考 - [http://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html]
我在这里得到了我想要的东西 [http://openlayers.org/en/latest/examples/custom-controls.html?q=custom-controls]
/** Create a checkbox to toggle visibility of straits on map
* You can create different controls for different operations
*/
var strait_cbx = document.createElement('input');
strait_cbx.type = "checkbox";
strait_cbx.id = "strait_cbx";
strait_cbx.checked = true;
/**
* This is a container element which holds input elements which are controls for the map
* You can add as many as you want depending upon use.
* The element is a div which would act like a panel to add controls on map like toggling visibility of the layers
*/
var element = document.createElement('div');
element.className = 'ol-control-panel ol-unselectable ol-control';
element.innerHTML="<b>Straits</b> "
element.appendChild(strait_cbx);
/*A custom control which has container holding input elements etc*/
var controlPanel = new ol.control.Control({
element: element
});
map.addControl(controlPanel);