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中顯示