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>
<div id="map"></div>
<script>
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);
polygon_drawing_tool.on('drawend',function() {
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 的画图测量面积的更多相关文章
- Openlayer 3 删除上一次绘制的图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- OpenLayers测量距离和面积
<!DOCTYPE html> <html> <head> <title>测量距离和面积</title> <meta http-equ ...
- OpenLayers动态测量距离和面积，并可自定义测量的线样式
全局操作变量 /** * @description 标注弹出框 */ HtmlPopup = null; /** * @description 临时图层类数据源 */ VectorSource = n ...
- CAD图在线Web测量工具代码实现(测量距离、面积、角度等)
CAD如今在各个领域均得到了普遍的应用并大大提高了工程技术人员的工作效率.在桌面端,AutoCAD测量工具已经非常强大:然后在Web端,如何准确.快速的对CAD图在Web进行测量呢? 功能 能Web在 ...
- ArcGIS api for javascript—测量，测距问题
首先量测 var map, toolbar, geometryService ; function init() { map=new esri.Map("map",{ extent ...
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...
- openlayer调用geoserver发布的地图实现地图的基本功能
转自:http://starting.iteye.com/blog/1039809 主要实现的功能有放大,缩小,获取地图大小,平移,线路测量,面积测量,拉宽功能,显示标注,移除标注,画多边形获取经纬度 ...
- openlayers3 实现测距 面积
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- CAD怎么算面积?这种方法你要知道
在CAD中,打开可能都是用过CAD制图软件,这是一个比较强大的绘图软件,可以绘制出各种类型的CAD图纸文件,还可以将绘制好的图纸面积进行测量.那CAD怎么算面积?其实计算面积的方法有很多中,下面给大家 ...
随机推荐
- 接口速度慢问题查找（TTFB时间长）
前些天自己写了一个网站,但是发现接口的速度按超级慢,业务逻辑并不复杂,原因究竟在哪呢? 首先说一下,我的数据库和项目均在同一台服务器上,按道理来说,接口访问本地的数据库应该会很快才对. 后来我发现线上 ...
- swift 中Value Type VS Class Type
ios 中Value Type 和 Class Type 有哪些异同点,这个问题是在微信的公共帐号中看到的,觉得挺有意思,这里梳理一下. 1.swift 中为什么要设置值类型? 值类型在参数传递.赋值 ...
- eclipse 启动tomcat后 页面无法访问tomcat首页
在eclipse中新建tomcat7,完成后tomcat能够正常启动,但是浏览器问题localhost:8080访问不了. 解决方法如下: 双击eclipse中服务器中的tomcat 出现tomcat ...
- 锅巴视频工作室 ----------------android端蓝牙测试demo--app
android端蓝牙测试demo--app 这个是为一个客户做蓝牙项目时的一个测试demo,用来测试蓝牙单片机的收发情况,代码中没有做一些兼容性测试,请理解 锅巴视频工作室,专注于android视频相 ...
- nodejs学习随笔
<一> 简述nodejs (社区:www.npmjs.com)可查找一些第三方模块. nodejs是可以让js运行在浏览器之外的服务器端的平台,实现了文件系统.模块.包.操作系统API.网 ...
- ip地址分类和网段区分
IP地址分类/IP地址10开头和172开头和192开头的区别/判断是否同一网段 简单来说在公司或企业内部看到的就基本都是内网IP,ABC三类IP地址里的常见IP段. 每个IP地址都包含两部分,即网络号 ...
- 安装redis，以及python如何引用redis
下载 cd /usr/local/src/ wget http://download.redis.io/releases/redis-2.8.17.tar.gz 解压 tar -zxvf redis- ...
- windows10安装composer并解决和xdebug的冲突
环境:windows10,php7,php安装目录C:\php\,php目录已加入windows的PATH. 1.下载composer,在Windows下最简单的办法是下载composer.phar并 ...
- sqlserver2012评估期已过问题处理
于之前安装sqlserver2012忘记输入序列号,现在出现评估期已过的问题,网上忙活半天,才解决,发现网上叙述都很凌乱,而且只有大意,新手很难操作,所以把我操作的过程分享给大家 步骤阅读 百度经 ...
- Design Pattern——单一职责原理
在类的职责分离上多考虑,做到单一职责,这样的代码才能做到易于维护,易扩展,灵活多样.