<!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": ...
turf.linestring(coordinates, properties) 基于坐标数组创建 LineString。 可以选择性地添加属性。 参数 范围 类型 描述 coordinates 数组.<数组.<数字>> 位置数组 properties 目的 可选:要添加为属性的...
处理以下几何与知名测试(WKT),知名二进制(WKB)和GeoJSON之间的转换: 观点点Z 点数PointZM LineString LineStringZ 多边形多边形Z 多点多点Z MuliLineString MuliLineStringZ 多多边形多多边形Z 几何集合注意...
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 ...
如果要在cgmath项目中使用此库,请将其添加到Cargo.toml中: linestring = {version = "^0.0.8", features = ["impl-cgmath"]} 其他受支持的2d / 3d库也是如此: linestring = {version = "^0.0.8", features =
GeoJson格式矢量线(LineString)数据压缩包,属性包括name、color、opacity等(随机值),包含1W、10W、50W三种数量的矢量线GeoJson文件。
可以使用以下数据类型: 点多点LineString MultiLineString 多边形多多边形以及以下超级类型: 几何几何集合特征FeatureCollection坐标参考系统根据GeoJSON规范,我们假定使用WGS84基准的默认坐标参考系统(CRS)。...
获取一个点和一个几何体(Point,Polygon,LineString,GeometryCollection等),并使用草皮计算该几何体上的最近点。 如果该点位于多边形内,它将返回该点本身。 几何上最近点主要依靠@ turf / line-nearest-on-...
geojson-长度计算 LineString 或 MultiLineString 的长度。用法 npm install geojson-length var geojsonLength = require ( 'geojson-length' ) ;var area = geojsonLength ( geometry ) ;
GIS系统概述 PostGIS支持所有的空间数据类型 这些类型包括:点 POINT 线 LINESTRING 多边形 POLYGON 多点 MULTIPOINT 多线 MULTILINESTRING 多多边形 MULTIPOLYGON 和集合对象集 GEOMETRYCOLLECTION 等
将有效的GeoJSON多边形转换为线串 草皮多边形到线串模块 turf.polyToLineString(polygon) 采用GeoJSON Polygon功能并将其作为GeoJSON线串返回。 参数 范围 类型 描述 polygon 多边形 GeoJSON多边形 例子 var ...
LineString 多边形 多多边形 特征 WKT支持 从WKT字符串读取 写入WKT字符串 GeoJson支持 从GeoJson字符串读取 写入GeoJson字符串 WKB支持 从WKB十六进制字符串读取 写入WKB十六进位字串 几何运算 交叉口检查 点与点 ...
在起点和终点处切片 LineString 参数 范围 类型 描述 Point 观点 开始切片 Point 观点 停止切片 Line 线串 切片 例子 var line = { "type" : "Feature" , "properties" : { } , "geometry" : { "type" : ...
【项目资源】: 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发...有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同进步。
GeoMet 将转换为 (众所周知的文本/二进制)或 ,...-> GeoJSON: 观点LineString 多边形多点MultiLineString 多多边形几何集合注意:当前不支持读取和写入空的WKB几何。 GeoPackage Binary <-> GeoJSON: 观点Li
在线点测试点是在直线上还是LineString上。安装通过npm安装: npm install point-on-line用法var pointOnLine = require ( "point-on-line" ) ;pointOnLine ( [ [ 0 , 0 ] , [ 1 , 1 ] ] , [ 0.5 , 0.5 ] ) ; // ...
geojson-coordinateProperties 一个扩展提案,该提案沿LineString几何图形添加了用于时间和心率数据的编码。需求语言关键字“必须”,“必须”,“必须”,“应”,“应不”,“应”,“不应”,“推荐”,“不推荐...
扫掠线相交使用扫掠线算法检测多边形和/或折线之间的交点的小型快速模块。文献资料安装npm install sweepline-intersections基本用途有效输入:Geojson Feature或Geometry包括Polygon , LineString , MultiPolygon...
使用WGS84基准的地理相交工具 安装 $ npm install wgs84-intersect-util 方法 intersectPolygons(searchWithin, polygons) 将一个GeoJSON多边形列表与给定的GeoJSON多边形相交 searchWithin : object ,GeoJSON...
wkx WKT / WKB / EWKT / EWKB / TWKB / GeoJSON解析器和序列化器,支持观点LineString 多边形多点MultiLineString 多多边形几何集合例子以下示例向您展示如何使用wkx。 var wkx = require ( 'wkx' ) ;//Parsing a ...