深圳市宝安区慢性病地理信息系统——“面积测量”

最新推荐文章于 2020-05-15 12:36:47 发布

邓婵

最新推荐文章于 2020-05-15 12:36:47 发布

阅读量249

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44547786/article/details/86633679

本文介绍了一种基于GIS技术和MVC架构的面积测量方法，通过在地图上绘制区域并计算其面积，解决了重复测量结果干扰的问题。文章详细阐述了代码实现过程，包括地图初始化、图层控制、面积测量功能及其实现细节。

开发工具与关键技术： GIS技术、MVC
作者：邓婵
撰写时间： 2019年1月24日

一、功能实现
说明：这里是通过点击面积测量按钮在地图上绘制你所需要的某个区域面积，然后根据你所绘制的区域进行量算，弹出模态框显示绘制区域范围的面积
在这里插入图片描述

功能如下所示：
在这里插入图片描述

注：之前我犯过一个错误就是当我每点击一次面积测量时它并没有去除上一次测量的结果，而我点击第二次是它依然是显示第一次结果。原来我在面积测量点击事件中并没有写移除面积查询的代码，所以我才犯这样的错误，要记得当我们每一次点击时都要把上一次的图层要素移除掉，要不然也会和我犯同样的错误！
二、相关代码

       styleMJ = {
     strokeColor: "#304DBE",
     strokeWidth: 2,
     pointerEvents: "visiblePainted",
     fillColor: "#fff",
     fillOpacity: 0.3
 },
        url = "http://localhost:8090/iserver/services/map-ShenZhenBaoAnQu/rest/maps/深圳宝安区";
        //创建对象
        function onPageLoad() {
            // 初始化地图
            map = new SuperMap.Map("map", {
                controls: [//控件参数
            //  new SuperMap.Control.LayerSwitcher(),//图层选择控件类。 用于控制地图中的图层可见性。
              new SuperMap.Control.ScaleLine(),//比例尺控件。默认位置为地图左下角。
              new SuperMap.Control.PanZoomBar(),//平移缩放类。 用于平移缩放地图，默认情况下垂直显示在地图左上角。
              new SuperMap.Control.LayerSwitcher(),//博士帽图标
              new SuperMap.Control.Navigation({//此控件处理伴随鼠标事件（拖拽，双击、鼠标滚轮缩放）的地图浏览， 如果创建地图时没有设置任何控件，此控件会默认添加到地图
                  dragPanOptions: {
                      enableKinetic: true//设置是否使用拖拽动画。默认为false，不使用动画。
                  }
              })]
            });

            //初始化图层（定义layerWorld图层，获取图层服务地址）
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("宝安区_region", url, null, { maxResolution: "auto" });
           //新建查询面积的矢量图层
    polygonLayer = new SuperMap.Layer.Vector("polygonLayer");
    polygonLayermzj = new SuperMap.Layer.Vector("polygonLayermzj");
    //对面图层应用样式style（前面有定义）
    polygonLayer.style = styleMJ;
    //创建画面控制，图层是polygonLayer
    drawPolygon = new SuperMap.Control.DrawFeature(polygonLayer, SuperMap.Handler.Polygon);
    drawPolygon.events.on({ "featureadded": drawCompletedDrawPolygon });
    map.addControl(drawPolygon);
            //监听图层信息加载完成事件（为图层初始化完毕添加layerInitialized事件）
            layer.events.on({ "layerInitialized": addLayer });

        }
        //异步加载图层
        function addLayer() {
            map.addLayers([layer]);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(113.86, 22.6), 3.6);
        }
//测面积
function mapMeasurementArea(t) { 
    polygonLayer.removeAllFeatures();//移除图层要素    
    drawPolygon.activate();
    $("liangshujieguo").innerHTML = "";
    $('#Diastimeter').attr('style', 'display:none');
   polygonLayer.removeAllFeatures();//移除面积查询图层   
   // clearElementsmzj();
}

function drawCompletedDrawPolygon(drawGeometryArgs) {
    //停止画面控制
    drawPolygon.deactivate();
    //获得图层几何对象
    var geometry = drawGeometryArgs.feature.geometry,
            measureParam = new SuperMap.REST.MeasureParameters(geometry), /* MeasureParameters：量算参数类。 客户端要量算的地物间的距离或某个区域的面积*/
            myMeasuerService = new SuperMap.REST.MeasureService(url); //量算服务类，该类负责将量算参数传递到服务端，并获取服务端返回的量算结果
    myMeasuerService.events.on({ "processCompleted": measureCompleted, "processFailed": processFailed111 });

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

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

    myMeasuerService.processAsync(measureParam); //processAsync负责将客户端的量算参数传递到服务端。
}
//测量结束调用事件
function measureCompleted(measureEventArgs) {
    var area = measureEventArgs.result.area,
            unit = measureEventArgs.result.unit;
    $('#liangshujieguo').text(parseInt(area) + "平方米");
    $('#Diastimeter').attr('style', 'display:block');
}
function processFailed111(er) {
    //console.log(er);
}