【Axure JS】Axure中利用JSBOX制作3D高德地图组件(进阶)

JSBOX 是一个面向 Axure 提供便捷开发方式的组件,我们将用它来制作可以显示三维白模的高德地图组件,下面是制作步骤,可以先 点击此处预览效果

上一篇 里,你已经通过简单的三步实现了在Axure中插入高德三维地图,但是使用上还不够方便。

接下来我们将调整代码,让你可以在中继器上直接修改地图初始时的中心位置、视角、缩放等一系列参数,在文末我也会提完成后的3D地图组件的下载链接。

1、配置 JSBOX

选中之前做好的 JSBOX 组件,在右侧样式面板里修改中继器数据,日后我们将在这个界面里对地图进行初始化设定:

【Axure JS】Axure中利用JSBOX制作3D高德地图组件(进阶)

2.、对接数据

现在我们需要在 JSBOX 里获取界面上用户设定的值,很幸运,在 JSBOX 里你可以通过以下简单的代码很方便的拿到这些数据:

// 获取中继器配置(这段代码需要放在所有代码最前面)
const data = THIS.getData({format:'row'});
const locName = String(data['中心地名']);
const pitch = String(data['倾斜角度']);
const hideLogo = !!Number(data['隐藏Logo']);
const cover = !!Number(data['铺满屏幕']);

注:如果你是前端,可以点击预览,在浏览器控制台打印这些值来进行观察。

拿到界面配置的数据后,我们将数据与代码进行对接,之前我们初始化地图时是通过 pitch 属性来控制摄像机倾斜角度的,现在我们把数据对接起来:

// 引入高德地图JSAPI
Loader({
  load: [`//webapi.amap.com/maps?v=2.0&key=您的API-KEY`],
  complete: () => AMap.plugin(['AMap.Geocoder','AMap.ControlBar'], main)
});
 
// 程序入口
function main() {
  // 初始化地图
  let map = new AMap.Map(THIS.vid, {
    resizeEnable: true,
    zoom: 17,
    zooms: [3,20],
    expandZoomRange: true,
 
    rotateEnable: true,
    rotation: -15,
 
    pitchEnable: true,
    pitch: pitch, //这里把值传递给 pitch 属性,前端也可以简写成 pitch,
 
    viewMode: '3D',
    buildingAnimation: true
  });
}

刷新预览页面可以发现,现在你已经可以通过修改中继器配置上的“倾斜角度”一栏的值来改变地图视角了,就这么简单~

同理你还可以继续把其他参数也对接上去,这么好玩的过程我想交给你来完成,我将在最后给出完成的源文件下载链接,下载打开后点击预览即可看到效果。

【Axure JS】Axure中利用JSBOX制作3D高德地图组件(进阶)

我在 JSBOX 组件的文本域上添加了交互来进行点击地点和经纬度的字符串截取,这让 JS代码 和Axure 交互的互通成为了可能,大家可以在源文件中找到相关的交互设置。

注:在源文件的代码中我还使用了 “附加数据” 一栏来进行额外的数据读取,这点很重要,它意味着 JSBOX 可以读取界面中两处不同地方的数据。 在制作 echarts 等图表时,我们可以在右侧设置图表数据,在交互面板中设置图表的颜色、文字间距等参数,这些全都在一个中继器里就能实现。

总结

通过本例你可以了解到:

  • JSBOX 是一个面向 Axure 提供便捷开发方式的组件
  • 你可以用 JSBOX 制作其他零代码配置的交互式组件

相关资料

觉得在 JSBOX 里写代码很麻烦?

你完全可以用 THIS.runScript(‘http://127.0.0.1/script.js‘); 来实现外部IDE(如 VSCode 配合 Live Server插件)来开发!

JSBOX 相关方法的文档说明在这里可以查看:

Axure扩展库: 为Axure原型开发提供便捷的方法调用

基于 JSBOX 的3D高德地图组件下载:

立即下载

访问密码:8397

JSBOX 组件下载(支持Axure 9.x及更高版本):

立即下载

访问密码:8397

原文链接:https://blog.csdn.net/qq_31483645/article/details/129631824

原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/291179.html

发表评论

登录后才能评论