工作區的風險防控信息如下圖：
首先，利用arcgis對風險防控圖配準，配準後繪製矢量化點，矢量化後，對繪製的點增加屬性和等級字段，屬性字段中輸入圖中危險信息，等級字段中輸入危險等級。結果如下：
在arcgis中進行幾何計算，獲取經度緯度，將屬性信息導出excel，結果如下：
利用echat中的表格工具，將該屬性錶轉化成JSON格式，JSON爲jsp中經常用到的數據存放格式，由鍵值對要素構成，轉換後的結果如下：
接下來進行開發的步驟…….
首先，利用arcgis server進行底圖的發佈，發佈後在代碼中引用，代碼如下：
map = new Map("map",{logo:false});
var tiled = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/sealayer/MapServer");
map.addLayer(tiled, 0);
結果如下：
接下來進行風險點的要素繪製，代碼如下：
var popupLayer = new GraphicsLayer({"id":"popupLayer"});//新建要素圖層
map.addLayer(popupLayer, 2);//將圖層加到地圖容器中
map.getLayer("popupLayer").setScaleRange(100000,0);//設置顯示比例
map.on("load",function(){
addReadPopup();
});
function addReadPopup(){
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,//新建緩衝面填充樣式，new SimpleFillSymbol(style,
outline, color)
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([48,172,236,0.3]), 2),//緩衝面邊沿線樣式，其中的2表示寬度
new Color([48,172,236,0.3])//緩衝面的格式，第四位表示透明度
);
var pms = new PictureMarkerSymbol('', 10, 10);//空格中爲圖片樣式
$.getJSON ("weakPoint.json", null,function (data){
for(var i= 0;i<data.length;i++){
var pt = new Point(data[i].經度,data[i].緯度, sr);//sr爲空間參考
var graphic = new Graphic(pt, pms, data[i]);//創建的點，Graphic(geometry,symbol,attributes,infoTemplate)//最後一位爲彈窗
var gCircle = new Graphic(//創建一個帶屬性的面圖形object
new Circle(pt, {"radius":200}),//創建點的範圍緩衝面
sfs);
popupLayer.add(gCircle);
popupLayer.add(graphic);
}
});
}
其中， $.getJSON (“weakPoint.json”, null,function (data){}用於讀取JSON文件。
點擊圖層後，呈現的操作代碼編寫：
popupLayer.on("click",popupLayerClick);//點擊繪製的要素出現的響應
popupLayer.on("mouse-over",popupLayerOver);//鼠標懸於圖層上出現的響應
popupLayer.on("mouse-out",popupLayerOut);//鼠標移除後出現的響應
function popupLayerClick(evt){
var graphic = evt.graphic;
map.infoWindow.setTitle("危險等級："+graphic.attributes.等級);
map.infoWindow.setContent(graphic.attributes.屬性);
map.infoWindow.show(graphic.geometry);
}
function popupLayerOver(e){
map.setMapCursor("pointer");
console.log(e.graphic.attributes);
var scrPt = map.toScreen(e.graphic.geometry);
var textDiv = domConstruct.create("div");
domAttr.set(textDiv,{
"id":"text"
});
domStyle.set(textDiv, {
"left": scrPt.x+10 + "px",
"top": scrPt.y+10 + "px",
"position": "absolute",
"z-index":99,
"background":"#fcffd1",
"font-size":"12px",
"border":"1px solid #0096ff",
"padding": "0.1em 0.3em 0.1em",
"border-radius": "3px",
"box-shadow": "0 0 0.75em #777777"
});
textDiv.innerHTML ="危險等級"+e.graphic.attributes.等級+":"+e.graphic.attributes.屬性;
dom.byId("map").appendChild(textDiv);
}
function popupLayerOut(e){
map.setMapCursor("default");
dom.byId("map").removeChild(dom.byId("text"));
}
效果如下：
