點擊點繪制按鈕后,可在地圖任意位置畫點
1. 步驟
1) 全局變量
var map, layer;
var drawControl; //筆
var vecLayer; //紙
2) 加載地圖
function init() {
// 創(chuàng)建地圖容器
map = new OpenLayers.Map('map1',
{
controls: [
new OpenLayers.Control.PanZoomBar(),//縮放面板的工具控件
new OpenLayers.Control.LayerSwitcher(), //圖層切換控件
new OpenLayers.Control.Navigation(), //此控件處理伴隨鼠標事件的地圖瀏覽
new OpenLayers.Control.MousePosition()//此控件顯示鼠標移動時喘帚，所在點的地理坐標
]
}
);
// 添加圖層0
layer0 = new Zondy.Map.GoogleLayer("Google Map VEC",
{
// 添加GoogleMap的矢量圖層
layerType: Zondy.Enum.GoogleLayerType.VEC,
// 設(shè)為底圖
isBaseLayer: true
}
);
// 將圖層添加到地圖中
map.addLayers([layer0]);
// 設(shè)置地圖顯示中心和縮放級別
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
}
3) //創(chuàng)建一個矢量圖層用于交互式繪制
function initDrawControl() {
// 創(chuàng)建圖層
vecLayer = new OpenLayers.Layer.Vector("DrawLayer");
// 添加到地圖中
map.addLayer(vecLayer);
// 創(chuàng)建繪制**點**工具
drawControl = new OpenLayers.Control.DrawFeature(vecLayer, OpenLayers.Handler.Point);
// 將繪圖工具添加到控件中
map.addControl(drawControl);
}
4) 開始繪制函數(shù)
function StarDraw() {
//如果繪圖圖層不存在
if (vecLayer == null) {
// 初始化繪圖
initDrawControl();
}
drawControl.activate();//激活繪圖控件
5) 清除圖層
function clearMap() {
if (vecLayer) {
// 移除繪圖圖層
map.removeLayer(vecLayer);
}
// 繪圖圖層賦值為空
vecLayer = null;
// 關(guān)閉繪圖控件
drawControl.deactivate();
}
注:雷同代碼不再做注釋,如有不懂請參閱前面發(fā)布的文章
2.完整代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--如果中文亂碼則缺少此行代碼-->
<meta charset="UTF-8">
<title>幾何圖形繪制</title>
<link href="../css/mapDefault.css" type="text/css" rel="stylesheet"/>
<script src="../libs/jquery-1.11.2.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;
var drawControl; //筆
var vecLayer; //紙
//加載一個圖層
function init() {
// 創(chuàng)建地圖容器
map = new OpenLayers.Map('map1',
{
controls: [
new OpenLayers.Control.PanZoomBar(),//縮放面板的工具控件
new OpenLayers.Control.LayerSwitcher(), //圖層切換控件
new OpenLayers.Control.Navigation(), //此控件處理伴隨鼠標事件的地圖瀏覽
new OpenLayers.Control.MousePosition()//此控件顯示鼠標移動時辙纬，所在點的地理坐標
]
}
);
// 添加圖層0
layer0 = new Zondy.Map.GoogleLayer("Google Map VEC",
{
// 添加GoogleMap的矢量圖層
layerType: Zondy.Enum.GoogleLayerType.VEC,
// 設(shè)為底圖
isBaseLayer: true
}
);
// 將圖層添加到地圖中
map.addLayers([layer0]);
// 設(shè)置地圖顯示中心和縮放級別
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
}
//創(chuàng)建一個矢量圖層用于交互式繪制
function initDrawControl() {
// 創(chuàng)建圖層
vecLayer = new OpenLayers.Layer.Vector("DrawLayer");
// 添加到地圖中
map.addLayer(vecLayer);
// 創(chuàng)建繪制**點**工具
drawControl = new OpenLayers.Control.DrawFeature(vecLayer, OpenLayers.Handler.Point);
// 將繪圖工具添加到控件中
map.addControl(drawControl);
}
// 開始繪制函數(shù)
function StarDraw() {
//如果繪圖圖層不存在
if (vecLayer == null) {
// 初始化繪圖
initDrawControl();
}
drawControl.activate();//激活繪圖控件
//激活控件
}
//清除圖層
function clearMap() {
if (vecLayer) {
// 移除繪圖圖層
map.removeLayer(vecLayer);
}
// 繪圖圖層賦值為空
vecLayer = null;
// 關(guān)閉繪圖控件
drawControl.deactivate();
}
</script>
</head>
<body onload="init()">
<div class="ToolLib">
<!--添加按鈕-->
<input type ="button" class="ButtonLib" value="繪制點" onclick="StarDraw()" />
<input type ="button" class="ButtonLib" value="清除繪制" onclick="clearMap()" />
</div>
<div id="map1"></div>
</body>
</html>
3.效果
點擊繪制點按鈕后鼠標處出現(xiàn)點 可在地圖任意位置點擊繪制點
點擊清除繪制會清空繪制圖層從而清除繪制的點
Paste_Image.png
