工作区的风险防控信息如下图：
首先，利用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"));
}
效果如下：
