叠加Google与SuperMap的地图

iConnectorGoogle.js简介

如果您已经使用Google地图的JavaScript API构建了地图应用，您可以通过iConnectorGoogle.js对接SuperMap的GIS服务。例如：在Google地图上叠加通过SuperMap发布的业务数据。

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

准备开发环境

1. 基于Google地图 JavaScript API的地图应用

您可以使用Google地图的在线JavaScript API，使用方式：

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></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>

示例：在Google地图上叠加SuperMap分段专题图

Step1 初始化Google地图

使用Google地图API创建地图窗口“map-canvas”，并设置加载地图的中心点和比例尺级别，创建地图如：map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var myLatlng = new google.maps.LatLng(0, 0);
    var mapOptions = {
        center: myLatlng,
        zoom: 1,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

Step2 制作SuperMap分段专题图

使用SuperMap.Include.js，基于SuperMap REST服务中的"China_Province_R"图层，制作分段专题图。

    var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{"processCompleted": themeCompleted, "processFailed": themeFailed}}),
        style1 = new SuperMap.REST.ServerStyle({
            fillForeColor: new SuperMap.REST.ServerColor(137,203,187),
            lineColor: new SuperMap.REST.ServerColor(0,0,0),
            lineWidth: 0.1
        }),
        style2 = new SuperMap.REST.ServerStyle({
            fillForeColor: new SuperMap.REST.ServerColor(233,235,171),
            lineColor: new SuperMap.REST.ServerColor(0,0,0),
            lineWidth: 0.1
        }),
        style3 = new SuperMap.REST.ServerStyle({
            fillForeColor: new SuperMap.REST.ServerColor(135,157,157),
            lineColor: new SuperMap.REST.ServerColor(0,0,0),
            lineWidth: 0.1
        }),
        themeRangeIteme1 = new SuperMap.REST.ThemeRangeItem({
            start: 0,
            end: 500000000000,
            style: style1
        }),
        themeRangeIteme2 = new SuperMap.REST.ThemeRangeItem({
            start: 500000000000,
            end: 1000000000000,
            style: style2
        }),
        themeRangeIteme3 = new SuperMap.REST.ThemeRangeItem({
            start: 1000000000000,
            end:  3000000000000,
            style: style3
        }),
        themeRange = new SuperMap.REST.ThemeRange({
            rangeExpression: "SMAREA",
            rangeMode: SuperMap.REST.RangeMode.EQUALINTERVAL,
            items: [themeRangeIteme1,themeRangeIteme2,themeRangeIteme3]
        }),
        themeParameters = new SuperMap.REST.ThemeParameters({
            datasetNames: ["China_Province_R"],
            dataSourceNames: ["China400"],
            joinItems: null,
            themes: [themeRange]
        });
    themeService.processAsync(themeParameters);

Step3 把SuperMap专题图转换后叠加到Google地图上

使用iConnectorGoogle.js把Step2创建的SuperMap专题图叠加到Step1创建的Google地图上。

    if(themeEventArgs.result.resourceInfo.id) {
        map.overlayMapTypes.insertAt(
                0, SuperMap.Web.iConnector.Google.getLayer(url,{layersID:themeEventArgs.result.resourceInfo.id}));
    }

在线演示与源码编辑

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

叠加Google与SuperMap的地图