openlayers4.6.5实现距离量测和面积量测


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了openlayers4.6.5实现距离量测和面积量测的具体代码,供大家参考,具体内容如下

版本: openlayers4.6.5

效果图:

openlayers4.6.5实现距离量测和面积量测

小插曲:

原本使用ol官方提供的 量测例子,就挺不错的。但是由于放在项目中后。量测样式不知道为啥出不来,找了半天原因 也没有找到,单独在一个html中完全没问题。所以推测可能和项目中哪些地方有冲突,但是问题暂时没找出来,项目也比较急,所以只能自己实现文字标注部门的样式,实现效果如上图gif所示。

实现原理:

量测功能还是使用了ol例子提供的源码,修改部分主要是在标注这一块,另外就是时刻去添加这个标注 然后时刻删除这个标注 就可以了。

完整的js代码如下(鼠标样式图标 我没放上来,有需要的我给你发邮箱):

var draw;
var click=false;
var output=0;
var vector;
var source;
var lastPolygonLabelFeature;//记录上一个面标注要素 
var lastLengthLabelFeature;//记录上一个点标注要素
$(
 function(){
 $("#measureDistance").click(function(){
 if(draw){
 map.removeInteraction(draw); 
 }
 addInteraction("length");
 setMeasureCur();
 })
 $("#measureArea").click(function(){
 if(draw){
 map.removeInteraction(draw); 
 }
 addInteraction("area"); 
 setMeasureCur();
 })
 $("#measureClear").click(function(){
 map.removeInteraction(draw); 
 vector.setSource(null);
 source=new ol.source.Vector();
 vector.setSource(source);
 lastPolygonLabelFeature=null;
 lastLengthLabelFeature=null;
 click=false;
 
 sketch = null;
 output="0";
 
 reSetCur();
 })
 function setMeasureCur(){
 $('#map').css({
 cursor:"url(../../static/images/measureIcon/measure.cur), auto"
 });
 }
 
 function reSetCur(){
 $('#map').css('cursor','default');
 }
 
 source = new ol.source.Vector();
 vector = new ol.layer.Vector({
 source: source,
 style: new ol.style.Style({
 fill: new ol.style.Fill({//面的填充颜色
 color: 'rgba(255, 0, 0, 0.1)'
 }),
 stroke: new ol.style.Stroke({
 color: 'rgb(255,116,3)',
 width: 2
 }),
 image: new ol.style.Circle({
 radius: 3,
 stroke: new ol.style.Stroke({
 color: 'rgba(255, 0, 0,1)',
 width: 2
 }),
 fill: new ol.style.Fill({
 color: 'rgba(255,255,255)'
 })
 
 })
 })
 });
 map.addLayer(vector);
 
 var sketch;
 
 var pointerMoveHandler = function(evt) {
 if (evt.dragging) {
 return;
 }
 var Coord;
 
 if(sketch){
 var geom = sketch.getGeometry();
 if (geom instanceof ol.geom.Polygon) {
 
 if(lastPolygonLabelFeature){
  //鼠标移动 不停的添加和删除
 source.removeFeature(lastPolygonLabelFeature);
 }
 
 Coord = geom.getInteriorPoint().getCoordinates();
 
 //新建一个要素ol.Feature
 var newFeature = new ol.Feature({
  geometry: new ol.geom.Point(Coord), //几何信息
  name: output
 });
 lastPolygonLabelFeature=newFeature; 
 newFeature.setStyle(createLabelStyle(newFeature,0,0)); 
 } else if (geom instanceof ol.geom.LineString) {
 if(lastLengthLabelFeature){
 source.removeFeature(lastLengthLabelFeature);
 }
 
 Coord = geom.getLastCoordinate();
 //新建一个要素ol.Feature
 var newFeature = new ol.Feature({
  geometry: new ol.geom.Point(Coord), //几何信息
  name: output
 });
 lastLengthLabelFeature=newFeature;
 newFeature.setStyle(createLabelStyle(newFeature,35,-10)); 
 }
 //设置要素样式
 source.addFeature(newFeature);
 }
 };
 
 map.on('pointermove', pointerMoveHandler);
 map.on('click', function(evt){
 var coordinate = evt.coordinate; //鼠标单击点的坐标
 console.log(coordinate);
 if(output=="0"){
 lastPolygonLabelFeature=null;
 if(lastLengthLabelFeature){
 source.removeFeature(lastLengthLabelFeature);
 lastLengthLabelFeature=null;
 }
 return;
 }
 
 var Coord;
 if(sketch){
 var geom = sketch.getGeometry();
 if (geom instanceof ol.geom.Polygon) {
 
 if(lastPolygonLabelFeature){
 source.removeFeature(lastPolygonLabelFeature);
 }
 Coord = geom.getInteriorPoint().getCoordinates();
 
 //新建一个要素ol.Feature
 var newFeature = new ol.Feature({
  geometry: new ol.geom.Point(Coord), //几何信息
  name: output
 });
 lastPolygonLabelFeature=newFeature;
 newFeature.setStyle(createLabelStyle(newFeature,0,0)); //设置要素样式
 source.addFeature(newFeature);
 
 
 } else if (geom instanceof ol.geom.LineString) {
 
 Coord = geom.getLastCoordinate();
 //新建一个要素ol.Feature
 var newFeature = new ol.Feature({
  geometry: new ol.geom.Point(Coord), //几何信息
  name: output
 });
 newFeature.setStyle(createLabelStyle(newFeature,35,-10)); //设置要素样式
 source.addFeature(newFeature);
 }
 
 var pointFeature = new ol.Feature({
 geometry: new ol.geom.Point(coordinate), //几何信息
 name: output
 });
 source.addFeature(pointFeature);
 }
 
 });
 
 //矢量标注样式设置函数,设置image为图标ol.style.Icon
 function createLabelStyle(feature,offsetX,offsetY){
 return new ol.style.Style({
// image: new ol.style.Icon({
//  anchor: [0.5, 60], //锚点
//  anchorOrigin:'top-right', //锚点源
//  anchorXUnits: 'fraction', //锚点X值单位
//  anchorYUnits: 'pixels', //锚点Y值单位
//  offsetOrigin: 'top-right', //偏移原点
//  opacity: 0.75,
//  src: 'OL3Demo/images/label/blueIcon.png' //图标的URL
// }),
 text: new ol.style.Text({
  textAlign: 'center', //位置
  textBaseline: 'middle', //基准线
  font: 'normal 10px sans-serif', //文字样式
  text: feature.get('name'), //文本内容
  fill: new ol.style.Fill({ //文本填充样式(即文字颜色)
  color: 'white'
  }),
  stroke: new ol.style.Stroke({
  color: 'black', 
  width: 5
  }),
  offsetX:offsetX,
  offsetY:offsetY
 
 })
 });
 }
 
 
 
 function addInteraction(drawType) {
 var type = (drawType== 'area' ? 'Polygon' : 'LineString');
 draw = new ol.interaction.Draw({
 source: source,
 type: type,
 style: new ol.style.Style({
 fill: new ol.style.Fill({
 color: 'rgba(255, 0, 0, 0.2)'
 }),
 stroke: new ol.style.Stroke({
 color: 'rgb(255,116,3)',
// lineDash: [10, 10],//虚线
 width: 2
 }),
 image: new ol.style.Circle({
 radius: 5,
 stroke: new ol.style.Stroke({
 color: 'rgba(255, 0, 0, 0.1)'
 }),
 fill: new ol.style.Fill({
 color: 'rgba(255,116,3, 0.3)'
 })
 })
 })
 });
 map.addInteraction(draw);
 
 var listener;
 draw.on('drawstart',
 function(evt) {
 // set sketch
 sketch = evt.feature;
 listener = sketch.getGeometry().on('change', function(evt) {
 var geom = evt.target;
 
 if (geom instanceof ol.geom.Polygon) {
  output = formatArea(geom);
 } else if (geom instanceof ol.geom.LineString) {
  output = formatLength(geom);
 }
 
 });
 }, this);
 
 draw.on('drawend',
 function() {
 // unset sketch
 sketch = null;
 ol.Observable.unByKey(listener);
 output="0";
 }, this);
 }
 
 var formatLength = function(line) {
 var length = ol.Sphere.getLength(line);
 var output;
 if (length > 100) {
 output = (Math.round(length / 1000 * 100) / 100) +
 ' ' + '千米';
 } else {
 output = (Math.round(length * 100) / 100) +
 ' ' + '米';
 }
 return output;
 };
 
 var formatArea = function(polygon) {
 var area = ol.Sphere.getArea(polygon);
 var output;
 if (area > 10000) {
 output = (Math.round(area / 1000000 * 100) / 100) +
 ' ' + '平方千米';
 } else {
 output = (Math.round(area * 100) / 100) +
 ' ' + '平方米';
 }
 return output;
 };
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
vue实现在线翻译功能
Sep 27 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
Openlayers测量距离与面积的实现方法
Sep 25 #Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 #Javascript
OpenLayers3实现测量功能
Sep 25 #Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 #Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 #Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 #Javascript
You might like
投票管理程序
2006/10/09 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
python Django模板的使用方法
2016/01/14 Python
在Python中移动目录结构的方法
2016/01/31 Python
Python之循环结构
2019/01/15 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
this关键字的含义
2015/04/08 面试题
毕业生自荐书模版
2014/01/04 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
《雷雨》教学反思
2016/02/20 职场文书
社区结对共建协议书
2016/03/23 职场文书
2016年万圣节活动总结
2016/04/05 职场文书