Oplayer 图形绘制

来源：互联网发布：淘宝返场是什么意思编辑：程序博客网时间：2024/06/06 13:57

Oplayer 图形绘制功能

（1）实例化一个Vector作为地图容器的绘制层,source为数据源

（2）添加绘制控件对象（ol.interaction.Draw）

（3）监听typeSelect更改，触发绘制图形改变事件（先删除draw，防止多个draw重叠）

（4）addInteraction()函数来进行交互绘制，如果是正方形或长方形，还需设置回调函数

ol.interaction.Draw

（1）参数一：source，图层源

（2）参数二：type,绘制图形的类型

（3）参数三：geometryFuction,几何坐标变更时的回调函数，如在绘制正方形和长方形时需要通过此函数设置集合对象

（4）参数四：maxPoints,绘制图形结束前多边形或线的最大点数，线默认为2，多边形默认为3（就是你能在地图上点几下，如画直线就是点个起点，点个终点）

绘制图形(type值记得首字母大写)

（1）绘制点：type值为Point

（2）绘制线：type值为LineString

（3）绘制多边形:type值为Ploygon

（4）绘制圆：type值为Circle

（5）绘制正方形：type值为Cirecle，需要调用回调函数

（6）绘制长方形：type值为LineString，需要回调函数

回调函数解析：

（1）ol.interaction.Draw.createRegularPolygon(opt_sides，opt_angle)

opt_sides: 正X边形的边数，缺省值32，如4就是正方形

opt_angle: 角度，0为自由可调，缺省值0

（2） ol.geom.Polygon(coordinates) 多边形几何

主要方法：setCoordinates （coordinates）

coordinates：定义多边形的线性环阵列，类型为Array

关于

 [start, [start[0],end[1]],end,[end[0],start[1]],start]

在绘制长方形的时候，它会自动导入当前坐标，coordinates[0]即第一个点坐标（start），coordinates[1]即为第二个点坐标，此行代码的意思是从start点开始，连接start的横坐标和end的纵坐标的点，再连接end点，再连接以end横坐标为横坐标和以start的纵坐标为纵坐标的点，最后再连回start，形成闭线

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>绘制功能</title>    <link href="libs/ol/ol.css" rel="stylesheet" type="text/css"/>    <script src="libs/ol/ol-debug.js"></script>    <script src="libs/jquery-1.11.2.min.js"></script></head><body><div id="menu">    <label> 几何图形类型;</label>    <select id="type">        <option value="None">无</option>        <option value="Point">点</option>        <option value="LineString">线</option>        <option value="Polygon">多边形</option>        <option value="Circle">圆</option>        <option value="Square">正方形</option>        <option value="Box">长方形</option>    </select>    <div id="map"></div></div><script>    //卫星图层    satlayer = new ol.layer.Tile({        source: new ol.source.XYZ({            title: "卫星图",            url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'        })    });    //卫星图标注层    satannolayer = new ol.layer.Tile({        title: "卫星图标注",        source: new ol.source.XYZ({            url: 'http://t3.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}'        })    });    var map = new ol.Map({        layers: [satlayer, satannolayer],        target: 'map',//目标地图容器div的id        view: new ol.View({            center: ol.proj.fromLonLat([118.55, 28.47]),            zoom: 14,            maxZoom: 18,            minZoom: 1        })    });    var typeSelect = document.getElementById("type"); //绘制类型选择对象    var draw; // 绘制对象    //实例化一个矢量图层Vector作为绘制层    var source = new ol.source.Vector({wrapX:false});//warpX:false,内容格式不允许换行    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'                })//图标样式            })        })    });    //将绘制图层添加到地图容器中    map.addLayer(vector);    /**     * 用户更改绘制类型时触发的事件     * @param e 更改事件     */    typeSelect.onchange = function (e) {        map.removeInteraction(draw);  //移除绘制图形,不然会重叠        addInteraction();   //添加交互绘制功能控件    };    /**     * 实例化一个绘制空间对象，ol.interaction.Draw，并添加到地图容器中     */    function addInteraction(){        var value = typeSelect.value;        //判断数据层数据源        if( value !== 'none'){            if(source == null){                source = new ol.source.Vector({warpX: false});                vector.setSource(source); //添加绘制层数数据源            }            var geometryFunction, maxPoints;//几何函数，最大点数            //判断绘制类型            if(value === "Square"){                value = 'Circle';                geometryFunction = ol.interaction.Draw.createRegularPolygon(4);//正方形            }else if(value === 'Box'){                value = 'LineString';                maxPoints = 2;                //设置几何函数，即设置长方形的坐标点                /**                 *                 * @param coordinates 坐标                 * @param geometry 几何类型                 */                geometryFunction = function(coordinates, geometry){                    if(!geometry){                        geometry = new ol.geom.Polygon(null); //多边形                    }                    var start = coordinates[0];                    var end = coordinates[1];                    geometry.setCoordinates([                        [start, [start[0],end[1]],end,[end[0],start[1]],start]                    ]);                    return geometry;                };            }            //实例化交互绘制对象并添加到地图容器中            draw = new ol.interaction.Draw({                source: source,                type: value,                geometryFunction : geometryFunction, //几个信息变更时的回调函数                maxPoints: maxPoints            });            map.addInteraction(draw);        }else{            source = null;            vector.setSource(source); //清空绘制图形        }    }</script></body></html>

阅读全文

0 0