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>

转载于:https://www.cnblogs.com/mina-huojian66/p/6143880.html

Openlayer 3 的画图测量面积相关推荐

openlayer测量角度、测量面积、测量长度，直接可以使用，非常完全。
openlayer测量角度.测量面积.测量长度代码基于https://blog.csdn.net/qq_39262215/article/details/109214946 增加角度测量功能,并对提 ...
arcgis测量面积长度
//放大 function zoomBig() { map.setZoom(map.getZoom()+1); }; // 缩小 function zoomSmall() { map.setZoom( ...
可视化场景内任意绘制多边形并测量面积
一般测量功能主要表现在两方面,一是测量距离,二是测量面积.面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大小,距离的测量是根据鼠标在地图上绘制的点,实时计算出两点之间的实际距离. ...
地图测量面积工具app_全站仪的使用面积测量
测量与地图制作见习全站仪使用 11 / 20 #2020 # 全站仪是全站型电子速测仪的简称,是电子经纬仪.光学测距仪及微处理器相结合的光电仪器.其可直接测量距离.角度.坐标,根据三角函数原理,已 ...
Leaflet中原生方式实现测量面积
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现测量距离的基础上,实现测量面积效果如下注: 博客: ...
【Cesium】【vue】空间查询——量距(测量距离)、量面(测量面积)
目录一.量距二.量面三.清除测量四.页面结构注意参考一.量距 // 距离测量measureLineSpace() {this.removeMeasure();let _this = th ...
cesium面积计算_GitHub - BulletYuan/bulletCesium: GIS可视化——基于Cesiumjs的一些工具类，测量距离、测量面积。持续更新......
bulletCesium created at 2018.8.13 基于Cesiumjs的一些工具类,持续更新. lastest - 2018.8.24 - bulletCesium-1.1.1 增加 ...
可测量面积的谷歌地球卫星软…
原文地址:可测量面积的谷歌地球卫星软件(Google Earth Plus 6.0.1.2032 Beta)作者:古道残车很多人用过谷歌地球卫星软件,作为一款免费的实用软件,尤其是在方案设计和用地面 ...
比百度地图.api更方便的测量面积方法
最近呢,我在写一篇关于可达性的小论文,需要测量n块地方的面积,可是博主我又不是测绘专业的,只好查找使用百度地图来测量面积的方法,最终找到了一个利用百度地图测面积的小程序.可是,这个程序却没有搜索功能, ...

Openlayer 3 的画图测量面积

Openlayer 3 的画图测量面积相关推荐

最新文章

热门文章