跳到主要内容

JS-SDK接入实现指南

获取账号Token及服务ID

操作流程如下:

  • 注册登录大地量子时空SaaS平台
  • 点击左上角按钮,选择接入指南,即可查看账号token及服务ID

Untitled

Untitled

加载网页插件代码

使用方法如下:

  • 将大地量子js-sdk代码嵌入网页的html标签内部
<script async src="https://static.terraqt.com/tq-sdk.js"></script>
<script>
(function (m, i) {
m[i] = function () { (m[i].a = m[i].a || []).push(arguments) };
})(window, '_TQ');
</script>

初始化地图服务

使用方法

  • 调用js-sdk init方法初始化用户的地图服务
  • 注意需要指定用户的页面容器ID (不配置会默认渲染至body内部)
<script async src="https://static.terraqt.com/tq-sdk.js"></script>
<script>
(function (m, i) {
m[i] = function () { (m[i].a = m[i].a || []).push(arguments) };
})(window, '_TQ');

// 这里初始化用户的地图服务
_TQ('init', {containerId : '用户端的容器', serviceId: '用户端的服务ID', token: '用户端的用户token' });
</script>

主题及布局调整

  • 在调用js-sdk init方法初始化用户的地图服务时,可调整界面主题,包含(界面整体背景色、控制组件背景色、数据箱背景色,支持rgba及16进制),同时可调整数据箱显示及隐藏状态
<script async src="https://static.terraqt.com/tq-sdk.js"></script>
<script>
(function (m, i) {
m[i] = function () { (m[i].a = m[i].a || []).push(arguments) };
})(window, '_TQ');

// 调整用户主题及布局
_TQ('init', {
containerId : '用户端的容器',
serviceId: '用户端的服务ID',
token: '用户端的用户token',
theme: {
main: '#000000', // 界面整体背景色
ctrl: '#000000', // 控制组件背景色
box: '#000000', // 数据箱背景色
},
hidSider: false // true 隐藏数据箱 false 显示数据箱
});
</script>

矢量图斑选中响应事件

  • 在调用js-sdk时,选中地图中矢量图斑,会产生selectEvent事件回调,回调函数返回值包含选中图斑主要信息
<script async src="https://static.terraqt.com/tq-sdk.js"></script>
<script>
(function (m, i) {
m[i] = function () { (m[i].a = m[i].a || []).push(arguments) };
})(window, '_TQ');

// 选中地图图斑回调函数
_TQ('selectEvent', (e) => {
console.log(e) // 查看选中图斑主要信息
});

</script>