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

最新推荐文章于 2025-05-31 09:11:43 发布

GISerHou

最新推荐文章于 2025-05-31 09:11:43 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Openlayers

本文链接：https://blog.youkuaiyun.com/xiaohou66/article/details/41311835

Openlayers 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用OL3绘制点、线和面等矢量图形。通过具体步骤引导读者完成绘图工具的配置和使用，包括HTML和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要介绍如何使用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()">

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

1创建过程

结果