对比三种GoogleMap图标操作处理，谈如何构造快速响应的GoogleMap图标叠加操作

很多情况下，我们可以基于GoogleMap做GIS方面的应用，只要涉及到地图的相关操作，基本上都可以派生出很多应用，如可以用在配电线路、水管布线、地标附加等操作。本文主要介绍基于图标叠加的应用，通过三种不同的GoogleMap操作，来分析各种操作的优劣，寻找出最符合实际、最高效简洁的操作方式，指导我们今后对GoogleMap的应用操作。

方式一：使用Javascript和Html混合方式处理。

在页面前台给Javascript赋相关的变量，在后台把相关属性内容（包含InfoWindows显示的内容，图标坐标等）赋值给脚本对象，由脚本分拆对象数据，然后添加图标。如下面代码所示：

代码

最终HTML生成会有很多字符的变量，如下面所示：

代码

这样方式处理，虽然较容易理解，不过由于是代码混合，操作及扩展还是相对比较麻烦，而且代码量也很多，多数是Javascript脚本，操作控制也不是很方便。 Asp.net后台代码还需要给这些变量赋值，每个项目之间通过|分号来分隔，这样对于少量的图标操作，也倒是响应很快。但是对于超过几十个乃至上百个，图标操作处理就变得非常缓慢，因此这种方式处理，是极为不好的。

方式二：使用GGeoXml的Javascript对象。

通过动态的URL对象，根据不同的参数，返回不同的XML对象流给Javascript脚本处理，这种方式简洁明了，而且速度也非常快，属于不错的处理方式。主要的代码如下所示：

代码

这样把主动权交给GetParkXML.aspx来组装数据了，这个页面主要负责构造相应的KML文件（就是一个XML文件）给Javascript对象，这个页面的代码大致如下所示：

代码

public partial class GetParkKML : System.Web.UI.Page
 {
 protected void Page_Load(object sender, EventArgs e)
 {
 string area = Request.QueryString["area"];
 string areaCountry = area;//行政区
 DataTable table = BLLFactory<Enterprise>.Instance.FindByStreetParkAreaName("", areaCountry);

 StringBuilder str = new StringBuilder();
 str.Append("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n");
 str.Append("<kml xmlns=\"http://www.opengis.net/kml/2.2\">\r\n");
 str.Append("<Document>\r\n\r\n");
 //必须用公网地址:http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png
 str.Append("\t<Style id=\"myStationStyles\"><IconStyle><scale>1</scale><Icon><href>http://219.136.*.*/Themes/Default/parking.png</href></Icon></IconStyle></Style>");

 StringBuilder sbTitle = new StringBuilder();
 foreach (DataRow row in table.Rows)
 {
 str.Append("<Placemark>\r\n");
 str.Append(string.Format("\t<name><![CDATA[{0}]]></name>\r\n", GetParkName(row)));
 str.Append(string.Format("\t<description><![CDATA[{0}]]></description>\r\n", GetParkDescription(row)));
 str.Append("\t<styleUrl>#myStationStyles</styleUrl>\r\n");
 string longLat = string.Format("{0},{1},0", row["LONGITUDE"], row["LATITUDE"]);
 str.Append(string.Format("\t<Point><coordinates>{0}</coordinates></Point>\r\n", longLat));
 str.Append("</Placemark>\r\n");
 }
 str.Append("</Document>\r\n");
 str.Append("</kml>");

 Response.Clear();
 Response.ContentType = "application/vnd.google-earth.kml+xml";
 Response.Write(str.ToString());
 Response.Flush();
 Response.End();
 }
.............

这种方式是比较通用的处理方式，很多Googmap使用者应该都是基于此类型操作较多，详细还可以参考一篇文章介绍《基于google map api开发web和google earth的KML地标插件》，作者写的思路比较清晰，值得参考。

该方式处理的问题，就是图标数量比较多的时候（如500个以上），速度比较慢，甚至有时候就不显示图标了，不知何故，不过对于小于这个数量级的，一般还是不错的。

3、方式三：基于方式二做进一步的改进。

由于方式二，还是每次都会请求生成图标的KML文件，生成的过程如果涉及操作逻辑比较复杂，数量比较多的时候，就会出现比较缓慢，或者甚至显示不了图标的情况。那么我们如果认为图标内容在一段的时间内不会发生太大的变化的话，其实可以预先生成好XML文件，然后直接给Javascript前台操作显示，这样处理肯定快很多，而且也可以避免方式二有时候出不来图标的情况。

处理操作，其实很简单，就是把方式二的代码

geoXml = new GGeoXml("http://219.136.**.**/Pages/Expert/GetParkKML.aspx?area=<%=Server.UrlEncode(Request.QueryString["area"])%>");

修改为下面代码即可。

geoXml = new GGeoXml("http://219.136.*.*/Pages/Expert/<%=fileName%>.kml");

然后在页面后台中，我们根据不同的条件，指定不同的XML文件给它就可以了。

public string centers = "23.140330390943365,113.32088470458984|";
 public string fileName = "";
 public string googleMapKey = "";
 protected void Page_Load(object sender, EventArgs e)
 {
 googleMapKey = Helper.GetGoogleMapKey(Request.Url.AbsoluteUri);

 string area = Request.QueryString["area"];
 string areaCountry = area;//行政区
 if (string.IsNullOrEmpty(area))
 {
 centers = "23.136216352329377, 113.32762241363525";
 return;
 }

 string centerLatlng = BLLFactory<Enterprise>.Instance.FindAreaCenterLatLng(area);
 if (!string.IsNullOrEmpty(centerLatlng))
 {
 centers = centerLatlng;
 }

 fileName = area.GetHashCode().ToString();//不能用中文，故出此策
 string filePath = Server.MapPath(".") + "/" + fileName + ".kml";
 if (!File.Exists(filePath))
 {
 CreateMapData();
 }
 else
 {
 //可指定更新的日期自动对比
 DateTime dtLastTime = GetLastWriteTime(filePath);
 if (DateTime.Now > dtLastTime.AddMonths(1))
 {
 CreateMapData();
 }
 }
 }

 private void CreateMapData()
 {
 string area = Request.QueryString["area"];
 if (!string.IsNullOrEmpty(area))
 {
 string httpUrl = Request.Url.AbsoluteUri;
 int eindx = httpUrl.LastIndexOf('/');
 string dataurl = httpUrl.Substring(0, eindx) + string.Format("/GetParkKML.aspx?area={0}", Server.UrlEncode(area));
 WebClient client = new WebClient();
 client.Encoding = Encoding.UTF8;
 string content = client.DownloadString(dataurl);

 fileName = area.GetHashCode().ToString();//不能用中文，故出此策
 string filePath = Server.MapPath(".") + "/" + fileName + ".kml";
 File.WriteAllText(filePath, content, Encoding.UTF8);
 }
 }

 /// <summary>
 /// 取文件最后存储时间
 /// </summary>
 /// <param name="fullpath"></param>
 /// <returns></returns>
 public static DateTime GetLastWriteTime(string fullpath)
 {
 FileInfo fi = new FileInfo(fullpath);
 return fi.LastWriteTime;
 }
 }

最后，还应该提供一个按钮给用户，实现数据的实时更新，而不是每次由系统根据文件的情况更新，这样可以给用户更好的选择，保证数据的及时性。

   protected void btnRefreshData_Click(object sender, ImageClickEventArgs e)
        {
            string area = Request.QueryString["area"];
            CreateMapData();

            string url = string.Format("ParkGisSearch.aspx?area={0}", Server.UrlEncode(area));
            Response.Redirect(url);
        }

实际效果，这样在操作近千个图标的时候，速度非常快，比前面两种都快得多，而且也不会出现有时候方式二呈现不了图标的情况，基本上解决效果还是比较满意的。。实际项目的效果截图如下所示。

posted on 2010-12-17 12:45 伍华聪阅读(5563) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

wuhuacong(伍华聪)的专栏

对比三种GoogleMap图标操作处理，谈如何构造快速响应的GoogleMap图标叠加操作

导航

公告