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怎么算面积?其实计算面积的方法有很多中,下面给大家 ...
随机推荐
- VB ListBox 添加横向滚动条
Private Declare Function SendMessage Lib "user32 " Alias "SendMessageA" (ByVal h ...
- [Jmeter]jmeter之初体验（windows下的jmeter）
一.环境准备 1.安装JDK(传送门:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...
- leaflet地图库
an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...
- mac上设置sudo不要密码
觉得每次sudo都需要设置密码太过麻烦,于是折腾了一番,谁知走了一番弯路记录下来. 以下是网上找到的步骤 chmod u+w /etc/sudoers 给当前用户增加写权限 vi /etc/sudo ...
- .net 可枚举类型的构建方法
数组可以使用foreach遍历数组,其实只要实现GetEnumertor方法的类型都可以使用foreach结构遍历数组. 首先看下代码: //笔类 public class Pencil { publ ...
- Mysql索引基础
Mysql索引基础 基本概念: 索引是一种特殊的数据库结构,可以用来快速查询数据库表中的特定记录.索引是提高数据库性能的重要方式.索引创建在表上,是对数据库表中一列或多列的值进行排序的一种结构.可以提 ...
- MySQL的备份和恢复
MySQL的备份和恢复 备份数据:mysqldump –uroot –p123456 dbname table [option] > dbname.sql mysqldump常用参数option ...
- C# 常用接口学习 IEnumerable<T>
作者:乌龙哈里 时间:2015-10-24 平台:Window7 64bit,Visual Studio Community 2015 本文参考: MSDN IEnumerable<T> ...
- workerman简单例子
workerman下载地址 http://www.workerman.net/ html <!DOCTYPE html> <html> <head> <tit ...
- LeetCode 之 Triangle
Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...