<!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>SelectFeature Control 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="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}
);
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var vectors = new OpenLayers.Layer.Vector("Vector Layer", {
renderers: renderer
});
vectors.events.on({
'featureselected': function(feature) {
document.getElementById('counter').innerHTML = this.selectedFeatures.length;
},
'featureunselected': function(feature) {
document.getElementById('counter').innerHTML = this.selectedFeatures.length;
}
});
map.addLayers([wmsLayer, vectors]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
var points = [
new OpenLayers.Geometry.Point(-0.1279688, 51.5077286).transform(epsg4326, projectTo),
new OpenLayers.Geometry.Point(-0.119623, 51.503308).transform(epsg4326, projectTo),
new OpenLayers.Geometry.Point(-0.1244324, 51.5006728).transform(epsg4326, projectTo),
new OpenLayers.Geometry.Point(-0.1279688, 51.5077286).transform(epsg4326, projectTo)
];
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.LineString(points)
);
vectors.addFeatures([feature]);
drawControls = {
point: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Point
),
line: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Path
),
polygon: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Polygon
),
select: new OpenLayers.Control.SelectFeature(
vectors,
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
),
selecthover: new OpenLayers.Control.SelectFeature(
vectors,
{
multiple: false, hover: true,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
)
};
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();
}
}
}
function update() {
var clickout = document.getElementById("clickout").checked;
if(clickout != drawControls.select.clickout) {
drawControls.select.clickout = clickout;
}
var box = document.getElementById("box").checked;
if(box != drawControls.select.box) {
drawControls.select.box = box;
if(drawControls.select.active) {
drawControls.select.deactivate();
drawControls.select.activate();
}
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Select Feature Example</h1>
<div id="tags">
vector, feature, selecting, selection, advanced
</div>
<p id="shortdesc">
Select a feature on hover or click with the Control.SelectFeature on a
vector layer.
</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="point" id="pointToggle"
onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle"
onclick="toggleControl(this);" />
<label for="lineToggle">draw line</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="selecthover" id="selecthoverToggle"
onclick="toggleControl(this);" />
<label for="selecthoverToggle">Select features on hover</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle"
onclick="toggleControl(this);" />
<label for="selectToggle">select feature (<span id="counter">0</span> features selected)</label>
<ul>
<li>
<input id="box" type="checkbox" checked="checked"
name="box" onchange="update()" />
<label for="box">select features in a box</label>
</li>
<li>
<input id="clickout" type="checkbox"
name="clickout" onchange="update()" />
<label for="clickout">click out to unselect features</label>
</li>
</ul>
</li>
</ul>
<p>Use the shift key to select multiple features. Use the ctrl key to
toggle selection on features one at a time. Note: the "clickout" option has no
effect when "hover" is selected.</p>
</body>
</html>
相关推荐
将 LineString 几何体转换为（闭合的）多边形几何体。 用法 var lineToPolygon = require('turf-line-to-polygon'); var lineFeature = { "type": "Feature", "properties": {}, "geometry": { "type": ...
泰森多边形，也称为Voronoi图，是由一系列多边形构成的图形，其中每个点到其所在多边形的所有边界距离都小于到其他任何多边形的距离。在JavaScript环境下，利用iClient 3D产品系列，我们可以实现这一功能。 首先，...
turf.linestring(coordinates, properties) 基于坐标数组创建 LineString。 可以选择性地添加属性。 参数 范围 类型 描述 coordinates 数组.<数组.<数字>> 位置数组 properties 目的 可选：要添加为属性的...
在JavaScript中，你可以使用`setTimeout`或`setInterval`函数来定时更新地图上的标记位置，从而创建动画效果。 创建动画的关键步骤如下： 1. **加载地图和数据**：首先，你需要加载包含路线数据的地图图层。这通常...
在GDAL中，主要使用OGR（Open Geospatial Library）这个子库来处理矢量数据，包括Polygon和LineString。OGR提供了丰富的API函数来创建、读取、修改和分析地理空间数据。例如，OGRGeometry类是所有几何对象的基类，...
例如，假设我们有一个公园的多边形，我们想根据道路将其分割成几个不同的区域，我们可以首先获取公园的GeoJSON多边形数据，然后获取公园内道路的LineString数据，使用`turf.cut`函数将这两个数据结合起来，生成新的...
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发...有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
处理以下几何与知名测试（WKT），知名二进制（WKB）和GeoJSON之间的转换： 观点点Z 点数PointZM LineString LineStringZ 多边形多边形Z 多点多点Z MuliLineString MuliLineStringZ 多多边形多多边形Z 几何集合注意...
在GeoJson中，线（LineString）是一种基本的几何对象类型，用于表示连续的线性路径，比如道路、河流或者边界线。本压缩包包含三种不同规模的GeoJson文件，分别含有1万、10万和50万条LineString数据，这些数据具有...
line = SG.LineString(list(zip(x,y))) #(1,0)到(1,100)两点的连线 yline = SG.LineString([(1, 0), (1, 100)]) #or (0,1)到(100,1)两点的连线 xline = SG.LineString([(0, 1), (100, 1)]) #两条线的交点 coords ...
获取一个点和一个几何体（Point，Polygon，LineString，GeometryCollection等），并使用草皮计算该几何体上的最近点。 如果该点位于多边形内，它将返回该点本身。 几何上最近点主要依靠@ turf / line-nearest-on-...
如果要在cgmath项目中使用此库，请将其添加到Cargo.toml中： linestring = {version = "^0.0.8", features = ["impl-cgmath"]} 其他受支持的2d / 3d库也是如此： linestring = {version = "^0.0.8", features =
画线功能的核心是`ol.geom.LineString`类，它可以表示一条或多条连续的线段。下面是如何添加一条直线的示例： ```javascript // 定义两个坐标点 var coordinates = [[-10, 50], [0, 50]]; // 创建LineString几何...
2. **绘制线**：对于线性特征，如路径或路线，可以使用 `ol.geom.LineString`。与点类似，创建几何对象后，将其作为特征添加到矢量源，再添加到图层。 ```javascript let lineStringGeometry = new ol.geom....
可以使用以下数据类型： 点多点LineString MultiLineString 多边形多多边形以及以下超级类型： 几何几何集合特征FeatureCollection坐标参考系统根据GeoJSON规范，我们假定使用WGS84基准的默认坐标参考系统（CRS）。...
将有效的GeoJSON多边形转换为线串 草皮多边形到线串模块 turf.polyToLineString(polygon) 采用GeoJSON Polygon功能并将其作为GeoJSON线串返回。 参数 范围 类型 描述 polygon 多边形 GeoJSON多边形 例子 var ...
GIS系统概述 PostGIS支持所有的空间数据类型 这些类型包括：点 POINT 线 LINESTRING 多边形 POLYGON 多点 MULTIPOINT 多线 MULTILINESTRING 多多边形 MULTIPOLYGON 和集合对象集 GEOMETRYCOLLECTION 等
geojson-长度计算 LineString 或 MultiLineString 的长度。用法 npm install geojson-length var geojsonLength = require ( 'geojson-length' ) ;var area = geojsonLength ( geometry ) ;
在起点和终点处切片 LineString 参数 范围 类型 描述 Point 观点 开始切片 Point 观点 停止切片 Line 线串 切片 例子 var line = { "type" : "Feature" , "properties" : { } , "geometry" : { "type" : ...
LineString 多边形 多多边形 特征 WKT支持 从WKT字符串读取 写入WKT字符串 GeoJson支持 从GeoJson字符串读取 写入GeoJson字符串 WKB支持 从WKB十六进制字符串读取 写入WKB十六进位字串 几何运算 交叉口检查 点与点 ...