今天我要教给大家的内容是:如何通过代码调用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地图

上面的代码可以实现通过代码调用地图的方法,可能你们不知道地图的链接从那里来,打开我们的iServer的软件,跳转到http://localhost:8090/iserver/链接,里面有个服务列表,点击服务列表找到你们需要发布地图的rest文件,如下图(这是我上面要发布地图的链接):

如何通过代码调用iServer地图

然后点进去,下一步,找到你们要发布的地图,然后把上面的链接复制过来就可以了。有可能你们的链接是中文的,复制过去会变成数字,我们就要把数字换回中文的链接。

    学习总结:通过这次学习我学会了如何通过代码去调用iServer发布的地图,在这里我希望大家能明白如何的操作。如果有更好的建议和方法,我也希望大家可以一起学习,共同进步。

相关文章:

  • 2022-01-04
  • 2021-11-16
  • 2022-02-07
  • 2022-01-12
  • 2021-05-03
  • 2021-09-17
  • 2021-07-07
猜你喜欢
  • 2022-12-23
  • 2021-12-06
  • 2022-02-09
  • 2021-06-04
  • 2022-12-23
  • 2022-01-12
  • 2021-10-17
相关资源
相似解决方案