我尝试使用地图服务器来创建和导出图像,以及具有一些放大功能。但是,我不确定如何通过HTML / javascripting实现这一点。这就是我到目前为止所做的:
<div class="center">
<button type="button" id="In" onclick="zoomIn()">Zoom in</button>
<button type="button" id="Out" onclick="zoomOut">Zoom Out</button>
<button type="button" id="Full" onclick="fullExtent">FullExtent</button>
</div>
<script>
var sURL= "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer/export?bbox=";
var xmin= -180;
var ymin=-90;
var xmax=180;
var ymax=90;
var bbox=xmin+","+ymin+","+xmax+","+ymax;
function makeImage(URL){
var img = '<div id="pic"><img src="'+URL+'" width="800" height="400" /><p></p></div>';
return img;
}
function zoomIn(){
xmin= xmin/2;
ymin= ymin/2;
xmax= xmax/2;
ymax= ymax/2
var URL= sURL+bbox;
return URL;
makeImage(URL);
}
function zoomOut(){
xmin= xmin/2;
ymin=ymin/2;
xmax=xmax/2;
ymax=ymax/2
var URL= sURL+bbox;
return URL;
makeImage(URL);
}
function fullExtent(){
xmin= -180;
ymin=-90;
xmax=180;
ymax=90;
var URL= sURL+bbox;
return URL;
makeImage(URL);
}
</script>
答案 0 :(得分:0)
我会像这样编辑你的脚本(http://jsfiddle.net/fsh6p77L/):
<div class="center">
<button type="button" id="In" onclick="zoomIn()">Zoom in</button>
<button type="button" id="Out" onclick="zoomOut()">Zoom Out</button>
<button type="button" id="Full" onclick="fullExtent()">FullExtent</button>
<div id="pic"></div>
</div>
<script>
var sURL= "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer/export?bbox=";
var xmin= -180;
var ymin=-90;
var xmax=180;
var ymax=90;
var bbox=xmin+","+ymin+","+xmax+","+ymax;
function makeImage(URL){
var img = '<img src="'+URL+'" width="800" height="400" /><p></p>';
document.getElementById("pic").innerHTML = img;
}
function zoomIn(){
xmin= xmin/2;
ymin= ymin/2;
xmax= xmax/2;
ymax= ymax/2
var URL= sURL+bbox;
makeImage(URL);
}
function zoomOut(){
xmin= xmin/2;
ymin=ymin/2;
xmax=xmax/2;
ymax=ymax/2
var URL= sURL+bbox;
makeImage(URL);
}
function fullExtent(){
xmin= -180;
ymin=-90;
xmax=180;
ymax=90;
var URL= sURL+bbox;
makeImage(URL);
}
</script>