使用openlayers3绘制polygon(多边形)

问题:在用openlayers3绘制多边形时老是出现问题,再用鼠标双击结束绘图时,图形也消失不见
原因一:在代码中多次用到source:new ol.source.Vector(),相当于多次实例化对象,改正,可以全局定义source=new ol.source.Vector(),然后在代码需要的地方直接调用变量名就可以了;
原因二:在定义矢量图层polygonLayer时,定义的样式style中缺少fill(填充)或者stroke(线绘制)
错误代码如下所示:
1.source:new ol.source.Vector()
2.style: new ol.style.Style({

        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: 'red'
            })
        })
    })

正确的代码如下所示:
var openStreetMapLayer=new ol.layer.Tile({

    source:new ol.source.OSM()
})

var source=new ol.source.Vector();//矢量图层是用来渲染矢量数据的图层类型,在OpenLayers里,它是可以定制的,可以控制它的透明度,颜色,以及加载在上面的要素形状等。
//常用于从数据库中请求数据,接受数据,并将接收的数据解析成图层上的信息。如将鼠标移动到中国,相应的区域会以红色高亮显示出来,高亮便是矢量图层的行为。
var map=new ol.Map({
    layers: [
      openStreetMapLayer
    ],
    // 设置显示地图的视图
    view: new ol.View({
        center: [116.37, 39.89],
        projection: 'EPSG:4326',
        zoom: 10                // 并且定义地图显示层级为2
    }),
    // 让id为map的div作为地图的容器
    target: 'map'    
});

var polygonLayer=new ol.layer.Vector({
    source:source,

    /*图形绘制好时最终呈现的样式,显示在地图上的最终图形*/
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'blue'
        }),
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: 'red'
            })
        })
    })
})
map.addLayer(polygonLayer);
function draw_polygon(){
    var draw = new ol.interaction.Draw({
        source:source,
        type: 'Polygon',

        /*用于交互绘制图形时所设置的样式*/

        style: new ol.style.Style({
            fill: new ol.style.Fill({
                // color: 'rgba(255, 255, 255, 0.2)'
                color:'yellow'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 5,
                stroke: new ol.style.Stroke({
                    color: 'red'
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                })
            })
        })
    })
    map.addInteraction(draw);
}
draw_polygon();

正确的运行结果如下所示:
图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值