使用Leaflet API在OpenStreetMap上叠加SuperMap的地图

iConnectorLeaflet.js简介

如果您已经使用Leaflet构建了地图应用，您可以通过iConnectorLeaflet.js对接SuperMap的GIS服务。例如：在Leaflet构建的在线地图上叠加SuperMap的缓冲区分析结果。

iConnectorLeaflet.js主要提供了地图叠加以及Geometry的转换，可以实现：在使用Leaflet的API出的地图上，叠加SuperMap地图服务中的地图、专题图、查询结果，以及空间分析结果。

准备开发环境

1. 基于Leaflet API的地图应用

您可使用下载在本地的API，或在线API：

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

2. 准备SuperMap GIS服务

本例使用SuperMap Online托管的地图服务：http://www.supermapol.com/iserver/services/map_China4003/rest/maps?key=IbooSg6gIBmhIRaesVgjSED0

3. SuperMap的JavaScript API

iClient for JavaScript与iConnectorLeaflet.js：

<script src="http://www.supermapol.com/resources/api/libs/SuperMap.Include.js"></script>
<script src="http://www.supermapol.com/resources/api/iconnector/iConnectorLeaflet.js"></script>

示例：在OpenStreetMap上叠加SuperMap的地图

Step1 初始化地图窗口加载OpenStreetMap

var map = L.map('map').setView([38, 115], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
        maxZoom: 18
    }).addTo(map);

Step2 使用iConnectorLeaflet.js转换SuperMap地图

var canvasTiles =  SuperMap.Web.iConnector.Leaflet.getLayer(url);
canvasTiles.addTo(map);

在线演示与源码编辑

您可以在线访问完整代码、体验演示效果，也可以直接在线编辑源码并实时查看效果。

results matching ""

    No results matching ""