1. 步驟
1) 全局變量
var map, layer;
2) 添加地圖容器
<!--'map1'為html中要顯示地圖div的id-->
map = new OpenLayers.Map('map1',
{
<!--添加控件-->
controls: [
new OpenLayers.Control.PanZoomBar(), //縮放面板的工具控件
new OpenLayers.Control.LayerSwitcher(), //圖層切換控件
new OpenLayers.Control.Navigation(), //此控件處理伴隨鼠標事件的地圖瀏覽
new OpenLayers.Control.MousePosition(), //此控件顯示鼠標移動時，所在點的地理坐標
new OpenLayers.Control.OverviewMap() //鷹眼
]
}
);
3) 添加矢量圖層
注:傳入的["gdbp://MapGisLocal/示例數(shù)據(jù)/ds/世界地圖/sfcls/國界"]為MapGIS10桌面版中要素的url. 如圖
Paste_Image.png
layer = new Zondy.Map.Layer("mapgis test",
// 傳入矢量地圖的url參數(shù)
["gdbp://MapGisLocal/示例數(shù)據(jù)/ds/世界地圖/sfcls/國界"],
{
ip: "127.0.0.1", //ip
port: "6163", //端口
isBaseLayer: true //設(shè)為基礎(chǔ)圖層
}
);
4) 將圖層添加到地圖容器中
map.addLayer(layer);
5) 設(shè)置地圖顯示中心坐標,地圖縮放等級
<!--設(shè)置地圖顯示中心坐標,地圖縮放等級-->
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
注:雷同代碼不再做注釋,如有不懂請參閱前面發(fā)布的文章
2.完整代碼
<!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 type="text/javascript">{
var map, layer;
function init() {
// 添加地圖容器
map = new OpenLayers.Map("map1");
// 添加矢量圖層
layer = new Zondy.Map.Layer("mapgis test",
// 傳入矢量地圖的url參數(shù)
["gdbp://MapGisLocal/示例數(shù)據(jù)/ds/世界地圖/sfcls/國界"],
{
ip: "127.0.0.1", //ip
port: "6163", //端口
isBaseLayer: true //設(shè)為基礎(chǔ)圖層
}
);
// 將圖層添加到地圖容器中
map.addLayer(layer);
<!--設(shè)置地圖顯示中心坐標,地圖縮放等級-->
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
}
</script>
</head>
<body onload="init()">
<div id="map1">
</div>
</body>
</html>
3.效果
Paste_Image.png
