《广州市越秀区慢性病管理平台——“地图区域定位”模块》项目研发阶段性总结

开发工具: Visual Studio 2015 、SuperMapiDesktop8C、SuperMapiServer8C、

关键技术:C#、ASP.MVC、

完成模块功能:地图区域定位

第一步:使用SuperMapiDesktop8C设置地图

1、右键看到新建文件型数据源点击创建文件型数据源

2、导入地图需要的数据(文件型数据:后缀格式shp)

 

3、然后右键再新建数据库型数据(你根据个人需求或者项目需求来决定是否需要数据库型)图1有新建数据库型数据点击

4、鼠标移到未命名工作空间右键选择另存工作空间创建工作空间(可以文件型或者数据库其中一个,也可以同时保存)

 5、根据自己需求进行保存,我的是SQL保存方式(这样新建地图需要的数据和准备工作就完成了)

6、前面第三步把数据集导入到了文件数据源了,然后我们根据自己需求把数据拉到中间iDesktop会默认帮你创建地图窗口

7、进行数据处理和设置(这里数据我就不详解,如果需要留言我再跟你们讲解)

8、选择一个面数据集拿来当网格图层(我选择的是省界进行处理)

9、选择对象操作,然后根据你需要切割的面的数据集进行区域切割(铅笔图标代表可编辑状态)

 (1):对象处理右上角“画线切割”选择

10、然后右键切割面的数据集选择关联浏览属性数据点击进去里面NAME填入自己需要的数据保存。


 那么我们需要实现的区域定位工作就准备好了

注意:1、有了数据源才可以创建数据库,不然你直接创建数据库会报异常“原因是你没有是数据源”。

功能实现效果:

打开功能管理栏看到区域定位点击其中一个街道

区域定位样式代码:

        <div class="panel panel-primary" style="border-radius:0">
                                                <div class="panel-heading" style="height:35px;border-radius:0;">
                                                    <h4 class="panel-title ">
                                                        <a data-toggle="collapse" data-parent="#accordion"
                                                           href="#collapseOne" style="display: block;font-style: normal;float: left; width: 90%;text-decoration:none;">
                                                            区域定位
                                                        </a>
                                                        <a style="width: 16px;height: 15px;float: right;display: block; background: url(/Content/images/jiantou.png) no-repeat round;background-repeat: round;" ;></a>
                                                    </h4>
                                                </div>
                                                <div id="collapseOne" class="panel-collapse collapse in" style="height:136px;">
                                                    <div style="float:initial" onclick="getFeaturesBySQL(1)"><a>矿泉街道</a></div>
                                                    <div style="" onclick="getFeaturesBySQL(3)"><a>流花街道</a></div>
                                                    <div style="" onclick="getFeaturesBySQL(4)"><a>登峰街道</a></div>
                                                    <div style="" onclick="getFeaturesBySQL(6)"><a>人民街道</a></div>
                                                    <div style="" onclick="getFeaturesBySQL(7)"><a>光塔街道</a></div>
                                                    <div style="" onclick="getFeaturesBySQL(9)"><a>珠光街道</a></div>
                                                    <div style="margin-top:-111px;margin-left:88px;" onclick="getFeaturesBySQL(10)"><a>北京街道</a></div>
                                                    <div style="margin-top:7px;margin-left:87px;" onclick="getFeaturesBySQL(11)"><a>北京街道</a></div>
                                                    <div style="margin-top:7px;margin-left:88px;" onclick="getFeaturesBySQL(14)"><a>建设街道</a></div>
                                                    <div style="margin-top:7px;margin-left:82px;" onclick="getFeaturesBySQL(17)"><a>梅花村街道</a></div>
                                                    <div style="margin-top:6px;margin-left:88px;" onclick="getFeaturesBySQL(18)"><a>东山街道</a></div>
                                                    <div style="margin-top:-122px;margin-left:170px;" onclick="getFeaturesBySQL(20)"><a>白云街道</a></div>
                                                    <div style="margin-top:4px;margin-left:170px;" onclick="getFeaturesBySQL(21)"><a>洪桥街道</a></div>
                                                    <div style="margin-top:6px;margin-left:170px;" onclick="getFeaturesBySQL(22)"><a>六榕街道</a></div>
                                                    <div style="margin-top:9px;margin-left:170px;" onclick="getFeaturesBySQL(23)"><a>大东街道</a></div>
                                                    <div style="margin-top:6px;margin-left:170px;" onclick="getFeaturesBySQL(24)"><a>农林街道</a></div>
                                                    <div style="margin-top:-11px;margin-left:3px;" onclick="getFeaturesBySQL(25)"><a>大塘街道</a></div>
                                                </div>
                                            </div>

11:代码讲解

var map, //地图

markers,

url, //路径

LocalMrker,

lineLayer, 

vectorLayer_ZJ, //省界矢量图层

         style = {

             strokeColor: "#3473b729",

             strokeWidth: 2,

             pointerEvents: "visiblePainted",

             fillColor: "#fff",

             fillOpacity: 0.3  

         };

        url = "http://localhost:8090/iserver/services/map-Yuexiuquenclosure/rest/maps/区县界_region@YueXiuQusource_Data";

 

        //创建地图控件

        function init() {

            //创建Markers标记图层

            markersWu = new SuperMap.Layer.Markers("Markers");

            vectorLayer_ZJ = new SuperMap.Layer.Vector("乡镇图层");

            //新建线矢量图层

            lineLayer = new SuperMap.Layer.Vector("lineLayer");

            layer = new SuperMap.Layer.TiledDynamicRESTLayer("越秀区地图", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });

            layer.events.on({ "layerInitialized": addLayer });

            //map上添加控件

            map = new SuperMap.Map("map", {

                controls: [

                new SuperMap.Control.LayerSwitcher(),

                new SuperMap.Control.ScaleLine(),

                new SuperMap.Control.PanZoomBar(),

                new SuperMap.Control.Navigation({

                    dragPanOptions: {

                        enableKinetic: true

                    }

                })]  

            });

        }

        function drawGeometry1() {

            //先清除上次的显示结果

            //clearStatus();

            clearFeatures();

            drawPolygon1.activate();

        }

 

        function addLayer() {

            //将Layer图层加载到Map对象上

            map.addLayers([layer, markers, selects, lineLayer, marker1, markerLayer2, polygonLayer, markersWu, vectorLayer_ZJ]);//距离、标记物

            //出图,map.setCenter函数显示地图

            map.setCenter(new SuperMap.LonLat(113.2848870916, 23.1323660784993), 1);//LonLat:表示经纬度:x:(横轴,地理投影为经度)y:(纵轴,地理投影为纬度)//setCenter 设置地图中心点。

            //removeLayer 通过删除可见元素(即layer.div属性)来移除地图上的图层。然后从地图的 图层列表中移除该图层,同时设置图层的map属性为null。

            map.setBaseLayer(layer);

        }

        //区域定位

        function getFeaturesBySQL(ZhenID) {

            vectorLayer_ZJ.removeAllFeatures();

            var queryParam = [], queryBySQLParams, queryBySQLService;

            queryParam.push(new SuperMap.REST.FilterParameter({

                name: "省界_region@YueXiuQusource_Data#1",

                attributeFilter: "SmID =" + ZhenID

            }));

            //SQL 查询参数类。 该类用于设置 SQL 查询的相关参数。

            queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({

                queryParams: queryParam//查询过滤条件参数数组

            });

            //SQL 查询服务类。 在一个或多个指定的图层上查询符合 SQL 条件的空间地物信息。

            queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {//url 服务的访问地址

                eventListeners: { "processCompleted": processCompleted_SB, "processFailed": processFailed_SB }

            });

            //传递到服务端

            queryBySQLService.processAsync(queryBySQLParams);

        }

        //定位添加颜色

        function processCompleted_SB(queryEventArgs) {

            //声明字段

            var i, j, feature, bounds, N = [], S = [], W = [], E = [],

            result = queryEventArgs.result;//获取服务器传回来的数据

            vectorLayer_ZJ.removeAllFeatures();

            var features = [];

            //判断是否有数据

            if (result && result.recordsets) {//判断查询的查询结果记录集数组是否为空

                for (i = 0; i < result.recordsets.length; i++) {//循环记录集数组

                    //features===用于存放矢量要素

                    if (result.recordsets[i].features) {//判断记录集数组的矢量要素是否为空

                        //如果记录集数组的矢量要素不为空,则又循环 记录集数组的矢量要素

                        for (j = 0; j < result.recordsets[i].features.length; j++) {

                            feature = result.recordsets[i].features[j];//获取记录集数组的矢量要素

 

                            //判断显示面或点

                            if (feature.geometry.CLASS_NAME == SuperMap.Geometry.Point.prototype.CLASS_NAME) {//判断返回的数据是不是这个数据

 

                            }

                            else {

 

                                var smID = parseInt(feature.data.SmID);

                                feature.smID = smID;

                                //省界网格

                                feature.style = {

                                    strokeColor: '#0322ff',//边颜色

                                    strokeWidth: 1,//边宽度

                                    strokeDashstyle: 'dash',//边类型,虚线

                                    fillColor: '#0322ff',//填充颜色

                                    fillOpacity: 0.08,//透明度

                                    fontColor: '#0322ff',

                                    fontOpacity: "1",

                                    fontSize: '18px',

                                    fontWeight: 700

                                };

                                vectorLayer_ZJ.addFeatures(feature);

 

                                bounds = feature.data

                                if (bounds != null) {

                                    if (bounds.SmSdriN != null && Boolean(bounds.SmSdriN) == true) {

                                        N.push(Number(bounds.SmSdriN));

                                    }

                                    if (bounds.SmSdriS != null && Boolean(bounds.SmSdriS) == true) {

                                        S.push(Number(bounds.SmSdriS));

                                    }

                                    if (bounds.SmSdriW != null && Boolean(bounds.SmSdriW) == true) {

                                        W.push(Number(bounds.SmSdriW));

                                    }

                                    if (bounds.SmSdriE != null && Boolean(bounds.SmSdriE) == true) {

                                        E.push(Number(bounds.SmSdriE));

                                    }

                                }

                            }

                        }

 

                    }

                }

            }

 

            if (W.length > 0 && S.length > 0 && E.length > 0 && N.length > 0) {

                var bounds = new SuperMap.Bounds(

                   Math.min.apply(null, W),//最小的水平坐标系。

                   Math.min.apply(null, S),//最小的垂直坐标系。

                   Math.max.apply(null, E),//最大的水平坐标系。

                   Math.max.apply(null, N) //最大的垂直坐标系。

                                          );

 

                map.zoomToExtent(bounds, 2);//缩放到指定范围,重新定位中心点。

            }

        }

        //失败方法

        function processFailed_SB(e) {

            swal('', e.error.errorMsg, '');

        }

总结:

不知不觉中,旧的一年半悄然离去,迎来崭新而充满期望的2019年,

回首即将走完的2017-2018年,对我而言,是一个思考、反省,尝新求变之年。

因为对学习的追求,在这一年半里内我还学会了SQL、DW、C#、SpriingMVC和GIS等等编程技术,使我对未来向往生活如虎添翼;我时常反省,反省自己学习中的不足,进一步认识自己,扬长避短,争取在新的一年里在学习上有更出色的表现。首先要更加注重细节,因为我往往大意马虎常常在编写代码时上犯细节错误,学习前写好学习计划,从容的结束每一天的学习生活,而不是慌乱向以往高中一样迷茫;其次是更加细化学习时间,科学合理的安排好每一项学习任务,不再出现拖拉的迹象;最后是加强体育锻炼,为什么锻炼身体呢?因为这一年半的大学生活我严重发福了,要继续坚持每逢节假日去公园锻炼身体,才能适应今后长时间学习。

 

猜你喜欢

转载自blog.csdn.net/weixin_44548366/article/details/86550188