写道
http://www.openlayers.org/dev/examples/select-feature-openpopup.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Open Popup on Layer.Vector</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
#controlToggle li {
list-style: none;
}
</style>
<script src="../OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControls, selectControl, selectedFeature;
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
"<div style='font-size:.8em'>Feature: " + feature.id +"<br>Area: " + feature.geometry.getArea()+"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayers([wmsLayer, polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
drawControls = {
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon),
select: selectControl
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
}
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">Open Popup on Layer.Vector</h1>
<div id="tags">
vector, feature, selecting, selection, popup
</div>
<p id="shortdesc">
Using a Control.SelectFeature, open a popup on click.
</p>
<div id="map" class="smallmap"></div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle"
onclick="toggleControl(this);" />
<label for="polygonToggle">draw polygon</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle"
onclick="toggleControl(this);" />
<label for="selectToggle">select polygon on click</label>
</li>
</ul>
<p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
to do fun things -- like open a popup.
</p>
</body>
</html>
相关推荐
在本文中，我们将深入探讨如何使用Vue框架与OpenLayers库结合来实现在地图上点击时显示坐标信息的弹框效果。Vue是一个流行的前端JavaScript框架，而OpenLayers则是一个功能强大的开源JavaScript库，用于创建交互式...
Openlayers虽然提供了很多方法， 一般是从图层（Layer）获取获取元素（feature），或者从元素（Feature）获取坐标（Coordinate）。获取到的一般都是集合。但是想要反着通过元素（feature）获取图层（Layer）.OL选择...
对于地图上的每个要素，检查它的几何形状是否与绘制的多边形相交，如果相交则将其加入到选中的要素列表中。 在"pointSelectDemo"这个示例中，开发者可能提供了实现上述三种选择方式的代码。这将包括设置地图层、...
OpenLayers 3 是一个强大的开源JavaScript库，用于在Web上创建交互式的地图应用。它支持多种数据源，包括WMS、WMTS等，并且能够处理矢量数据，实现地图的动态绘制。在这个主题中，我们将深入探讨如何利用OpenLayers ...
在OpenLayers中，你可以利用`ImageCanvas`策略来动态加载和渲染矢量元素。这种方法特别适合处理大量或者复杂的矢量数据，因为它们可以在画布上进行本地绘制，从而提高性能。 1. **什么是`ImageCanvas`**： `Image...
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图数据源，包括WMS、WMTS、TMS、GeoJSON等，使得开发者能够轻松地将地理信息集成到Web应用中。这个"openlayers中文.rar...
通过这些样式，可以实现地图元素的可视化增强，提高地图的可读性。 5. 动画和过渡效果：OpenLayers 可以创建动画和过渡效果，比如平滑的缩放、移动，或者随着时间变化的数据更新。这些效果可以增加地图的动态感，...
OpenLayers 源文件，OpenLayers 源文件，OpenLayers 源文件，OpenLayers 源文件，OpenLayers 源文件，OpenLayers 源文件，OpenLayers 源文件，OpenLayers 源文件、
OpenLayers 是一个强大的开源JavaScript库，专为在Web上创建交互式地图应用而设计。它支持多种地图数据源，包括WMS、WMTS、TMS等服务，以及GeoJSON和KML等本地格式。OpenLayers v5.3.0是这个库的一个重要版本更新，...
**OpenLayers 开发指南** OpenLayers 是一个开源的JavaScript库，专门用于在Web浏览器中展示地理信息系统（GIS）数据。这个强大的工具允许开发者创建交互式的地图应用，支持多种地图服务，包括WMS、WFS、KML等。...
你需要指定一个DOM元素作为地图容器，以及一个`View`对象来定义初始视图，包括中心位置和缩放级别。 3. **图层管理**：OpenLayers支持多种图层类型，如瓦片图层（TileLayer）、图像图层（ImageLayer）和矢量图层...
《OpenLayers 5.3.0 高速文档详解》 OpenLayers 是一个开源JavaScript库，专门用于在网页上创建交互式的地图应用。版本5.3.0是其一个重要里程碑，提供了丰富的功能和优化，使得开发者能更高效地构建地理信息系统...
- **图例和控制面板**：可以自定义地图的控制元素，如比例尺、图例、缩放滑块等。 - **事件处理**：提供丰富的事件监听和处理机制，可以响应用户的交互行为，实现动态更新和功能扩展。 **5. 示例和文档：** ...
OpenLayers 是一个强大的开源JavaScript库，专为构建交互式的、基于Web的地图应用而设计。它提供了丰富的地图操作功能，如图层管理、地理坐标转换、瓦片图层、矢量图层、WMS和WFS服务支持等。最新版OpenLayers库是...
在OpenLayers中调用百度地图是一项常见的需求，特别是在构建Web GIS应用时，用户可能希望结合OpenLayers的强大功能和百度地图的丰富数据。OpenLayers是一个开源JavaScript库，用于创建交互式的地图应用，而百度地图...
在`mounted`生命周期钩子中，初始化地图并将其附加到Vue实例的挂载元素上： ```javascript mounted() { this.map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: ...
在OpenLayers中，Map对象是整个地图应用的核心，包含了地图的视图、图层集合、控件等元素。你可以通过设置地图的中心点、分辨率、投影等属性来定制地图显示。此外，Map对象还提供了交互事件，如单击、双击、拖动等，...
其中，"图层"（Layer）是地图的核心元素，它可以是来自不同服务的影像、矢量数据或静态图像。每个图层都由一个OpenLayers.Layer对象表示，你可以通过指定URL和服务类型来创建图层。例如，WMS图层可以通过`new ...
在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...