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 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
vue登录注册及token验证实现代码
Dec 14 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 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
PHP学习 运算符与运算符优先级
2008/06/15 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
深入解析php中的foreach问题
2013/06/30 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
化工专业应届生求职信
2013/11/08 职场文书
五一服装活动方案
2014/01/11 职场文书
拓展策划方案
2014/06/03 职场文书
匿名检举信范文
2015/03/02 职场文书
天气温馨提示语
2015/07/14 职场文书
修辞手法有哪些?
2019/08/29 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
Matlab如何实现矩阵复制扩充
2021/06/02 Python