openlayer4点、线、面绘制与交互代码教程

openlayers 中很重要的是feature的理解，feature和source是获取地理要素的重要中间载体，主要构成方式如下图所示

话不多说，直接看相关代码

$.ajax({
            type: "post",
            url: "${ctx}/szdt/riskSource/getRiskInfoByIdAndType",
            dataType: "json",
            data:{
                'id': '${id}',
                'type': '${type}'
            },
            success: function (result) {
                for(var key in result){
                    
                    //添加风险源点、线、面要素
                    if (key=="pointGeo"||key=="lineGeo"||key=="flatGeo"){
                        var format = new ol.format.WKT();
                        var feature = format.readFeature(result[key], {
                            dataProjection: 'EPSG:4326',
                            featureProjection: 'EPSG:3857'
                        });
                        if (key=="pointGeo"){
                            posSource.addFeature(feature);
                            //设置风险源点图标style
                            addIcon(feature);
                            map.addLayer(posLayer);

                        }
			?if (key=="lineGeo"){
			????lineSource.addFeature(feature);
			    //设置线风险源的style
							
							
			}
			if (key=="flatGeo"){
			    areaSource.addFeature(feature);
			   //设置面风险源的style
						 
							
			}

                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("获取风险源信息和标记信息失败！");
            }
        });
        //地图内容
        //默认osm
        var raster = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        //定义测点显示图层 --暂时不用
        var surveyPosLayer=new ol.layer.Vector({visible:true,zIndex:2});
        var surveyPosSource=new ol.source.Vector({wrapX: false});//线suorce
        surveyPosLayer.setSource(surveyPosSource);

        //定义风险源的point图层
        var posSource=new ol.source.Vector({wrapX: false});//点source
        var posLayer=new ol.layer.Vector({
            visible:true,
            source:posSource,
            zIndex:2
        });


        //定义风险源线图层
        var lineLayer=new ol.layer.Vector({visible:true,zIndex:2});
        var lineSource=new ol.source.Vector({wrapX: false});//线suorce
        lineLayer.setSource(lineSource);

        //定义风险源面图层
        var areaLayer=new ol.layer.Vector({visible:true,zIndex:2});
        var areaSource=new ol.source.Vector({wrapX: false});//面suorce
        areaLayer.setSource(areaSource);
        //初始位置
        var pos = ol.proj.transform([114.168, 22.5672], 'EPSG:4326', 'EPSG:3857');
        //创建地图
        var map = new ol.Map({
            view: new ol.View({
                center:pos,
                zoom: 16,
                maxZoom: 19,
                minZoom: 16
//		            projection: 'EPSG:4326',
            }),
            //添加open street map图层
            layers:[
				/*raster,
				 posLayer,
				 lineLayer,
				 areaLayer*/
            ],
            //将地图添加到的map容器中
            target: 'map'
        });

        function addTileLayer(proName){

            var tileLayer = new ol.layer.Tile({
                source: new ol.source.XYZ({
                    tileUrlFunction: function (tileCoord) {
                        //alert(tileCoord[0] + " X= " + tileCoord[1] + " Y= " + tileCoord[2]);
                        var x = 'C' + zeroPad(tileCoord[1], 8, 16);
                        var y = 'R' + zeroPad(-tileCoord[2] - 1, 8, 16);
                        var z = 'L' + zeroPad(tileCoord[0], 2, 10);
                        //将CAD_ImageServer替换成proName
                        return  '${ctxStatic}/szdt/images/CAD_ImageServer/_alllayers/' + z + '/' + y + '/' + x + '.png';
                    },
                    projection: 'EPSG:3857',
                    zIndex:0

                })
            });
            map.addLayer(tileLayer);
        }


        //给8位字符串文件名补0
        function zeroPad(num, len, radix) {
            var str = num.toString(radix || 10);
            while (str.length < len) {
                str = "0" + str;
            }
            return str;
        }


        //画点
        var drawPoint;
        function drawFeaturePoint(coords){
            if(drawLine||drawArea){
                map.removeInteraction(drawArea);
                map.removeInteraction(drawLine);
            }
            drawPoint= new ol.interaction.Draw({
                source: posSource,//接受绘制的source
                type: 'Point'
            });
            map.addInteraction(drawPoint);
            map.addLayer(posLayer);
        }
        //画线
        var drawLine;
        function drawFeatureLine(){
			/*var source,type;
			 switch(index){
			 case 0: source=posSource;type='Point';break;
			 case 1: source=lineSource;type='LineString';break;
			 case 2: source=areaLayer.getSource();type='Polygon';break;
			 }*/
            if(drawArea||drawPoint){
                map.removeInteraction(drawArea);
                map.removeInteraction(drawPoint);
            }
            drawLine = new ol.interaction.Draw({
                source: lineSource,//接受绘制的source
                type: 'LineString'
            });
            map.addInteraction(drawLine);
            map.addLayer(lineLayer);
        }
        //画面
        var drawArea;
        function drawFeatureArea(){
            if(drawLine||drawPoint){
                map.removeInteraction(drawLine);
                map.removeInteraction(drawPoint);
            }

            drawArea = new ol.interaction.Draw({
                source: areaLayer.getSource(),//接受绘制的source
                type: 'Polygon'
            });
            map.addInteraction(drawArea);
            map.addLayer(areaLayer);
        }

注意：各个图层获取source的方法有多种：本文就涉及了两种方式。

1.这里每个Draw交互的source的值分别为各自图层的source，图层的source会自动接收绘制的不同类型的source。

2.图层的source通过source.addFeature(feature);来增加对象，本文读取的是Oracle Spatial请求过来的geometry资源。

此外，我们需要知道feature是由geometry组成的。而geometry下面就有不同类型的coordinates,

注意：初学者很容易忘记，给layer的source添加完feature之后，要map.addLayer(layer);才能在map中显示