Openlayer 3 删除上一次绘制的图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画图测量面积</title>
<link rel="stylesheet" href="css/ol.css">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/ol.js"></script>
<style>
#map{
width:100%;
height:100%;
}
.tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
}
.tooltip-measure {
opacity: 1;
font-weight: bold;
}
.tooltip-static {
background-color: #ffcc33;
color: black;
border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
border-top: 6px solid rgba(0, 0, 0, 0.5);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
position: absolute;
bottom: -6px;
margin-left: -7px;
left: 50%;
}
.tooltip-static:before {
border-top-color: #ffcc33;
}
</style>
</head>
<body>
<button id="deleteArea">删除上一个面积</button>
<button id="deletePoint">删除上一个点</button>
<button id="finishDraw">完成绘制</button>
<button id="cancelDraw">取消绘制</button>
<div id="map"></div>
<script>
$("#deleteArea").click(function(){
if(0!==q.length){
var t=q.pop().number;//删除的FeatureID
var feature=drawing_layer.getSource().getFeatureById(t);
drawing_layer.getSource().removeFeature(feature);
$("div.tooltip-static").eq(0).remove();
}
});
$("#deletePoint").click(function(){
polygon_drawing_tool.removeLastPoint();
});
$("#cancelDraw").click(function(){
drawing_layer.getSource().clear();
i=0,q=[];
$(".ol-overlay-container").hide();
});
$("#finishDraw").click(function(){
polygon_drawing_tool.finishDrawing();
});
var map=new ol.Map({
target:'map',
layers:[
new ol.layer.Tile({
source:new ol.source.OSM()
})
],
view:new ol.View({
center:[0,0],
zoom:2
})
});//初始化地图
var drawing_layer = new ol.layer.Vector({
source: new ol.source.Vector(),
style:new ol.style.Style({
fill:new ol.style.Fill({
color:"rgba(225,225,225,.2)"
}),
stroke:new ol.style.Stroke({
color:"#ffcc33",
width:2
}),
image:new ol.style.Circle({
radius:7,
fill:new ol.style.Fill({
color:"#ffcc33"
})
})
})
});// 画面积计算的图层
map.addLayer(drawing_layer);
var polygon_drawing_tool = new ol.interaction.Draw({
source: drawing_layer.getSource(),
type: 'Polygon',
style: new ol.style.Style({
fill: new ol.style.Fill({
color: '#ffcc33'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
lineDash: [10, 10],
width: 3
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});//绘图控件对象
var listener;//绑定交互绘制工具开始绘制事件
var measureTooltipElement;
polygon_drawing_tool.on('drawstart',function(evt) {
sketch = evt.feature;
var tooltipCoord = evt.coordinate;
listener = sketch.getGeometry().on('change', function(evt) {
var geom = evt.target;
var output = formatArea(/** @type {ol.geom.LineString} */ (geom));
tooltipCoord = geom.getLastCoordinate();
createMeasureTooltip();
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord);
});
}, this);
var i=0,q=[];
polygon_drawing_tool.on('drawend',function(e) {
i=q.length+1;
e.feature.setId(i);
q.push({number:i});
measureTooltipElement.className = 'tooltip tooltip-static';
measureTooltip.setOffset([0, -7]);
sketch = null;
measureTooltipElement = null;
createMeasureTooltip();
ol.Observable.unByKey(listener);
}, this);
var formatArea = function(polygon) {
var area=polygon.getArea();
var output;
if(area>10000){
output=(Math.round(area/1000000*100)/100)+' '+'km<sup>2</sup>';
}else{
output=(Math.round(area*100)/100)+' '+'m<sup>2</sup>';
}
return output;
};
function createMeasureTooltip() {
if (measureTooltipElement) {
measureTooltipElement.parentNode.removeChild(measureTooltipElement);
}
measureTooltipElement = document.createElement('div');
measureTooltipElement.className = 'tooltip tooltip-measure';
measureTooltip = new ol.Overlay({
element: measureTooltipElement,
offset: [0, -15],
positioning: 'bottom-center'
});
map.addOverlay(measureTooltip);
}
$(document).ready(function() {
map.addInteraction(polygon_drawing_tool);
});
</script>
</body>
</html>
Openlayer 3 删除上一次绘制的图的更多相关文章
- 在MVC应用程序中，怎样删除上传的文件
在ASP.NET MVC应用程序中,怎样删除上传的文件. 由于上传时,真正文件是存储在应用程序某一目录,在数据库表中,只是存储其基本信息.在删除时,需要注意一下,由于没有事务可操作.Insus.NET ...
- 利用Flex组件birdeye绘制拓扑关系图
birdeye绘制拓扑关系图 1.flex简单介绍 Flex 是一个高效.免费的开源框架,可用于构建具有表现力的 Web应用程序,这些应用程序利用Adobe Flash Player和Adobe AI ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Tableau绘制漏斗图、甘特图、瀑布图、镶边面积图、阴影坡度图
Tableau绘制漏斗图.甘特图.瀑布图.镶边面积图.阴影坡度图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 漏斗图 数据源 1.1 分色直条漏斗图 (1) ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Graphviz绘制百家争鸣图
最近读易中天<先秦诸子百家>,一边读一边在纸上画出逻辑关系,图越来越复杂,趁中午休息索性就把图用Graphviz重新绘制了一下;由于Graphviz主动承担了绘图排版的职责,我只需要关注内 ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- Excel应该这么玩——7、我是预言家：绘制趋势图
让我们先看一个场景:你是公司销售部的员工,你手里有公司最近几年的销售额相关的数据,经理希望你预测下个月的销售额.盯着一堆数据,你或许会想到画一张XY坐标图,然后将每个月份的销售额标定为一个坐标.但是下 ...
- 使用Excel 2007绘制甘特图
本文将教大家如何使用Excel 2007制作甘特图.Excel并未提供甘特图类型,但还是可以绘制甘特图的,方法就是通过对堆积条形图类型进行自定义,使之显示任务.任务工期和层次结构. 下面的过程可帮助创 ...
随机推荐
- ISupportInitialize的用处
[译]ISupportInitialize的用处 [译]ISupportInitialize的用处 注:本文是对How ISupportInitialize Can Help的翻译.原文作者编 ...
- Arduino 串口篇 Arduino发送十六进制 send HEX via serial port RS232-to-USB to PC
发送十六进制比较直观,可以在上位机中直接获取十六进制的数据,然后在在上位机上将十六进制HEX转换成BIN(二进制)或者DEC(十进制)就十分简单有效了. 下面是在Arduino上怎么演示直接发送16进 ...
- oracle报表开发方案
PL/SQL也是一门语言,后台开发经常会用到. 目前做要到一个功能,关于"报表任务调度",说明白了就是做几张报表,每天统计一次新数据,用于在PC页面上显示,我苦思冥想了几天,总结出 ...
- mybatis 入门进阶之 mapper
由于上节 <mybatis 入门优化>中的dao实现类耦合了user.xml中的statment的id,例如:src.main.resource.userMapper.findUserBy ...
- C语言之总结1
1). 终端常用的命令: pwd 显示终端的工作路径. ls list 清单 显示当前工作路径下的所有的文件以及文件夹. ls -l 以详细信息显示当前工作路径下的所有的文件以及文件夹. cd 要切 ...
- XAF-BI.Dashboard模块概述 web/win
Dashboard模块介绍了在ASP.NET XAF 和 WinForms 应用程序中简单的集成 DevExpress Dashboard控件的方法. 其实不仅仅是控件,利用了现有的XAF数据模型,这 ...
- Linux中top和free命令详解(转)
top:命令提供了实时的对系统处理器的状态监视.它将显示系统中CPU最"敏感"的任务列表. 该命令可以按CPU使用.内存使用和执行时间对任务进行排序: 而且该命令的很多特性都可以通 ...
- UVALive 7141 BombX
离散化,线段树.$2014$年$ACM/ICPC$亚洲区域赛上海站$D$题. 可以处理出炸任意相邻的$h$行能消灭的点的数量,以及炸任意相邻的$w$列能消灭的点的数量,分别用$py[i]$和$px[i ...
- 7 -- Spring的基本用法 -- 10...
7.10 高级依赖关系配置 组件与组件之间的耦合,采用依赖注入管理:但基本类型的成员变量值,应直接在代码中设置. Spring支持将任意方法的返回值.类或对象的Field值.其他Bean的getter ...
- 清浮动，防止上下margin重叠（浏览器顶部空白崩溃）
清浮动 父级添加类别! .clearfix{zoom:1;//兼容ie6,7} .clearfix:after{ content:"."; display: "block ...