影像下载

矢量下载

高程下载

矢量导入

影像导出

实用功能

地图下载

导入导出

数据同步

水经微图CAD

团队测绘

三维地球

离线地图

野外测绘

GPS轨迹

数据同步

扫码下载

实用功能

离线地图

地图发布

地图加载

二维系统

三维离线地球

水经注二维API

水经注三维API

离线 API 源码

开源 API 调用

当前位置：>GIS服务>GIS技术

离线卫星地图加载服务中间件调用示例For Google API

2016/7/21 15:10:16 0人评论 3493 次

1.说明

水经离线卫星地图加载服务中间件可利用离线地图的.dat文件在本地建立服务端，并生成影像、标签、高程等服务地址，可以在Google API中直接调用该服务地址，并将请求到的服务资源显示在前端，当请求的地图资源不存在可通过网络直接下载缺失的地图，并储存在.dat文件中。
百度网盘下载：http://pan.baidu.com/s/1bnjZDZx

2.实现

2.1准备GoogleMapAPIV3

下载GoogleMapAPIV3.rar。

在其目录下新建一个html文件“RiverMapServerSample For Google API.html”，如下图。

利用记事本打开“RiverMapServerSample For Google API.html”并进行编辑，具体内容如下。

<!DOCTYPE html>

<html>

<head>

<title>RiverMapServerSample For Google API</title>

function tlen(len, mystr){

mystr = String(mystr);

var num = len - mystr.length;

for (var i = 0; i <= num; i++)

{

mystr = "0" + mystr;

}

return mystr;

};

function CoordMapType(tileSize) {

this.tileSize = tileSize;

}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {

var div = ownerDocument.createElement('DIV');

var ymax = 1 << zoom;

var y = coord.y;

y = tlen(5,y);

var x = tlen(5,coord.x);

zoom = tlen(1,zoom+1);

div.innerHTML = y + "," + x + "," + zoom;

div.style.width = this.tileSize.width + 'px';

div.style.height = this.tileSize.height + 'px';

div.style.fontSize = '10';

div.style.borderStyle = 'solid';

div.style.borderWidth = '1px';

div.style.borderColor = '#AAAAAA';

return div;

};

function LocalMapType() {}

LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);

LocalMapType.prototype.maxZoom = 20;

LocalMapType.prototype.minZoom = 0;

LocalMapType.prototype.name = "本地";

LocalMapType.prototype.alt = "显示本地地图";

LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {

var img = ownerDocument.createElement("img");

img.style.width = this.tileSize.width + "px";

img.style.height = this.tileSize.height + "px";

var ymax = 1 << zoom;

var y = coord.y;

y = tlen(5,y);

var x = tlen(5,coord.x);

zoom = tlen(1,zoom+1);

var strURL = "http://127.0.0.1:1002/getDefinedImage?" + "x=" + x + "&y=" + y + "&z=" + zoom;

img.src = strURL;

return img;

};

var localMapType = new LocalMapType();

function initialize() {

var myLatlng = new google.maps.LatLng(30, 103);

var myOptions = {

center: myLatlng,

zoom: 4,

streetViewControl: false,

mapTypeControlOptions: {

mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP]

}

};

var map = new google.maps.Map(document.getElementById("map_canvas"),

myOptions);

map.mapTypes.set('local', localMapType);

map.setMapTypeId('local');

map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));

}

</script>

</head>

</body>

</html>

其中【strURL=”http://localhost:1002/getDefinedImage?”】表示请求的是影像、地图、地形、标签、影像+标签、影像+地图、影像+地形或Dem。具体根据RiverMapServer的启动配置参数来确定。

例如：RiverMapServer.exe “1002” “Image_Label” “c:\test\tile” “c:\test\label”表示此应用输出合并底图（可以为影像、地图、地形任意一种）和标签两个地图瓦片。RiverMapServer.exe “1002” “Image” “c:\test\tile” 表示此应用输出地图底图（可以为影像、地图、地形任意一种）

2.2启动RiverMapServer

启动RiverMapServer有两种方式都可以正常运行。

2.2.1直接运行RiverMapServer

通过config.ini文件配置参数，如下图。

PORT=1002 表示端口为1002；GetFileType=Image_Label表示此应用输出合并底图（可以为影像、地图、地形任意一种）和标签两个地图瓦片，后面必须跟两个瓦片工程文件目录；TileDir=..\dat\tile表示影像数据路径；LabelDir=..\dat\label 表示标签数据路径；DemDir=..\dat\dem 表示高程数据路径。