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 line_drawing_tool = new ol.interaction.Draw({
source: drawing_layer.getSource(),
type: 'LineString',
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;
line_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 = formatLength(/** @type {ol.geom.LineString} */ (geom));
tooltipCoord = geom.getLastCoordinate();
createMeasureTooltip();
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord);
});
}, this);
line_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 formatLength = function(line) {
var length = Math.round(line.getLength() * 100) / 100;
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +' ' + 'km';
} else {
output = (Math.round(length * 100) / 100) +' ' + 'm';
}
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(line_drawing_tool);
});
</script>
</body>
</html>
Openlayer 3 的画线测量长度的更多相关文章
- MFC画线功能总结
本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6216464.html MFC画线功能要点有二:其一,鼠标按下时记录初始位置为线的起始 ...
- MFC消息映射机制以及画线功能实现
---此仅供用于学习交流,切勿用于商业用途,转载请注明http://www.cnblogs.com/mxbs/p/6213404.html. 利用VS2010创建一个单文档标准MFC工程,工程名为Dr ...
- CGContextRef 画线简单用法
CGContextRef CGContextMoveToPoint(context,150,50);//圆弧的起始点 CGContextAddArcToPoint(context,100,80,130 ...
- Android中Path类的lineTo方法和quadTo方法画线的区别
转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...
- C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9
视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...
- iOS小画板画线总结
一:基本画线: 使用贝赛尔曲线画: //创建路径 UIBezierPath* aPath = [UIBezierPath bezierPath]; //设置线宽 aPath.lineWidth = 5 ...
- [修复] Firemonkey 画线问题（Android & iOS 平台）
问题:官方 QC 的一个 Firemonkey 移动平台画线问题: RSP-14309: [iOS & Android] Delphi 10.1 Berlin - drawing proble ...
- WPF画线问题，几千条以后就有明显的延迟了。
我现在是这么画的,class A { private GeometryGroup _lines; private Path _path; public A() { _path.Data = ...
- ios cocos2d 画线出现闪烁问题
根据http://www.merowing.info/2012/04/drawing-smooth-lines-with-cocos2d-ios-inspired-by-paper/ 用cocos2d ...
随机推荐
- Python学习笔记——基础篇【第五周】——常用模块学习
模块介绍 本节大纲: 模块介绍 time &datetime模块 (时间模块) random (随机数模块) os (系统交互模块) sys shutil (文件拷贝模块) j ...
- 四大高质量且实用的chrome翻译插件推荐
Google英译汉的质量怎么样?日常生活用语翻译还可以,但是一到专业性术语就歇菜了,翻译出来的东西简直就是惨不忍睹,惨绝人寰..对于酷爱英语学习又有强迫症的患者来说,一款既实用又方便,无疑就是雪中送炭 ...
- sqlmap基础使用
测试许多款 sql注入工具 最终还是发现 sqlmap 最为强悍 谁用谁知道!赶紧抛弃掉手上一大堆 sql 注入工具吧 : )测试环境:ubuntu 10.10 & windows 7(x64 ...
- 向多个会话窗口发送命令 -SecureCRT
1.前提 一个服务可能部署在多台机器上,这时如果要查问题,最繁复的方法就是打开该服务的每个session,把命令在每一台机器上复制一下执行,找到相关的日志:还有一种方法就是一条命令同时向多个会话窗口发 ...
- drupal7 boost模块为登录用户提供缓存
这段时间研究Drupal7的缓存相关,看了好多资料,都提到了boost和authcache两个模块,今天来说一下boost. 具体的下载安装,配置等,官网写的听清楚,boost模块地址 ,安装配置方法 ...
- 如何提高maven的下载速度：享受一下mvn时飞的感觉
找到 maven老家 conf/settings.xml, 在<mirrors>标签内增加阿里云maven镜像 最终结果见下面: <mirrors> < ...
- Sql Server尝试读取或写入受保护的内存。这通常指示其他内存已损坏
今日遇到这样一个问题,用vs2010调试C#代码时,只要代码一运行到跟数据库关联的地方时,编译器就报错误,给的提示如:调试器已附加,要继续需要分离什么的,咋一看还以为是vs中调试器设置的问题,可后来仔 ...
- 关于python的元类
当你创建一个类时: class Foo(Bar): pass Python做了如下的操作: Foo中有__metaclass__这个属性吗?如果是,Python会在内存中通过__metaclass__ ...
- win7提示Xshell5提示缺少msvcp110.dll解决办法
下载地址: http://www.microsoft.com/zh-CN/download/details.aspx?id=30679 X86和X64的都下载下来,安装好后重启计算机,就OK了
- Java中泛型的理解
Java中的泛型,本质上来说,就是是参数化类型,就是说所操作的数据类型被指定为一个参数,而不是确定的某种类型.这种数据类型可以用在类.接口和方法创建中.即泛型类.泛型接口.泛型方法.这样说可能不够生动 ...