MapXtreme 2005自定义图层控制代码(WEB)

虽然MapXtreme 2005 6.7.1提供了图层控制的控件,但很多时候需要自己定义,所以就写了个DEMO,起个抛砖引玉的作用.
整体思路是:
1.从服务端获取待控制的图层信息(名称,是否可视,标注是否可视信息),JSON格式
2.客户端用户选择后,发送到服务端 JSON格式
3.服务端执行控制后,把得到到图象返回给客户端
客户端页面包含:
复制内容到剪贴板
代码:

<div style="width: 235px; height: 26px">
               图层设置<img src="images/down.gif" alt="图层设置" id="layerimg" onclick="return layerimg_onclick()" />
</div>
<div id="layerTag" style="display:none">
       <table style="width: 292px">
                <tr>
                   <td style="width: 57px; font: caption; color: blue;">
                                         图层名称</td>
                   <td style="width: 63px; font: caption; color: blue;">
                                         显示与否</td>
                   <td style="width: 57px; font: caption; color: blue;">
                                         标注与否</td>
               </tr>
              <tr id="QQ">
                   <td style="width: 57px; font: menu; color: purple; height: 22px;">
                                         QQ图层</td>
                  <td style="width: 63px; height: 22px;">
                                         <input id="QQCheckbox1" style="width: 21px" type="checkbox" /></td>
                 <td style="width: 57px; height: 22px;">
                                         <input id="QQCheckbox2" type="checkbox" /></td>
                   <td style="width: 36px; height: 22px;">
                             <input id="Button1" style="width: 38px" type="button" value="应用" onclick="return Layercontrol()" />
                  </td>
              </tr>
              <tr id="CONTACT">
                    <td style="width: 57px; font: menu; color: purple;">
                                         联系图层</td>
                     <td style="width: 63px;">
                              <input style="width: 21px" id="LLCheckbox1" type="checkbox"/></td>
                      <td style="width: 57px">
                                         <input id="LLCheckbox2" style="width: 21px" type="checkbox" /></td>
                      <td style="width: 36px; height: 22px;">
                              <input id="Button2" style="width: 38px" type="button" value="应用" onclick="return Layercontrol()"/></td>
                   </tr>
      </table>
</div>
简要控制脚本:
复制内容到剪贴板
代码:

function layerimg_onclick() {
     if ($("#layerTag").css("display")=="none"){
         $("#layerimg").attr("src","images/up.gif");
         $("#layerTag").css("display","block");
         getlayercontrol();
     }
     else{
         $("#layerimg").attr("src","images/down.gif");
         $("#layerTag").css("display","none");
     }
}
首先先做获取服务端待控制的图层信息:
客户端脚本如下:
复制内容到剪贴板
代码:
//获取图层控制信息
function getlayercontrol(){
$.ajax({
   type:"post",
   url:"GetCustomLayer.ashx",
   data:"",
   success:function(data){
      var json=eval("("+data+")");
      for(var i=0;i<json.items.length;i++){
        if(i==0) {
           form1.QQCheckbox1.checked=json.items.visible;
           form1.QQCheckbox2.checked=json.items.labelvisible;
         }
        else{
            form1.LLCheckbox1.checked=json.items.visible;
            form1.LLCheckbox2.checked=json.items.labelvisible;
        }
     }
   }
});
}
服务端执行页面是:GetCustomLayer.ashx见附件,为了使用JSON,ASP.NET AJAX的机制使用序列化和反序列化,为此先构造图层类见附件,控制当用户选择不显示/显示某个图层时的交互情况,脚本参考如下:
复制内容到剪贴板
代码:
function Layercontrol() {
    //按照顺序定义button,取序号
    var src=event.srcElement.id;
    var index=src.substring(7,src.length-1);
    //根据button序号获取td信息
    var name=$("#layerTag tr:eq("+index+")").attr("id");
    var visible=$("#layerTag tr:eq("+index+") td").eq(1).find(":checkbox").attr("checked");
    var labelvisible=$("#layerTag tr:eq("+index+") td").eq(2).find(":checkbox").attr("checked");
  
    //由于JSON.JS和JQERUY有些冲突,手工设置为JSON格式
    var jsonstr="{\"name\":\""+name+"\",\"visible\":"+visible+",\"lablelvisible\":"+labelvisible+"}";
    url = "MapController.ashx?Command=MyLayerControl&Ran=" + Math.random();
    var mapImage = document.getElementById("MapControl1_Image");
    if (mapImage.mapAlias)
    url +=  "&MapAlias=" + mapImage.mapAlias;
    url += "&Width=" + mapImage.width ;
    url += "&Height=" + mapImage.height;
    url += "&ExportFormat=" + mapImage.exportFormat ;
    $.ajax({
          type:"post",
          url:url,
          data:jsonstr,
          success:function(){
              mapImage.src=url;
          }
      });
}
服务端代码:
复制内容到剪贴板
代码:

''' <summary>
''' 自定义图层控制
''' </summary>
''' <remarks></remarks>
<Serializable()> _
Public Class MyLayerControl
    Inherits MapBaseCommand
    Public Sub New()
        Name = "MyLayerControl"
    End Sub
   'Public Overrides Sub Execute()
    '    Dim sm As StateManager = StateManager.GetStateManagerFromSession()
    '    ParseContext()
    '    If Not (sm Is Nothing) Then
    '        PrepareStateManagerParamsDictionary(sm)
    '        sm.RestoreState()
    '    End If
    '    Process()
    'End Sub
    Public Overrides Sub Process()
        Dim insm As Stream = HttpContext.Current.Request.InputStream '获取传入Http内容
        Dim br As BinaryReader = New BinaryReader(insm, System.Text.Encoding.UTF8) '转换流
        Dim by() As Byte = br.ReadBytes(insm.Length)
        Dim jsonstr As String = System.Text.Encoding.UTF8.GetString(by) '转换为string类型
        Dim model As MapControlModel = MapControlModel.GetModelFromSession()
        Dim mainmap As Map = model.GetMapObj(MapAlias)
        Dim j As Script.Serialization.JavaScriptSerializer =
            New Script.Serialization.JavaScriptSerializer()
        Try
            Dim lcs As mylayer = j.Deserialize(Of mylayer)(jsonstr)
            If lcs.visible Then '要求可视
                If Not mainmap.Layers(lcs.name).IsVisible Then '原来不可视
                    mainmap.Layers(lcs.name).Enabled = True '设置为可视
                End If
            Else '要求不可视
                If mainmap.Layers(lcs.name).IsVisible Then '原来可视
                    mainmap.Layers(lcs.name).Enabled = False '设置为不可视
                End If
            End If
        Catch ex As Exception
        Finally
            Dim ms As MemoryStream = model.GetMap(MapAlias, MapWidth, MapHeight, ExportFormat)
            StreamImageToClient(ms)
        End Try
    End Sub
End Class