🌍yymap

Appearance

YY. LayerControl ​

地图图层控制组件

总体流程和概述 ​

  • 一个项目里有多个页面
  • 每个页面里多个数据节点(图层节点, 分类节点等)
  • 代码层面
    • 首先获取项目的所有页面数据getPages
    • 切换到对应的页面switchPage, 并获取到该页面的图层的数据集合和图层结构
    • 根据业务需要动态的添加和移除图层节点addNodes removeNodes
    • 根据业务参数的变化动态刷新图层里面的数据 refreshLayer

警告

使用 yymap-layercontrol 前请先引入 yymap 脚本

警告

如果你的项目里配置了倾斜摄影图层，但是项目却没有显示，说明你的 layercontrol 版本比较落后了，需要升级下, 最新的资源

html
<script type="text/javascript" src="https://deyihu-static-public-1300406971.cos.ap-shanghai.myqcloud.com/yymap-layercontrol@latest/dist/yymap-layercontrol.min.js"></script>

creation ​

  • constructor(options)
    • {Object} options: 配置对象
      • {YY. Map} map: 地图对象实例
      • {string} platformUrl: 平台的服务地址，一般不用配置，除非内网内
      • {string} projectId: 项目 ID
      • {string} url: 项目的服务端地址, 如果需要内网自动切换的，不要把这个地址写死了, 写个方法根据window.location里的地址自动生成对应的地址

      • {string} env: 环境变量，可能的值 'development' ,'production',null,可以不填写

      • {Function} onClick: 地图上覆盖物的点击事件回调函数，当地图上的点线面被点击后会回调这个函数

      • {object} events: {} 覆盖物的的其他事件监听函数

      • {boolean} animationOnLayer: false, 图层切换时是否开启过渡动画

      • {number} animationDuration: 2000 ，过渡动画时长，默认 2000ms

      • {number} cacheExpiration: 5x60x1000 ，缓存过期时间，默认 5 分钟 ，单位毫秒

      • {boolean} localForage: 是否开启离线存储，开启缓存的图层会本地化存储，缓存不仅仅在内存里生效了，即使刷新页面也可以使用了 ， 默认 false, 即不开启

      • {YY. ThreeScene} threeScene: 3d 场景，当启用 3d 图层需要这个对象来支撑整个 3d 的图层的显示，可以不配置，但是当数据里有 3d 图层这个是必须要配置的

      • {boolean} showLoading: 是否显示 loading 动画，当加载模型时因为模型比较大，开启后可以让模型加载时有个等待动画

      • {boolean} socket: 是否开启websocket实时同步功能(开启后图层的样式改变，数据改变，配置改变等会实时反馈到前端页面里), 默认 false, 即不开启

      • {string} token: token 值，如果后台服务访问需要 token 值的话

      • {boolean} errorDataLog: 出错的数据是否进行控制台输出

      • {string} publicToken: mapplat平台的公共token值，一般无需配置, 除非你修改了mapplat里这个值了

      • {Object} apiUrlMaps: 图层接口里主机地址映射集合, 可以动态改变图层接口的请求地址, 例如下面的配置, 接口请求时会自动把地址替换为百度的地址, 该特性要求 layercontrol 版本>=0.78.0

      • {Function} formatLayerData : 格式化图层的数据，当数据数据从接口中接口结束后可以对其自定义，如果需要的话，一般用不到

apiUrlMaps详情 ​

js
                {
                    // "key":"value"
                    // "图层里的地址":"新的地址,真实访问的地址"
                    //value的值最好不要写死了,可以根据浏览器里的url动态获取服务端的地址,这样可以做到服务端地址是动态的,做到内外网自动切换
                    "http://10.0.0.10:8080/jxc/api": "https://www.baidu.com/jxc/api",
                    //其他的地址映射
                }

                // 根据当前页面地址动态获取服务端地址,代码仅供参考,这样可以做到服务地址动态
                //  function getServerURL() {
                //      const {
                //          protocol,
                //          post,
                //          host
                //      } = window.location;
                //      return `${protocol}${port}//${host}/你的服务端项目名字`;
                //  }

formatLayerData详情 ​

js
    /**
     * 自定义图层的数据如果需要，一般用不到
     * @param {} data 
     * @param {*} node 
     * @param {*} layer 
     * @param {*} callback 
     * @returns 
     */
    function formatLayerData(dataList, node, layer, callback) {
        if (!node || !dataList || !Array.isArray(dataList) || dataList.length === 0) {
            callback();
            return;
        }
        const layerId = node.id;
        if (layerId === LAYERID) {
            //do some things 
            callback();
        } else {
            //do some things 
            callback();
            // ...
        }
    }

example ​

js
const map = new YY.Map('map', {
    .....
});
//3d 可视化场景图层
const threeScene = new YY.ThreeScene(YY.H.uuid(), {
    light: true,
    identifyCountOnEvent: 1,
    forceRenderOnZooming: true
});
this.layerControl = new YY.LayerControl({
    map,
    //地图管理平台的服务地址,内网内需要自己配置的这个地址的
    // platformUrl: "http://localhost:9600/common/",
    projectId: 'id-40637B1D-080A-4321-9BB0-602C58439D86',
    //服务端地址
    url: 'http://172.16.2.178:8083/platform/',
    //开启生产环境
    production: true,
    onClick: this.overlayOnClick,
    events: {
        'mousemove': this.overlayMouseMove,
        ...
    },
    cacheExpiration: 5 * 60 * 1000,
    threeScene, //如果需要3d功能的话必须配置
    showLoading: true,
    socket: true,
    formatLayerData,
    // token:'xxxxxxxxxxx',
    // publicToken:'xxxxx',
    // apiUrlMaps:  {
    //     "http://10.0.0.10:8080/jxc/api": "https://www.baidu.com/jxc/api",
    //     //其他的地址映射
    // }
});

events ​

pageload ​

当页面切换，页面数据加载完事件

layerload ​

图层加载完事件

layercount ​

图层数据量统计事件

openpopup ​

显示弹窗事件

opendialog ​

显示弹窗事件

layertreeupdate ​

图层数据结构改变事件(一般是图层的添加和删除)

tilelayersload ​

底图加载完成事件

js
this.layerControl.on("layertreeupdate", (e) => {
    this.layerTreeData = e.data;
});
this.layerControl.on("pageload", (e) => {
    console.log(e);
    //do some things
});
this.layerControl.on("layerload", (e) => {
    console.log(e);
    //do some things
});
this.layerControl.on("layercount", (e) => {
    console.log(e);
    const {
        count,
        node
    } = e;
    const label = `${node.name}(${count})`;
    this.updateLayerNodeLabel(node.id, label);
    //do some things
});

常用的方法有 ​

方法说明
getPages获取项目的所有页面数据, 拿到页面数据后会缓存起来，方面后面切换页面
switchPage切换页面, 将地图上的资源完全重置为新的页面里的数据
setNodes设置当前页面里所有图层节点, 注意其是完全替换, 如果想动态添加和移除, 使用 addNodes , removeNodes
addNodes动态添加图层节点
removeNodes动态移除图层节点
getNodes获取当前的图层节点的集合
refreshLayer刷新一个图层内的数据, 一般图层的数据源为接口, 这时你可以动态传参数，那么图层里的数据就会被替换新的查询结果
setLayerData手动设置一个图层里的数据, 请一般用来设置临时图层的数据
clearLayer清除一个图层内的数据，慎用
getLayer获取某个图层
getLayers获取所有的图层
queryOverlayDetail查询一个图形的详细信息, 一般都是当你点击一个覆盖物后可能需要查询这个覆盖物的详细数据
spatialQuery空间查询，框选
spatialQueryDetail查询空间查询的详细数据情况
highLight高亮一个覆盖物，比如让一个点闪烁
clearHighLight清除高亮
queryNodes查询图层节点，模糊匹配
buffer缓冲区查询
on事件监听, 比如监听页面加载完事件, 监听图层加载完事件

所有方法列表 ​

TIP

凡是以 Async 结尾的方法，都是原有方法返回 Promise 的版本, 比如:

  • getPages getPagesAsync
  • switchPage switchPageAsync

getPages(callback) ​

  • 获取当前项目的所有页面的配置信息，一个项目了可能有多个页面都有地图，且他们都有自己的图层信息，该方法的结果集合一般用来缓存整个项目信息，切换页面的时候可以从里面拿取对应的页面信息
  • 参数
    • {Function} callback :
  • 返回值： this
js
this.layerControl.getPages((data) => {
    console.log(data);
});

getPagesAsync() ​

  • 获取当前项目的所有页面的配置信息，一个项目了可能有多个页面都有地图，且他们都有自己的图层信息，该方法的结果集合一般用来缓存整个项目信息，切换页面的时候可以从里面拿取对应的页面信息
  • 返回值： Promise
js
this.layerControl.getPages().then(data => {})

switchPage(pageId/page, callback, options={}) ​

  • 切换页面，地图上的底图和所有业务图层将被清除并替换为新的页面的数据

  • 参数

    • {String} pageId : 页面 Id
    • {Function} callback :
    • {Object} options : 附带的切换页面参数，可以不填写，里面的配置选项随着业务需要的添加会一直添加, 具体如下:
      参数默认值说明
      switchTileLayerstrue是否切换底图，否就是不会用新的页面底图替换上一个页面里的底图
      loadDefaultLayerstrue是否加载默认选中的图层
      clearSharedLayersfalse是否清除共享的图层节点

  • 返回值： this

TIP

  • 包含的步骤有：
  1. 获取当前页面的tilelayer(layerControl.getTileLayers),并切换tilelayer(底图)
  2. 获取当前页面的(layerControl.getPageLayers)业务图层(layers),并组装成树形结构(layerControl.formatLayerTreeNode)
  3. 设置当前页面的地图视野(map.setView())
  4. 获取当前页面默认选中的图层节点(layerControl.getCheckedNodes),并加到地图上(layerControl.setNodes)
js
var pages;
layerControl.getPages((data) => {
    //所有页面的数据
    pages = data;
    //切换到第一个页面
    this.layerControl.switchPage(pages[0], (layerNodeData, checkedNodes) => {
        this.layerNodeData = layerNodeData;
        //   layerNodeData //图层数据
        //   checkedNodes //当前页面默认选中的节点
    });
    // this.layerControl.switchPage(pages[2],(layerNodeData, checkedNodes) => {
    //   this.layerNodeData = layerNodeData;
    // //   layerNodeData //图层数据
    // //   checkedNodes //当前页面默认选中的节点
    // },
    // {
    //     switchTileLayers:false//不要切换底图
    //     loadDefaultLayers:false//不要加载默认选中的节点
    //     clearSharedLayers:true//切换页面时清除共享的节点
    // }
    // );
});

switchPageAsync(pageId/page, options={}) ​

  • 切换页面，地图上的底图和所有业务图层将被清除并替换为新的页面的数据

  • 参数

    • {String} pageId : 页面 Id
    • {Object} options : 附带的切换页面参数，可以不填写，里面的配置选项随着业务需要的添加会一直添加, 具体如下:
      参数默认值说明
      switchTileLayerstrue是否切换底图，否就是不会用新的页面底图替换上一个页面里的底图
      loadDefaultLayerstrue是否加载默认选中的图层
      clearSharedLayersfalse是否清除共享的图层节点

  • 返回值： Promise

syncLayerTree(callback) ​

  • 同步当前页面的图层结构，拿到数据后可以动态的赋值给图层组件，可以做到不刷新页面的情况下动态的更新图层结构树
  • 参数
    • {Function} callback :
  • 返回值： this
js
//
this.layerControl.syncLayerTree((layerNodeData, checkedNodes) => {
    //将新的的图层结构赋值给当前的图层（或者其他的组件）组件，这里业务我是把layerNodeData赋值给tree 组件的
    this.layerNodeData = layerNodeData;
    //   layerNodeData //图层数据
    //   checkedNodes //当前页面默认选中的节点
});

syncLayerTreeAsync() ​

  • 同步当前页面的图层结构，拿到数据后可以动态的赋值给图层组件，可以做到不刷新页面的情况下动态的更新图层结构树
  • 返回值： Promise

setNodes(nodes) ​

  • 设置当前选中的图层节点, 图层的选中和取消选中都是调用这个方法
  • 参数
    • {Array[Object]} nodes :
  • 返回值： this
js
this.layerControl.getPageLayers(pageId, (json) => {
    // 格式化整个树的数据结构
    this.layerNodeData = this.layerControl.fromatLayerTreeNode(json.data || []);
    const data = this.layerNodeData;
    if (!data || data.length === 0) {
        this.errorMessage("没有查到任何数据,至少有一个根节点");
        return;
    }
    const mapView = data[0].mapView;
    if (mapView) {
        map.setView(JSON.parse(mapView));
    }
    //获取默认选中的图层节点
    const checkedNodes = this.layerControl.getCheckedNodes(data);
    //设置选中的图层节点
    this.layerControl.setNodes(checkedNodes);
});

警告

setNodes 是全局替换, 比如当前图层树上有 10 个图层，你设置了 5 个节点，那么图层树就只有 5 个图层了，如果想要动态添加和移除图层，你需要使用 addNodes 和 removeNodes 方法

addNodes(nodes) ​

  • 动态添加选中节点，相对于 setNodes 的整体替换，这个更适用于动态选中, 假设当前选中 10 个节点, 你添加一个那就是 11 个节点被选中, 就不需要每次把默认选中的节点都带上去 setNodes
  • 参数
    • {Array[Object]} nodes :
  • 返回值： this
js
this.layerControl.getPageLayers(pageId, (json) => {
    // 格式化整个树的数据结构
    this.layerNodeData = this.layerControl.fromatLayerTreeNode(json.data || []);
    const data = this.layerNodeData;
    if (!data || data.length === 0) {
        this.errorMessage("没有查到任何数据,至少有一个根节点");
        return;
    }
    const mapView = data[0].mapView;
    if (mapView) {
        map.setView(JSON.parse(mapView));
    }
    //获取默认选中的图层节点，假设一共10个图层被默认选中
    const checkedNodes = this.layerControl.getCheckedNodes(data);
    //设置选中的图层节点
    this.layerControl.setNodes(checkedNodes);
    //node是你想添加到地图上的图层节点，那么这时地图上应该有11个图层节点
    this.layerControl.addNodes(node);
});

removeNodes(nodes) ​

  • 动态添加移除节点，相对于 setNodes 的整体替换，这个更适用于动态移除, 假设当前选中 10 个节点, 你移除一个那就是 9 个节点被选中
  • 参数
    • {Array[Object]} nodes :
  • 返回值： this
js
this.layerControl.getPageLayers(pageId, (json) => {
    // 格式化整个树的数据结构
    this.layerNodeData = this.layerControl.fromatLayerTreeNode(json.data || []);
    const data = this.layerNodeData;
    if (!data || data.length === 0) {
        this.errorMessage("没有查到任何数据,至少有一个根节点");
        return;
    }
    const mapView = data[0].mapView;
    if (mapView) {
        map.setView(JSON.parse(mapView));
    }
    //获取默认选中的图层节点，假设一共10个图层被默认选中
    const checkedNodes = this.layerControl.getCheckedNodes(data);
    //node是你想添加到地图上的图层节点，那么这时地图上应该有9个图层节点
    this.layerControl.removeNodes(node);
});

filterNodes(filterFunc) ​

  • 获取符合过滤条件的图层节点集合
  • 参数
    • {fucntion} filterFunc : 参考array.filter方法
  • 返回值： Array[Object]
js
const nodes = this.layerControl.filterNodes((node, config) => {
    //node 图层节点
    //config 图层配置项
    //返回支持框选的节点
    return config.spatialQuery;
    //获取开启了框选弹窗的图层(iframe)
    //  return config.spatialQueryPopup;
    //  //获取开启信息窗口的图层(地图自身的弹窗非业务的iframe)
    //  return config.infoWindow;
    //  //获取开启了弹窗的图层(iframe)
    //  return config.popup;
    //  //获取开启动画的节点
    //  return config.animationType;
    //  //获取动态图层
    //  return config.dynamic;
    //  //获取默认选中节点
    //  return config.checked;
    //  //获取热区图层
    //  return config.heat;
    //  //获取临时图层
    //  return config.isTempLayer;
    //..........任何符合你业务条件的判断语句
});

getNodes() ​

  • 获取当前图层节点集合
  • 参数
  • 返回值： Array[Object]
js
const nodes = this.layerControl.getNodes();

getAllNodes() ​

  • 获取当前页面里的所有图层节点集合, 注意这里的所有指的该页面的所有节点，包括没有加到地图上图层节点
  • 参数
  • 返回值： Array[Object]
js
const nodes = this.layerControl.getAllNodes();

getLayer(id/node) ​

  • 获取图层
  • 参数
    • {String} id : 节点 id/图层 id
  • 返回值： Layer
js
const layer = this.layerControl.getLayer('hello');
layer && layer.hide();

getLayers() ​

  • 获取图层当前图层树里的图层集合
  • 参数
  • 返回值： Array<Layer>
js
const layers = this.layerControl.getLayers();

refreshLayer(id, params, [customConfig]) ​

  • 动态刷新一个图层的数据，一般用于一个图层里的数据是动态参数的，这个图层的数据源有接口提供
  • 参数
    • {String} id : 节点 id/图层 id
    • {Object} params : 额外的参数，附加参数
    • {Object} customConfig : 自定义图层的配置信息, 如果有需要
  • 返回值： this
js
const nodes = layerControl.queryNodes("动态参数图层测试");
if (nodes.length) {
    layerControl.refreshLayer(nodes[0].id, {
        niandu: 2020,
    }, {
        textureUrl: '.......'
    });
}

clearSharedNodes(nodes) ​

  • 清除共享图层节点
  • 参数
    • {Array[Object]} nodes : 不填就是清除所有共享节点
  • 返回值： this
js
layerControl.clearSharedNodes(layerControl.sharedNodes);

queryOverlayDetail(overlay, callback) ​

  • 查询一个覆盖物的详细数据，经济数据等其他的一些复杂的数据
  • 参数
    • {YY. Overlay} overlay : 地图上点击的 点, 线，面
    • {Funtion} callback :
  • 返回值： this
js
this.layerControl.queryOverlayDetail(e.target, (data) => {
    data = data[0];
    if (!data) {
        return;
    }
    const info = data.details[0];
    if (!info) {
        this.message(
            "没有查到信息,是不是忘记配置SQL了？或者数据是从接口里抓取的？"
        );
        return;
    }
});

queryOverlayDetailAsync(overlay) ​

  • 查询一个覆盖物的详细数据，经济数据等其他的一些复杂的数据
  • 参数
    • {YY. Overlay} overlay : 地图上点击的 点, 线，面
  • 返回值： Promise

spatialQuery(overlay) ​

  • 空间查询，与圈选的图形相交的图形的集合
  • 参数
    • {YY. Overlay} overlay : 面，圆，空间查询一般都是面或者圆
  • 返回值： Array[Object]
js
//绘制工具
drawTool = new YY.DrawTool(map, function(e) {
    const overlay = e.geometry;
    layer.addOverlay(overlay);
    drawTool.deactivate();
    //用绘制的图形去查询结果
    const result = vm.layerControl.spatialQuery(overlay);
    if (result.length === 0) {
        vm.message("没有查到数据");
        return;
    }
    // result.forEach(f => {
    //     const overlays = f.overlays.map(o => {
    //         o = o.clone();
    //         if (o.getType().includes('Point')) {
    //             o.setStyle(imageStyle)
    //         }
    //         if (o.getType().includes('Polygon')) {
    //             o.setStyle(YY.Style.formatFill({ polygonFill: 'black', lineColor: 'yellow', lineDasharray: [3, 3] }));
    //         }
    //         return o;
    //     });
    //     layer.addOverlay(overlays);
    // });
    // vm.layerControl.spatialQueryDetail(result, (data) => {
    //     vm.dialogVisible1 = true;
    //     vm.spatialQueryInfo = data.map(d => {
    //         const layer = d.layer;
    //         const details = d.details;
    //         const list = [];
    //         details.forEach(element => {
    //             const keys = Object.keys(element);
    //             const properties = keys.map(key => {
    //                 return {
    //                     key,
    //                     value: element[key]
    //                 };
    //             })
    //             element.properties = properties;
    //             list.push(element);
    //         });
    //         return { layer, details: list };
    //     })
    // });
});

spatialQueryDetail(result, callback) ​

  • 查询空间查询结果图形集合的详情数据，一般都是经济数据
  • 参数
    • {Array[Object]} result : spatialQuery 方法的结果集
    • {Function} callback :
  • 返回值： this
js
//绘制工具
drawTool = new YY.DrawTool(map, function(e) {
    const overlay = e.geometry;
    layer.addOverlay(overlay);
    drawTool.deactivate();
    //用绘制的图形去查询结果
    const result = vm.layerControl.spatialQuery(overlay);
    if (result.length === 0) {
        vm.message("没有查到数据");
        return;
    }
    vm.layerControl.spatialQueryDetail(result, (data) => {
        vm.dialogVisible1 = true;
        // vm.spatialQueryInfo = data.map(d => {
        //     const layer = d.layer;
        //     const details = d.details;
        //     const list = [];
        //     details.forEach(element => {
        //         const keys = Object.keys(element);
        //         const properties = keys.map(key => {
        //             return {
        //                 key,
        //                 value: element[key]
        //             };
        //         })
        //         element.properties = properties;
        //         list.push(element);
        //     });
        //     return { layer, details: list };
        // })
    });
});

spatialQueryDetailAsync(result) ​

  • 查询空间查询结果图形集合的详情数据，一般都是经济数据
  • 参数
    • {Array[Object]} result : spatialQuery 方法的结果集
  • 返回值： Promise

pgSpatialQuery(options, callback) ​

  • postgis 的空间查询，postgis 的查询操作有地图管理平台自动代理
  • 参数

    • {object} options :

      • {YY.Circle|YY.Polygon} overlay : 面，圆，空间查询一般都是面或者圆
      • {Array} tableNames : postgis 的表名数组
      • {String} pgName : postgis 数据库的别名，改名字是在管理平台里配置的（serverconfig.js 里），不传将采用默认值
      • {Function} transform : 坐标转换反转方法，例如：当前地图页面是高德坐标的，但是 postgis 库里存的 wgs84 的，这时就需要传递 YY.GH.transformAmapToWGS84

    • {Function} callback :

  • 返回值： this
js
//example 1
const tables = [{
        tableName: "wujiangplaces", //吴江地名表
        layerId: "0600AFC9-1820-47E9-A754-DA6B639F63B1",
    },
    {
        tableName: "wujiangroads", //吴江道路表
        layerId: "5369D7EA-F5FC-4B82-AA13-4B083816EC03",
    },
    {
        tableName: "wujianggrid", //吴江网格表
        layerId: "DC92DB2B-2F9C-4530-AFEB-CEEE881ACE3D",
    },
];
const tableNames = tables.map((table) => {
    return table.tableName;
});
const findLayerId = (tableName) => {
    const d = tables.filter((table) => {
        return table.tableName === tableName;
    })[0];
    return d ? d.layerId : null;
};
//绘制工具
drawTool = new YY.DrawTool(map, function(e) {
    const overlay = e.geometry;
    layer.addOverlay(overlay);
    drawTool.deactivate();
    //用绘制的图形去查询结果
    layerControl.pgSpatialQuery({
            overlay,
            //查询三张表的数据集合
            tableNames,
            pgName: "", //数据库采用默认值
            transform: YY.GH.transformAmapToWGS84, //将绘制的图形的高德坐标转成wgs84去数据库里查询
        },
        (result) => {
            result.forEach((r) => {
                const {
                    tableName,
                    GeoJSON
                } = r;
                //查找临时图层
                const layerId = findLayerId(tableName);
                if (layerId && GeoJSON) {
                    //将查询的结果设置到临时图层里
                    this.layerControl.setLayerData(layerId, GeoJSON);
                }
            });
        }
    );
});
//example 2
//自己手动new 的覆盖物去查询
const overlay = new YY.Circle(lnglat, 1000);
// or
//  const overlay=new YY.Polygon(lnglats);
layerControl.pgSpatialQuery({
        overlay,
        //查询三张表的数据集合
        tableNames,
        pgName: "", //数据库采用默认值
        transform: YY.GH.transformAmapToWGS84, //将绘制的图形的高德坐标转成wgs84去数据库里查询
    },
    (result) => {
        result.forEach((r) => {
            const {
                tableName,
                GeoJSON
            } = r;
            //查找临时图层
            const layerId = findLayerId(tableName);
            if (layerId && GeoJSON) {
                //将查询的结果设置到临时图层里
                this.layerControl.setLayerData(layerId, GeoJSON);
            }
        });
    }
);

pgSpatialQueryAsync(options) ​

  • postgis 的空间查询，postgis 的查询操作有地图管理平台自动代理
  • 参数

    • {object} options :

      • {YY.Circle|YY.Polygon} overlay : 面，圆，空间查询一般都是面或者圆
      • {Array} tableNames : postgis 的表名数组
      • {String} pgName : postgis 数据库的别名，改名字是在管理平台里配置的（serverconfig.js 里），不传将采用默认值
      • {Function} transform : 坐标转换反转方法，例如：当前地图页面是高德坐标的，但是 postgis 库里存的 wgs84 的，这时就需要传递 YY.GH.transformAmapToWGS84

    • {Function} callback :

  • 返回值： Promise

keyWordQuery(pageId, keywords, callback) ​

  • 关键词查询，对整个图层里的数据进行模糊匹配
  • 参数
    • {String} pageId : 页面 id
    • {String} keywords : 关键字
    • {Function} callback :
  • 返回值： this

警告

  • 如果图层配置了SQL LIKE语句将执行改语句
  • 如果图层没有配置 SQL LIKE语句或者SQL LIKE查询的结果为空，将从图层的数据表里查数据(tuceng-details表)
  • 如果以上两种情况下找不到数据, 且前端已经加载了改图层数据，将自动用前端缓存的数据进行查询
  • 以上情况都没有数据的话，那就是找不到数据了
js
if (!this.keywords.length) {
    this.message("输入你想搜索的内容");
    return;
}
this.layerControl.keyWordQuery(pageId, this.keywords, (data) => {
    this.keywordsResult = data.filter((d) => {
        return d.details.length > 0;
    });
    if (this.keywordsResult.length === 0) {
        this.message("没有查到数据");
    }
});

keyWordQueryAsync(pageId, keywords) ​

  • 关键词查询，对整个图层里的数据进行模糊匹配
  • 参数
    • {String} pageId : 页面 id
    • {String} keywords : 关键字
  • 返回值： Promise

getOverlay(layerNode, d) ​

  • 获取一条数据的图形覆盖物，一般用在搜索后点击某一条信息，用来定位地图
  • 参数
    • {Object} layerNode : 图层的节点信息, 就是图层树的节点数据
    • {Object} d : 图形的数据节点，一般是从后台查询出来的一条数据
  • 返回值： YY.Overlay
js
const overlay = this.layerControl.getOverlay(layerNode, d);
if (overlay) {
    if (overlay.getType().indexOf("Point") > -1) {
        map.setCenter(overlay.getCenter()).setZoom(18);
    } else {
        map.fitExtent(overlay.getBounds());
    }
}

refresh() ​

  • 刷新整个图层组件
  • 参数
  • 返回值： this
js
this.layerControl.refresh();

clear() ​

  • 清空整个图层组件
  • 参数
  • 返回值： this
js
this.layerControl.clear();

highLight(data) ​

  • 高亮一个覆盖物，一般用于搜索的结果进行高亮显示
  • 参数
    • {Object} data : 为从后台的查询出来的一条数据记录
  • 返回值： this
js
         //d 一般为从后台查出来的某一个数据
         const d = {
             id: 'xxxxx',
             lnglats: 'xxxxxxx',
             ........
         };
         this.layerControl.highLight(d);

clearHighLight(data) ​

  • 清除一个高亮覆盖物，一般用于搜索的结果进行清除高亮显示
  • 参数
    • {Object} data : 为从后台的查询出来的一条数据记录
  • 返回值： this
js
         //d 一般为从后台查出来的某一个数据
         const d = {
             id: 'xxxxx',
             lnglats: 'xxxxxxx',
             ........
         };
         this.layerControl.clearHighLight(d);

selectOverlay(data, isHide=false) ​

  • 动态添加和选中一个覆盖物，一般用于业务里的数据动态选中
  • 参数
    • {Object} data : 为从后台的查询出来的一条数据记录
    • {Boolean} isHide : 是否隐藏，如果想隐藏一个覆盖物
  • 返回值： Overlay
js
//d 一般为从后台查出来的某一个数据
const overlay = this.layerControl.selectOverlay(d);
if (overlay) {
    map.lookAt(overlay);
}

queryNodes(businessCode/name/id, [nodes]) ​

  • 模糊匹配节点，注意节点必须在当前地图上，否则查不到的
  • 参数
    • {String} businessCode/name/id : 节点业务码/节点名字/id
    • {Array} nodes : 节点集合，一般不用配置，查询时是自动使用内部的节点集合
  • 返回值： Array[Object]
js
const nodes = layerControl.queryNodes("动态参数图层测试");

getLayerData(businessCode/name/id, callback, [params]) ​

  • 获取一个图层的 geojson 数据, 这个图层即使没有加到地图也是可以的，获取这个图层的数据就可以去进行其他的操作了，比如用来生成 3d 的图层
  • 参数
    • {String} businessCode/name/id : 节点业务码/节点名字/节点 id, 建议传业务码
    • {Function} callback : 回调函数
    • {Object} params : 额外的参数，附加参数
  • 返回值： this
js
layerControl.getLayerData("吴江镇区", (geojson) => {
    console.log(geojson);
});

getLayerDataAsync(businessCode/name/id, [params]) ​

  • 获取一个图层的 geojson 数据, 这个图层即使没有加到地图也是可以的，获取这个图层的数据就可以去进行其他的操作了，比如用来生成 3d 的图层
  • 参数
    • {String} businessCode/name/id : 节点业务码/节点名字/节点 id, 建议传业务码
    • {Object} params : 额外的参数，附加参数
  • 返回值： Promise

setLayerData(id/node, data, [customConfig], [callback]) ​

  • 设置一个图层里的数据，一般用来存放临时的业务的数据，比如警情附近的资源（监控，水源，消防，医院，等一系列资源）, 如果有多个资源就配置多个图层
  • 参数
    • {String} id/node : 图层 id 或者图层节点
    • {Array|GeoJSON} data : 数据，一般为从后台查询的数据，支持普通的数组格式或者 geojson
    • {Object} customConfig : 自定义图层配置信息
    • {Function} callback : 回调函数
  • 返回值： this
js
queryData("/querydata/", (data) => {
    //多种资源图层，循环设置
    data.foreEach((d) => {
        const {
            id,
            data
        } = d;
        this.layerControl.setLayerData(id, data, {
            textureUrl: '.....'
        }, () => {});
    });
});

setLayerDataAsync(id/node, data, [customConfig]) ​

  • 设置一个图层里的数据，一般用来存放临时的业务的数据，比如警情附近的资源（监控，水源，消防，医院，等一系列资源）, 如果有多个资源就配置多个图层

  • 参数

    • {String} id/node : 图层 id 或者图层节点
    • {Array|GeoJSON} data : 数据，一般为从后台查询的数据，支持普通的数组格式或者 geojson
    • {Function} callback : 自定义图层配置信息

  • 返回值： Promise

clearLayer(id/node) ​

  • 清除一个图层的数据, 慎用
  • 参数
    • {String} id/node : 图层 id 或者图层节点
  • 返回值： this
js
this.layerControl.clearLayer("xxxxx");

clearTempLayers() ​

  • 清空所有的临时图层，比如一下子清空所有的空间查询的临时图层
  • 参数
  • 返回值： this
js
this.layerControl.clearTempLayers();

getReverseLngLatTransform(node) ​

  • 获取一个节点的反向转换坐标，一般和 transform 方法配合使用(因为原始的数据坐标可能和当前平台的坐标不同，必须用反转后的坐标回溯回去，保证下次查出来的数据还是原始坐标)
  • 参数
    • {Object} node : 图层节点数据
  • 返回值： Function 坐标转换函数, 注意返回值可能为 null

getDataSourceTable(node) ​

  • 返回一个图层节点的数据源表名，即这个图层对应哪个数据库表，一般用在绘制数据然后保存的场景中
  • 参数
    • {Object} node : 图层节点数据
  • 返回值： String 表名, 注意返回的值可能为 null

getLayerExpandAttributes(node) ​

  • 返回一个图层节点的额外标注字段
  • 参数
    • {Object} node : 图层节点数据
  • 返回值： Object 额外字段的对象集合

transform(overlays, transformMethod) ​

  • 对覆盖物进行坐标转换，一般用于数据生产平台，数据编辑和绘制页面，为了保证数据的一致性(比如吴江的系统数据库存放的坐标系统用的是百度的，如果有一个绘制的页面地图用的是高德，如果把绘制的数据直接保存到后台，就会导致数据里既有百度，又有高德的数据，会引起数据的混乱，这时在保存数据时，我们可以将高德的数据转换成百度发送到后台保存)
  • 参数
    • {Overlay[]} overlays : 覆盖物，支持一个或者数组集合
    • {Function} transformMethod : 坐标转换方法
  • 返回值： Overlay[] 注意返回的是新的 overlay，和原来的 overlay 无关，但是会携带原有的 overlays 的 properties 信息
js
//    function saveLayerData(tableName,data){
//         //    .......
//     }
//假设后台系统里存的是百度的坐标数据，但是当前的数据绘制页面却用的是高德的地图
//查询地块的图层节点，3911B7DB-E0BE-40C5-8EAA-27F9088BA385 是地块的图层节点id
const node = layerControl.queryNodes("3911B7DB-E0BE-40C5-8EAA-27F9088BA385")[0];
//获取反向坐标转换方法
const transform = this.layerControl.getReverseLngLatTransform(node);
//transform is YY.CT.transformAmapToBaidu,将当前的高德坐标在转化成百度的数据发送到后台
console.log(transform);
//test 1 绘制地块的数据进行转换
drawTool = new YY.DrawTool(map, function(e) {
    //overlay 坐标数据是高德的
    const overlay = e.geometry;
    layer.addOverlay(overlay);
    //newOverlay 坐标数据已经是百度的了，这时我们可以将这个newOverlay的数据保存到后台，就和后台原有的数据坐标系统保证一致性了
    const newOverlay = layerControl.transform(overlay, transform);
    //有了表名，就可以知道将这条数据保存对应到那张表了
    const tableName = layerControl.getDataSourceTable(node);
    //将newOverlay序列化成扁平结构，即关系数据库结构，这个数据可以直接存数据库的
    //  console.log(newOverlay.serialize());
    const data = newOverlay.serialize();
    // saveLayerData(tableName,data);
});
//test 2 将一个图层里的所有覆盖物都转换成百度坐标
const newOverlays = layerControl.transform(layer.getOverlays(), transform);

filterOverlay(d, isAll=false) ​

  • 对一个图层上的数据进行过滤筛选，只显示一个，其他的隐藏，如果 isAll, 即表示显示全部数据，即返回原始状态
  • 参数
    • {String} d : 数据 id/数据名字
    • {Boolean} isAll : 是否显示全部
  • 返回值： this
js
layerControl.filterOverlay("2c90a6297b2ea68e017b2eebdaec0110");
layerControl.filterOverlay("2c90a6297b2ea68e017b2eebdaec0110", true);
layerControl.filterOverlay({
    id: "2c90a6297b2ea68e017b2eebdaec0110",
});
layerControl.filterOverlay("太湖新城");
layerControl.filterOverlay({
    name: "太湖新城",
});

buffer(overlay, params={}, callback) ​

  • 缓冲区查询，比如查询一条河两旁 500 米的企业等
  • 参数

    • {YY. Overlay} overlay : 覆盖物，点/线/面

    • {object} params : 查询参数

      • {number} distance : 缓冲距离，单位米
      • {Array} layers : 想要查询的图层集合，比如企业的图层，支持业务码/图层 id/图层名字，建议传业务码
      • {boolean} isSubtraction : 是否查找差集，意思是只查找相对于原图形缓冲区间的数据，排除和原图形相交的数据，默认 false

    • {function} callback : 回调函数

  • 返回值： this
js
//点击事件
//如果是水的图层
if (e.target.parent.id === "id-8A5DCD33-9564-4803-A5C1-587267836454") {
    console.log(e);
    this.layerControl.buffer(
        e.target, {
            distance: 500,
            isSubtraction: true,
            //查找企业的图层的数据，即查找沿着这条河两岸500的企业
            layers: ["id-8202117D-F937-473E-978B-1B7D6EF83DE5"],
        },
        (result) => {
            layer.clear();
            //缓冲后的图形
            result.overlay.setStyle(YY.Style.formatFill());
            layer.addOverlay(result.overlay);
            //被查询的图层的结果集
            result.layers.forEach((l) => {
                // l.overlays.forEach(element => {
                //     element.setStyle(YY.Style.formatImage());
                // });
                // layer.addOverlay(l.overlays);
            });
        }
    );
}

bufferAsync(overlay, params={}) ​

  • 缓冲区查询，比如查询一条河两旁 500 米的企业等

  • 参数

    • {YY. Overlay} overlay : 覆盖物，点/线/面

    • {object} params : 查询参数

      • {number} distance : 缓冲距离，单位米
      • {Array} layers : 想要查询的图层集合，比如企业的图层，支持业务码/图层 id/图层名字，建议传业务码
      • {boolean} isSubtraction : 是否查找差集，意思是只查找相对于原图形缓冲区间的数据，排除和原图形相交的数据，默认 false

  • 返回值： Promise

bufferQueryAsync(data/geojson, options={}) ​

  • 缓冲区查询，查询满足一定面积的区域集合(拆迁等业务)

  • 参数

    • {Array[Object]} data : 需要分析的数据集, 可以是geojson或者业务关系数据库的数据集

    • {object} options : 查询参数

      • {number} bufferDistance : 缓冲距离，单位米,表示误差多少米，表示两个地块是邻近的,因为一般地块是不相邻的,buffer这个值，表示这个误差范围内认为两个地块是相邻的
      • {number} minArea : 最小面积,单位平方米,地块分组的集合的总面积必须大于这个值才能成为拆迁方案,例如你参数是100,那么只有地块分组的总面积大于等于100才会被输出,如果业务是亩,请自行换算

  • 返回值： Promise

js
//数据集来自业务,可以前段筛选，后端SQL筛选等,总之参数计算的数据集合是你经过业务处理的
//bufferQueryAsync 里不参与任何业务的处理，一个纯地理数据处理方法
const data = [{
        lnglats: '120,31;122,32;....';
    },
    // ....
];
//查询满足100亩的拆迁方案集合,返回的是多个方案
this.layerControl.bufferQueryAsync(data, {
    bufferDistance: 20,
    minArea: 100 * 666.6667 //100亩
}).then(result => {
    console.log(result);
    //result是个Array<Object>,object包含area,data字段，
    //area面积
    //data业务数据，就是你传入的数据结构
    // {
    //     area:1000,
    //     data:[....]
    // }
}).catch(error => {
    console.error(error);
})

layerLinkLayer(id/node, id/node, callback) ​

  • 将图层 A 和图层 B 建立关联，判断依据是两个图层是否相交（一般用在地块数据的关联，比如工业地块和资规地块图层进行关联）, 该方法会非常耗时，已经放在 worker 里执行了，所以不会卡主线程的，需要业务做好相关交互体验（loading）
  • 参数
    • {string/object} id/node : 图层 A 的 id 或者图层节点
    • {string/object} id/node : 图层 B 的 id 或者图层节点
    • {function} callback : 回调函数
  • 返回值： this
js
//工业地块图层id,资规图层id
const ids = [
    "B6885195-BBB5-414B-A99A-6CECAD1078B8", //工业地块图层id
    "781AAEA1-B264-4EA1-A9DE-F80A92DE153F", //资规图层id
];
//将工业地块图层和资规地块图层建立关联，如果想求相反结果应该将id颠倒(即图层B关联图层A)
this.layerControl.layerLinkLayer(ids[0], ids[1], (data) => {
    //data is geojson
    console.log(data);
    data.features.forEach((feature) => {
        //linkIds 是 图层B（资规图层)里数据id的集合，即一个A图层的一条数据(工业地块)可能和多个资规地块关联上
        if (feature.properties.linkIds.length > 0) {
            //可以根据 properties里的id和linkIds来更新数据对应的表里的数据的（A图层，即工业地块的数据）
            console.log(feature);
        }
    });
    //将结果放到临时的图层，用来查看
    // this.layerControl.setLayerData('0F481EBF-C620-4D10-A163-20E2DC4FBA82', data);
});

layerLinkLayerAsync(id/node, id/node) ​

  • 将图层 A 和图层 B 建立关联，判断依据是两个图层是否相交（一般用在地块数据的关联，比如工业地块和资规地块图层进行关联）, 该方法会非常耗时，已经放在 worker 里执行了，所以不会卡主线程的，需要业务做好相关交互体验（loading）
  • 参数
    • {string/object} id/node : 图层 A 的 id 或者图层节点
    • {string/object} id/node : 图层 B 的 id 或者图层节点
  • 返回值： Promise

layerIntersectionLayer(id/node, id/node, callback) ​

  • 求图层 A 和图层 B 的交集（Intersection），（一般用在地块数据，比如工业地块和资规地块图层他们的交集）, 该方法会非常耗时，已经放在 worker 里执行了，所以不会卡主线程的，需要业务做好相关交互体验（loading）
  • 参数
    • {string/object} id/node : 图层 A 的 id 或者图层节点
    • {string/object} id/node : 图层 B 的 id 或者图层节点
    • {function} callback : 回调函数
  • 返回值： this
js
//工业地块图层id,资规图层id
const ids = [
    "B6885195-BBB5-414B-A99A-6CECAD1078B8", //工业地块图层id
    "781AAEA1-B264-4EA1-A9DE-F80A92DE153F", //资规图层id
];
this.layerControl.layerIntersectionLayer(ids[0], ids[1], (data) => {
    //data is geojson
    console.log(data);
    data.features.forEach((feature) => {
        //这是一个新的图层数据，是图层A和图层B的交集,数据里只有两个图层数据的id
        if (feature.properties) {
            //layer1Id 表示图层A（工业地块图层）对应数据的id
            //layer2Id 表示图层B（资规地块图层）对应数据的id
            const {
                layer1Id,
                layer2Id
            } = feature.properties;
        }
    });
    //将结果放到临时的图层，用来查看
    // this.layerControl.setLayerData('0F481EBF-C620-4D10-A163-20E2DC4FBA82', data);
    //将geojson反序列化成覆盖物
    const overlays = YY.GeoJSON.toGeometry(data);
    overlays.forEach((overlay) => {
        //序列化覆盖物，可以将这个结果存数据库
        console.log(overlay.serialize());
    });
});

layerIntersectionLayerAsync(id/node, id/node) ​

  • 求图层 A 和图层 B 的交集（Intersection），（一般用在地块数据，比如工业地块和资规地块图层他们的交集）, 该方法会非常耗时，已经放在 worker 里执行了，所以不会卡主线程的，需要业务做好相关交互体验（loading）
  • 参数
    • {string/object} id/node : 图层 A 的 id 或者图层节点
    • {string/object} id/node : 图层 B 的 id 或者图层节点
  • 返回值： Promise

layerDifferenceLayer(id/node, id/node, callback) ​

  • 求图层 A 相对于图层 B 的不同点（Difference），（一般用在地块数据，比如工业地块和资规地块图层）, 该方法会非常耗时，已经放在 worker 里执行了，所以不会卡主线程的，需要业务做好相关交互体验（loading）
  • 参数
    • {string/object} id/node : 图层 A 的 id 或者图层节点
    • {string/object} id/node : 图层 B 的 id 或者图层节点
    • {function} callback : 回调函数
  • 返回值： this
js
//工业地块图层id,资规图层id
const ids = [
    "B6885195-BBB5-414B-A99A-6CECAD1078B8", //工业地块图层id
    "781AAEA1-B264-4EA1-A9DE-F80A92DE153F", //资规图层id
];
//工业地块图层相对于资规地块不同的地方，如果想求相反结果应该将id颠倒（即资规地块相对于工业地块不同的地方）
this.layerControl.layerDifferenceLayer(ids[0], ids[1], (data) => {
    //data is geojson
    console.log(data);
    data.features.forEach((feature) => {
        //这是一个新的图层数据，是图层A相对于图层B的不同部分，数据里只有两个图层数据的id
        if (feature.properties) {
            //layer1Id 表示图层A（工业地块图层）对应数据的id
            //layer2Id 表示图层B（资规地块图层）对应数据的id
            const {
                layer1Id,
                layer2Id
            } = feature.properties;
        }
    });
    //将结果放到临时的图层，用来查看
    // this.layerControl.setLayerData('0F481EBF-C620-4D10-A163-20E2DC4FBA82', data);
    //将geojson反序列化成覆盖物
    const overlays = YY.GeoJSON.toGeometry(data);
    overlays.forEach((overlay) => {
        //序列化覆盖物，可以将这个结果存数据库
        console.log(overlay.serialize());
    });
});

layerDifferenceLayerAsync(id/node, id/node) ​

  • 求图层 A 相对于图层 B 的不同点（Difference），（一般用在地块数据，比如工业地块和资规地块图层）, 该方法会非常耗时，已经放在 worker 里执行了，所以不会卡主线程的，需要业务做好相关交互体验（loading）
  • 参数
    • {string/object} id/node : 图层 A 的 id 或者图层节点
    • {string/object} id/node : 图层 B 的 id 或者图层节点
  • 返回值： Promise

layerSelfIntersect(id/node, callback) ​

  • 求单一图层里数据相交的数据，比如地块图层里和当前地块相交的其他的地块，主要用来处理单个图层数据有压盖的问题
  • 参数
    • {string/object} id/node : 图层的 id 或者图层节点
    • {function} callback : 回调函数
  • 返回值： this
js
//工业地块图层id
const ids = [
    "B6885195-BBB5-414B-A99A-6CECAD1078B8", //工业地块图层id
];
this.layerControl.layerSelfIntersect(ids[0], (data) => {
    //data is geojson
    console.log(data);
    //将结果放到临时的图层，用来查看
    // this.layerControl.setLayerData('0F481EBF-C620-4D10-A163-20E2DC4FBA82', data);
    //将geojson反序列化成覆盖物
    const overlays = YY.GeoJSON.toGeometry(data);
    overlays.forEach((overlay) => {
        //序列化覆盖物，可以将这个结果存数据库
        console.log(overlay.serialize());
    });
});

layerSelfIntersectAsync(id/node) ​

  • 求单一图层里数据相交的数据，比如地块图层里和当前地块相交的其他的地块，主要用来处理单个图层数据有压盖的问题
  • 参数
    • {string/object} id/node : 图层的 id 或者图层节点
  • 返回值： Promise

savePage(data, callback) ​

  • 保存一个页面的图层配置信息到管理平台, 一般用于动态生成一个页面的图层结构, 比如：任意两个地块图层的对比结果展示
  • 参数
    • {Object} data : 图层结构树，具体结果见下面的例子
    • {Function} callback :
  • 返回值： this
js
 // 模拟配置的tags图层
 const getTags = (layer1id, layer2id, difftype) => { // difftype 比对关系
     // 真实的值应该有接口查出来的值，这里模拟在每个分类下动态生成图层，这里模拟每个对比方案下有这么多图层
     const names = ['水系', '桥梁', '绿地', '测试量不准', '未知原因'].map((d, index) => {
         return {
             id: index, // 模拟tag的id,
             name: d
         };
     });
     return names.map(d => {
         return {
             name: d.name, // 图层的名字
             type: 'Polygon', // 图层类别
             // 接口地址，填写真实的值，这个接口支持params layer1id,layer2id,difftype,tagid
             //动态生成每个图层的接口地址，layer1id,layer2id,difftype三个参数可以确定这个图层来自哪个对比方案，加上tagid就可以对这个对比方案分类了
             apiUrl: `http://localhost/test?layer1id=${layer1id}&layer2id=${layer2id}&&difftype=${difftype}&tagid=${d.id}`,
             //如果需要图标
             icon: 'https://img.zcool.cn/community/01531d55f837096ac7251df855748e.jpg@1280w_1l_2o_100sh.jpg'
         };
     });
 };
 // 两个图层的id,就是选中的两个图层的id,比如集约地块图层,资规地块图层
 const layerIds = ['5C60FF79-64F1-4FE8-9E3C-CEBA0F6928D9', '073EE688-0687-4A62-AA08-30AA3E529B6B'];
 const data = {
     id: YY.H.uuid(), // 方案id,页面id
     name: '地块对比结果结果展示页面(测试胡德义)', // 总方案名称，页面名称
     children: [ //页面下面的子节点
         {
             name: '集约-资规-link', // link对比方案名称
             //如果需要图标
             icon: 'https://img.zcool.cn/community/01531d55f837096ac7251df855748e.jpg@1280w_1l_2o_100sh.jpg'
             children: getTags(layerIds[0], layerIds[1], 'link') //每个方案下面的子图层
         },
         {
             name: '资规-集约-link', //link 对比方案名称
             children: getTags(layerIds[1], layerIds[0], 'link')
         },
         {
             name: '集约-资规-diff', // difference对比方案名称
             children: getTags(layerIds[0], layerIds[1], 'difference')
         },
         {
             name: '资规-集约-diff', // difference对比方案名称
             children: getTags(layerIds[1], layerIds[0], 'difference')
         },
         {
             name: '集约-资规-ins', // intersection对比方案名称
             children: getTags(layerIds[0], layerIds[1], 'intersection')
         }
     ]
 };
 this.layerControl.savePage(data, (res) => {
     console.log(res);
 });

savePageAsync(data) ​

  • 保存一个页面的图层配置信息到管理平台, 一般用于动态生成一个页面的图层结构, 比如：任意两个地块图层的对比结果展示
  • 参数
    • {Object} data : 图层结构树，具体结果见下面的例子
  • 返回值： Promise

on(eventType, callback) ​

  • 监听事件
  • 参数
    • {string} eventType : 事件名字
    • {function} callback : 回调函数
  • 返回值： this
js
//监听图层加载完成事件
this.layerControl.on("layerload", this.layerLoad);
//更新图层的label标注,把数据量也带上去
function updateLayerNodeLabel(id, label) {
    const loop = (node) => {
        if (node.children && node.children.length) {
            node.children.forEach((child) => {
                loop(child);
            });
        }
        if (node.id === id) {
            node.label = label;
        }
    };
    this.layerNodeData.forEach((node) => {
        loop(node);
    });
}
//监听图层数据量统计事件
this.layerControl.on("layercount", (e) => {
    const {
        count,
        node
    } = e;
    const label = `${node.name}(${count})`;
    updateLayerNodeLabel(node.id, label);
});

once(eventType, callback) ​

  • 监听事件, 只有第一次触发，只触发一次
  • 参数
    • {string} eventType : 事件名字
    • {function} callback : 回调函数
  • 返回值： this
js
this.layerControl.once("layerload", this.layerLoad);

off(eventType, callback) ​

  • 移除事件监听
  • 参数
    • {string} eventType : 事件名字
    • {function} callback : 回调函数
  • 返回值： this
js
this.layerControl.off("layerload", this.layerLoad);

openMapBearing(options) ​

  • 开启地图旋转动画
  • 参数
    • {Object} options : 配置选项，可选参数
    • {number} options.bearingOffset : 旋转速度, 支持正数和负数, 其值绝对值不超过1, 否则地图会旋转的很快, 如果不传内部将采用默认的值0.06
  • 返回值： this
js
layerControl.openMapBearing();
layerControl.openMapBearing({
    bearingOffset: 0.1
});
layerControl.openMapBearing({
    bearingOffset: -0.1
});

closeMapBearing() ​

  • 关闭地图旋转动画
  • 参数
  • 返回值： this
js
  layerControl.closeMapBearing();

isMapBearing() ​

  • 地图是否正在旋转动画
  • 参数
  • 返回值： boolean
js
  const isBearing = layerControl.isMapBearing();
  if (isBearing) {
      layerControl.openMapBearing({
          bearingOffset: -0.1
      });
  } else {
      layerControl.closeMapBearing();
  }

closeDialog(node) ​

  • 关闭弹窗
  • 参数 node, 图层节点
  • 返回值： this
js
//node 图层节点,支持批量关闭，传nodes即可
layerControl.closeDialog(node)

This document is generated by vitepress and Edit by deyihu

Email:mehudeyi@163.com