openlayers第三天

by giser · 2019-04-03

openlayers第三天，多边形查询

demo里面包含了点、线、多边形和圆，自己再额外加上一个框选，基本就差不错了。

核心代码：

var draw; // global so we can remove it later
function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
        draw = new ol.interaction.Draw({
            source: source,
            type: typeSelect.value
        });
        map.addInteraction(draw);
    }
}

通过更改ol.interaction.Draw中type的值，就可以画出不同的形状。

如果想要绘制矩形框，那么就需要做一点改动，同样的，先看一下官网的demo

核心代码：

if (value === 'Box') {
    value = 'Circle';
    geometryFunction = ol.interaction.Draw.createBox();
}
draw = new ol.interaction.Draw({
    source: source,
    type: value,
    geometryFunction: geometryFunction
});
map.addInteraction(draw);

主要的不同在于，type的值为Circle，同时要设置一下geometryFunction属性

到这里，基本上已经解决了绘制点、线、圆形、矩形、多边形的问题了，接下来，我们要获取到自己绘制好的图形的空间几何数据

var wktFormet = new ol.format.WKT();
draw.on("drawend", function () {
    map.removeInteraction(draw);
    setTimeout(function () {
        $("#loadImg").hide();
        currentGeom = wktFormet.writeGeometry(source.getFeatures()[0].getGeometry());
    }, 300);
});

通过draw的drawend事件，在绘制结束以后，加一个小小的延迟（原因可以自行去掉延迟测试），然后就能获取到绘制的图形的空间几何数据，再用ol.format.WKT格式化一下，就变成了能看懂的wkt格式的数据了

需要注意的是，我每次画图形的时候，都会把之前的清除掉，方法为source.clear()，如果需要保留之前的，那么这里需要用source.getFeatures()[count].getGeometry()，count作为一个计数器，从0开始记录当前已经绘制了几个图形

查询矩形范围内的目标

    function getFeature(bbox) {//bbox = [113,22,114,23]
        var FILTER = '<Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>geom</PropertyName><gml:Envelope srsName="EPSG:4326"><gml:lowerCorner>' + bbox[0] + ' ' + bbox[1] + '</gml:lowerCorner><gml:upperCorner>' + bbox[2] + ' ' + bbox[3] + '</gml:upperCorner></gml:Envelope></Intersects></Filter>';
        var typeName = json[0].layers;
        for (var i = 1; i < json.length; i++) {
            typeName += "," + json[i].layers;
        }
        $.ajax("http://[ip]:[prot]/redirect", {
            type: 'GET',
            data: {
                url: "http://[ip]:[prot]/geoserver/[projectName]/wfs?request=GetFeature&typeName=" + typeName + "&outputformat=json&srsname=EPSG:4326&filter=" + FILTER.trim()
            },
            dataType: 'jsonp',
            jsonpCallback: 'callback:callback',
            jsonp: 'format_options'
        });
    }

框选查询，所以传入一个包含两组经纬度的数组即可，这里也用到了后台转发达成的跨域，查询返回的信息将在callback函数中处理

typeName指的是图层名，可以为一个或者多个，多个用,分隔开

使用过程中主要的问题是Filter的编写，这个是需要满足指定的xml格式的，<gml:Envelope srsName="EPSG:4326">这里的4326指的是当前提交过去查询的经纬度格式，也就是bbox中数据的格式，url中srsname则是希望GeoServer返回的经纬度格式

多边形和圆形查询大体是一样的，只是Filter与框选的略有不同

var FILTER = '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>geom</PropertyName><gml:MultiPolygon srsName="EPSG:3857"><gml:polygonMember><gml:Polygon><gml:outerBoundaryIs><gml:LinearRing> <gml:coordinates xmlns:gml="http://www.opengis.net/gml" decimal="." cs="," ts="">' + polygon + '</gml:coordinates></gml:LinearRing></gml:outerBoundaryIs></gml:Polygon></gml:polygonMember></gml:MultiPolygon></Intersects></Filter>';

其中polygon的格式为12702599.165258061,2624864.160408873 12691745.107241567,2617893.4915948277 12692203.729411276,2607774.6958593577 12713606.097331127,2607940.5275537814 12713300.349217985,2618557.2370879385 12702599.165258061,2624864.16040887，可以看到，这里用的是3857格式的数据，不知道是哪里有问题，我这里只能提交这种格式的数据进行查询，4326转3857的方法为ol.proj.transform([113,26], 'EPSG:4326', 'EPSG:3857')

到这里基本就差不多了，没有贴完整的代码，因为需要自己发布服务，所以丰衣足食还是靠自己吧，有问题欢迎留言