今天我要教给大家的内容是:如何通过代码调用iServer发布的地图。所用到的开发工具有两种:一种是Visual Studio 2015,这个是用来写代码的;还有一种是iServer发布地图工具。要想通过代码调用地图的时候,必须要启动iServer软件,不然在浏览器里面是看不到你要调用的地图。
首先,我们打开Visual Studio 2015,创建一个MVC。如果不懂得怎么创建MVC的话,请看一下我以前写的文章里面有详情的介绍了MVC。创建完之后,然后在项目里面创建一个视图,用来放我们要实现发布地图的代码。创建视图成功之后,我们要引用一些js插件,
这些插件从那里来呢?我们下载完iServer软件之后,里面有个文件夹叫iClient,打开这个文件,找到forJavaScript文件夹,里面有libs文件夹和theme文件夹,把这两个文件夹复制到项目里面,如果你们用的是DW或者其它页面软件,把这两个文件复制到项目相邻的位置。我们把这两个文件复制到项目里面之后,就可以敲代码了。
下面是一个简单的页面布局代码:
<body onload="onPageLoad()">
<div id="map" style="width:1024px;height:700px;top:10px;"></div>
<input type="button" value="放大" onclick="zoomIn()"/>
<input type="button" value="缩小" onclick="zoomOut()" />
</body>
我在body里面写了一个onload事件,也就是页面加载事件。然后div里面我设置了地图的宽度和高度,下面两个按钮是调用地图的放大和缩小的功能。页面布局完成之后,我们就写js来调用地图。我们要用到libs文件夹里面的SuperMap.Include.js插件,引入到我们项目里面,我们创建自己的js文件。
代码如下:
var map, layer;
var layerURL = "http://localhost:8090/iserver/services/map-world/rest/maps/World";
//*页面加载事件*//
function onPageLoad() {
map = new SuperMap.Map("map");//获取页面的map
layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", layerURL, { transparent: true });//获取图层的名称和路径
layer.events.on({ "layerInitialized": addLayer });//调用获取地图的中心点位置
}
//*获取地图的中心点位置*//
function addLayer() {
map.addLayer(layer);
map.setCenter(new SuperMap.LonLat(0, 0), 0);
}
//*地图放大的功能*//
function zoomIn() {
map.zoomIn();
}
//*地图缩小的功能*//
function zoomOut() {
map.zoomOut();
}
如下图所示:
上面的代码可以实现通过代码调用地图的方法,可能你们不知道地图的链接从那里来,打开我们的iServer的软件,跳转到http://localhost:8090/iserver/链接,里面有个服务列表,点击服务列表找到你们需要发布地图的rest文件,如下图(这是我上面要发布地图的链接):
然后点进去,下一步,找到你们要发布的地图,然后把上面的链接复制过来就可以了。有可能你们的链接是中文的,复制过去会变成数字,我们就要把数字换回中文的链接。
学习总结:通过这次学习我学会了如何通过代码去调用iServer发布的地图,在这里我希望大家能明白如何的操作。如果有更好的建议和方法,我也希望大家可以一起学习,共同进步。