...
| 代码块 | ||||
|---|---|---|---|---|
| ||||
<!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> |
...
不仅如此，还可以把这个超级控件打包到模型包里，带走或者发给你小伙伴。
图-在模型包内部打包超级控件
注意事项
最后，超级控件虽好，但也不要贪杯，下面看看使用超级控件的时候需要注意的地方：
...