常用工具介绍

目录

• 地图图形工具 gisTools
  • geoMessage
  • mapTools
  • XmlToJson
  • baseTools
  • GeoUtil
  • coord
  • GeoFormatter
• 非图形工具 generaTools
• 可视化工具 geoDesign
  • helpClass
  • geo$
  • excelClass

gisTools

地图 GIS 常用工具对象及方法。

2021-12-19

Added

• 1. 新增 gisTools.GeoTurf: GeoTurf.measurement.centerOfMass(取多边形质心), GeoTurf.classification.nearestPoint(从点集合中取与参考点最接近的一个点).

 GeoTurf.measurement.centerOfMass
 参数：
 geojson {object|array}  
 properties {object}  
 GeoTurf.classification.nearestPoint
 参数：
 targetPoint {Array}  
 points {FeatureCollection <Point> || Array}  

geoMessage

打印消息工具

• 打印内容

    GeoMessage.info(msg)
    //打印内容
    info: function (msg) {
            console.log("%c[info]" + msg + " time: " + getNowFormatDate(), "color: #00f"); // 蓝色
    }

• 打印问题

    GeoMessage.warn(msg)
    //打印问题
    warn: function (msg) {
        console.log("%c[Warn]" + msg, "color: #f98b02"); // 橙色
    }

• 打印错误 ··· GeoMessage.error(msg)

    //打印错误
    error: function (msg) {
        console.log("%c[error]" + msg, "color: #f00"); // 红色
    }

• 打印日志

    GeoMessage.log(msg)
    //打印日志
    log: function (msg) {
        console.log("%c[Logs]", "color: #333; font-weight: bold;", msg + " time: " + getNowFormatDate());
    }

• 引用欢迎语

GeoMessage.welcome(msg);

mapTools

• multipoint > 计算几何中心点

  ```js
  // 调用
  let {point} = mapTools.getCenterOfMultipoint(multipoint)
  
  // 实现

  /**

• 计算 multipoint 的几何中心点

• @param {[multipoint]} geo [几何图形]

• @return {[point]} [description] */ mapTools.getCenterOfMultipoint = function (multipoint) { var points = multipoint.points; var pointsJson = array.map(points, function (point, idx) { return { x: point[0], y: point[1] }; }); var pt = pointsJson[Math.floor(pointsJson.length / 2)]; return pt; };

* polyline

```js
    let { point } = mapTools.getCenterOfPolyline(polyline)

/**
 * 计算polyline的几何中心点
 * @param  {[polyline]} geo [几何图形]
 * @return {[point]}     [description]
*/
mapTools.getCenterOfPolyline = function (polyline) {
    var points = [];
    array.forEach(polyline.paths, function (path, idx) {
        points = points.concat(path);
    });

    if (points.length == 0) return null;

    if (points.length == 2) {
        return polyline.getExtent().getCenter();
    } else {
        var pointsJson = array.map(points, function (point, idx) {
            return {
                x: point[0],
                y: point[1]
            };
        });
        var pt = pointsJson[Math.floor(pointsJson.length / 2)];
        return pt;
    }
};

• WGS84 经纬度转 Web 墨卡托

  // 调用
  let { x, y, wkid } = mapTools.lonLat2WebMercator(lonLat);
  
      // 实现
  
  /\*\* \* WGS84 经纬度转 Web 墨卡托
  

• @param {x,y} lonLat

• @return { x, y, wkid } _/ mapTools.lonLat2WebMercator = function (lonLat) { var x = lonLat.x _ 20037508.34 / 180; var y = Math.log(Math.tan((90 + lonLat.y) _ Math.PI / 360)) / (Math.PI / 180); y = y _ 20037508.34 / 180; var wkid = 3857 return { x, y, wkid } };

• Web 墨卡托转经纬度 WGS84

  // 调用
  let { x, y, wkid } = mapTools.WebMercator2lonLat(mercator);
  
  // 实现
  /**
   * Web墨卡托转经纬度WGS84
   * @param {x,y} lonLat
   * @return  { x, y, wkid }
   */
  mapTools.WebMercator2lonLat = function (mercator) {
    var x = (mercator.x / 20037508.34) * 180;
    var y = (mercator.y / 20037508.34) * 180;
    y =
      (180 / Math.PI) *
      (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
    var wkid = 4326;
    return { x, y, wkid };
  };

XmlToJson

XmlToJson 工具

• xml 转 json

  XmlToJson.xmlToJson(xml)
  /**
   * xml转json
   * @param {*} xml
   * @returns  object
   */
  XmlToJson.xmlToJson = function (xml) {
      ...
      return obj;
  }

• string 转 xml ... XmlToJson.String2XML(xml)

/**
 * string转xml
 * @param {*} xmlString
 * @return xml
 */
XmlToJson.String2XML = function (xmlString) {
  // for IE
  if (window.ActiveXObject) {
    var xmlobject = new ActiveXObject("Microsoft.XMLDOM");
    xmlobject.async = "false";
    xmlobject.loadXML(xmlstring);
    return xmlobject;
  }
  // for other browsers
  else {
    var parser = new DOMParser();
    var xmlobject = parser.parseFromString(xmlstring, "text/xml");
    return xmlobject;
  }
};

• xml 转 string ... XmlToJson.XML2String(xml)

/**
 * xml转string
 * @param {*} xmlObject
 * @return string
 */
XmlToJson.XML2String = function (xmlObject) {
  // for IE
  if (window.ActiveXObject) {
    return xmlobject.xml;
  }
  // for other browsers
  else {
    return new XMLSerializer().serializeToString(xmlobject);
  }
};

• Date 类型扩展 ... XmlToJson.format(date)

/**
 * Date类型扩展
 * @param {string} format 日期目标格式
 * @return {string} 转化后的日期字符串
 */
XmlToJson.format = function (format) {
  //日期格式无效
  if (isNaN(this.getTime())) {
    return "";
  }
  // to do
  return format;
};

• 宽度固定时自动换行 ... XmlToJson.breaklines(number, value)
  number [宽 px ]
value [字符集]

    /**
     * width固定时，是否需要换行 [breaklines description]
     * @param  {[type]} number [宽 px ]
     * @param  {[type]} value  [字符集]
     * @return {[type]}        [description]
     */
    XmlToJson.breaklines = function (number, value) {
        var lineCount = 1;
        var newParamsName = "";
        var paramsNameNumber = value.length;
        var provideNumber = number;
        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        ...
        return {
            value: newParamsName,
            lines: lineCount
        };
    }

• 获取浏览器类型 ...XmlToJson.getBrowser()

/**
 * 获取浏览器类型
 * @return {[type]} [description]
 */
XmlToJson.getBrowser = function () {
  //debugger;
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isOpera = userAgent.indexOf("Opera") > -1;
  if (isOpera) {
    return "Opera";
  } //判断是否Opera浏览器
  if (userAgent.indexOf("Firefox") > -1) {
    return "FF";
  } //判断是否Firefox浏览器
  if (userAgent.indexOf("Chrome") > -1) {
    return "Chrome";
  }
  if (userAgent.indexOf("Safari") > -1) {
    return "Safari";
  } //判断是否Safari浏览器
  if (
    userAgent.indexOf("compatible") > -1 &&
    userAgent.indexOf("MSIE") > -1 &&
    !isOpera
  ) {
    return "IE";
  } //判断是否IE浏览器
  return "";
};

baseTools

baseTools 工具

• 数据克隆 ··· baseTools.clone(obj)

 /**
   * 克隆数据
   * @param {object} Obj
   * @return {object} Obj
   */
  clone: function (Obj) {
    var buf;
    if (Obj instanceof Array) {
      buf = [];
      var i = Obj.length;
      while (i--) {
        buf[i] = clone(Obj[i]);
      }
      return buf;
    }
    else if (Obj instanceof Object) {
      buf = {};
      for (var k in Obj) {
        buf[k] = clone(Obj[k]);
      }
      return buf;
    } else {
      return Obj;
    }
  }

GeoUtil

常用的工具函数

• 行政区划代码补齐 12 位(内部应用均采用 12 位标准) ...GeoUtil.complexRegion(code)

GeoUtil.complexRegion = function (code) {
  // number to string
  if (typeof code == "number") code = code.toString();
  // 不处理非字符类型
  if (typeof code !== "string") {
    return code;
  }
  if (code.length >= 12) {
    code = code.slice(0, 12);
    return code;
  }
  while (code.length < 12) {
    code += "0";
  }
  return code;
};

• 行政区划级别判断
  ...GeoUtil.regionLevel(str)

GeoUtil.regionLevel = function (str) {
  return (Number(str.split("").reverse().join("")) + "")
    .split("")
    .reverse()
    .join("");
};

• 验证是否为请求串
  ...GeoUtil.validUrl(url)

GeoUtil.validUrl = function (url) {
  if (!url) return false;
  return (
    new RegExp("http://").test(url.toLowerCase()) ||
    new RegExp("https://").test(url.toLowerCase())
  );
};

coord

坐标相关函数

GeoFormatter

数据结构之间的转换，如 geojson、esrijson、ogcjson。

• toGeoJSON

  let geo = mapTools.GeoFormatter.toGeoJSON(json);
  
  /**
   * 将esriJSON格式的要素转换为GeoJSON格式要素输出。
   * @param {JSON} esri
   */
  export function toGeoJSON(esri) {
    if (
      (geo.x !== void 0 && geo.y !== void 0) ||
      geo.paths !== void 0 ||
      geo.rings !== void 0
    ) {
      // geometry
      return esriGeometry2Coords(esri);
    }
    if (geo.properties != void 0) {
      // feature
      return esriGraphic2Feature(esri);
    }
    if (geo.type === "FeatureCollection") {
      // featurecollection
      return esriFeatureSet2FeatureCollection(esri);
    }
    return geo;
  }

• toEsriJSON

  let esri = mapTools.GeoFormatter.toEsriJSON(geo);
  
  /**
   * 将GeoJSON格式的要素转换为esriJSON格式要素输出。
   * @param {JSON} geo
   */
  export function toEsriJSON(geo) {
    if (geo.coordinates !== void 0) {
      // Geometry
      return coords2EsriGeometry(geo);
    }
    if (geo.attributes != void 0) {
      // Graphic
      return feature2EsriGraphic(geo);
    }
    if (geo.features != void 0) {
      // FeatureSet
      return geo; // 暂未实现
    }
    return geo;
  }

generaTools

常用工具介绍

为空判断

• 判断一个 string 是否为空
• @param {String} value
• return 为空返回 true；不为空返回 false

let str = "abc";
tools.isEmpty(str); // return false

存储缓存数据

• 存储数据到 localstorage 中
• @param { String } key
• @param { String } value

tools.saveToLocal("name", "jack");

获取存储的值

• 从 localstorage 中获取存储的值
• @param { String } key

tools.loadFromLocal(name); // return 'jack'

删除存储元素

• 从 localstorage 中删除存储元素
• @param {String} name

tools.removeFromLocal("name");

二维数据转树结构

• 将二维数组转换车树状结构
• @param {Array} data 必填
• @param {String} id 节点 id ,可选，默认为'id'
• @param {String} pid 父节点 id,可选，默认为'pid'

let array = [
  { id: "01", name: "广东省" },
  { id: "02", name: "广西省" },
  { id: "001", pid: "01", name: "深圳市" },
  { id: "002", pid: "01", name: "东莞市" },
  { id: "021", pid: "02", name: "玉林" },
  { id: "022", pid: "02", name: "南宁" },
];

tools.arrayToTree(array, "id", "pid");
// return [{"id":"01","name":"广东省","children":[{"id":"001","pid":"01","name":"深圳市"},{"id":"002","pid":"01","name":"东莞市"}]},{"id":"02","name":"广西省","children":[{"id":"021","pid":"02","name":"玉林"},{"id":"022","pid":"02","name":"南宁"}]}]

树结构转二维数组

• 将树状结构数据转二维数据
• @param {Array} treeData 必填
• @param {String} id 节点 id
• @param {String} children 子节点键值

let data = [
  {
    id: "01",
    name: "广东省",
    children: [
      { id: "001", pid: "01", name: "深圳市" },
      { id: "002", pid: "01", name: "东莞市" },
    ],
  },
  {
    id: "02",
    name: "广西省",
    children: [
      { id: "021", pid: "02", name: "玉林" },
      { id: "022", pid: "02", name: "南宁" },
    ],
  },
];

tools.composeListData(data);
//return  [{"id":"01","name":"广东省"},{"id":"02","name":"广西省"},{"id":"001","pid":"01","name":"深圳市"},{"id":"002","pid":"01","name":"东莞市"},{"id":"021","pid":"02","name":"玉林"},{"id":"022","pid":"02","name":"南宁"}]

获取当前时间 yyyy-mm-dd-hh-mm-ss

tools.getNowDateTime(); //return '2020-01-01 12:00:00'

将 jsonArray 的 key 值进行大小写转换

• @param { Array } jsonArray
• @param { Number } type 默认不传 == > 全部小写;传 1 == > 全部大写;传 2 == > 首字母大写

let array = [
  { NAME: "jack", age: "18" },
  { NAME: "jack", age: "18" },
  { NAME: "jack", age: "18" },
];

let re = tools.generaTools.jsonArrayToCase(array);
// return [{name: "jack",age: "18"},{name:"jack",age:"18"}, {name: "jack",age: "18"}];

将json对象导出为文件

let json = { required: true, message: "请输入年龄", trigger: "blur" };
tools.generaTools.exportJson("test.json", json);

加密

var sm4 = new tools.generaTools.sm4();
sm4.encryptData_ECB(plainText);

解密

var sm4 = new tools.generaTools.sm4();
sm4.decryptData_ECB(plainText);// ECB 加密
sm4.decryptData_CCB(plainText);// CCB 加密

geoDesign

常用工具介绍

helpClass

前端操作帮助类

• 初始化字符出扩展方法，数据格式化 Format,清楚空格 trim,date 格式化 Format,替换所有字符 replaceAll

render = function () {
  /*
   *   字符格式化
   *  var template1 = "我是{0}，今年{1}了";
   *  var template2 = "我是{name}，今年{age}了";
   *  var result1 = template1.format("loogn", 22);
   *  var result2 = template1.format({ name: "loogn", age: 22 });
   */
  String.prototype.Format = function (args) {};
  // 清除两边的空格
  String.prototype.trim = function () {};
  /*
   * 扩展Date格式化
   *format:yyyy-MM-dd HH:mm:ss/yyyy-MM-dd hh:mm:ss
   *
   */
  Date.prototype.Format = function (format) {};
  //替换所有的字符,将所有的字符s1替换为s2
  String.prototype.replaceAll = function (s1, s2) {};
};

• 数组中是否存在对象，返回状态

/**
 * 数组中是否存在对象，返回状态
 * arry:被查找数组
 * item:被包含对象
 */
containsArry = function (arry, item) {};

• 数组按条件精准查找

/**
 * 数组按条件精准查找
 * arry:数组集
 * key:匹配属性
 * value:匹配属性对应的值
 * 返回匹配完的数组，arry
 */
findArry = function (arry, key, value) {};

• 数组按条件模糊查询

/**
 * 数组按条件模糊查询
 * arry:数组集
 * key:模糊匹配属性
 * value:模糊匹配属性对应的值
 * 返回匹配完的数组，arry
 */
findLikeArry = function (arry, key, value) {};

• 同步请求

/**
 * 同步请求，option为对象参数{ method: 'get', param: {}, url: ''}
 * method:请求方式，get或post
 * parma:请求参数，对象
 * url:请求地址
 */
sync = function (option) {};

• 异步请求

/**
 * 同步请求，option为对象参数{ method: 'get', param: {}, url: '',callback:null}
 * method:请求方式，get或post
 * parma:请求参数，对象
 * url:请求地址
 * callback:请求完成后返回函数，callback(res)
 * res:请求后的结果{status: 0, desc: "", result: null}，status:状态，desc:描述，result:结果
 */
async = function (option) {};

• 加载 js 模型或 json 等静态数据，默认为 js 文件

/**
 * 加载 js 模型或 json 等静态数据，默认为 js 文件
 * path:模型路径
 * g:模型加载后存放的对象
 * model:模型名，主要是文件名
 * suffix:后缀，默认为.js
 */
loadModel = function (path, g, model, suffix) {};

• 截取 url 后面的参数，默认为当前 url

/**
 * 截取 url 后面的参数
 * param:截取的参数属性
 * href:被截取的url地址，默认为当前浏览器的url
 */
request = function (param, href) {};

• 动态引入 css 样式文件

/**
 * 动态引入 css 样式文件
 * path:css样式文件地址
 */
DynamicLoadingCss = function (path) {};

• 动态引入 js 文件

/**
 * 动态引入js文件
 * url:js文件地址
 * callback:js文件引入成功后，返回函数，返回函数没有参数
 */
DynamicLoadingJs = function (url, callback) {};

• 自动生成唯一 ID

/**
 * 自动生成唯一 ID
 * code:唯一键前缀，当code不存在时，为空字符串
 * 返回唯一主键
 */
generateUUID = function (code) {};

• 将对象属性统一转为小写

/**
 * 将对象属性统一转为小写
 * obj:被转换的对象{}
 */
ObjtoLowerCase = function (obj) {};

• 将对象属性统一转为大写

/**
 * 将对象属性统一转为大写
 * obj:被转换的对象{}
 */
ObjtoUpperCase = function (obj) {};

geo$

htnl 标签操作类

• 对数组或对象进行循环遍历

/**
 * 对数组或对象进行循环遍历
 * @param {数组或对象} arry
 * @param {返回对象和索引或对象的键值对} callback
 */
each = function (arry, callback) {};

• 获取元素对象

/**
 * 获取元素对象
 * @param {关键字，可以为class(.)、id(#)或标签，节点可以采用多级深层次，但是每次只取匹配的第一个} primary
 * @returns 返回对象
 */
getElementObject = function (primary) {};

• 获取的所有对象数组集

/**
 * 获取的所有对象数组集
 * @param {关键字，可以为class(.)、id(#)或标签，不支持多级节点，返回多有匹配上的元素对象} primary
 * @returns 返回获取的所有对象数组集
 */
getNodes = function (primary) {};

• 给标签赋 html 值或取 html 值

/**
 * 给标签赋html值或取html值
 * @param {关键字，可以为class(.)、id(#)或标签} primary
 * @param {值，当不存在时，获取html值} val
 * @returns
 */
html = function (primary, val) {};

• 给标签追加值

/**
 * 给标签追加值
 * @param {关键字，可以为class(.)、id(#)或标签} primary
 * @param {值} val
 */
append = function (primary, val) {};

• 修改标签的样式

/**
 * 修改标签的样式
 * @param {关键字，可以为class(.)、id(#)或标签} primary
 * @param {css样式，为对象，多个样式为键值对} cssObject
 */
css = function (primary, cssObject) {};

excelClass

excel 报表设计操作类，支持渲染和报表导出，依赖 helpClass 和 geo$

• 通过设计的报表初始化渲染二维表

/**
 * 将excel报表设计渲染到前端标签里面
 * @param {二维表渲染参数，{tempid:"",tagSheet:".sheet",tagContent:".content",data:[],getTempUrl:"/cxsj/kshpz/sjglBtform/GetCxsjinfoById"}} option
 * @param {tempid:报表设计id，多个id采用逗号进行分隔}
 * @param {tagSheet:多报表sheet切换标签容器，当只有一个时，隐藏，默认为.sheet}
 * @param {tagContent:多报表渲染承载容器，默认为.content}
 * @param {data:渲染数据，当数据存在时，对模板的数据进行重写,data=[{name:"",dataArry:[],dataObject:{}}]}
 * @param {getTempUrl:根据模板id获取设计报表模型的请求地址，默认为/cxsj/kshpz/sjglBtform/GetCxsjinfoById}
 * @param {name:报表数据名称、唯一代号，跟报表设计模型名称保持一致，以便数据的重写}
 * @param {dataArry:数组数据，二维表列表数据}
 * @param {dataObject:对象数据，副标题附加的属性数据}
 * @returns 返回渲染的数据
 */
init = function (option) {};

• 导出 excel 报表

/**
 * 将报表数据导出为excel报表
 * @param {导出报表必备参数，option={data: [], exportUrl: "/cxsj/pzgl/Common/bathExportExcel", downUrl: "/cxsj/pzgl/Common/downFile"}} option
 * @param {data:报表渲染init方法返回的数据}
 * @param {exportUrl:excel报表导出地址，默认地址：/cxsj/pzgl/Common/bathExportExcel}
 * @param {downUrl:excel报表下载地址，默认地址：/cxsj/pzgl/Common/downFile}
 */
exportExcelData = function (option) {};

• excel 报表渲染导出示例

<script src="../../script/geo-js-tools/lib/geoJsTools.umd.min.js"></script>
<div class="pane">
  <div class="sheet" title="工作簿标签" style="height: 30px;line-height: 30px;"></div>
  <div class="content" title="工作内容" style="margin-top: 10px;"></div>
</div>

let tool = window.geoJsTools.default;
let option = {
    tempid: "e5a0a847-1133-46d4-ae81-e8c895734743,fcdc495b-a604-450e-aeab-c79898d5153c",
    tagSheet: ".sheet",
    tagContent: ".content",
    getTempUrl: "/cxsj/kshpz/sjglBtform/GetCxsjinfoById"
}
let data = tool.geoDesign.excelClass.init(option);
option = {
    data: data,
    exportUrl: "/cxsj/pzgl/Common/bathExportExcel",
    downUrl: "/cxsj/pzgl/Common/downFile"
}
tool.geoDesign.excelClass.exportExcelData(option);