生成设备的经纬度信息
编辑设备页面可以获取到设备的经纬度信息,才能在地图上显示。因此需要先修改“编辑设备”页面,再通过调用地图API,生成经纬度数据。
在前面章节中,在编辑设备时,仅生成了设备的基本信息,没有生成精确的经纬度。如果想将设备的位置显示在地图上,则必须给设备生成一个精确的经纬度。因此在本节中,将进一步改造“编辑设备”页面,实现通过设备“详细地址”,即可以生成一个经纬度信息,然后通过查询设备的后台逻辑(脚本、服务编排及公共服务),将信息传到高级页面的自定义组件中。其中,设备的经纬度信息通过设备的详细地址生成。
操作步骤
- 进入“设备维修管理系统”应用。
- 单击打开编辑设备“HW__editEquipment”页面,单击锁定页面。
- 引入地图公共库。
- 在右侧属性面板中,选择“库”页签,单击“新增库”。
- 搜索“GISMap”,在搜索结果中,选中“GISMap”库,单击“确定”。
图1 新增库
- 修改页面事件代码。
- 在“设计视图”中,选中最外层的“页面”,在右侧“事件”页签中,单击“自定义JS代码”后的。
图2 添加页面事件代码
- 在弹出的事件编排“自定义动作”中,在代码编辑区增加如下粗体脚本代码。
预置的地图密钥(N1XIMTXn6wg8PyAMS34utWkOhWiFcw90)仅供学习使用,如果您的商用业务系统中使用到地图组件,请重新申请自己的密钥。
//加载地图API做地址转换用 window.initMap = function (gis) { window.gisMap = gis.loadMap({ container: document.getElementById('map'), center: [114.0578388103, 22.6565079747], zoom: 4, viewMode: '2D', mapStyle: 'normal', layers: [], }); }; //等待页面加载完成,发事件给地图widget初始化页面 var interval = setInterval(function () { if (gis) { clearInterval(interval); new gis.Hmap2D("BAIDU_MAP", "N1XIMTXn6wg8PyAMS34utWkOhWiFcw90", initMap); } }, 300); //debugger; //为级联组件下拉框赋值 $model.ref('cascaderOptions').setData([{ "value": "110000000000", "label": "北京市", "children": [{ "value": "110100000000", "label": "市辖区", "children": [{ "value": "110101000000", "label": "东城区" }, { "value": "110102000000", "label": "西城区" }, { "value": "110105000000", "label": "朝阳区" }, { "value": "110108000000", "label": "海淀区" }] }] }, { "value": "310000000000", "label": "上海市", "children": [{ "value": "310100000000", "label": "市辖区", "children": [{ "value": "310101000000", "label": "黄浦区" }, { "value": "310104000000", "label": "徐汇区" }, { "value": "310106000000", "label": "静安区" }, { "value": "310115000000", "label": "浦东新区" }, { "value": "310110000000", "label": "杨浦区" }, { "value": "310112000000", "label": "闵行区" }] }] }, { "value": "440000000000", "label": "广东省", "children": [{ "value": "440100000000", "label": "广州市", "children": [{ "value": "440101000000", "label": "市辖区" }, { "value": "440105000000", "label": "海珠区" }, { "value": "440106000000", "label": "天河区" }, { "value": "440111000000", "label": "白云区" }, { "value": "440113000000", "label": "番禺区" }] }, { "value": "440300000000", "label": "深圳市", "children": [{ "value": "440301000000", "label": "市辖区" }, { "value": "440303000000", "label": "罗湖区" }, { "value": "440304000000", "label": "福田区" }, { "value": "440305000000", "label": "南山区" }, { "value": "440306000000", "label": "宝安区" }, { "value": "440307000000", "label": "龙岗区" }, { "value": "440308000000", "label": "盐田区" }, { "value": "440309000000", "label": "龙华区" }, { "value": "440310000000", "label": "坪山区" }] }] }]); //从页面url中获取id,然后将id作为queryEquipmentDatail的入参 let id = Page.params.id; if (id && id != "") { let _model = $model.ref("queryEquipmentDetail"); _model.setValue("inputParam", { "equipmentId": id }); _model.run().then(() => { //获取queryEquipmentDetail的出参后赋值给页面表单模型equipmentForm var data = _model.getData(); if (data.outputParam && data.outputParam.equipment) { var equip = data.outputParam.equipment; $model.ref("equipmentForm").setData(equip); } }).catch((e) => { this.$dialog.error({ title: '错误', content: e.resMsg }) }); }
- 单击页面上方的,保存修改并退出事件编排。
- 在“设计视图”中,选中最外层的“页面”,在右侧“事件”页签中,单击“自定义JS代码”后的。
- 在页面中引用地图实例。
- 在“设计视图”中,选中“表单”,从左侧组件列表“高级”中,拖一个“代码块”到“表单”后(表单与代码块同级)。
- 选中“代码块”,在右侧“模板”文本框中填写如下代码,即在页面上创建一个DIV,存放地图实例。
<div id="map"></div>
图3 在页面中引用地图实例
- 修改“保存”的事件代码。
- 在“设计视图”中,选中“保存”。
- 在右侧“事件”页签中,单击“自定义JS代码”后的。
图4 添加保存按钮事件代码
- 在事件编排的“自定义动作”中,在代码编辑区将下图中(大约74~86行)的代码,替换成如下脚本代码。
脚本中红色内容请替换为实际的对象名、字段名、页面名。
图5 替换代码
if (fullAddress) { inputs.HW__fullAddress__CST = fullAddress; //调用百度地图API,根据fullAddress完整地址,计算出经纬度坐标 //debugger; var geocoder = gisMap.getGeocoder(); geocoder.getPoint(fullAddress, function (status, result) { //转换完成后,将结果存入服务编排:editEquipment的入参中 if (result && result.lat && result.lng) { inputs.HW__longitude__CST = result.lng + ""; inputs.HW__latitude__CST = result.lat + ""; } _model.setValue('inputParam', { "equipment": inputs }); _model.run().then(() => { context.$page.load('/besBaas/page#/HW__equipmentManage'); }).catch((e) => { this.$dialog.error({ title: '错误', content: e.resMsg }) }); });//增加 }
替换后完整代码,如下:
//debugger; // 当前组件 let _component = context.$component.current; //校验表单 _component.getForm().formValidate().then((val) => { //校验成功 //从自定义模型equipmentForm中获取界面表单数据 let data = $model.ref('equipmentForm').getData(); if (data) { console.log(data); //构造Script(editEquipment)的其他入参 let inputs = data; inputs.HW__installationSiteProvince__CST = "";//构造参数名称要与Object字段名保持一致 inputs.HW__installationSiteCity__CST = ""; inputs.HW__installationSiteArea__CST = ""; inputs.HW__fullAddress__CST = ""; inputs.HW__longitude__CST = ""; inputs.HW__latitude__CST = ""; //获取服务模型editEquipment,执行模型的action,即执行模型关联的Script let _model = $model.ref('editEquipment'); if (!inputs.cascaderAddress || inputs.cascaderAddress.length < 1) { _model.setValue('inputParam', { "equipment": inputs }); _model.run().then(() => { //提交成功后返回设备列表页面 context.$page.load('/besBaas/page#/HW__equipmentManage'); }).catch((e) => { this.$dialog.error({ title: '错误', content: e.resMsg }) }); } else { console.log('data'); //将级联框的内容转换为Script(editEquipment)的省、市、区3个参数,并拼接完整地址 let fullAddress = ""; let cascaderOptions = $model.ref('cascaderOptions').getData(); if (cascaderOptions.length < 1) { throw new Error("CascaderOptions data is wrong."); } cascaderOptions.forEach(function (province, idx) { if (province.value == inputs.cascaderAddress[0]) { //构造参数名称要与Object字段名保持一致 inputs.HW__installationSiteProvince__CST = inputs.cascaderAddress[0]; fullAddress += province.label; if (inputs.cascaderAddress.length > 1) { province.children.forEach(function (city, idxCity) { if (city.value == inputs.cascaderAddress[1]) { //构造参数名称要与Object字段名保持一致 inputs.HW__installationSiteCity__CST = inputs.cascaderAddress[1]; fullAddress += city.label; if (inputs.cascaderAddress.length > 2) { city.children.forEach(function (area, idxArea) { if (area.value == inputs.cascaderAddress[2]) { //构造参数名称要与Object字段名保持一致 inputs.HW__installationSiteArea__CST = inputs.cascaderAddress[2]; fullAddress += area.label; return false; } }); } return false; } }); } return false; } }); //界面上输入了详细地址时,拼接出fullAddress完整地址 if (inputs.HW__installationDetailAddress__CST) { fullAddress += inputs.HW__installationDetailAddress__CST; } if (fullAddress) { inputs.HW__fullAddress__CST = fullAddress; //调用百度地图API,根据fullAddress完整地址,计算出经纬度坐标 //debugger; var geocoder = gisMap.getGeocoder(); geocoder.getPoint(fullAddress, function (status, result) { //转换完成后,将结果存入服务编排:editEquipment的入参中 if (result && result.lat && result.lng) { inputs.HW__longitude__CST = result.lng + ""; inputs.HW__latitude__CST = result.lat + ""; } _model.setValue('inputParam', { "equipment": inputs }); _model.run().then(() => { context.$page.load('/besBaas/page#/HW__equipmentManage'); }).catch((e) => { this.$dialog.error({ title: '错误', content: e.resMsg }) }); });//增加 } else { _model.setValue('inputParam', { "equipment": inputs }); _model.run().then(() => { //提交成功后返回设备列表页面 context.$page.load('/besBaas/page#/HW__equipmentManage'); }).catch((e) => { this.$dialog.error({ title: '错误', content: e.resMsg }) }); } } } }).catch((error) => { });
- 单击页面上方的,保存修改并退出事件编排。
- 测试能否正确生成经纬度信息:构造测试数据。
- 单击界面上方预览图标,使用编辑设备“HW__editEquipment”页面新增如下表的设备数据。
操作成功,系统会返回管理设备“HW__equipmentManage”页面。
设备名称
设备编码
品牌
型号
地址
1号电梯
123456789
日立
123456789
广东省深圳市龙岗区四季花城
2号电梯
123456
迅达
123456
广东省深圳市坂田华为基地
- 通过“HW__equipmentManage”页面修改另一条设备数据。
- 单击界面上方预览图标,使用编辑设备“HW__editEquipment”页面新增如下表的设备数据。
- 检查测试结果:测试能否正确生成经纬度信息。
- 预览“HW__equipmentManage”页面。
- 查看上一步里添加的设备是否已经生成了经纬度。
图6 查看生成的经纬度