`
bupingfan_ee
  • 浏览: 11500 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

openlayer的要素获取

XMLAjaxHTML 
阅读更多

/*
* 要素查询完成
*/


/*
* Green style
*/

var style_green = {
strokeColor : "#00FF00",
strokeWidth : 3,
strokeDashstyle : "dashdot",
pointRadius : 6,
pointerEvents : "visiblePainted"
};
var myStyles = new OpenLayers.StyleMap({
"default" : new OpenLayers.Style({
pointRadius : "${type}", // sized according
// to type attribute
fillColor : "#ffcc66",
strokeColor : "#ff9933",
strokeWidth : 2,
graphicZIndex : 1
}),
"select" : new OpenLayers.Style({
fillColor : "#66ccff",
strokeColor : "#3399ff",
graphicZIndex : 2
})
});

function makeXML(infoName) {
XML = '<?xml version="1.0" encoding="UTF-8" ?>' + "\n";
XML += '<wfs:GetFeature service="WFS" version="1.0.0"' + "\n";
XML += ' outputFormat="GML2"' + "\n";
XML += ' xmlns:huangc="http://localhost:8080/geoserver"' + "\n";
XML += ' xmlns:wfs="http://www.opengis.net/wfs"' + "\n";
XML += ' xmlns:ogc="http://www.opengis.net/ogc"' + "\n";
XML += ' xmlns:gml="http://www.opengis.net/gml"' + "\n";
XML += ' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' + "\n";
XML += ' xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd"'
+ "\n";
XML += '>' + "\n";
XML += ' <wfs:Query typeName="haha:yinhang" >' + "\n";
XML += '      <ogc:Filter>' + "\n";
XML += '      <ogc:PropertyIsLike wildCard="*" singleChar="#" escapeChar="!">'
+ "\n";
XML += '        <ogc:PropertyName>NAME</ogc:PropertyName>' + "\n";
XML += '             <ogc:Literal>' + "\n";
XML += '*' + infoName + '*' + "\n";
XML += '        </ogc:Literal>' + "\n";
XML += '       </ogc:PropertyIsLike>' + "\n";
XML += '        </ogc:Filter>' + "\n";
XML += '      </wfs:Query>' + "\n";
XML += ' <wfs:Query typeName="haha:SDE_LRDL_500_1_SplitLine" >' + "\n";
XML += '      <ogc:Filter>' + "\n";
XML += '      <ogc:PropertyIsLike wildCard="*" singleChar="#" escapeChar="!">'
+ "\n";
XML += '        <ogc:PropertyName>NAME</ogc:PropertyName>' + "\n";
XML += '             <ogc:Literal>' + "\n";
XML += '*' + infoName + '*' + "\n";
XML += '        </ogc:Literal>' + "\n";
XML += '       </ogc:PropertyIsLike>' + "\n";
XML += '        </ogc:Filter>' + "\n";
XML += '      </wfs:Query>' + "\n";
XML += ' <wfs:Query typeName="haha:sheshimian" >' + "\n";
XML += '      <ogc:Filter>' + "\n";
XML += '      <ogc:PropertyIsLike wildCard="*" singleChar="#" escapeChar="!">'
+ "\n";
XML += '        <ogc:PropertyName>NAME</ogc:PropertyName>' + "\n";
XML += '             <ogc:Literal>' + "\n";
XML += '*' + infoName + '*' + "\n";
XML += '        </ogc:Literal>' + "\n";
XML += '       </ogc:PropertyIsLike>' + "\n";
XML += '        </ogc:Filter>' + "\n";
XML += '      </wfs:Query>' + "\n";
XML += '    </wfs:GetFeature>' + "\n";

return XML;
}

function commithTxt(name) {
XML = makeXML(name);
var request = OpenLayers.Request.POST({// ajax请求获取数据源
url : "http://10.76.28.32:8080/geoserver/wfs",
data : XML,
callback : showResponseq
});
}

function showResponseq(req) {
var g = new OpenLayers.Format.GML();

var features = g.read(req.responseText);
if (features != null) {
for (var feat in features) {
if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf('(')) == "MULTIPOLYGON") {
map
.setCenter(
new OpenLayers.LonLat(
parseFloat(features[0].geometry
.getBounds().left),
parseFloat(features[0].geometry
.getBounds().right)), 2);

map.panTo(new OpenLayers.LonLat(parseFloat(features[0].geometry
.getBounds().left),
parseFloat(features[0].geometry.getBounds().right)));

} else if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf('(')) == "POINT") {
var lon = features[feat].geometry.x;
var lat = features[feat].geometry.y;
map.setCenter(new OpenLayers.LonLat(parseFloat(lon),
parseFloat(lat)), 2);
map.panTo(new OpenLayers.LonLat(parseFloat(lon),
parseFloat(lat)));
} else if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf('(')) == "MULTILINESTRING") {
map
.setCenter(
new OpenLayers.LonLat(
parseFloat(features[0].geometry
.getBounds().left),
parseFloat(features[0].geometry
.getBounds().right)), 2);

map.panTo(new OpenLayers.LonLat(parseFloat(features[0].geometry
.getBounds().left),
parseFloat(features[0].geometry.getBounds().right)));
}
}

} else {
alert('--暂无数据--');
}
}
// we want opaque external graphics and non-opaque internal graphics
var layer_style = OpenLayers.Util.extend({},
OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.2;
layer_style.graphicOpacity = 1;
/*
* Blue style
*/
var style_blue = OpenLayers.Util.extend({}, layer_style);
style_blue.strokeColor = "blue";
style_blue.fillColor = "blue";
style_blue.graphicName = "star";
style_blue.pointRadius = 10;
style_blue.strokeWidth = 3;
style_blue.rotation = 45;
style_blue.strokeLinecap = "butt";
function drawsFeatures(features) {

var arr = new Array();
var html = "";
var flag = 0;
// html += "<ul style = 'text-decoration:underline'>";
for (var feat in features) {
if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf('(')) == "POINT") {
var lon = features[feat].geometry.x;
var lat = features[feat].geometry.y;
arr.push(features[feat].attributes['NAME']);
var geo = new OpenLayers.Geometry.Point(lon, lat);// , {type : 5 +
features[feat] = new OpenLayers.Feature.Vector(geo, {
NAME : features[feat].attributes['NAME']
}, style_blue);

// alert(features[feat].attributes['NAME']);
// alert(features[feat].geometry);
flag = 3;
} else if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf('(')) == "MULTILINESTRING") {

arr.push(features[feat].attributes['NAME']);
flag = 1;

} else if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf('(')) == "MULTIPOLYGON") {
arr.push(features[feat].attributes['NAME']);
flag = 2;
}
}
if (flag == 1) {
if (vectors != null) {
map.removeLayer(vectors);
}

vectors = new OpenLayers.Layer.Vector("", {
styleMap : myStyles
});
map.addLayer(vectors);
vectors.addFeatures(features);
var select = new OpenLayers.Control.SelectFeature(vectors, {
hover : true,
onSelect : onFeatureSelect_line,
onUnselect : onFeatureUnselect
});
map.addControl(select);
select.activate();

var newArray = [];
var provisionalTable = {};
html += "<ul style = 'text-decoration:underline'>";
for (var i = 0, item; (item = arr[i]) != null; i++) {
if (!provisionalTable[item]) {
// newArray.push(item);
html += "<li>";
html += "<label style='cursor:pointer;' onclick=commithTxt("
+ "'" + item + "'" + ");" + ">" + item + "</label>";
provisionalTable[item] = true;
}
}
html += "</ul>";
document.getElementById('output').innerHTML = html;
} else if (flag == 2) {
if (vectors != null) {
map.removeLayer(vectors);
}
vectors = new OpenLayers.Layer.Vector("", {
styleMap : myStyles
});
map.addLayer(vectors);
vectors.addFeatures(features);
var select = new OpenLayers.Control.SelectFeature(vectors, {
hover : true,
onSelect : onFeatureSelect,
onUnselect : onFeatureUnselect
});
map.addControl(select);
select.activate();
var newArray = [];
var provisionalTable = {};
html += "<ul style = 'text-decoration:underline'>";
for (var i = 0, item; (item = arr[i]) != null; i++) {
if (!provisionalTable[item]) {
// newArray.push(item);
html += "<li>";
html += "<label style='cursor:pointer;' onclick=commithTxt("
+ "'" + item + "'" + ");" + ">" + item + "</label>";
provisionalTable[item] = true;
}
}
html += "</ul>";
document.getElementById('output').innerHTML = html;
} else if (flag == 3) {
if (vectors != null) {
map.removeLayer(vectors);
}

vectors = new OpenLayers.Layer.Vector("", {
styleMap : myStyles
});
map.addLayer(vectors);
vectors.events.register('mousedown', vectors, function(evt) {
// alert('polgon');
// getMapDetail(id);
OpenLayers.Event.stop(evt);
});
vectors.addFeatures(features);
var select = new OpenLayers.Control.SelectFeature(vectors, {
multiple : true,
toggle : true,
box : false,

hover : true,
onSelect : onFeatureSelect_point,
onUnselect : onFeatureUnselect
});
map.addControl(select);
select.activate();
var newArray = [];
var provisionalTable = {};
html += "<ul style = 'text-decoration:underline'>";
for (var i = 0, item; (item = arr[i]) != null; i++) {
if (!provisionalTable[item]) {
// newArray.push(item);
html += "<li>";
html += "<label style='cursor:pointer;' onclick=commithTxt("
+ "'" + item + "'" + ");" + ">" + item + "</label>";
provisionalTable[item] = true;
}
}
html += "</ul>";
document.getElementById('output').innerHTML = html;
}

}

function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry
.getBounds().getCenterLonLat(), null,

"<div style='font-size:.8em'>名称: " + feature.attributes['NAME']
+ "<br />面积: " + feature.geometry.getArea() + "</div>",

null, true, onPopupClose);

feature.popup = popup;

map.addPopup(popup);

}

function onFeatureSelect_line(feature) {
// alert('zei');
// alert(feature.attributes['NAME']);
selectedFeature = feature;

popup = new OpenLayers.Popup.FramedCloud("chicken",

feature.geometry.getBounds().getCenterLonLat(),

null,

"<div style='font-size:.8em'>名称: " + feature.attributes['NAME']
+ "<br />长度: " + feature.geometry.getLength() + "</div>",

null, true, onPopupClose);

feature.popup = popup;

map.addPopup(popup);

}
function onFeatureSelect_point(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry
.getBounds().getCenterLonLat(), null,

"<div style='font-size:.8em'>名称: " + feature.attributes['NAME']
+ "<br /></div>",// 面积: " + feature.geometry.getArea() +
// "

null, true, onPopupClose);

feature.popup = popup;

map.addPopup(popup);

}
function onFeatureUnselect(feature) {

map.removePopup(feature.popup);

feature.popup.destroy();

feature.popup = null;

}
function onPopupClose(evt) {

selectControl.unselect(selectedFeature);

}

function showResponse(req) {
var g = new OpenLayers.Format.GML();

var features = g.read(req.responseText);

if (features != null && features != "") {
drawsFeatures(features);
} else {
alert('暂时无数据');
}

}

function showTxt(infoName) {
var info_Name = document.getElementById('infoName');
XML = makeXML(info_Name.value);
var request = OpenLayers.Request.POST({// ajax请求获取数据源
url : "http://10.76.28.32:8080/geoserver/wfs",
data : XML,
callback : showResponse
});

}
0
顶
1
踩
分享到：
| 网摘某大学生给专栏作家连岳写了一份信：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    openlayer在线标绘，并实现增删改查

    在这个"openlayer在线标绘，并实现增删改查"的主题中，我们将深入探讨如何利用OpenLayers加载离线地图，进行在线标绘，以及如何实现标绘要素的增删改查功能，同时还会涉及地图图层切换和定位功能。 1. **加载离线...

    Openlayers通过元素获取图层，通过点元素获取线元素

    Openlayers虽然提供了很多方法， 一般是从图层（Layer）获取获取元素（feature），或者从元素（Feature）获取坐标（Coordinate）。获取到的一般都是集合。但是想要反着通过元素（feature）获取图层（Layer）.OL选择...

    openlayer基本功能代码

    这个"openlayer基本功能代码"的压缩包可能包含了实现OpenLayers基础功能的示例代码，让我们来详细探讨一下这些功能。 1. **基本放大缩小**：OpenLayers 提供了简单的地图缩放和平移操作。`Map`对象是核心，通过它的...

    openlayer 的一些基本样例

    这个压缩包“openlayer 的一些基本样例”显然是为了帮助开发者更好地理解和学习如何使用OpenLayers进行地图展示和操作。 首先，让我们来看看标题和描述中提到的关键知识点： 1. **地图加载**：OpenLayers 支持从...

    geoserver与openlayer配置

    - WFS用于获取地图对象的数据，可以用于交互操作，如添加、编辑、删除地理要素，对应OpenLayers的`ol.source.Vector`和`ol.layer.Vector`类。 4. 设置交互和控制，如缩放、平移、信息框等。 5. 初始化地图并加载...

    Geoserver+openlayer+postGis要素增删改查

    "Geoserver+openlayer+postGis要素增删改查"是一个综合性的项目，它结合了三个关键组件：PostGIS、GeoServer和OpenLayers，来实现这一目标。下面将详细介绍这三个组件及其相互作用。 1. **PostGIS**： PostGIS 是 ...

    openlayers3要素移动交互并弹出要素信息

    当鼠标移到点上时，我们可以从特征的`getProperties()`方法获取这些信息，并将其显示在弹出框中。 7. **DOM操作**：为了创建和管理弹出框的DOM元素，我们可能需要使用JavaScript的DOM API。例如，创建一个div元素...

    openlayer 教程

    而 Source 则是从远程数据源获取地图数据的层，它使用 ol.source.Source 子类来处理不同的数据类型，如瓦片地图服务、矢量数据等。 OpenLayers 3 包含三种基本图层类型：ol.layer.Tile、ol.layer.Image 和 ol.layer...

    OpenLayers地图要素tooltip[文字提示]

    3. **创建Feature和Vector Layer**：如果你的要素是动态的，可能需要创建一个Vector Layer，并添加自定义Feature。 ```javascript var vectorSource = new ol.source.Vector(); var vectorLayer = new ol.layer....

    openLayers geoserver常见问题

    在OpenLayers中，删除Layer中的marker可以通过以下步骤实现：首先，获取到你想要删除的marker对象，这通常基于用户交互事件（如点击）来完成。然后，调用Layer的removeFeatures方法，传入marker对象即可将其从地图上...

    openLayer2D.zip

    3. GeoJSON：OpenLayers支持GeoJSON格式的数据，可以直接在地图上展示点、线、面等地理要素。 七、高性能优化 1. 瓦片缓存：利用本地缓存提高地图加载速度。 2. 分级符号：根据地图缩放级别动态调整图层的细节程度...

    openlayers3+ 地图右键

    例如，你可以提供测量距离、获取坐标、删除要素等功能。 ```javascript document.getElementById('measure').addEventListener('click', function() { // 测量功能的实现 }); document.getElementById('get-...

    openlayer5 常见功能实例，各种实例封装组件demo

    一旦选择，开发者可以获取这些要素的信息，例如其属性值。`data.json`可能是存储了地图要素数据的GeoJSON文件，实例中可能演示了如何处理这些数据并显示相关信息。 4. **加载WMTS自定义地图**： 在某些情况下，...

    Openlayer 简单实例8

    3. **绘制要素**： ```javascript var feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([116.39723, 39.90498]))); feature.set('name', 'Beijing'); vectorLayer.getSource().addFeature...

    dem高程点获取c#代码示例

    在ArcGIS中，MDB文件通常用于存储地理数据库，其中包括地理要素类、表和其他GIS对象。使用`Geodatabase`类，我们可以打开这个数据库并与其中的数据交互。 `dem_nanjing.mxd`是ArcGIS的Map Document（地图文档）文件...

    openlayers3 多边形相交判断

    var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [feature1] }) }); map.addLayer(vectorLayer); ``` 3. **多边形相交判断**：OpenLayers 3并没有直接提供多边形相交的...

    OpenLayers-2.5

    3. **矢量数据支持**：可以创建、编辑和显示矢量要素，如点、线、多边形，支持自定义样式和事件处理。 4. **标记和注解**：允许在地图上添加自定义的标注或注释，增强地图的交互性和信息传递。 5. **地理定位**：...

    openlayers加载本地切片、高亮显示

    var layer = new ol.layer.Tile({ source: tileSource }); ``` 3. **创建地图**：将图层添加到地图实例中。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], // ...

    openlayers中文.rar

    - **图层操作**：`layer.setVisible(true/false)`切换图层显示状态，`source.addFeature(feature)`添加矢量要素。 - **样式设置**：通过Style和StyleMap对图层和特征进行样式定制。 - **瓦片服务**：通过...

    openLayer4实现动态改变标注图标

    7. `ol.interaction.Select`是openLayer提供的交互组件之一，允许用户在地图上选择要素。在本例中，我们通过监听`select`事件来响应用户的点击行为，并在点击后更改图标的样式。 具体实现步骤分为初始化地图、添加...

Magicbox
Global site tag (gtag.js) - Google Analytics