openlayers 画线、修改线并获取线的坐标组(console,log() 输出)

最新推荐文章于 2024-06-07 23:45:00 发布

咕噜咪

最新推荐文章于 2024-06-07 23:45:00 发布

阅读量2.2k

点赞数

分类专栏： openlayers 文章标签： openlayers ol画线

本文链接：https://blog.csdn.net/qq_35505699/article/details/103456667

版权

openlayers 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

复制后需要 ol.js 还有 jquery.js

<html>
<head>
<meta charset="UTF-8">
<title>测试页</title>
<!-- 图层样式 -->
<link rel="stylesheet" type="text/css" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
<script src="ol/ol.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body >
	
<div class="form-group" id="thumbnailUploadContainer" class="col-sm-10" style="float: left; margin-right: 50px;">
	<div id="map" class="map" style="position: absolute; width: 100%; height: 100%;"></div>
	   <div id="" style="position: absolute;left: 10px;top: 20px;float: left;margin-left: 10px;">
	        <button type="button" id="okDraw">开始画线</button>
	        <button type="button" id="noDraw" >停止画线</button>
	        <button type="button" id="okSelect" >开始修改</button>
	        <button type="button" id="noSelect" >停止修改</button>
	    </div>
</div>
</body>
<script>
$('body').on('change','#articleImageFile',function(){
    var formData = new FormData();
    var files = $($(this))[0].files[0];
    var name = $($(this)).val();
    console.log(files);    
    formData.append("file", files);
    //另外加的参数
    //另外加的参数
    $.ajax({
        url: 'excel/import.do',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false, 
        dataType: 'json',
        success:function (data) {
            alert('上传成功');
        },
        error:function (data) {
        	 console.log('302');
        	// window.history.go(0);
            	window.history.go(0);
            //	alert('表导入成功！');
            	console.log("jingru 方法");
        }
    });
})
	var tian_di_tu_road_layer = new ol.layer.Tile({
		title: "天地图路网",
        source: new ol.source.XYZ({
            url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63"
        })
	});
	
	//画线的矢量层
	      var source = new ol.source.Vector();
	      var styleFunction = function(feature) {
	        var geometry = feature.getGeometry();
	        var styles = [
	          new ol.style.Style({
	            stroke: new ol.style.Stroke({
	               color: '#ffcc33',
	              width: 2
	            })
	          })
	        ];
	        return styles;
	      };
	      var vector = new ol.layer.Vector({
	        source: source,
	        style: styleFunction//画成功后 线的默认样式
	      });
	
	//声明map
			var map = new ol.Map({
				layers: [
					tian_di_tu_road_layer,
					vector
				],
				target: 'map',
				view: new ol.View({
					center: [13279385.112932026, 5878884.034557744],
					zoom: 6
				})
			});
	var drawLine = new ol.interaction.Draw({
	        source: source,
	        type: 'LineString'
	      })
	    drawLine.on("drawstart",function (e) {
	        console.log("！！！！我要开始画线了！！！！");
	    });
	    drawLine.on("drawend",function (e) {
	        console.log("！！！！我画完线了！！！！");
	        f = e.feature;
	        console.log(coordConvert(f));
	        map.removeInteraction(drawLine);
	    });
	    var select=new ol.interaction.Select({wrapX: false}); 
	        var selectFeature;
	        // map.addInteraction(select);
	        select.on("select",function (e) {
	            f=e.selected[0];
	                var modify = new ol.interaction.Modify({features: select.getFeatures()});
	                map.addInteraction(modify);
	                modify.on("modifyend",function (e) {
	                    var f = e.features.getArray()[0];
	                    console.log("这个应该是修改后的坐标信息："+coordConvert(f));
	                });    
	        });
	            function coordConvert(f){
	                lineFeature = f.getGeometry().clone();
	                lineFeature.applyTransform(ol.proj.getTransform('EPSG:3857', 'EPSG:4326'));
	                lineFeature = new ol.Feature(lineFeature);
	                var coordStr = lineFeature.getGeometry().getCoordinates().toString();
	                console.log(coordStr);
	                var coordArr = coordStr.split(",");
	                var coordinateStr = new Array();
	                coordinateStr.push("[[");
	                for(var i in coordArr) {
	                    if(i==0){
	                        coordinateStr.push(coordArr[i]);
	                    }else{
	                        if(i%2==0){
	                            coordinateStr.push("],["+coordArr[i]);
	                        }else if(i%2==1){
	                            coordinateStr.push(","+coordArr[i]);
	                        }
	                    }
	                };
	                coordinateStr.push("]]");
	                return coordinateStr.join("");
	            }
	     function okDraw(){
	         map.addInteraction(drawLine);//可以画线
	        map.removeInteraction(select);
	     }
	     function noDraw(){
	         map.removeInteraction(drawLine); //停止画线
	     }
	     function okSelect(){
	         map.addInteraction(select);//允许修改矢量信息
	        map.removeInteraction(drawLine);
	     }
	     function noSelect(){
	          map.removeInteraction(select);//禁止修改矢量信息
	     }
		document.getElementById("okDraw").addEventListener("click", function() {
			okDraw();
		}, true);
		document.getElementById("noDraw").addEventListener("click", function() {
			noDraw();
		}, true);
		document.getElementById("okSelect").addEventListener("click", function() {
			okSelect();
		}, true);
		document.getElementById("noSelect").addEventListener("click", function() {
			noSelect();
		}, true);

</script>
</html>

咕噜咪

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
openlayers 画线、修改线并获取线的坐标组(console,log() 输出)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Line...
复制链接

扫一扫