本章主要讲解代码包中提供的几个范例,以及如何修改范例。在工程文件目录中的assets\www\...下有几个html文件,这便是范例代码。
假设我们现在有一个简单的浏览器端地图范例(如下),只需要修改几行代码,便可以让该范例在安卓移动设备上运行起来。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>SuperMap iClient for JavaScript</title>
<style>
#map{
border:0px solid;
}
</style>
<script src="libs/SuperMap.Include.js"></script>
<script type="text/javascript">
var map, layer;
function init() {
map = new SuperMap.Map("map",{controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
]
});
layer = new SuperMap.Layer.CloudLayer();
map.addLayer(layer);
map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);
}
</script>
</head>
<body onload="init()">
<div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>
</body>
</html>
1.引入phonegap相关代码:<script type="text/javascript" src="js/cordova-2.7.0.js"></script>
2.修改初始化方式:删除onload="init()",加上document.addEventListener("deviceready",init,false);
3.设置运行方式为app应用:SuperMap.Util.setApp(true);
修改后的代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>SuperMap iClient for JavaScript</title>
<style>
#map{
border:0px solid;
}
</style>
<script type="text/javascript" src="js/cordova-2.7.0.js"></script><!--引入phonegap相关代码-->
<script src="libs/SuperMap.Include.js"></script>
<script type="text/javascript">
var map, layer;
function init() {
SuperMap.Util.setApp(true);//设置为app应用
map = new SuperMap.Map("map",{controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
]
});
layer = new SuperMap.Layer.CloudLayer();
map.addLayer(layer);
map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);
}
document.addEventListener("deviceready",init,false);//绑定初始化事件
</script>
</head>
<body>
<div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>
</body>
</html>
在生成的工程目录中,默认运行的便是该范例,见assets\www\helloword.html
JavaScript移动端产品支持iServer生成的mbtiles格式的离线缓存,关于mbtiles离线缓存,请见iserver帮助文档
下面我来讲解如何使用离线缓存:
1.代码包中有一个已经生成好的mbtiles文件(resource\Android\data\China.mbtiles),将该文件拷贝到移动设备sdcard的SuperMap文件夹中(部分设备的SuperMap文件夹可能会出现在内部存储中)。
2.创建一个TiledDynamicRESTLayer,第一个参数为mbtiles文件的文件名(去掉后缀,这里我们用China),第四个参数中,需要设置storageType为db:
layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", "", {}, {"storageType":"db"});
注意:这里不需要再绑定TiledDynamicRESTLayer的layerInitialized事件了。
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>SuperMap iClient for JavaScript</title>
<style>
#map{
border:0px solid;
}
</style>
<script type="text/javascript" src="js/cordova-2.7.0.js"></script>
<script src="libs/SuperMap.Include.js"></script>
<script type="text/javascript">
var map, layer;
function init() {
SuperMap.Util.setApp(true);
map = new SuperMap.Map("map",{controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
]
});
layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", "", {}, {"storageType":"db"}); //使用mbtiles
map.addLayer(layer);
map.setCenter(new SuperMap.LonLat(0, 0), 1);
}
document.addEventListener("deviceready",init,false);
</script>
</head>
<body>
<div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>
</body>
</html>
该范例的示例代码见assets\www\mbtiles.html
你可以修改工程文件目录中的res\xml\config.xml文件,将工程运行的页面改为mbtiles.html:
打开config.xml文件,将其中的<content src="helloword.html" />改为<content src="mbtiles.html" />,然后运行。
想利用iClient JavaScript产品实现定位也非常简单,产品中已经提供了定位控件,您只需要调用该控件即可实现定位。
以SuperMap云服务为例,步骤如下:
1.引入定位控件:
<script src="js/LocationControl.js"></script>
3.创建定位定位成功回调方法:
// 获取位置信息成功时调用的回调函数
function onSuccess(position) {
transCoordinate(position.lon,position.lat,
function(position){
var lat = position.lat;
var lon = position.lon;
markerLayer.clearMarkers();
var size = new SuperMap.Size(44, 33);
var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
var icon = new SuperMap.Icon("./img/mark.png", size, offset);
markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(lon, lat), icon));
map.setCenter(new SuperMap.LonLat(lon, lat));
},
function(){
alert("坐标转换失败!");
}
);
}
4.创建坐标转换方法:
//云服务转换坐标
function transCoordinate(lon,lat,onSuccess,onError){
var urlCoordinate="http://services.supermapcloud.com/iserver/cloudhandler";
var lon_Cloud = lon;
var lat_Cloud = lat;
var param = "{\"x\":" + lon_Cloud + ",\"y\":" + lat_Cloud + "}";
var data = {"servicename":"coordinateService","methodname":"convertGPS2SM","parameter":param};
jQuery.ajax({
"dataType":"jsonp",
"jsonp":"jsonp",
"type":"GET",
"url":urlCoordinate,
"data":data,
"success":function(onSuccess){
return function(cb){
var position = {
"lon":cb.result[0].x,
"lat":cb.result[0].y
};
onSuccess(position);
}
}(onSuccess),
"error":onError
});
}
5.创建定位失败回调方法:
function onError(msg) {
alert(msg);
}
6.创建定位控件实例,并调用其定位方法:
var locationCtrl = new SuperMap.LocationControl(); locationCtrl.local(onSuccess,onError,5000);
完整示例代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>SuperMap iClient for JavaScript</title>
<style>
#map{
border:0px solid;
}
</style>
<script type="text/javascript" src="js/cordova-2.7.0.js"></script>
<script src="js/jquery.js"></script>
<script src="libs/SuperMap.Include.js"></script>
<script src="js/LocationControl.js"></script>
<script type="text/javascript">
var map, layer,markerLayer,locationCtrl;
function init() {
SuperMap.Util.setApp(true);
map = new SuperMap.Map("map",{controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
]
});
layer = new SuperMap.Layer.CloudLayer();
markerLayer = new SuperMap.Layer.Markers("Markers");
map.addLayers([layer,markerLayer]);
map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);
}
function locating(){
if(!locationCtrl){
locationCtrl = new SuperMap.LocationControl();
}
locationCtrl.local(onSuccess,onError,5000);
}
// 获取位置信息成功时调用的回调函数
function onSuccess(position) {
transCoordinate(position.lon,position.lat,
function(position){
var lat = position.lat;
var lon = position.lon;
markerLayer.clearMarkers();
var size = new SuperMap.Size(44, 33);
var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
var icon = new SuperMap.Icon("./img/mark.png", size, offset);
markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(lon, lat), icon));
map.setCenter(new SuperMap.LonLat(lon, lat));
},
function(){
alert("坐标转换失败!");
}
);
}
// onError回调函数
function onError(msg) {
alert(msg);
}
//云服务转换坐标
function transCoordinate(lon,lat,onSuccess,onError){
var urlCoordinate="http://services.supermapcloud.com/iserver/cloudhandler";
var lon_Cloud = lon;
var lat_Cloud = lat;
var param = "{\"x\":" + lon_Cloud + ",\"y\":" + lat_Cloud + "}";
var data = {"servicename":"coordinateService","methodname":"convertGPS2SM","parameter":param};
jQuery.ajax({
"dataType":"jsonp",
"jsonp":"jsonp",
"type":"GET",
"url":urlCoordinate,
"data":data,
"success":function(onSuccess){
return function(cb){
var position = {
"lon":cb.result[0].x,
"lat":cb.result[0].y
};
onSuccess(position);
}
}(onSuccess),
"error":onError
});
}
document.addEventListener("deviceready",init,false);
</script>
</head>
<body>
<div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>
<input id="button" style="position:absolute;right:5px;top:5px;z-index:999" value="定位" type="button" ontouchend="locating()"></input>
</body>
</html>
该范例的示例代码见assets\www\location.html
你可以修改工程文件目录中的res\xml\config.xml文件,将工程运行的页面改为location.html:
打开config.xml文件,将其中的<content src="helloword.html" />改为<content src="location.html" />,然后运行。
你可以使用iClient JavaScript产品轻松实现截屏功能,产品中提供了截屏控件
具体步骤如下:
1.引入截屏控件代码:
<script src="js/ShotScreenControl.js"></script>
2.创建截屏控件实例,并调用其截屏方法:
var shotScreenCtl = new SuperMap.ShotScreenControl(); shotScreenCtl.shot();
完整范例代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>SuperMap iClient for JavaScript</title>
<style>
#map{
border:0px solid;
}
</style>
<script type="text/javascript" src="js/cordova-2.7.0.js"></script>
<script src="libs/SuperMap.Include.js"></script>
<script src="js/ShotScreenControl.js"></script>
<script type="text/javascript">
var map, layer,markerLayer,shotScreenCtl;
function init() {
SuperMap.Util.setApp(true);
map = new SuperMap.Map("map",{controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
]
});
layer = new SuperMap.Layer.CloudLayer();
map.addLayers([layer]);
map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);
}
function shot(){
if(!shotScreenCtl){
shotScreenCtl = new SuperMap.ShotScreenControl();
}
shotScreenCtl.shot();
}
document.addEventListener("deviceready",init,false);
</script>
</head>
<body>
<div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>
<input id="button" style="position:absolute;right:5px;top:5px;z-index:999" value="截屏" type="button" ontouchend="shot()"></input>
</body>
</html>
该范例的示例代码见assets\www\shotscreen.html
你可以修改工程文件目录中的res\xml\config.xml文件,将工程运行的页面改为shotscreen.html:
打开config.xml文件,将其中的<content src="helloword.html" />改为<content src="shotscreen.html" />,然后运行。