全局操作变量

/**
* @description 标注弹出框
*/
HtmlPopup = null;
/**
* @description 临时图层类数据源
*/
VectorSource = null;
/**
* @description 绘图工具
*/
Draw = null; let measureTooltipElement;
let measureTooltip=HtmlPopup;
let drawingFeature = null;

动态测量距离

 //动态测量距离
this.dynamicLengthMeasure = function (_map,_measureLengthStyle,_measureTooltipStyle,_measureEndCallback) {
measureTooltipElement = document.createElement("div");
//暂停绘制
if (Draw != null) {
_map.removeInteraction(Draw);
Draw = null;
}
if(_measureLengthStyle){
Draw = new ol.interaction.Draw({
//绘制层数据源
source: VectorSource,
/** @type {ol.geom.GeometryType}几何图形类型 */
type: 'LineString',
//几何信息变更时调用函数
//geometryFunction: geometryFunction,
freehand: false,
style:_measureLengthStyle
});
}else{
Draw = new ol.interaction.Draw({
//绘制层数据源
source: VectorSource,
/** @type {ol.geom.GeometryType}几何图形类型 */
type: 'LineString',
//几何信息变更时调用函数
//geometryFunction: geometryFunction,
freehand: false,
});
} _map.addInteraction(Draw);
Draw.on('drawstart', function (e) {
if(_measureLengthStyle){
e.feature.setStyle(_measureLengthStyle);
}
measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);
drawingFeature = e.feature;
let tooltipCoord = e.coordinate;
drawingFeature.getGeometry().on('change',function (evt) {
let geom = evt.target;
let output = geom.getLength();
if (output > 100) {
output = (Math.round(output / 1000 * 100) / 100) + ' km';
} else {
output = (Math.round(output * 100) / 100) + ' m';
}
tooltipCoord = geom.getLastCoordinate();
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord);
});
});
Draw.on('drawend', function (e) {
_map.removeInteraction(Draw);
Draw = null;
if(_measureLengthStyle){
e.feature.setStyle(_measureLengthStyle);
}
measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);
drawingFeature = e.feature;
let output = e.feature.getGeometry().getLength();
if (output > 100) {
output = (Math.round(output / 1000 * 100) / 100) + ' km';
} else {
output = (Math.round(output * 100) / 100) + ' m';
}
let tooltipCoord = e.feature.getGeometry().getLastCoordinate();
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord); if(_measureEndCallback){
let measureEndCallbackkObj = {};
measureEndCallbackkObj.feature=e.feature;
measureEndCallbackkObj.length = output;
_measureEndCallback(measureEndCallbackkObj);
}
});
function createMeasureTooltip(measureTooltip,_param,_map) {
if(_param==null||_param==undefined){
_param={};
}
measureTooltipElement.className = _param.className||'ol-overlay-container ol-selectable';
measureTooltipElement.id='measureLength_DIV';
measureTooltip = new ol.Overlay({
element: measureTooltipElement,
id:'measureLength_DIV',
offset: _param.offset||[0, -15],
positioning: _param.positioning||'bottom-center' //显示的位置
});
_map.addOverlay(measureTooltip);
return measureTooltip;
}
};

动态测量面积

//动态测量面积
this.dynamicAreaMeasure = function (_map,_measureAreaStyle,_measureTooltipStyle,_measureEndCallback) {
// if (measureTooltipElement) {
// measureTooltipElement.parentNode.removeChild(measureTooltipElement)
// }
measureTooltipElement = document.createElement("div");
//暂停绘制
if (Draw != null) {
_map.removeInteraction(Draw);
Draw = null;
}
if(_measureAreaStyle){
Draw = new ol.interaction.Draw({
//绘制层数据源
source: VectorSource,
/** @type {ol.geom.GeometryType}几何图形类型 */
type: 'Polygon',
//几何信息变更时调用函数
//geometryFunction: geometryFunction,
freehand: false,
style:_measureAreaStyle
});
}else{
Draw = new ol.interaction.Draw({
//绘制层数据源
source: VectorSource,
/** @type {ol.geom.GeometryType}几何图形类型 */
type: 'Polygon',
//几何信息变更时调用函数
//geometryFunction: geometryFunction,
freehand: false,
});
} _map.addInteraction(Draw);
Draw.on('drawstart', function (e) {
if(_measureAreaStyle){
e.feature.setStyle(_measureAreaStyle);
} measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map); drawingFeature = e.feature;
let tooltipCoord = e.coordinate;
drawingFeature.getGeometry().on('change',function (evt) {
let geom = evt.target;
let output = geom.getArea();
if (output > 10000) {
output = (Math.round(output / 1000000 * 100) / 100) + ' km<sup>2</sup>'
} else {
output = (Math.round(output * 100) / 100) + ' m<sup>2</sup>'
}
tooltipCoord = geom.getLastCoordinate();
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord);
});
});
Draw.on('drawend', function (e) {
_map.removeInteraction(Draw);
Draw = null;
if(_measureAreaStyle){
e.feature.setStyle(_measureAreaStyle);
}
// drawingFeature = null;
// measureTooltipElement = null;
// measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);
// createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);
measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);
drawingFeature = e.feature;
// let tooltipCoord = e.coordinate;
// let geom = e.target;
let output = e.feature.getGeometry().getArea();
if (output > 10000) {
output = (Math.round(output / 1000000 * 100) / 100) + ' km<sup>2</sup>'
} else {
output = (Math.round(output * 100) / 100) + ' m<sup>2</sup>'
}
let tooltipCoord = e.feature.getGeometry().getLastCoordinate();
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord); if(_measureEndCallback){
let measureEndCallbackkObj = {};
// measureEndCallbackkObj.attributes={};
measureEndCallbackkObj.feature=e.feature;
measureEndCallbackkObj.length = output;
// measureEndCallbackkObj.attributes.x = (e.feature.getGeometry().getExtent()[0]+e.feature.getGeometry().getExtent()[2])/2;
// measureEndCallbackkObj.attributes.y = (e.feature.getGeometry().getExtent()[1]+e.feature.getGeometry().getExtent()[3])/2;
_measureEndCallback(measureEndCallbackkObj);
}
});
function createMeasureTooltip(measureTooltip,_param,_map) {
// if (measureTooltipElement) {
// measureTooltipElement.parentNode.removeChild(measureTooltipElement)
// }
// measureTooltipElement = document.createElement("div");
// if(_param){
if(_param==null||_param==undefined){
_param={};
}
measureTooltipElement.className = _param.className||'ol-overlay-container ol-selectable';
measureTooltipElement.id='measureArea_DIV';
measureTooltip = new ol.Overlay({
id:'measureArea_DIV',
element: measureTooltipElement,
offset: _param.offset||[0, -15],
positioning: _param.positioning||'bottom-center'
});
// }
_map.addOverlay(measureTooltip);
return measureTooltip;
}

OpenLayers动态测量距离和面积,并可自定义测量的线样式的更多相关文章

  1. OpenLayers测量距离和面积

    <!DOCTYPE html> <html> <head> <title>测量距离和面积</title> <meta http-equ ...

  2. Arcgis for Js之GeometryService实现测量距离和面积

    距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryService实现测量面积和距离.先看看实现后的效果:                                  距离 ...

  3. (转)Arcgis for Js之GeometryService实现测量距离和面积

    http://blog.csdn.net/gisshixisheng/article/details/40540601 距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryServ ...

  4. CAD图在线Web测量工具代码实现(测量距离、面积、角度等)

    CAD如今在各个领域均得到了普遍的应用并大大提高了工程技术人员的工作效率.在桌面端,AutoCAD测量工具已经非常强大:然后在Web端,如何准确.快速的对CAD图在Web进行测量呢? 功能 能Web在 ...

  5. ArcGIS Runtime SDK for WPF之测量距离和面积

    bu不多说,上代码 using System.Windows; using ESRI.ArcGIS.Client; using ESRI.ArcGIS.Client.Tasks; using ESRI ...

  6. Arcgis for Js之GeometryService实现測量距离和面积

    距离和面积的測量时GIS常见的功能.在本节,讲述的是通过GeometryService实现測量面积和距离.先看看实现后的效果: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  7. Android GIS开发系列-- 入门季(7) 利用GeometryEngine坐标转换、计算距离与面积等

    GeometryEngine是Arcgis的重要工具类,利用此工具类,可以计算地图上的距离.面积,将点.线.面转化为Json数据,将Json转化为点线面,坐标转换作用非常强大. 一.坐标转化 将用到方 ...

  8. arcgis api for javascript 距离与面积量算

    在之前的实验中,距离量算跟面积量算一直出问题,费了非常长的时间,各种调式找不到原因. 如今成功完毕.与君共勉 1.距离量算中        lengthParams.polylines = [geom ...

  9. Allegro如何测量距离,测距工具的使用

    http://www.allegro-skill.com/thread-2480-1-1.html

随机推荐

  1. Python环境搭建(win)——Python官方解释器

    Python官方解释器搭建方法: 本文以当前最新的3.8.1为例 1.在电脑上打开Python的官网https://www.python.org/ 2.找到Download下的All releases ...

  2. mongo 查询 距离 某个点 多少 米距离 感谢 提供的数据。 感谢 mvc的 demo 。反正 就是各种感谢 文档之类的。

    昨天 去面试来着, 问了一下mong . 我记得mong支持 地理位置索引的,说了一下. 然后 面试官说 查询某个点 的 多少米范围, 这个该怎么实现? 我懵逼了.... 回去 查询了一下. 发现有 ...

  3. 基于playcanvas的3d模型展示

    1.使用基于playcanvas的离线编辑器制作模型效果 2.使用基于playcanvas的开发包读取编辑好的3d模型进行在线3d展示 效果如下:

  4. hash算法与拉链法解决冲突

    <?php class HashNode { public $key; public $value; public $nextNode; public function __construct( ...

  5. linux--->PHP常用模块解析

    PHP常用模块解析 php-gd :GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片,也可以给图片加水印 php-ldap :LDAP是轻量 ...

  6. vue项目使用keep-alive

    作用: 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜 ...

  7. 【Nginx入门系列】第四章 通过域名匹配虚拟主机,不修改端口

    域名访问原理 我们在显示生活中,我们怎样通过一个域名来访问到我们所需要的网站呢? 例如www.baidu.com,我们在浏览器输入百度网址会先发送请求到DNS服务器,DNS会通过我们的域名解析百度对应 ...

  8. 为什么用nginx:它的5个主要优点

    1.高并发,高性能 2.可扩展性好啊 3.高可靠性 4.热部署 5.BSD许可证

  9. 从免费的物联网防火墙hihttps谈机器学习之生成对抗规则

    hihttps是一款基于MQTT的免费的物联网防火墙,同时也是web应用防火墙,既支持传统的检测功能如SQL注入.XSS.恶意漏洞扫描.密码暴力破解.CC.DDOS等),又支持无监督机器学习,自主对抗 ...

  10. 自己封装的一个Ajax小框架

    在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架: /** * frameAjax * * 参数: * paramsObj: Json * req ...