简单方法实现googlemapapi叠加arcgisserver瓦片

来源：互联网发布：apache poi教程编辑：程序博客网时间：2024/05/29 13:08

通过自定义地图类型和arcgisserver rest接口实现叠加自己定制切图瓦片

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false"></script>
<script>

function LocalMapType() {}

LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalMapType.prototype.maxZoom = 10;
LocalMapType.prototype.minZoom = 1;
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 strURL = "http://192.168.1.101:8399/arcgis/rest/services/china/MapServer/tile/" + zoom + "/" + coord.y + "/" + coord.x ;

img.src = strURL;
return img;
};

var localMapType = new LocalMapType();

function initialize() {
var myLatlng = new google.maps.LatLng(34.611, 108.935);
var myOptions = {
center: myLatlng,
zoom: 6,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: ["本地", google.maps.MapTypeId.ROADMAP]
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
map.mapTypes.set('本地', localMapType);
map.setMapTypeId('本地');
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px;"></div>
</body>
</html>