进行web开发之前首先需要安装IServer以及iClient for JavaScript的开发包。在这两中都具备的前提下进行第一步，如何调用IServer中发布的服务

调用iServer 中发布的服务（具体的发布服务参见我的其他随笔）

一、用任何一个能编写html和js 的编译器，新建一个html页，将新建的html页保存到一个熟悉的位置，再将iclient for js中lib文件夹和theme文件夹复制到刚才新建的html的文件目录中。

二、进行编写代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>墨卡托投影系地图</title>

    <!--引用需要的脚本-->

    <script src="./libs/SuperMap.Include.js"></script>

    <script type="text/javascript">

        //声明变量map、layer、url

        var map, layer,

                url = "http://localhost:8090/iserver/services/map-baidu3/rest/maps/normal";

        //创建地图控件

        function init() {

            map = new SuperMap.Map ("map");

            //创建分块动态REST图层，该图层显示iserver 8C 服务发布的地图,

            //其中"world"为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数

            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url,

                    null, {maxResolution:"auto"});

            layer.events.on({"layerInitialized": addLayer});

        }

        function addLayer() {

            //将Layer图层加载到Map对象上

            map.addLayer(layer);

            //出图，map.setCenter函数显示地图

            map.setCenter(new SuperMap.LonLat(0, 0), 2);

        }

    </script>

</head>

<body onload="init()">

<!--地图显示的div-->

<div id="map" style="position:absolute;left:0px;right:0px;width:800px;height:500px;" >

</div>

</body>

</html>

三、运行截图

IClient for js开发之地图的加载的更多相关文章

  1. Three.js开发指南---创建，加载高级网格和几何体（第八章）

    本章的主要内容: 一, 通过Three.js自带的功能来组合和合并已有的几何体,创建出新的几何体 二, 从外部资源中加载网格和几何体 1 前面的章节中,我们学习到,一个几何体创建的网格,想使用多个材质 ...

  2. seajs实现JavaScript 的 模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  3. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  4. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  5. iOS开发UI篇—懒加载

    iOS开发UI篇—懒加载 1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...

  6. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  7. js和jquery页面初始化加载函数的方法及先后顺序

    运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...

  8. 常用js，css文件统一加载方法，并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  9. Android开发中如何解决加载大图片时内存溢出的问题

    Android开发中如何解决加载大图片时内存溢出的问题    在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...

随机推荐

  1. 一步一步教你安装openstack

    openstack,安装的门槛比较高,而且相当麻烦,很多的安装文档作者省了不少安装步骤.这对初学的人带来了很大的麻烦,也许作者轻易节省一步,就会创成后面的安装失败.而且初学者由于对openstack不 ...

  2. MyEclipse使用总结——MyEclipse10安装SVN插件

    一.下载SVN插件subclipse 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 在打开的网 ...

  3. BOM之location对象

    定义 location提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.location是一个很特别的对象,因为它既是window对象的属性,也是document对象的属性.换句话说,wi ...

  4. Androd开发之广告栏设计

    对于做Android开发的工程师对于这个效果的实现一定不陌生,本篇我将带领大家先简单实现这个效果,再为大家介绍一下其中的原理,方便新手学习,老手复习,内容简单易懂,没有基础一样学习,不扯没用的了,下面 ...

  5. SharePoint Server 2013开发之旅（四）：配置工作流开发和测试环境

    工作流这个功能,在SharePoint Server 2013中做了很大的改动.我们可以从微软官方的文档中了解一下大概的情况 http://technet.microsoft.com/zh-cn/li ...

  6. 基于Metronic的Bootstrap开发框架经验总结（4）--Bootstrap图标的提取和利用

    在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表.其中菜 ...

  7. js基础篇——encodeURI 和encodeURIComponent

    转自zccst的又一次掉进encodeURIComponent的坑里了 问题: ajax.get ( url+'?k1'=v1+'&k2'=v2+'&k3'=v3, ... ); 由于 ...

  8. HT for Web的HTML5树组件延迟加载技术实现

    HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...

  9. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  10. 前端工程化开发之yeoman、bower、grunt

    上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...