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

来源：互联网发布：.net 企业网站源码编辑：程序博客网时间：2024/05/29 13:23

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

1创建过程

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

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

<link rel="stylesheet" href="../css/ol.css">    <link rel="stylesheet" href="../css/bootstrap.min.css">    <link rel="stylesheet" href="../css/bootstrap-responsive.min.css">    <link rel="stylesheet" href="../css/layout.css">    <script type="text/javascript" src="../ol3/ol-debug.js"></script>    <script type="text/javascript" src="../goog/base.js"></script>    <script type="text/javascript" src="../plugins/jquery2.1.1.js"></script>    <script type="text/javascript" src="../example/example-behaviour.js"></script>

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

<div class="navbar navbar-inverse navbar-fixed-top">    <div class="navbar-inner">        <div class="container">            <a class="brand" href="./"><img src="../images/logo.png">OL3 Example</a>        </div>    </div></div><div class="container-fluid">    <div class="row-fluid">        <div class="span12">            <div id="map" class="map"></div>        </div>    </div>    <div class="row-fluid">        <h4 id="title">绘制要素</h4>        <p id="short-desc">使用 ol.interaction.Draw interaction 示例.</p>        <form class="form-inline">            <label>地物类型  </label>            <select id="drawtype" >                <option value="None">None</option>                <option value="Point">点</option>                <option value="LineString">线</option>                <option value="Polygon">面</option>            </select>        </form>    </div></div>

（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.onchange= function(e){    map.removeInteraction(draw);    addInteraction();};}

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

<script type="text/javascript"src="goog/base.js"></script>

（5）在页面加载后调用js中init（）方法进行地图和绘图的初始化操作， <body onload="init()">

结果

0 0