<!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>Draw Feature Example</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;
}
p {
width: 512px;
}
/* avoid pink tiles */
.olImageLoadError {
background-color: transparent !important;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControls;
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 pointLayer = new OpenLayers.Layer.Vector("Point Layer");
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
var boxLayer = new OpenLayers.Layer.Vector("Box layer");
map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer, boxLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
drawControls = {
point: new OpenLayers.Control.DrawFeature(pointLayer,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon),
box: new OpenLayers.Control.DrawFeature(boxLayer,
OpenLayers.Handler.RegularPolygon, {
handlerOptions: {
sides: 6,
irregular: true
}
}
)
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true;
}
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
function allowPan(element) {
var stop = !element.checked;
for(var key in drawControls) {
drawControls[key].handler.stopDown = stop;
drawControls[key].handler.stopUp = stop;
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Draw Feature Example</h1>
<div id="tags">
point, line, linestring, polygon, box, digitizing, geometry, draw, drag
</div>
<p id="shortdesc">
Demonstrate on-screen digitizing tools for point, line, polygon and box creation.
</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="box" id="boxToggle" onclick="toggleControl(this);" />
<label for="boxToggle">draw box</label>
</li>
<li>
<input type="checkbox" name="allow-pan" value="allow-pan" id="allowPanCheckbox" checked=true onclick="allowPan(this);" />
<label for="allowPanCheckbox">allow pan while drawing</label>
</li>
</ul>
<div id="docs">
<p>With the point drawing control active, click on the map to add a point.</p>
<p>With the line drawing control active, click on the map to add the points that make up your line.
Double-click to finish drawing.</p>
<p>With the polygon drawing control active, click on the map to add the points that make up your
polygon. Double-click to finish drawing.</p>
<p>With the box drawing control active, click in the map and drag the mouse to get a rectangle. Release
the mouse to finish.</p>
<p>With any drawing control active, paning the map can still be achieved. Drag the map as
usual for that.</p>
<p>Hold down the shift key while drawing to activate freehand mode. While drawing lines or polygons
in freehand mode, hold the mouse down and a point will be added with every mouse movement.<p>
</div>
</body>
</html>
相关推荐
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标
多边形选择则更为复杂，用户可以画一个多边形来选取区域内所有要素。这个过程涉及到绘制多边形和计算几何。你可以使用`draw`控制来创建一个可编辑的多边形，然后在完成绘制时（`drawend`事件触发）进行几何相交检测...
在本例中，“面层”通常指的是包含多边形几何类型的图层，这些多边形可以代表地理区域或者其他实体。 要创建一个面层，首先你需要创建一个`VectorSource`实例，用于存储面要素数据。例如： ```javascript const ...
OpenLayers 3 提供了构建几何图形的方法，通过组合线和多边形，可以创建出具有箭头头部的线条。 6. **钳击**：钳击图形通常由两条相交的线构成，表示两支队伍或力量从两侧夹击目标。这需要结合使用LineString和...
这个“OpenLayersPolygonsMerge”项目专注于一个特定的几何操作，即如何在OpenLayers中合并两个相邻的多边形。在本篇中，我们将深入探讨这个过程，并了解背后的原理和技术。 首先，我们要理解OpenLayers中的多边形...
3. 点、线、面绘制：OpenLayers 支持在地图上绘制点、线、多边形等几何对象。在特效demo中，可能会包含各种绘图工具和编辑工具的实现，帮助用户在地图上进行标注和编辑。 4. 样式和符号化：OpenLayers 提供了强大的...
在ol(openlayers)中进行两个几何要素的拟合，即通过动画的形式从一个几何对象过渡到另一个几何对象，支持点、线、面： /** * @description 动态拟合两个多边形 * @param {object} map ol.Map * @param {object} ...
openlayers 不规则polygon 按一定范围扩大边界，利用turf.js 缓冲区 buffer ,两行代码实现。输入指定半径要素计算缓冲区，支持的单位是英里、公里和度。
**OpenLayers 遮罩示例** OpenLayers 是一个强大的开源JavaScript库，用于在Web上构建交互式的地图应用。这个示例将展示如何在OpenLayers中实现地图遮罩功能，以便在地图上显示半透明覆盖层，从而突出显示特定区域...
本资料主要关注OpenLayers中的画线方法，下面将详细介绍这一主题。 在OpenLayers中，画线主要涉及到`ol.geom.LineString`几何对象和`ol.feature`特征。`ol.geom.LineString`用于创建直线几何，而`ol.feature`则是将...
OpenLayers 3提供了丰富的地图操作和图层管理功能，包括添加矢量图层、加载WMS或WMTS服务、处理几何对象（如点、线、多边形）等。在轨迹回放中，开发者可能会创建一个矢量图层来存储轨迹点，然后通过更新这些点的...
1、实现图片地图，图片地图比例尺 2、绘制点的路径 3、绘制多边形，定位不规则多边形中心点，显示名称 4、多边形编辑 5、地图全屏，地图截图 6、点是否在区域中判定 7、暂停，播放，向前，向后20s，倍速播放控制路径...
主要功能是支持标绘符号的绘制，这意味着用户可以在这个平台上绘制各种几何形状，如点、线、多边形，以及其他特定的地理标记符号，如箭头、建筑物轮廓等。这在地理信息分析、规划、灾害响应、军事应用等领域有着广泛...
在OpenLayers中，我们可以利用这些坐标点构建线（LineString）或者多边形（Polygon），并结合时间信息来实现动态播放效果。 实现OpenLayers轨迹回放功能主要涉及以下几个关键步骤： 1. **数据准备**：你需要一组...
常见的地图插件有Google Maps API、Leaflet、OpenLayers等，它们都提供了丰富的API和文档供开发者调用和学习。 HTML5是现代网页开发的标准，它的Canvas元素是实现动态图形绘制的核心。Canvas是一个二维绘图上下文，...
关于OpenLayers一周研究成果，内有OpenLayers2.13、OpenLayers3的源码以及加载百度谷歌地图的源码，如何定位，如何画线，生成多边形等源码，以及OpenLayers2.13的中文接口文档。OpenLayers基础教程。
通过使用矢量图层，开发者能够动态地在地图上添加、编辑和删除点、线和多边形。这在"ol3-test"中应该有相应的演示，展示如何创建和操作这些地图对象。 实时轨迹功能是OpenLayers 3的另一个亮点。利用GeoJSON或其他...
这两个控件分别基于OpenLayers.Handler.Path和OpenLayers.Handler.Polygon，允许用户在地图上画线（测距）和画多边形（测面积）： ```javascript var panel = new OpenLayers.Control.Panel(); panel.addControls(...
OpenLayers 提供了丰富的地图操作工具，如缩放、平移、图层切换等，还支持自定义图层、标记、线和多边形等地理元素的绘制。在动态轨迹的应用场景中，这可能涉及到时间序列数据的处理，比如显示河流水流随时间变化的...