0.1.50 • Published 1 year ago
geo-js-tools v0.1.50
常用工具介绍
目录
gisTools
地图 GIS 常用工具对象及方法。
2021-12-19
Added
- 新增
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: point0, y: point1 }; }); var pt = pointsJsonMath.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);
0.1.50
1 year ago