之前文章被抄襲過，抄襲者我就說一句好自為之，現在csdn沒辦法舉報和投訴，有時間了我絕對追究到底

歡迎轉載，不歡迎一個字不改還說自己是原創的。樂於知識分享，轉載請註明原作者和地址，謝謝。

=================================================================

但是有時候可能會需要開啟一個頁面就自動出來好多氣泡（氣泡中可能展示一些實時資訊），而不是點選一個出現一個。

我的方法比較笨，求輕噴，歡迎大神有更好的方法討論指教。o(^▽^)o

1、CSS 

CSS和上一節一樣，沒有什麼改變

@CHARSET "UTF-8";
/*leaflet風格氣泡視窗樣式模板*/
.leaflet-popup {
    position: absolute;
    text-align: center;
}
.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}
.leaflet-popup-content-wrapper {
    text-align: center;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    padding: 1px;
    text-align: left;
    border-radius: 12px;
}
.leaflet-popup-content {
    margin: 13px 19px;
    line-height: 1.4;
}
.leaflet-popup-tip-container {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
.leaflet-popup-tip {
    background: white;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    width: 17px;
    height: 17px;
    padding: 1px;
    margin: -10px auto 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*按鈕樣式*/
.add-button{
	
}
 

動態生成DIV，因為有多個DIV，所以每一個名字、ID都要都不一樣

我的這一段程式碼是放在ajax請求後臺返回資料成功後的$.each迴圈中的，程式碼中的“s”代表的就是每次迴圈動態新增的實體，所以每一個“s”的id都是不一樣的。

需要注意的是，由於變數名不能使用字串動態拼接，所以可以用window[變數名]來實現字串解析，達到動態變數名的效果。

除了div變數名不同，同樣氣泡視窗的trackPopUp等id名也需要加上唯一的s.id，否則會出現id名相同新增content時內容都一樣，或者是關閉時一起關閉的情況。所以要得到完全不同的DIV必須id名也都唯一。

window[newDiv]

var newDiv = "div"+s.id;   //生成函式名
			window[newDiv]= '<div id="trackPopUp-'+s.id+'"  style="display:block;">'+
		     '<div id="trackPopUpContent-'+s.id+'" class="leaflet-popup" style="top:5px;left:0;">'+
		       '<a id="leaflet-popup-close-button-'+s.id+'" class="leaflet-popup-close-button" href="#">×</a>'+
		       '<div class="leaflet-popup-content-wrapper">'+
		         '<div id="trackPopUpLink-'+s.id+'" class="leaflet-popup-content" style="max-width: 300px;"></div>'+
		       '</div>'+
		       '<div class="leaflet-popup-tip-container">'+
		         '<div class="leaflet-popup-tip"></div>'+
		       '</div>'+
		     '</div>'+
		   '</div>';
		$("#cesiumContainer").append(window[newDiv]);
	    var info = 
		    	 '<table><tbody><tr><th style="color:black;">站名</th><td><input style="color:black;" value='+station[id].stadiacode+'></td></tr>'+
		    	 '<tr><th style="color:black;">經度</th><td><input id="x" style="color:black;" value='+(x_k*station[id].x+x_off).toFixed(6)+'></td></tr>'+
		    	 '<tr><th style="color:black;">緯度</th><td><input id="y" style="color:black;" value='+(y_k*station[id].y+y_off).toFixed(6)+'></td></tr>'+
		 '</tbody></table>'	;
       var obj = {station:s,position:s._position._value,content:info};
       autoInfoWindow(obj);
 

接下來是autoInfoWindow函式的寫法

將ID的名稱都加上了唯一的s,id來進行字串拼接

 var trackPopUpLink="#trackPopUpLink-"+obj.station.id;
 var trackPopUp="#trackPopUp-"+obj.station.id;
  var trackPopUpContent="#trackPopUpContent-"+obj.station.id;
  var close="#leaflet-popup-close-button-"+obj.station.id;

function autoInfoWindow(obj) {
	
            var trackPopUpLink="#trackPopUpLink-"+obj.station.id;
            var trackPopUp="#trackPopUp-"+obj.station.id;
            var trackPopUpContent="#trackPopUpContent-"+obj.station.id;
            var close="#leaflet-popup-close-button-"+obj.station.id;
            
            $(".cesium-selection-wrapper").show();
            $(trackPopUpLink).empty();
            $(trackPopUpLink).append(obj.content);
     		function positionPopUp (c) {
     			var x = c.x - ($(trackPopUpContent).width()) / 2;
     			var y = c.y - ($(trackPopUpContent).height());
     			$(trackPopUpContent).css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');
     		}
     		var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
     		$(trackPopUp).show();
     		positionPopUp(c); 
			//動態變數名
     		var stationHandler = obj.station.id;   //生成函式名
     	    window[stationHandler] = viewer.scene.postRender.addEventListener(function () {
     	    var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, obj.station._position._value);
     			// If things moved, move the
						// popUp too
     			if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
     				positionPopUp(changedC);
     				c = changedC;
     			}
     		});
     		// PopUp close button event handler
     	   $(close).click(function() {
     			$(trackPopUp).hide();
     			$(trackPopUpLink).empty();
     			$(".cesium-selection-wrapper").hide();
     			window[stationHandler].call();
     			return false;
     		});	            				
         }

這樣一進入頁面就可以看到很多個DIV了，每一個資訊都是根據自己對應的entity獲取的，關閉按鈕也是一一對應的。

效果如下：