# 编码

# 平台

❓ 怎样正确调试开发者代码？

✔️

在已经打开地图的情况下，在调试窗口，打开ths.min.js文件，格式化
在文件中搜索eval(,然后打个断点
开着调试窗口，刷新界面
在进行到断点（eval）的地方，点击F11进入代码，然后再往后走即可。

An image 注：

打开文件的快捷键 Ctrl+P
涉及场景整合需要在主体里面重复该操作即可

❓ 如何把其他平台/已下载框架中同步到平台中？

✔️ 因为现在平台对应用的记录同时保存在两个文件中，所以新增应用需要同步修改这两个文件，比较麻烦。所以，推荐如下的方式去新增应用：

在现有平台中创建一个空应用
把准备好的配置文件放到该应用的文件夹下即可

注：替换工作可以找平台的维护者（20724由GIS组维护，其他的由各项目组维护）

❓ 下载的应用怎么部署？

✔️

TIP

必备程序

Tomcat 版本: 常见版本即可

具体步骤

把压缩包中 gis_framework/gis_framework 下的二维框架、图标库、模板库（HTML 和 ECharts）拷到 Tomcat 的对应位置
打开 gis_framework/env.js 文件把第 61 行的 apiUrl 路径改为 ./arcgis-js-api
打开 gis_framework/config.json 文件把 httpProxy 配置项中 url 的地址改为指向 gis_framework/proxy/proxy.jsp的路径

# 大屏相关

# 平台配置

❓ 分级渲染选择字段时，下拉列表中缺少部分字段是什么回事？

✔️ 分级渲染应用的字段只能是数值型，所以平台对字段做了过滤，请检查数据路径和您要选择的字段的返回类型。

# 大屏交互

❓ 怎么在大屏中嵌入地图？

✔️ 在大屏中设计界面执行如下操作：

a. 在要嵌入的地图预览地址后面加上 wsClientCode=#wsClientCode#（大屏会自动把 "#wsClientCode#" 修改为 "当前用户名_跨屏交互 ID" ）

例：
http://10.100.250.22:10229/visualmap/#/MapViews?userName=admin&appType=2D&appName=固定源&wsClientCode=#wsClientCode#

b. 打开要嵌地图的大屏应用，自定义跨屏交互 ID

An image

注：只有刚打开大屏应用的时候才能看到该配置项。

c. 在大屏中使用 iframe 组件，在该组件的数据 -》数据类型 -》静态数据文本框中输入上步中的地址

An image

d. 点击响应数据，保存/保存并预览

❓ 地图怎么接收大屏的消息？

✔️ 在 MapGo 开发者代码模块中添加如下代码

a. 在代码最上端加入下述代码

var clientCode = getQueryVariable('wsClientCode') ? getQueryVariable('wsClientCode') : 'admin_'; // 动态获取跨屏交互ID
var webSocketURL = 'http://10.100.245.102:8088/view'; // IP 和 端口 改为要连接大屏的 IP 和 端口

注：admin_ 更改为你的大屏账户名_大屏中自定义的跨屏交互 ID

b. 在代码空白区域点击 '运行' 按钮下方的 'WS' 按钮，会在您当前光标处添加如下代码

/**
 初始化webSocket连接
 * @param {String} 跨屏交互ID
 * @param {Function} receiveCallback 接受消息的回调
 * @param {Function} closeCallback 关闭连接的回调
 * @param {String} webSocketURL webSocket服务器地址
 */
 var thsMapSocket = ths.initSocket(clientCode,receiveCallback,closeCallback,webSocketURL);

完整示例如下：

// 动态获取跨屏交互 ID
var clientCode = getQueryVariable('wsClientCode') ? getQueryVariable('wsClientCode') : 'admin_';
// IP 和 端口 改为要连接大屏的 IP 和 端口
var webSocketURL = 'http://10.100.245.102:8088/view';

/**
 初始化webSocket连接
 * @param {String} 跨屏交互ID
 * @param {Function} receiveCallback 接受消息的回调
 * @param {Function} closeCallback 关闭连接的回调
 * @param {String} webSocketURL webSocket服务器地址
 * 注意第二个参数为对象，对象的key（water）为当前的场景名（该应用的含义）
 */
var thsMapSocket = ths.initSocket(clientCode, {
  water: function (messageStr) {
    messageStr = JSON.parse(messageStr.data).data; // 这句话加上后可以保持和原来一样
    var message = JSON.parse(messageStr).data;
    if (message.type.toLowerCase() === "runinteractive" && message.data) {
      var msgs = message.data;
      msgs.forEach(function (msg) {
        switch (msg.shareCode) {
          // 自定义代码区
          case 'pwxkParamCode':
            // ...
            break;
          default:
            console.log('大屏给gis发送了消息' + msg.shareCode);
            break;
        }
      });
    }
  }
}, null, webSocketURL);

❓ 怎么关闭和大屏的连接？

✔️ 在 MapGo 应用开发者代码模块中添加如下代码

 // 取消连接
 if (thsMapSocket) {
     // water 要和建立 WebSocket 方法的第二个参数的 key 一致
     thsMapSocket.removeListenMessage('water');
 }

❓ 地图怎么向大屏发送消息？

✔️ 不知道应该传什么才能达到你要的效果，请咨询大屏技术支持人员

// 预防没有引入 websocket.js 文件的情况
/* var message = {
    id: screenID,
    type: "setParameterValue",
    data: {
      REGIONCODE: provCode,
      TASKCODE: taskCode
    }
  } */
if (sendMessage) {
  // message为自定义 JSON
  /**
   * 外部页面操作影响大屏交互
   * @param json 发送的文本内容
   * @param webSocketURL websocket 服务地址
   * @param clientCode 跨屏交互 ID
   */
   sendMessage(message, webSocketURL, clientCode);
}

❓ 大屏和地图交互没有效果怎么自查？

✔️ 步骤如下：

TIP

大屏和地图交互靠的是 WebSocket 进行通信的。
所以如果您是非大屏和地图交互，请注意地图的 socket 和您的 socket 的必须是连接的同一个 IP 并且跨屏交互 ID (房间号)一致才能收到消息，检查方法和下方类似

请检查您的代码是否是按照上面的步骤编写的，如果不是，请先对照上面的步骤自检您的代码
打开你的大屏，同时打开 F12 ，把选择 Network 标签，并清除已有记录
在大屏中点击会发送消息给地图的按钮，然后查看上步打开的页面中 Network 是否有一条显示为 message 的记录，如果没有，请找大屏相关人员支持；如果有，请查看下图中的跨屏交互 ID 是否和您在开发者代码中配置的默认跨屏交互 ID 是否一致，不一致，请修改为一致（如果是大屏的配的不对，请自行修改或者找下大屏支持人员）

注：
交互消息URL分析：
示例URL：http://10.100.245.102:8088/view/interact/thsgis_/message (opens new window)
大屏地址：10.100.245.102:8088
跨屏交互ID: thsgis_ (当前用户名_跨屏交互ID)

❓ 应用下载后和大屏交互错误怎么办？

✔️ 下载后，引用地图时需要自行在引用地址后面加上 wsClientCode=正确的wsClientCode值。

# 其他

❓ 嵌入大屏的地图需要进行什么特殊处理吗？

✔️ 因为大屏的特殊需求，是需要进行特殊处理的，并且不同的处理方式，也各有优缺点。

# 推荐做法

假设，大屏中地图区域的设计宽高为 8600 * 3200，宽高比为 43/16，那么需要在正常屏幕下设置地图的宽高为 2,580 * 960（只要宽高比和大屏中地图一致就行），然后所有的设计都按照正常大小设计即可。在大屏嵌入地图时，通过设置整个 iframe 的缩放来占满大屏中地图的空间。

注意点：大屏中地图的宽高比和屏幕下的地图宽高比一定要一致，不然地图会变形

优点：

方便复用，因为开发设计大小为正常尺寸
修改较少，不用单独考虑并设置地图中微件等的大小
和其他方式相比，同级别栅格请求较少

缺点：

因为大屏中嵌入的是缩放后的地图，所以地图整体会有轻微的失真的情况（随地图和大屏地图大小差别越大，失真情况越严重）

# 非推荐做法

不对地图进行整体缩放，按照正常的地图使用，给地图 iframe 设置正确的宽高，这时需要注意修改以下三方面：

所有微件和微件面板需根据大屏情况设置大小
所有服务都需重新根据情况修改样式，使之适应大屏展示（正常的标注服务在这种情况下是看不清的）
所有样式配置都需适应大屏大小

优点：

效果良好，不失真
和推荐做法相比，同级别展示范围更大

缺点：

修改项比较多
因为服务和配置等都是针对大屏大小进行设置的，所以在正常屏幕上不能直接使用相关资源
和推荐做法相比，同级别请求的栅格数更多，会稍微影响加载展示速度（可通过栅格的 subDomains 功能优化）

# 二维框架

❓ 框架API地址怎么修改？

✔️ 在 gis_framework 根目录下有 env.js 文件，在里面找到 apiUrl 变量，修改即可。

注：

在 env.js 文件的 61 和 117 行左右都有 apiUrl 变量声明，请注意最后用到是哪个
配置的 API 路径下面应该有 init.js 文件才是正确的

# 界面异常

# 底图

❓ 底图出现网格怎么去掉？

An image

✔️ 一般是由于当前地图HTML/Iframe正处于缩放中，只要把浏览器缩放比例调为100%或者把整体页面放到合适分辨率的显示器中即可

# 地图

❓ 地图突然变白/纯色是怎么回事？

✔️ 一般都是定位出现了异常，请检查操作过程中涉及定位的方法的参数是否都符合要求

❓ 地图突然变白/纯色是怎么回事？

✔️ 一般都是定位出现了异常，请检查操作过程中涉及定位的方法的参数是否都符合要求

# 图层列表

❓ 关于图层列表中图层的代码应该写到什么位置？

初始关于图层列表中配置的图层进行的操作要等待图层列表加载完所有图层对象后才能执行

// 先订阅地图加载完成
if(map!==undefined){
   init();
}else {
    mapPageLoaded(function () {
        init();
    });//页面加载完成时调用此方法
}

// 地图初始化完成执行
function init() {
  // 订阅图层列表-所有图层对象加载完成
  subscribeEvent('all-layers-loaded', function(){
    // 图层列表-所有图层对象加载完成
    // 可以执行操作相关图层的逻辑代码了
    // ....
  })
}

注：

地图加载完成
- 地图map初始化完成，其他图层等并未开始加载
图层列表-所有图层对象加载完成
- 所有配置的图层的图层对象已经加到map对象上了
- 各图层数据正在异步加载中（如果要执行筛选的需要注意下等待图层数据加载完成）

← 编码视频资源 →