//多边形

$("#polygonButton").bind("click", function () {

DCI.SpatialQuery.clearMap();

DCI.SpatialQuery.InitState();

DCI.SpatialQuery.addInteraction("Polygon");

})

//矩形

$("#rectangleButton").bind("click", function () {

DCI.SpatialQuery.clearMap();

DCI.SpatialQuery.InitState();

DCI.SpatialQuery.addInteraction("Box");

})

addInteraction:function(value){

var geometryFunction;

switch (value) {

case "Box":

value = 'Circle';

geometryFunction = ol.interaction.Draw.createBox();

break;

case "Polygon":

value = 'Polygon';

break;

}

DCI.SpatialQuery.draw = new ol.interaction.Draw({

source: DCI.SpatialQuery.source,

type: value,

geometryFunction: geometryFunction

});

DCI.SpatialQuery.map.addInteraction(DCI.SpatialQuery.draw);

DCI.SpatialQuery.draw.on('drawend',function(evt){

DCI.SpatialQuery.clearMap();

DCI.SpatialQuery.drawEndPlot(evt.feature);

});

}

/**

* 地图点击完成后函数

* **/

drawEndPlot:function(feature){

var featureRequest = new ol.format.WFS().writeGetFeature({

srsName: bxmap.config.MapConfig.wfs.srsName,

featureNS: bxmap.config.MapConfig.wfs.featureNS,

featurePrefix: bxmap.config.MapConfig.wfs.featurePrefix,

featureTypes: bxmap.config.MapConfig.wfs.featureTypes,

outputFormat: bxmap.config.MapConfig.wfs.outputFormat,

filter:ol.format.filter.intersects(bxmap.config.MapConfig.wfs.geometryName, feature.getGeometry(), bxmap.config.MapConfig.wfs.srsName)

});

fetch(bxmap.config.MapConfig.geoserver_url+bxmap.config.MapConfig.wfs.url, {

method: 'POST',

body: new XMLSerializer().serializeToString(featureRequest)

}).then(function(response) {

return response.json();

}).then(function(json) {

var features = new ol.format.GeoJSON().readFeatures(json);

if(features && features.length>0){

if(DCI.SpatialQuery.spatialLayer)

DCI.SpatialQuery.spatialLayer.getSource().clear();

if(DCI.SpatialQuery.pointLayer)

DCI.SpatialQuery.pointLayer.getSource().clear();

DCI.SpatialQuery.spatialSource.addFeatures(features);

DCI.SpatialQuery.map.getView().fit(DCI.SpatialQuery.spatialSource.getExtent());

$("#spatial-total").html("框选查询共"+features.length+"条结果");

var innerStr = [];

for(var i=0;i<features.length;i++){

var feature = features[i];

//面取中心点

var pointGeometry=DCI.SpatialQuery.creatPointGeometry(feature.getGeometry().getExtent());//面取中心点

var attribute = {

"OBJECTID":features[i].get('OBJECTID'),

"名称":features[i].get('名称'),

"编号":features[i].get('编号'),

"类别":features[i].get('类别'),

"面积":features[i].get('面积'),

};

var feature=new ol.Feature({

geometry: pointGeometry,

attribute:attribute,

id:features[i].get('OBJECTID'),

type:"point"

});

DCI.SpatialQuery.pointLayer.getSource().addFeature(feature);

innerStr.push('<div class="left_list_li_box" id="' + features[i].get('OBJECTID') + '" onclick="DCI.SpatialQuery.locationToMap(\'' + features[i].get('OBJECTID') + '\')" >');

innerStr.push('<div class="left_list_li_box_top">');

innerStr.push('<div class="left2_box2">');

innerStr.push('<img class="list_poi_marker" style="" src="' + getRootPath() + 'Content/images/index/poiLocation.png"></img>');

innerStr.push('<div class="left_list_li1">');

innerStr.push('<p>');

innerStr.push('<a style="text-decoration:none">' + features[i].get('名称') + '</a><br/>');

innerStr.push('</p>');

innerStr.push('<p>');

innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('编号') + '</a><br/>');

innerStr.push('</p>');

innerStr.push('<p>');

innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('类别') + '</a><br/>');

innerStr.push('</p>');

innerStr.push('<p>');

innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('面积') + '</a><br/>');

innerStr.push('</p>');

innerStr.push('</div>');

innerStr.push('</div>')

innerStr.push('</div>');

innerStr.push('</div>');

}

$("#showLists").html(innerStr.join(''));

}

else{

$("#showLists").html("框选查询不到相关结果");

}

});

}