简介
iMobile for Javascript 是一款面向移动设备的 JavaScript 交互开发库，提供了大量的地图功能和创建交互式地图应用所需的 API，非常适合前端开发人员使用，由 SuperMap 公司开发并维护。
安装
使用 npm 安装
npm install imobile_for_javascript
使用 script 标签引入
可以从iMobile官方网站下载库，如下示例:
<script src="/path/to/iMobile_for_JavaScript.min.js"></script>
快速上手
初始化地图
在页面中创建一个 div，然后在 js 文件中引入初始化地图时需要的设置，调用 iMap 方法初始化地图。
<div id="map"></div>
import iMobile from 'imobile_for_javascript';
var map = new iMobile.Map("map");
map.open();添加图层
图层是地图数据的表示，可以是地图、影像、矢量等类型。
var map = new iMobile.Map("map");
var layerUrl = "http://localhost:8090/iserver/services/map-china400/wmts100";
var tileLayer = new iMobile.TileSuperMapRestLayer(layerUrl, { transparent: true }, "瓦片图层");
map.addLayer(tileLayer);添加控件
iMobile 提供了很多控件，例如：Zoombar、Compass、ScaleLine、OverviewMap、Toolbar、PopupMenu 等。
var map = new iMobile.Map("map");
var toolbar = new iMobile.Toolbar({ position: "topright" });
var cursor = new iMobile.ToolbarItem({ dom: $("<div style='background: url(http://localhost:8090/libs/leaflet/0.7.7/images/cursors/cursor.png);'></div>")[0], context: map, clicked: function () { map.setDefaultCursor("pointer"); } });
toolbar.addItem(cursor);
map.addControl(toolbar);添加事件
添加事件可以响应地图上的交互事件，例如：单击、双击、平移等不同的交互事件。
var map = new iMobile.Map("map");
map.setCenter(new iMobile.LonLat(108.90, 34.27), 5);
map.addEventListener("click", function (e) {
var lonLat = this.getLonLatFromPixel(e.x, e.y);
alert(lonLat.lon + ' ' + lonLat.lat);
});API 文档
iMobile for Javascript 提供了丰富的 API 集合，可以详细的查看文档 API 文档。
示例代码
以下示例代码展示了如何使用 iMobile for Javascript 快速搭建一个地图应用。
-- -------------------- ---- -------
------ ------- ---- -------------------------
--- --- - --- -------------------
----------------- ---------------------- ------- ---
-----------------
---------- -
---------- -----------
--------- --------------------------------------------------------------------------
-------- -----
---------- ----------
----------------- ------
----------- --
----------- ------------
----------- -----
--
---------------------- ----
---
--- ------- - --- ----------------- --------- ---------- ---
--- ------ - --- ---------------------
---- ------- ------------------ -------------------------------------------------------------------------------------- -------- ---- -------- -------- -- -
--------------------------------
-
---
------------------------
------------------------
--- ----- - --- ---------------
------- ----------------
------------ ----- ----------------------------------- ------- --- -------------------
---------- ----
---
-------------- - -----
--------------------
----------------------------- -------- --- -
------------ - --------------------------- -----
-------------------------- ----------------------------------- ------- --- --------------------
-----------------------
-------------
---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bbc81e8991b448d9539