我的位置：首页 › 数据可视化平台- 酷屏 › 酷屏-心得体验 › 内置湖南地图修改及地图下钻

内置湖南地图修改及地图下钻

复制链接 | 收藏本帖

4469

: yangqh 数据老手Lv5

发表于2020-8-21 17:15

楼主

本帖最后由 yangqh 于 2020-8-21 17:16 编辑

需求场景：ABI酷屏中内置有一个“湖南地图”组件，如何实现点击“长沙”，下钻到长沙市地图呢？

首先，系统并没有自带“长沙市地图”的html组件，所以需要自定义一个，操作步骤如下：
Step1、访问下面地址，获取所需地图的json文件
http://datav.aliyun.com/tools/atlas/#&lat=40.25661520748841&lng=116.46899700000002&zoom=9

Step2、访问下面地址，地图坐标打点
http://geojson.io/#map=4/37.91/104.14

Step3、克隆一份“湖南地图”组件改名为“长沙市地图”，并将上一步中获取的区县坐标信息更改到地图geoCoordMap中

Step4、将长沙市地图json复制到地图组件的 Default_Geojson

Step5、将js中的其他预览值等处的区划信息改成长沙市的，如下图（有多处修改，注意不要漏了）

Step6、修改好之后可以预览地图效果

确认无误后保存即可；

至此，长沙市的地图组件就定义好啦~接下来，我们可以开始用湖南地图和长沙市地图做一个下钻的效果了
Step7、湖南统计图组件属性-单击事件中定义钻取脚本

<font face="微软雅黑" size="2">function eventFunc(provinceName,provinceValue,provinceId) {
var dlg = getFixFloatDlg();
if (dlg.isVisible()) {
dlg.hide();
} else {
//此处不带ip地址则默认就是本机ip或localhost
var url = EUI.getContextPath()+"ebibase/showcoolrpt.do?resid=EANA$2$4$1$fb0a9c5a75fb47b3a2228ad0c9a5cbdf$b9a594be7d3a4d10b9d276806da46036&calcnow=true&encode=true"</font>

复制代码

如果用以上方法每个区县都做自定义地图未免太麻烦，所以我们也可以用系统中自带的图表组件中的地图组件来做钻取的子表：
子表设置：

主表设置：

<font face="微软雅黑" size="2">/**
*
* @param provinceName 省市名
* @param provinceValue 省市的值
* @param provinceId 可选省市id
*/
function eventFunc(provinceName,provinceValue,provinceId) {
var dlg = getFixFloatDlg();
if (dlg.isVisible()) {
dlg.hide();
} else {
//此处不带ip地址则默认就是本机ip或localhost
var url = EUI.getContextPath()+"ebibase/showcoolrpt.do?resid=EANA$2$4$1$fb0a9c5a75fb47b3a2228ad0c9a5cbdf$1f8e89b1293045e2a74c2bd373ce4641&@dq="+provinceName+"&calcnow=true&encode=true"
dlg.setContentSrc(url); //设置url
dlg.setTitle(provinceName); //设置标题
dlg.show();
}
}
</font>