OpenLayers3 学习心得（三）——绘图

主要介绍如何使用ol3绘制点、线和面，ol使用ol.interaction.Draw方法和用户进制交换并绘制图形。

1创建过程

（1）      新建名称为draw-feature的html文件；

（2）      添加引用，如下所示：

（3）在body标签中添加页面的顶部布局、地图的容器和绘图类型的选择控件：如下

    

        

            OL3 Example
        
    



    

        

            

        
    
    

        
绘制要素
        
使用 ol.interaction.Draw interaction 示例.
        

            地物类型  
            
                None
                点
                线
                面
            
        

    

（4）在页面所在的同一文件夹中，添加名为draw-features的js文件，文件中包括地图的初始化，绘图的初始化和绘图交互，详情见代码中的注释：

var draw;//定义全局变量，当绘图方式改变时删除当前的绘制工具
    function init(){//程序初始化

//新建底图-瓦片图层
var raster=new ol.layer.Tile({
    source:new ol.source.MapQuest({layer:'sat'})
});
//临时图层的数据源
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:'#ffcc33',
            width:2
        }),
        image:new ol.style.Circle({
            radius:7,
            fill:new ol.style.Fill({
                color:'#ffcc33'
            })
        })
    })
});
//新建地图
var map=new ol.Map({
    layers:[raster,vector],
    target:'map',
    view:new ol.View({
        center:[-11000000,4600000],
        zoom:4
    })
});

var typeSelected=document.getElementById('drawtype');
//初始化绘图工具
function addInteraction(){
    var value=typeSelected.value;
    if(value!=='None'){
        draw=new ol.interaction.Draw({
            source:source,//设置要素源，绘制结束后将绘制的要素添加到临时图层
            type:(value)//绘制的类型
        });
        map.addInteraction(draw);
    }
}
//绘制方式改变后重新初始化绘图工具
typeSelected.οnchange= function(e){
    map.removeInteraction(draw);
    addInteraction();
};
}

（4）      在页面上添加draw-feature.js文件的引用：

（5）      在页面加载后调用js中init（）方法进行地图和绘图的初始化操作，

结果