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

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

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

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

1、配置 JSBOX

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

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
  });
}

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

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

我在 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