...
代码块 | ||||
---|---|---|---|---|
| ||||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=???????????"></script> <title>地球模式</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // GL版命名空间为BMapGL var map = new BMapGL.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式 </script> |
...
这里就需要在超级控件里访问是DWF提供的数据访问DWF的服务了,超级控件提供了:window.parent.dwf_ctx这个全局变量,这个变量的功能和脚本里的this基本一样,读者可以通过:脚本调用和插件调用的对应关系看到所有dwfctx这个全局变量,这个变量的功能和脚本里的this基本一样,读者可以通过下面的链接看到所有dwf_ctx支持的调用和脚本的函数之间的对应关系。
回顾一下,第六章 表单中的事件脚本 中1.2节,介绍了restful api调用方法,这个例子里可以提取设备类“Asset”的所有对象:objects,所以接入的路径为:“/omf/entities/Asset/objects”,设置参数为空,调用方式如下:
...
代码块 | ||||
---|---|---|---|---|
| ||||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=ZslE5E0BGrzXi2adSptlLmfoBnMzddMk?????"></script> <title>地球模式</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // GL版命名空间为BMapGL var map = new BMapGL.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式 var ctx = window.parent.dwf_ctx; let param = {}; ctx.dwf_axios.post(`/omf/entities/Asset/objects`,param).then(initRes => { //在回调中处理 console.log(initRes.data.data); let assets = initRes.data.data; assets.forEach(a => { var marker = new BMapGL.Marker(new BMapGL.Point(a.locationX, a.locationY)); // 在地图上添加点标记 map.addOverlay(marker); }); }); </script> |
就可以看到如下的效果:
超级控件里调用DWF表单
如果希望点击地图上的标记点打开DWF表单呢?
如果希望点击地图上的覆盖物,希望打开表单跳出控件呢?这也不难,可以利用dwf这也不难,可以利用dwf_ctx的executeOperation完成单击后触发操作。
代码块 | ||||
---|---|---|---|---|
| ||||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=ZslE5E0BGrzXi2adSptlLmfoBnMzddMk??????"></script> <title>地球模式</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // GL版命名空间为BMapGL var map = new BMapGL.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式 var ctx = window.parent.dwf_ctx; let param = {}; ctx.dwf_axios.post(`/omf/entities/Asset/objects`,param).then(initRes => { //在回调中处理 console.log(initRes.data.data); let assets = initRes.data.data; assets.forEach(a => { var marker = new BMapGL.Marker(new BMapGL.Point(a.locationX, a.locationY)); marker.asset = a; //先将标记点对应的数据绑定起来 marker.addEventListener('click', function () { console.log(marker.asset); // 单击的时候打开对话框 let initParams={ obj:marker.asset }; ctx.openForm('Asset','AssetComposition',null,'visit',initParams); }); map.addOverlay(marker); }); }); </script> |
...