基于Google Map Api开发web和Google Earth的KML地标插件

最新推荐文章于 2018-12-04 13:59:43 发布

ishuang

最新推荐文章于 2018-12-04 13:59:43 发布

阅读量496

点赞数

分类专栏： Google Earth&Maps API 文章标签： Google Web JavaScript XML IIS ViewUI

本文链接：https://blog.csdn.net/ishuang/article/details/83359338

版权

Google Earth&Maps API 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

引用

http://tech.ddvip.com/2008-12/1230621633103606.html

Google Map API是基于JavaScript+XML等技术实现的，另一款产品Google Earth API是基于一个activeX插件实现的，可以达到桌面版的Google Earth类似的效果（视角，街景等），由于需要安装浏览器插件等因素，并未得到广泛使用，本文所涉及的技术为Google Map API。关于Google Map API key的说明：为了防止该接口被滥用，你的网站必须申请一个KEY才能使用Google Map API，这个KEY只是一个你的域名对应的值，按照官方的说法，过一段时间再来用同一个域名申请，也是会得到同样的KEY，同样申请后闲置也不会有任何影响。Google的开发小组只要求在你的网站使用这个API流量过于巨大时“联系”一下他们。在本地调试时（http://localhost:8080/demo.aspx）则不受KEY的影响可以正常使用。

------------------------------------------------------------------------------------------------------------

提纲(对应图中的数字)：

1. 如何实现这样的功能（KML）

2. 如何编写调用文件（ASPX）

3. 应返回的数据文件（XML）

4. 如何在WEB上调用（HTML）

5. 在GE中使用的效果

----------------------------------------------------------------------------------------------------------------------------------

正文：

1. 如何实现这样的功能（KML）

　　上面这张图清楚的显示了它的工作流程示意，这里的KML文件并不是广义的含有坐标数据的那种，而是一个中间文件，可以被Google Map API调用，也可以直接被GE使用，它的内容大致如下：

<?XML version="1.0" encoding="UTF-8"?>
<kml XMLns="http://earth.google.com/kml/2.0">
<NetworkLink>
　<name>OMGSOFT</name>
　<open>1</open>
　<description>火车运行图 - 鸥盟软件 - www.omgsoft.com.cn</description>
　<Url>
　　<href>http://huoche.omgsoft.com.cn/ge/test.aspx</href>
　　<viewRefreshMode>onStop</viewRefreshMode>
　　<viewRefreshTime>2</viewRefreshTime>
　</Url>
</NetworkLink>
</kml>

需要说明的就是<href>节，它指向一个数据源，也就是我们的应用接口，类似于webservice，当这个kml文件被调用时，地图的四个角的坐标会以参数形式向这个地址提交。以上面的代码为例，GE或web会将在地图每次停止操作2秒后以GET方式提交：http://huoche.omgsoft.com.cn/ge/test.aspx?BBOX=81.9140625,21.69826549685252,130.25390625,49.66762782262192，默认的提交格式是西、南、东、北：BBOX=[bboxWest],[bboxSouth],[bboxEast],[bboxNorth]。当然也可以传送视角和海拔等参数（主要用于GE），具体参考文章末尾列出的相关文档。经测试好像不支持相对或本地路径，如<href>/ge/test.aspx</href>或<href>http:localhost:8080/ge/test.aspx</href>等均不能正常工作，只好每次上传到空间中进行调试。

2。如何编写调用文件（ASPX）

　　下面说说test.aspx这个文件，它将返回一个XML格式的数据，所以前端应清除<html>等标签（更建议使用ashx来处理），数据采集及入库部分本文暂不论述：

text.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="huoche.ge.test" %>

test.aspx.cs（省略了一些不太相关的代码）:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;
using System.Configuration;
namespace huoche.ge
{
　　public partial class test : System.Web.UI.Page
　　{
　　　　protected void Page_Load(object sender, EventArgs e)
　　　　{　
　　　　　　string bbox = (string)Request.Params["BBOX"];
　　　　　　string[] _ary = bbox.Split(',');
　　　　　　var west = Convert.ToDouble(_ary[0]);
　　　　　　var south = Convert.ToDouble(_ary[1]);
　　　　　　var east = Convert.ToDouble(_ary[2]);
　　　　　　var north = Convert.ToDouble(_ary[3]);
　　　　　　// 可以在这里添加一些过滤代码，比如范围太大或太小，或不在你所提供服务的区域内
　　　　　　//---------------
　　　　　　string ConnectionString = ConfigurationManager.ConnectionStrings["trainConnectionString"].ToString();
　　　　　　TrainDataClassesDataContext ctx = new TrainDataClassesDataContext(ConnectionString);
　　　　　　//从数据库中检索符合结果的数据
　　　　　　var StationMarkerlist = (from c in ctx.StationMain
　　　　　　　　　　　　　　　　　　 where d.Latitude < north && d.Latitude > south　&& d.Longitude < east && d.Longitude > west
　　　　　　　　　　　　　　　　　　 select c).Take(20);
　　　　　　DataTable dt = new DataTable("KMLData");
　　　　　　dt.Columns.Add("title");
　　　　　　dt.Columns.Add("description");
　　　　　　dt.Columns.Add("coordinates");
　　　　　　dt.Columns.Add("style");
　　　　　　DataView dv = dt.DefaultView;
　　　　　　StringBuilder str = new StringBuilder();
　　　　　　str.Append("<?XML version="1.0" encoding="UTF-8" ?>rn");　
　　　　　　str.Append("<kml XMLns="http://earth.google.com/kml/2.2">rn");　　　
　　　　　　str.Append("<Document>rnrn");
　　　　　　str.Append("t<Style id="myStationStyles"><IconStyle><scale>1</scale><Icon><href>http://huoche.omgsoft.com.cn/images/rail.png</href></Icon></IconStyle></Style>");
　　　　　　foreach (var mystation in StationMarkerlist)
　　　　　　{
　　　　　　　　str.Append("<Placemark>rn");
　　　　　　　　str.Append(string.Format("t<name><![CDATA[{0}]]></name>rn", mystation.StationName));
　　　　　　　　str.Append(string.Format("t<description><![CDATA[{0}]]></description>rn", mystation .StationName));
　　　　　　　　str.Append("<styleUrl>#myStationStyles</styleUrl>");
　　　　　　　　str.Append(string.Format("t<Point><coordinates>{0}</coordinates></Point>rn", mystation.Longitude .ToString()+","+mystation.Latitude.ToString ()+",0"));
　　　　　　　　str.Append("</Placemark>rn");
　　　　　　}
　　　　　　str.Append("</Document>rn");
　　　　　　str.Append("</kml>");
　　
　　　ctx.Dispose();　
　　　　　　Response.Clear();
　　　　　　Response.ContentType = "application/vnd.google-earth.kml+XML";
　　　　　　Response.Write(str.ToString());
　　　　　　Response.End();
　　　　}
　　}
}

因为每次用户停止操作后都会提交这个页面并返回数据，所以限制返回的数据个数以节约网络带宽，用户可以深入到某一区域时就可以显示了。当然也可以按重要性或地图级别等来决定哪些显示出来。

3. 应返回的数据文件（XML）

　　访问该页面会返回类似内容(为节约版面，只列出两个地标)，你可以在浏览器中提交http://huoche.omgsoft.com.cn/ge/test.aspx?BBOX=81.9140625,21.69826549685252,130.25390625,49.66762782262192这样的地址来模拟请求，看一下数据是否正确：

<?XML version="1.0" encoding="UTF-8" ?>
<kml XMLns="http://earth.google.com/kml/2.2">
<Document>　
　　<Style id="myStationStyles">
　　　 <IconStyle><scale>1</scale><Icon>　<href>http://huoche.omgsoft.com.cn/images/rail.png</href></Icon> </IconStyle>
　　</Style>　　
<Placemark>
　　<name><![CDATA[口前火车站]]></name>
　　<description><![CDATA[<img src="http://images.cnblogs.com/station.gif" /><a href="http://huoche.omgsoft.com.cn/Station/Show.aspx?s=1162">口前站</a>]]>
　　</description>
　　<styleUrl>#myStationStyles</styleUrl><Point>
　　　　<coordinates>126.495208740234,43.66364961298,0</coordinates>
　　</Point>
</Placemark>
<Placemark>
　　<name><![CDATA[章党火车站]]></name>
　　<description><![CDATA[<img src="http://images.cnblogs.com/station.gif" /><a href="http://huoche.omgsoft.com.cn/Station/Show.aspx?s=1178">章党站</a>]]>
　　</description>
　　<styleUrl>#myStationStyles</styleUrl><Point>
　　　　<coordinates>124.070148468018,41.9063653897096,0</coordinates>
　　</Point>
</Placemark>
</Document>
</kml>

文件中的标签作用可以参考一下文章最后的文档，有些配置节（如scale，图标比例）在web调用时是看不到效果的，和LookAt视角参数一样只能在GE中看到效果。

4. 如何在WEB上调用（HTML）

　　在web上调用，可以使用如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html XMLns=http://www.w3.org/1999/xhtml XMLns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script src=http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA type="text/JavaScript"></script>
<script type="text/JavaScript">
var map;
var geoXML;
function initialize() {
　　if (GBrowserIsCompatible()) {
　　　　geoXML = new GGeoXML(http://huoche.omgsoft.com.cn/ge/omg.kml);　
　　　　map = new GMap2(document.getElementById("map_canvas"));
　　　　map.setCenter(new GLatLng(36.94, 106.08), 4);　　
　　　　map.addControl(new GLargeMapControl());
　　　　map.addOverlay(geoXML);
　　　　}
　　}
</script>
</head>
<body οnlοad="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div>
</div>
</body>
</html>

因为网页是要下载到客户端，这段js代码是在客户端执行的，需要注意的是部分服务器不支持kml文件的下载（如win2003sp2等），解决的方法是：打开IIS，在"Internet信息服务”下面的本地计算机，点击右键，选择“属性”，点击“MIME类型”，弹出对话框，点击“新建”，在“扩展名”后面填写“.kml”，在“MIME类型”后面填写“application/application/vnd.google-earth.kml”，确定后重启IIS即可。效果如下：