SuperMap iClient如何实现双屏联动

在二维地图应用中，有时候会涉及到，两期栅格图或者矢量图的对比。一般我们可以用到卷帘效果，如果卷帘效果不太满足需求或者更多期数据要同时对比，可以通过定义多个map并且配合联动来实现，多期数据对比的需求。下面将采用iClient Classic来进行实现。

联动浏览

在二维地图中没有可以直接使用的多屏浏览接口，如果要实现的话，只能添加多个map组件，同时添加对两个map添加不同的layer。

   //新建地图
   map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Navigation(),
            new SuperMap.Control.Zoom()]
    });
    
     map2 = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Navigation(),
            new SuperMap.Control.Zoom()]
});

//添加图层
  layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url1, null, {maxResolution: "auto"});
    //监听图层信息加载完成事件
    layer.events.on({"layerInitialized": addLayer});
    function addLayer() {
        map.addLayer(layer);
        map.setCenter(new SuperMap.LonLat(0, 0), 0);
    }
 layer2 = new SuperMap.Layer.TiledDynamicRESTLayer("World", url2, null, {maxResolution: "auto"});
 layer2.events.on({"layerInitialized": addLayer2});
 function addLayer2() {
        map2.addLayer(layer2);
        map2.setCenter(new SuperMap.LonLat(0, 0), 0);
    }

现在已经实现了双屏加载地图，但是两个地图是相互独立的需要关联起来。这俩主要用到map中的move事件。当地图(1)进行浏览操作时，把中心点和zoomlevel传给地图(2)，实现两屏联动。

  map.events.on({ 'move':mousemove });
  map2.events.on({ 'move':mousemove2 });
 function mousemove()
    {
        var a=map.getCenter();
        var b= map.getZoom();
     
        map2.setCenter(a);
        map2.zoomTo(b)
    }

通过上面的gif图可以发现，联动浏览很正常，但是瓦片加载有些缓慢，有可能使用的是示例数据，没有切瓦片，两个地图同时加载，前端压力有些大，建议浏览切好瓦片的数据。

功能联动

一般常用的查询，生成缓冲区，专题图等功能，很好在多屏中展示，只需要向每个map添加对应的分析结果即可，下面不再详细讲解。下面主要讲解需要绘制的进行分析，例如测量分析。
首先使用的绘制点的控件，将点存在数组中，然后转换为线数据，然后将线数据添加到两个地图中

//绘制完成事件
  function drawCompleted(evt) {
        var point = new SuperMap.Geometry.Point(evt.feature.geometry.x, evt.feature.geometry.y)
        array.push(point)
            //console.log(array);
            if(array.length>1){
                map2_vectorLayer.removeAllFeatures();
                map_vectorLayer.removeAllFeatures();
                 var line1 = new SuperMap.Geometry.LineString(array);
                 var line2 = new SuperMap.Geometry.LineString(array);
                var linecVector = new SuperMap.Feature.Vector(line1);
                var linecVector2 = new SuperMap.Feature.Vector(line2);
                //linecVector.removeAllFeatures();
                linecVector.style = {
                strokeColor: "#ff0000",
                strokeWidth: 2
            };
             linecVector2.style = {
                strokeColor: "#ff0000",
                strokeWidth: 2
            };
                  map2_vectorLayer.addFeatures(linecVector);
                  map_vectorLayer.addFeatures(linecVector2);
            }    
    }

然后获取两条线的其中一个的geometry，并且传进相应接口，得到结果并展示。

function show(){
 drawPoint.deactivate();
      var geometry = map2_vectorLayer.features[0].geometry,
            measureParam = new SuperMap.REST.MeasureParameters(geometry), /* MeasureParameters：量算参数类。 客户端要量算的地物间的距离或某个区域的面积*/
            myMeasuerService = new SuperMap.REST.MeasureService(url1); //量算服务类，该类负责将量算参数传递到服务端，并获取服务端返回的量算结果
        myMeasuerService.events.on({"processCompleted": measureCompleted});

        //对MeasureService类型进行判断和赋值，当判断出是LineString时设置MeasureMode.DISTANCE，否则是MeasureMode.AREA

        myMeasuerService.measureMode = SuperMap.REST.MeasureMode.DISTANCE;

        myMeasuerService.processAsync(measureParam); //processAsync负责将客户端的量算参数传递到服务端。
    }

    //测量结束调用事件
    function measureCompleted(measureEventArgs) {
        var distance = measureEventArgs.result.distance;
        var unit = measureEventArgs.result.unit;
        widgets.alert.showAlert('量算距离' + distance + "m",true);
    }

常见问题

1、同一个layer只能添加到多个map中的其中一个map，如果要添加到多个map，请定义多个layer。
2、请保证所有map中的添加的layer坐标系相同，否则可能会导致各种问题（中心点不同，数据之间存在偏移），尤其是经纬度坐标系与投影坐标系区别很大。
3、尽量保证地图范围一样，否则会出现同一个zoomlevel 两个地图的比例尺不一样的问题。也可以通过传递比例尺来解决这个问题。var b= map.getScale();map2.zoomToScale(b);