开发工具与关键技术：VS，MVC
作者：陈梅
撰写时间：2020年5月8日
制作地图项目，功能也有很多，例如测面积，测距离。接下来我讲的就是地图上工具箱测距离和测面积功能。
这个就是所要制作工具箱的功能。测距离，侧面积，画矩形功能，画圆形功能，还有画多边形功能。先看一下工具箱的样式和布局吧！
工具箱的布局代码，i标签是中间里面的是工具箱控制器，主要作用是可以随意移动工具箱，后面就是所有工具箱的功能，测距离，侧面积，框选，圆选，还有自定义图形，最后还有个清除图层的操作。用测距离的功能测试距离之后，直接按清除图层，测距离的线条就清除掉了。制作工具箱，布局div布局完，还要css的样式。
设置工具箱的样式，设置每个图形的宽高，图形，颜色。还有图形样式，图形大小，设置完，调好工具箱的位置，摆好工具箱的图形贴合，一个工具箱的样式就布局好了。工具箱里的图形有些是插件里面有的，有些是自己找的小图标。工具箱的图标自己可以随意搭配。
设置完css的样式，就用js来实现点功能。设个js设置的使工具箱可以随便移动，点击工具箱，移动到向想要移动，自己觉得方便的地方。var stir = false；这个代码是声明移动工具箱的标记。var up,down,这个代码是鼠标离控件左上角的相对位置，接下来就是移动工具箱的左右或上下。var x = e.pageX – up;这个代码是移动时根据鼠标的位置计算控件左上角的绝对位置，然后移动完工具箱，到了新位置，就定下工具箱的新的位置。有这个功能还是不够的，测距，侧面积的功能还没完全实现，接下来工具箱的功能要一个一个慢慢讲解。
制作测距离的时候，做所有工具箱功能之前，先做一个清除的功能。清除记录的功能，清除上一个功能记录的功能。
制作完这个清除功能就可以继续制作工具箱的功能。
制作测距离的功能，ChangeExcept();这个代码是移除所有的案件标记物，这个只是引用代码，跟清除的代码引用一样。paintThread.activate(),这个代码是为了**划线，测距离的操作。然后作图触发事件，drawGeometryArgs这个代码是在地图显示里添加的代码，就是init()的代码，触发在地图上的制作。要想在地图上做功能，功能代码要在init()里面，然后再在init()里引用里面的代码。制作功能的代码有很多，例如DrawFeature，Handler，multi，featureadded。drawLine这个代码是声明的变量。
DrawFeature的定义绘制要素类。通过事件处理器可以在vector图层上绘制点、线、面等要素。Handler定义实例化事件处理器类对象。而Handler.Path的定义第地图上绘制路径的控制事件处理器。当按下鼠标后路径开始显示，随着鼠标移动而变化，当松开鼠标时完成。Multi的定义是标识当前绘制的对象由多个部分组成。当多次绘制时，程序会将绘制的要素组合成一个要素。它的默是false。featureadded：定义 drawCompleted 函数，触发 featureadded 事件会调用此函数。然后再判断起点到结束点的距离有多长。processCompleted这个也是一个引用代码，制作好区域的定位，定位某一个位置。定位一个位置到另一个位置。我这里弄的是整个乡镇的定位，整一个白云区的乡镇。定位中心点，使用地图服务。
measureCompleted这个也是引用代码，这个是结束测距离。调用结束事件，使用完测距工具，有开始就有结束，所以要编制一个结束语句。还设置测量线的样式，颜色和获取上下距离。而processCompleted是把事件出来完整。
var x = count.components[i].x;这个代码的意思是获取当前几何的界限上下左右除以2得到X轴，Y同理。而MeasureParameters是量算参数类。客户端需要量算的地物间的距离或某个区域的面积。然后再引用地图链接，在地图上获取服务。所有量算参数类，主要负责的是将量算参数传递到服务端，并获取服务端返回的量算结束。MeasureService这个代码的意思是，对MeasureService类型进行判断和赋值，当判断出是LineString时设置 //对MeasureService类型进行判断和赋值，当判断出是LineString时设置MeasureMode.DISTANCE，否则是MeasureMode.AREA，最后再用processAsync将客户端的量算参数传递到服务端。
在地图上测距离的定位图，也是引用一个小图标，测两个地方的距离，点击测距离的工具箱，然后从起始点拖到结束点，也可以从起始点拖到一个想要的位置点一下，再拖到另一个想要结束的位置点两下，就可以测试出两个方向的距离。测距离是第一个工具，所以代码比较多，接下来的侧面积，还有其他工具代码就比较少一点。因为大多数引用的代码，都在测距离这里都引用到了。
测面积功能，先引用侧面积的id。然后就是跟测距离一样，调用事件。PurgeConsequent()是清除上一个的显示结果。ChangeExcept()是清除图层，也是工具箱功能的最后一个，清除所有正在制作的标记。MeasureParameters，myMeasuerService这两个代码跟在测距离哪里的代码是一样的，作用也是一样。最后还是一样的将客户端的量算参数传递到服务端。因为测距离和侧面积都要用到触发结束事件，所以结束事件的代码几乎是一样的。
这个清除图层代码，大多数地方都引用的到，而这个清除图层的代码都是基本引用了init()里面的功能服务。init()里的都是引用地图功能，引用的都是医院，医疗的功能，获取地图上所有有关医疗的服务。清除已经操作了的功能，测面积跟测距离的代码差不多，drawPolygon.deactivate()是停止画面控制，这个也是引用init()里的代码。
最后来看一下，侧面积的最后显示功能。
用测距离的工具，点击第一个地方，一直拖到第二个位置点击一下，在最后双击结束点。就会显示你想要测试的面积。其实不仅可以用三角形来测试面积，矩形，多边形都是可以的，多点几下，拖几下线就可以了。工具箱里的测距离和侧面积就解析到这里了。这样就可以实现测距离或侧面积了。