在使用 OpenLayers 進(jìn)行地圖開發(fā)時(shí)，我們經(jīng)常需要在地圖上添加多個(gè)標(biāo)注點(diǎn)。通過 Feature 和 Marker 結(jié)合實(shí)現(xiàn)多點(diǎn)標(biāo)注顯示是一個(gè)常見的需求。下面將介紹如何通過添加單個(gè)標(biāo)注函數(shù)來實(shí)現(xiàn)

在使用 OpenLayers 進(jìn)行地圖開發(fā)時(shí)，我們經(jīng)常需要在地圖上添加多個(gè)標(biāo)注點(diǎn)。通過 Feature 和 Marker 結(jié)合實(shí)現(xiàn)多點(diǎn)標(biāo)注顯示是一個(gè)常見的需求。下面將介紹如何通過添加單個(gè)標(biāo)注函數(shù)來實(shí)現(xiàn)多標(biāo)注顯示的功能。

```javascript

function addMarker(markerName, icon, ll, popupClass, popupContentHTML, closeBox, overflow) {

var feature new OpenLayers.Feature(markerName, ll, {icon: ()});

closeBox;

feature.popupClass popupClass;

popupContentHTML;

(overflow) ? "auto" : "hidden";

var marker ();

var markerClick function(evt) {

if (this.popup null) {

this.popup ();

("E2E7EB");

("1px 0066ff solid");

(this.popup);

();

} else {

();

}

currentPopup this.popup;

(evt);

};

("mousedown", feature, markerClick);

(marker);

}

```

上述代碼實(shí)現(xiàn)了點(diǎn)擊標(biāo)注彈出框的效果，并通過調(diào)用該方法實(shí)現(xiàn)多點(diǎn)標(biāo)注。接下來，我們將展示核心代碼來調(diào)用上面函數(shù)實(shí)現(xiàn)多點(diǎn)標(biāo)注的功能。

調(diào)用函數(shù)實(shí)現(xiàn)多點(diǎn)標(biāo)注

在頁面加載時(shí)預(yù)先定義所需變量并調(diào)用 `addMarker` 函數(shù)來實(shí)現(xiàn)多點(diǎn)標(biāo)注的功能：

```javascript

var url '';

var sz new (20, 20);

var calculateOffset function(size) {

return new OpenLayers.Pixel(-(size.w/2), -size.h);

};

var icon new OpenLayers.Icon(url, sz, null, calculateOffset);

for (var i0; i

var lonLat new OpenLayers.LonLat(cctvList[i].gis_x, cctvList[i].gis_y);

(map.displayProjection, ());

var device_name cctvList[i].device_name;

var popupContentHTML createPopupContentHTML('治安監(jiān)控', cctvList[i]);

var popupClass ;

addMarker(cctvMarkers, icon, lonLat, popupClass, popupContentHTML, true);

}

```

以上代碼展示了如何通過遍歷數(shù)據(jù)列表，在 GIS 地圖上顯示多個(gè)標(biāo)注點(diǎn)。

圖層控制與搜索定位

通過定義全局變量 `cctvMarkers、tgsMarkers、epsMarkers` 實(shí)現(xiàn)不同圖層的顯示控制。用戶可以通過調(diào)用 `()` 方法來清理某個(gè)圖層的數(shù)據(jù)，從而實(shí)現(xiàn)圖層的隱藏和顯示控制。

```javascript

function hiddenMarker(markerName){

if(markerName 'cctv'){

();

} else if(markerName 'tgs'){

();

} else {

();

}

}

```

新增標(biāo)注與搜索定位功能

在 GIS 地圖上新增標(biāo)注只需獲取相應(yīng)的經(jīng)緯度坐標(biāo)并保存至數(shù)據(jù)庫即可。同時(shí)，搜索定位功能通過尋找數(shù)據(jù)庫中符合關(guān)鍵字的結(jié)果項(xiàng)，并在地圖上渲染標(biāo)注實(shí)現(xiàn)。以下為單擊事件響應(yīng)的關(guān)鍵代碼：

```javascript

(, {

defaultHandlerOptions: {

'single': true,

'double': false,

'pixelTolerance': 0,

'stopSingle': false,

'stopDouble': false

},

initialize: function(options) {

this.handlerOptions OpenLayers.Util.extend({}, );

(this, arguments);

this.handler new (this, {

'click':

}, this.handlerOptions);

},

trigger: function(e) {

();

var url '';

var sz new (30, 30);

var calculateOffset function(size) {

return new OpenLayers.Pixel(-(size.w/2), -size.h);

};

var icon new OpenLayers.Icon(url, sz, null, calculateOffset);

var lonlat (e.xy);

var marker new (lonlat, icon);

(marker);

(new ("EPSG:900913"), new ("EPSG:4326"));

(5);

(5);

}

});

```

通過以上功能實(shí)現(xiàn)，簡(jiǎn)單的 GIS 應(yīng)用已經(jīng)足夠滿足基本需求。希望這些代碼對(duì)您有所幫助。