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并未提供甘特图类型,但还是可以绘制甘特图的,方法就是通过对堆积条形图类型进行自定义,使之显示任务.任务工期和层次结构. 下面的过程可帮助创 ...
随机推荐
- NDepend 3.0已与Visual Studio集成
NDepend 3.0已与Visual Studio集成 投递人 itwriter 发布于 2010-02-10 16:17 评论(0) 有1638人阅读 原文链接 [收藏] « » NDepe ...
- Union 与 Union all 区别
原创,请园长不要删 Sql查询统计时,很多时候用到了union 和 union all,union与union all的区别就是联合查询的时候union会去重,union all不会去重.本人用uni ...
- Dynamics 365 for Team Members Description
Dynamics 365 for Team Members, Business edition The Dynamics 365 for Team Members, Business edition ...
- github + SourceTree管理自己的库并上传到cocoapods及各种坑的解决办法
一.上传写好的库到github(我这里使用SourceTree客户端) 1.在github上创建一个仓库 2.将仓库拉倒本地 复制仓库地址 将刚才复制的地址粘贴到这里 3.上传项目到github 将写 ...
- spring mvc @ResponseStatus 注解 注释返回中文乱码的问题
前言 前文中讲到,使用@ResponseStatus注解,可以修饰一个异常类,在发生异常的时候返回指定的错误码和消息,在返回的 reason中包含中文的时候,就会出现中文乱码的问题 现象 reason ...
- linux kernel 编译
lin
- 修改release management client对应的服务器的地址
参考资料:http://stackoverflow.com/questions/25313053/how-to-change-a-release-management-server-name-in-r ...
- 单身福利来了：VR恋人为你量身定制一个女朋友
相对于传统视频体验,VR视频给人带来了更加真实的体验.特别是对于单身狗来说,能在VR中拥有一个虚拟的恋人可谓是莫大的心灵安慰.近日,上海微雁文化传媒有限公司正式发布了首款养成类手机应用VR恋人. VR ...
- [转]numpy线性代数基础 - Python和MATLAB矩阵处理的不同
转自:http://blog.csdn.net/pipisorry/article/details/45563695 http://blog.csdn.net/pipisorry/article/de ...
- 如何运用xp_cmdshell 执行多行cmd命令
因为需要利用sql 脚本调用外部程序,所以尝试xp_cmdshell 命令,发现其默认只能执行一行命令,最后找到了下面方法: 将多行cmd 命令处理成bat文件,然后直接利用所在路径+文件来执行: ...