1. 加載地圖
1) 加載底圖
var map;
var layer;
var drawLayer;
var drawControl;
var highLtLayer;
function init() {
// 添加地圖容器
map = new OpenLayers.Map('map1',
{
controls: [
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.MousePosition()
]
}
);
// 添加圖層
layer = new Zondy.Map.Doc('MDZZ', 'WorldMKT', {
ip: "127.0.0.1",
port: '6163',
isBaseLayer: true
});
map.addLayers([layer]);
map.setCenter(new OpenLayers.LonLat(11544046, 4312771), 3);
<!--調(diào)用函數(shù)創(chuàng)建繪制圖層-->
initDraw();
}
2) 添加一個繪制圖層
function initDraw() {
// 添加一個繪制圖層
drawLayer = new OpenLayers.Layer.Vector("DrawLayer");
map.addLayer(drawLayer);
// 創(chuàng)建并添加控件 點
drawControl = new OpenLayers.Control.DrawFeature(drawLayer, OpenLayers.Handler.Point);
<!--調(diào)用callBack函數(shù)將查詢到的要素添加到繪圖控件中(可能不對..忘了)-->
drawControl.featureAdded = callBack;
<!--添加地圖控件-->
map.addControl(drawControl);
}
3) 創(chuàng)建圖層用于高亮顯示
function initHighLtLayer() {
// 添加一個用于高亮顯示的圖層
highLtLayer = new OpenLayers.Layer.Vector("Highlight");
map.addLayer(highLtLayer);
}
2.查詢
查詢5步曲
a.創(chuàng)建查詢結(jié)構(gòu)
b.創(chuàng)建查詢形狀
c.創(chuàng)建查詢參數(shù)
d.創(chuàng)建查詢服務
e.開始查詢
function callBack(feature) {
// 創(chuàng)建查詢結(jié)構(gòu)
var queryStruct = new Zondy.Service.QueryFeatureStruct(
{
// 要查詢的信息
IncludeGeometry: true,
IncludeAttribute: true,
IncludeGraphic: true
}
);
// 創(chuàng)建查詢形狀
var pointObj = new Zondy.Object.PointForQuery();
// 傳入OpenLayer的點的坐標
pointObj.setByOL(feature.geometry);
// 在點擊下一個點時清除之前的點
feature.destroy();
// 創(chuàng)建查詢參數(shù)
var queryParm = new Zondy.Service.QueryParameter(
{
geometry:pointObj,
resultFormat:"json",
struct:queryStruct
});
// 創(chuàng)建查詢服務
var queryService =new Zondy.Service.QueryDocFeature(queryParm,"WorldMKT",1,{
ip:"127.0.0.1",
port:"6163"
});
// 開始查詢
queryService.query(onSuccess);
}
查詢按鈕的點擊事件
function startQuery() {
if (drawControl) {
drawControl.activate();//激活繪圖控件
}
}
回調(diào)函數(shù) onSuccess
function onSuccess(data) {
var formatData = JSON.stringify(data);
Process(formatData, 1, "resultTable");
// 如果存在已經(jīng)高亮的圖層則銷毀,通過initHighLtLayer()重建要高亮顯示的新圖層
if(highLtLayer) {
highLtLayer.destroy();
}
//初始化高亮圖層
initHighLtLayer();
// 高亮顯示
var format = new Zondy.Format.PolygonJSON();
var features = format.read(data);
highLtLayer.setVisibility(true);//將圖層設(shè)為可見
highLtLayer.addFeatures(features);//將要素添加到圖層中
}
3.代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../css/mapDefault.css" type="text/css" rel="stylesheet"/>
<script src="../libs/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../libs/OpenLayers.js" type="text/javascript"></script>
<script src="../libs/zdclient.js" type="text/javascript"></script>
<script src="../libs/jsonformat/json2.js" type="text/javascript"></script>
<script src="../libs/jsonformat/jsonExtend.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var layer;
var drawLayer;
var drawControl;
var highLtLayer;
function init() {
// 創(chuàng)建地圖容器
map = new OpenLayers.Map("map1", {
// 添加控件
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.OverviewMap()
]
});
layer = new Zondy.Map.Doc("BaseLayer", "WorldMKT", {
ip: "127.0.0.1",
port: "6163",
isBaseLayer: true
});
// 添加圖層
map.addLayers([layer]);
// 設(shè)置顯示中心和級別
map.setCenter(new OpenLayers.LonLat(11544046, 4312771), 3);
initDraw();
}
function initDraw() {
// 添加一個繪制圖層
drawLayer = new OpenLayers.Layer.Vector("DrawLayer");
map.addLayer(drawLayer);
// 創(chuàng)建并添加控件 點
drawControl = new OpenLayers.Control.DrawFeature(drawLayer, OpenLayers.Handler.Point);
drawControl.featureAdded = callBack;
map.addControl(drawControl);
}
function initHighLtLayer() {
// 添加一個用于高亮顯示的圖層
highLtLayer = new OpenLayers.Layer.Vector("Highlight");
map.addLayer(highLtLayer);
}
function callBack(feature) {
// 創(chuàng)建查詢結(jié)構(gòu)
var queryStruct = new Zondy.Service.QueryFeatureStruct(
{
// 要查詢的信息
IncludeGeometry: true,
IncludeAttribute: true,
IncludeGraphic: true
}
);
// 創(chuàng)建查詢形狀
var pointObj = new Zondy.Object.PointForQuery();
// 傳入OpenLayer的點的坐標
pointObj.setByOL(feature.geometry);
// 在點擊下一個點時清除之前的點
feature.destroy();
// 創(chuàng)建查詢參數(shù)
var queryParm = new Zondy.Service.QueryParameter(
{
geometry:pointObj,
resultFormat:"json",
struct:queryStruct
});
// 創(chuàng)建查詢服務
var queryService =new Zondy.Service.QueryDocFeature(queryParm,"WorldMKT",1,{
ip:"127.0.0.1",
port:"6163"
});
// 開始查詢
queryService.query(onSuccess);
}
function startQuery() {
if (drawControl) {
drawControl.activate();//激活繪圖控件
}
}
function onSuccess(data) {
var formatData = JSON.stringify(data);
Process(formatData, 1, "resultTable");
// 如果存在已經(jīng)高亮的圖層則銷毀,通過initHighLtLayer()重建要高亮顯示的新圖層
if(highLtLayer) {
highLtLayer.destroy();
}
//初始化高亮圖層
initHighLtLayer();
// 高亮顯示
var format = new Zondy.Format.PolygonJSON();
var features = format.read(data);
highLtLayer.setVisibility(true);//將圖層設(shè)為可見
highLtLayer.addFeatures(features);//將要素添加到圖層中
}
</script>
</head>
<body onload="init()">
<div class="ToolLib">
<input type="button" class="ButtonLib" value="開始查詢" onclick="startQuery()"/>
</div>
<div id="map1"></div>
<aside id="resultTable">
</aside>
</body>
</html>
3.效果
Paste_Image.png
在點擊查詢下一個點時,清除之前高亮的圖層和json,并重新顯示新的數(shù)據(jù)
Paste_Image.png
