GIS —— 基础操作（绘线测距）

调用GIS地图，需要在iDesktop中制作地图，然后发布到iServer，再通过iClient插件中的方法调用到自己的项目中。当地图加载到自己的项目中之后，我们就可以开始对地图进行一系列的操作。有些人觉得iClient很难理解，各种方法晦涩难懂。其实iClient只是个插件，和使用bootstrap一样的。

上图是绘线测量两地间的直线距离。首先我们试想一下，要画一根线，我们需要准备笔和纸。
然后，我们创建一支笔（绘图控件）：

var lineLayer = new SuperMap.Layer.Vector("绘线");

创建一张纸（图层）：*创建“纸”的时候，我们要声明一下这支“笔”是在这张“纸”上画的。

var drawLine = new SuperMap.Control.DrawFeature(lineLayer, SuperMap.Handler.Path, { multi: true });

然后，在初始化地图的时候，将绘图控件添加到地图中：

//初始化地图
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.PanZoomBar(),
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true,
                    transition: false
                }
            }),
            drawLine,
        ], units: "m",//地图的单位
        scales: [1 / 100000, 1 / 70000, 1 / 40000, 1 / 20000, 1 / 10000, 1 / 7000, 1 / 4500, 1 / 3000, 1 / 2000, 1 / 800, 1 / 500]//比例尺
    });

在加载底图图层的时候将绘线图层添加到地图上：

function addLayer() {
    map.addLayers([
        layer,//地图底图
        lineLayer,//绘线
    ]);
  }

然后我们的准备工作就做完了，然后开始绘线。

function draw_line() {
    lineLayer.removeAllFeatures();//清空图层，清除上一次绘制的结果
    drawLine.activate();//**绘图控件
}

**控件就相当于，将画笔附加到鼠标指针上面，你会发现鼠标上多了个圈 GIS —— 基础操作（绘线测距），两个点确定一条直线。绘制完成，我们就需要将画笔从鼠标指针上取消，然后将绘制的几何图形传递给服务端，那他是怎么知道绘图已经绘制完成了呢？这个时候就需要使用一个监听事件 —— event.on。

drawLine.events.on({ "featureadded": drawCompLine });

“Featureadded”是iClient定义的绘制完成调用事件。这句代码的意思就是：监听drawLine图层，如果绘制完成，就调用drawCompLine事件：

//绘完触发事件
function drawCompLine(drawGeometryArgs) {

    //停止画面控制
    drawLine.deactivate();
    //获得图层几何对象
    var geometry = drawGeometryArgs.feature.geometry,
    measureParam = new SuperMap.REST.MeasureParameters(geometry), /* MeasureParameters：量算参数类。 客户端要量算的地物间的距离或某个区域的面积*/
    myMeasuerService = new SuperMap.REST.MeasureService(url); //量算服务类，该类负责将量算参数传递到服务端，并获取服务端返回的量算结果
    myMeasuerService.events.on({ "processCompleted": measureCompLine });
    //对MeasureService类型进行判断和赋值，当判断出是LineString时设置MeasureMode.DISTANCE，否则是MeasureMode.AREA
    myMeasuerService.measureMode = SuperMap.REST.MeasureMode.DISTANCE;
    myMeasuerService.processAsync(measureParam); //processAsync负责将客户端的量算参数传递到服务端。
}

measureParam = new SuperMap.REST.MeasureParameters(geometry)这句代码在IClient帮助手册里的解释是：MeasureParameters：量算参数类。按我的理解， geometry是个几何图形，服务那边接收不了几何图形，所以我们要先通过MeasureParameters将geometry转换成它能接收的参数类型，再去请求服务（url）。接下来又用到了event.on监听，”processCompleted”：测量结束后调用。然后调用measureCompLine方法，获取到从服务返回的值，然后弹窗显示。

function measureCompLine(measureEventArgs) {
    var distance = parseInt(measureEventArgs.result.distance);
    alert("直线距离：" + distance + " 米")
}

其实代码都是一样，知识点难度也都是一样，就看个人的逻辑和理解能力。代码都是抽象的，抽象的东西一般都很难理解，那我们可以将代码与自己身边的事物联系结合起来，将其形象化，就会变得简单。就像绘线测距，绘线肯定要用到笔和纸，也就是绘图控件和图层。然后就是测量，测量我们要请求服务端测量，因为它才知道地图的比例尺等数据，但是它看不懂几何图形，所以我们要先把绘制出来的几何图形转换成它能理解的参数类型再传递给它。