微信小程序微店_Openlayers测量间隔与面积的完成方法

  • 栏目:公司新闻 时间:2021-01-05 10:38 分享新闻到:
<返回列表

Openlayers测量距离与面积的实现方法       这篇文章主要为大家详细介绍了Openlayers测量距离与面积的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

1、地图测量功能

一般的地图的测量功能主要表现在两个方面,一是测量距离,一是测量面积;面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大小,距离的测量是根据鼠标在地图上绘制的点,实时计算出两点之间的实际距离,下面我们就在Openlayers3中来实现这一功能;

2、代码实现

 !DOCTYPE html 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ 
 title /title 
 script src="../lib/ol/ol.js" /script 
 link href="../css/ol.css" rel="stylesheet" / 
 script src="../lib/jquery/jquery-1.8.2.js" /script 
 link href="../css/bootstrap.min.css" rel="stylesheet" / 
 script src="../lib/bootstrap/bootstrap.min.js" /script 
 style type="text/css" 
 #map {
 width: 100%;
 height: 100%;
 position: absolute;
 #menu {
 float: left;
 position: absolute;
 bottom: 10px;
 left: 10px;
 z-index: 2000;
 .checkbox {
 left: 20px;
 * 提示框的样式信息
 .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: #ffffff;
 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: #ffffff;
 #scalebar {
 float: left;
 margin-bottom: 10px;
 /style 
 script type="text/javascript" 
 $(function () {
 //初始化地图
 var map = new ol.Map({
 target: 'map',
 layers: [
 new ol.layer.Tile({
 source:new ol.source.OSM()
 view: new ol.View({
 center: new ol.proj.fromLonLat([114.4250, 23.0890]),
 zoom: 18,
 maxZoom: 20
 //定义矢量数据源
 var source = new ol.source.Vector();
 //定义矢量图层
 var vector = new ol.layer.Vector({
 source: source,
 style: new ol.style.Style({
 fill: new ol.style.Fill({
 color:'rgba(255,255,255,0.2)'
 stroke: new ol.style.Stroke({
 color: '#e21e0a',
 width:2
 image: new ol.style.Circle({
 radius: 5,
 fill: new ol.style.Fill({
 color:'#ffcc33'
 //将矢量图层添加到地图中
 map.addLayer(vector);
 //添加比例尺控件
 var scaleLineControl = new ol.control.ScaleLine({
 units: 'metric',
 target: 'scalebar',
 className: 'ol-scale-line'
 map.addControl(scaleLineControl);

//继续绘制多边形的提示信息 var continuePolygonMsg = 'Click to continue drawing the polygon'; //继续绘制线段的提示信息 var continueLineMsg = 'Click to continue drawing the line'; //鼠标移动触发的函数 var pointerMoveHandler = function (evt) { //Indicates if the map is currently being dragged. //Only set for POINTERDRAG and POINTERMOVE events. Default is false. //如果是平移地图则直接结束 if (evt.dragging) { return; //帮助提示信息 var helpMsg = 'Click to start drawing'; if (sketch) { //Get the feature's default geometry. //A feature may have any number of named geometries. //获取绘图对象的几何要素 var geom = sketch.getGeometry(); //如果当前绘制的几何要素是多边形,则将绘制提示信息设置为多边形绘制提示信息 //如果当前绘制的几何要素是多线段,则将绘制提示信息设置为多线段绘制提示信息 if (geom instanceof ol.geom.Polygon) { helpMsg = continuePolygonMsg; } else if (geom instanceof ol.geom.LineString) { helpMsg = continueLineMsg; //设置帮助提示要素的内标签为帮助提示信息 helpTooltipElement.innerHTML = helpMsg; //设置帮助提示信息的位置 //The coordinate in view projection corresponding to the original browser event. helpTooltip.setPosition(evt.coordinate); //移除帮助提示要素的隐藏样式 $(helpTooltipElement).removeClass('hidden'); //触发pointermove事件 map.on('pointermove', pointerMoveHandler); //当鼠标移除地图视图的时为帮助提示要素添加隐藏样式 $(map.getViewport()).on('mouseout', function () { $(helpTooltipElement).addClass('hidden'); //获取大地测量复选框 var geodesicCheckbox = document.getElementById('geodesic'); //获取类型 var typeSelect = document.getElementById('type'); //定义一个交互式绘图对象 var draw; //添加交互式绘图对象的函数 function addInteraction() { // 获取当前选择的绘制类型 var type = typeSelect.value == '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,255,255,0.2)' stroke: new ol.style.Stroke({ color: 'rgba(0,0,0,0.5)', lineDash: [10, 10], width:2 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: 'rgba(255,255,255,0.2)' //将交互绘图对象添加到地图中 map.addInteraction(draw); //创建测量提示框 createMeasureTooltip(); //创建帮助提示框 createHelpTooltip(); //定义一个事件监听 var listener; //定义一个控制鼠标点击次数的变量 var count = 0; //绘制开始事件 draw.on('drawstart', function (evt) { //The feature being drawn. sketch = evt.feature; //提示框的坐标 var tooltipCoord = evt.coordinate; //监听几何要素的change事件 //Increases the revision counter and dispatches a 'change' event. listener = sketch.getGeometry().on('change', function (evt) { //The event target. //获取绘制的几何对象 var geom = evt.target; //定义一个输出对象,用于记录面积和长度 var output; if (geom instanceof ol.geom.Polygon) { map.removeEventListener('singleclick'); map.removeEventListener('dblclick'); //输出多边形的面积 output = formatArea(geom); //Return an interior point of the polygon. //获取多变形内部点的坐标 tooltipCoord = geom.getInteriorPoint().getCoordinates(); } else if (geom instanceof ol.geom.LineString) { //输出多线段的长度 output = formatLength(geom); //Return the last coordinate of the geometry. //获取多线段的最后一个点的坐标 tooltipCoord = geom.getLastCoordinate(); //设置测量提示框的内标签为最终输出结果 measureTooltipElement.innerHTML = output; //设置测量提示信息的位置坐标 measureTooltip.setPosition(tooltipCoord); //地图单击事件 map.on('singleclick', function (evt) { //设置测量提示信息的位置坐标,用来确定鼠标点击后测量提示框的位置 measureTooltip.setPosition(evt.coordinate); //如果是第一次点击,则设置测量提示框的文本内容为起点 if (count == 0) { measureTooltipElement.innerHTML = "起点"; //根据鼠标点击位置生成一个点 var point = new ol.geom.Point(evt.coordinate); //将该点要素添加到矢量数据源中 source.addFeature(new ol.Feature(point)); //更改测量提示框的样式,使测量提示框可见 measureTooltipElement.className = 'tooltip tooltip-static'; //创建测量提示框 createMeasureTooltip(); //点击次数增加 count++; //地图双击事件 map.on('dblclick', function (evt) { //根据 var point = new ol.geom.Point(evt.coordinate); source.addFeature(new ol.Feature(point)); }, this); //绘制结束事件 draw.on('drawend', function (evt) { count = 0; //设置测量提示框的样式 measureTooltipElement.className = 'tooltip tooltip-static'; //Set the offset for this overlay. //设置偏移量 measureTooltip.setOffset([0, -7]); //清空绘制要素 sketch = null; //清空测量提示要素 measureTooltipElement = null; //创建测量提示框 createMeasureTooltip(); //Removes an event listener using the key returned by on() or once(). //移除事件监听 ol.Observable.unByKey(listener); //移除地图单击事件 map.removeEventListener('singleclick'); }, this); //创建帮助提示框 function createHelpTooltip() { //如果已经存在帮助提示框则移除 if (helpTooltipElement) { helpTooltipElement.parentNode.removeChild(helpTooltipElement); //创建帮助提示要素的div helpTooltipElement = document.createElement('div'); //设置帮助提示要素的样式 helpTooltipElement.className = 'tooltip hidden'; //创建一个帮助提示的覆盖标注 helpTooltip = new ol.Overlay({ element: helpTooltipElement, offset: [15, 0], positioning:'center-left' //将帮助提示的覆盖标注添加到地图中 map.addOverlay(helpTooltip); //创建测量提示框 function createMeasureTooltip() { //创建测量提示框的div measureTooltipElement = document.createElement('div'); measureTooltipElement.setAttribute('id','lengthLabel'); //设置测量提示要素的样式 measureTooltipElement.className = 'tooltip tooltip-measure'; //创建一个测量提示的覆盖标注 measureTooltip = new ol.Overlay({ element: measureTooltipElement, offset: [0, -15], positioning:'bottom-center' //将测量提示的覆盖标注添加到地图中 map.addOverlay(measureTooltip); //测量类型发生改变时触发事件 typeSelect.onchange = function () { //移除之前的绘制对象 map.removeInteraction(draw); //重新进行绘制 addInteraction(); //格式化测量长度 var formatLength = function (line) { //定义长度变量 var length; //如果大地测量复选框被勾选,则计算球面距离 if (geodesicCheckbox.checked) { //Return the coordinates of the linestring. //获取坐标串 var coordinates = line.getCoordinates(); //初始长度为0 length = 0; //获取源数据的坐标系 var sourceProj = map.getView().getProjection(); //进行点的坐标转换 for (var i = 0; i coordinates.length - 1; i++) { //第一个点 var c1 = ol.proj.transform(coordinates[i], sourceProj, 'E凡科抠图G:4326'); //第二个点 var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'E凡科抠图G:4326'); //获取转换后的球面距离 //Returns the distance from c1 to c2 using the haversine formula. length += wgs84Sphere.haversineDistance(c1,c2); } else { //Return the length of the linestring on projected plane. //计算平面距离 length = Math.round(line.getLength() * 100) / 100; //定义输出变量 var output; //如果长度大于1000,则使用km单位,否则使用m单位 if (length 1000) { output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位 } else { output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位 return output; //格式化测量面积 var formatArea = function (polygon) { //定义面积变量 var area; //如果大地测量复选框被勾选,则计算球面面积 if (geodesicCheckbox.checked) { //获取初始坐标系 var sourceProj = map.getView().getProjection(); //plete copy of the geometry. //Transform each coordinate of the geometry from one coordinate reference system to another. //The geometry is modified in place. For example, a line will be transformed to a line and a circle to a circle. //If you do not want the geometry modified in place, first clone() it and then use this function on the clone. //克隆该几何对象然后转换坐标系 var geom = polygon.clone().transform(sourceProj, 'E凡科抠图G:4326'); //Return the Nth linear ring of the polygon geometry. //Return null if the given index is out of range. //The exterior linear ring is available at index 0 and the interior rings at index 1 and beyond. //获取多边形的坐标系 var coordinates = geom.getLinearRing(0).getCoordinates(); //Returns the geodesic area for a list of coordinates. //获取球面面积 area = Math.abs(wgs84Sphere.geodesicArea(coordinates)); } else { //获取平面面积 area = polygon.getArea(); //定义输出变量 var output; //当面积大于10000时,转换为平方千米,否则为平方米 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; //添加交互绘图对象 addInteraction(); /script /head body div id="map" div id="menu" label 测量类型选择 /label select id="type" option value="length" 长度 /option option value="area" 面积 /option /select label input type="checkbox" id="geodesic" / 使用大地测量 /label /div /div div id="scalebar" /div /body /html

3、结果展示

测量距离

测量面积

此外,还能勾选使用大地测量的复选框,进行球面距离和面积的测量

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


分享新闻到:

更多阅读

微信小程序微店_Openlayers测量间隔与面积

公司新闻 2021-01-05
Openlayers精确测量间距与总面积的完成方式 本文关键为大伙儿详尽详细介绍了Openlayers精确...
查看全文

广州凡科互联网科技股份有限公司招聘销

公司新闻 2021-01-04
招聘人数:6职位信息岗位职责:1负责通过网络(qq、微信)主动联系客户,向客户提供产品的...
查看全文

广州凡科互联网科技股份有限公司招聘英

公司新闻 2021-01-04
招聘人数:24职位信息岗位责职:1.通过电子软件在线回复客户的咨询与问题,受理客户的投诉...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 贴图软件 在线免费抠图 制作图片加文字的 在线一键抠图

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号