单值专题图草稿

一、单值专题图（宗地属性）

1. 说明

专题图
本例中，该单值专题图是将房屋宗地的权限相同的归为一类，为相同一类设定同一种颜色进行渲染。专题值相同的要素采用相同的渲染风格，从而用来区分不同的类别。

2. 接口参数说明与调用过程

1. 请求URL：
   该请求为GET请求
   链接: http://localhost:9018/ztyy/uniqueTheme
2. 请求参数：无
3. 调用过程：
   1.初始化map
   2.加载该区域内的宗地数据
   3.对于相同宗地权限的数据设置为一种颜色
   4.在地图右侧展示权限单值图例

3.初始化地图控件

3. 前端示例代码

1. 首先需要获取 宗地数据 以及 宗地权限类型的图例数据。下面是获取图例数据：
   实现单值专题图的代码如下：

function getTable(dictTypeParam,colNameParam,tableNameParam){
       var resData=[];
       $.ajax({
           async : false,
           url :  "http://localhost:9018/ztyy/ztbdczs/getDictDataByType",
           type : "post",
           data:{
               dictType:dictTypeParam,//字典类型
               columnName:colNameParam,//字段名（有时字典类型名和字段名不一样）
               tableName:tableNameParam//表名
           },
           dataType : "json",
           success : function(res){
               if(res.length>0){
                   let colorArr=rgb(res.length);
                   $.each(res,function(i,v){
                       resData.push({
                           dictLabel:v.dictLabel,//字典字段值对应的文本值
                           dictValue:v.dictValue,//字段值
                           dictColor:colorArr[i]//给该字段值分配的颜色属性
                       });
                   })
               }
           },
           error : function(){
           }
       });
       return resData;
   }

2. 配置鼠标事件,设置鼠标移动到数据上面时，显示权限类型属性：

  var popup;
    map.on('mouseenter', 'zds', function (e) {
        var coordinates = [e.lngLat.lng,e.lngLat.lat];
         popup=new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: true
        })
            .setLngLat(coordinates)
            .setHTML(e.features[0].properties[colName])
            .setMaxWidth('max-width: none')
            .addTo(map);
    });
    // 鼠标在离开标注
    map.on('mouseleave', 'zds', function () {
        if(popup){
            popup.remove();}
    });

3. 对宗地权限类型的单值属性整理成列表进行展示：

function creatLabel(tableData){
        $.each(tableData,function(i,v){
            let str='';
            str='<tr>\n' +
                ' <td class="legendItemHeader">'+v.dictLabel+'</td>\n' +
                '   <td class="legendItemValue" style="background:'+v.dictColor+'"></td>\n' +
                ' </tr>';
            $('#tuli').append(str)
        });
    }