1. 安装

1. 在项目根目录下新建.npmrc 文件。
2. 在.npmrc 文件中，新增一行@mapmost:registry="https://npm.mapmost.com"
3. 执行npm install gisviewer-mapmost --save

2. 使用

initialize为异步函数，请加入await/then等待初始化完成再调用后续功能。

import { GisViewer } from 'gisviewer-mapmost';

const gisViewer = new GisViewer();

// 点击覆盖物后回调函数
const overlayClickCallback = (data: any) => {
  console.log('overlayClickCallback', data);
};

// 异步，等待地图初始化完成
await gisViewer.initialize({
  mapOptions: {
    container: 'map-container', // 地图容器div id
    center: [120.16176998953728, 30.856732030744197], // 初始中心点
    zoom: 14.25, // 初始缩放
    pitch: 48.5, // 初始俯仰角
    style: 'http://xxxx' // 样式文件,
    userId: 'xxxx', // 用户授权码
    authConfig: { // 内网部署时需要配置
      authServiceAddress: 'http://xxxx',
      authServiceUseSSL: false,
      pluginAddress: 'http://xxxx'
    }
  },
  layers: [
    {
      type: '3dtiles',
      name: 'road1',
      url: '{assetsRoot}/3DTiles/HuZhou/1/road/tileset.json', //{assetsRoot}部分会自动替换为assetsRoot参数的值
      matrix: {
        translate: [0, 0, -15]
      },
      visible: false
    },
    {
      type: '3dtiles',
      name: 'device1',
      url: '{assetsRoot}/3DTiles/HuZhou/1/device/tileset.json',
      matrix: {
        translate: [0, 0, -15]
      },
      visible: false
    }
  ],
  assetsRoot: 'http://10.10.10.123:8080/GisViewerAssets/', // 地图组件所需的外部资源地址
  targetFPS: 30, // 播放轨迹时的目标帧数
  overlayClickCallback
});

3. 接口

所有接口均返回 IResult 结果对象。

{
  status: 0, // 0为调用成功，其他值调用失败
  message: 'success', // 若调用失败，记录错误信息
  result: {}  // 若有需要返回的信息，记录在result中
}

3.1 地图基本功能

3.1.1 设置地图中心点

描述

• 将地图中心点移动到指定位置

接口定义

• setMapCenter(params: ISetMapCenterParams): IResult

参数

• ISetMapCenterParams | 参数名 | 必选 | 参数类型 | 说明 | | ------ | ---- | -------- | ---------- | | center | true | number | 中心点坐标 |

调用示例

gisViewer.setMapCenter({ center: [120.17791354154974, 30.855474077188788] });

3.1.2 改变地图视角

描述

• 通过当前值和新值之间的动画过渡更改地图的中心、缩放级别、方位角和倾斜角等任意组合。对于选项中未指定的任何详细信息，地图将保留其当前值。

接口定义

• flyTo(params: IFlyToParams): IResult

参数

• IFlyToParams | 参数名 | 必选 | 参数类型 | 说明 | | ------- | ----- | -------- | ---------------------------------------------------------------- | | center | false | number | 中心点坐标。 | | zoom | false | number | 缩放级别。 | | pitch | false | number | 俯仰角。正上方俯视视角为 0°, 水平视角为 90°。 | | bearing | false | number | 方位角。朝向正北为 0°, 正东为 90°, 正南为 180°/-180°, 正西为-90° | | duration | false | number | 过渡动画时间, 单位 ms。默认为 1s，若为 0 则没有动画过渡。 |

调用示例

gisViewer.flyTo({
  center: [120.17791354154974, 30.855474077188788],
  zoom: 14,
  pitch: 45,
  bearing: 90,
  duration: 500
});

3.1.3 设置图层可见性

描述

• 设置在初始化参数 layers 中的图层是否可见

接口定义

• setLayerVisible(layerName: string, visible: boolean): IResult

参数

• ISetMapCenterParams | 参数名 | 必选 | 参数类型 | 说明 | | ------ | ---- | -------- | ---------- | | layerName | true | string | 初始化参数中配置的 layer.name | | visible | true | boolean | 是否可见 |

调用示例

gisViewer.setLayerVisible('road1', true);

3.2 覆盖物相关功能

3.2.1 添加图标

描述

• 在地图指定坐标添加自定义图标。
• 若 type 和 id 与现有图标重复, 现有图标会被替代。

接口定义

• addIcons(params: IAddIconsParams): Promise<IResult>

参数

• IAddIconsParams | 参数名 | 必选 | 参数类型 | 说明 | | ------------- | ----- | -------------- | ----------------------------------- | | type | true | string | 点位类型 | | popupTemplate | false | string | 弹出框 html 模板。模板中使用${}作为占位符，显示 icon.properties 中的属性。不传则不显示弹框。 | | symbol | true | IIconSymbol | 默认图标样式。 | | icons | true | IIconOverlay[] | 点位列表。 |

• IIconSymbol | 参数名 | 必选 | 参数类型 | 说明 | | ------------- | ----- | -------------- | ----------------------------------- | | url | true | string | 图标文件 url。 | | layout | false | any | 图标样式的布局属性。设置项参考MapMost SDK中的 icon-* 部分，分类为layout的属性。 | | paint | false | any | 图标样式的绘制属性。设置项参考MapMost SDK中的 icon-* 部分，分类为paint的属性。 |

• IIconOverlay | 参数名 | 必选 | 参数类型 | 说明 | | ------------- | ----- | -------------- | ----------------------------------- | | id | true | string | 点位唯一 id。 | | symbol | false | IIconSymbol | 图标样式。会覆盖默认图标样式。 | | geometry | true | number[] | 点位坐标。 | | properties | false | any | 业务属性。用于点击图标后的显示和回传。 |

调用示例

gisViewer.addIcons({
  type: 'camera',
  popupTemplate:
    '<div><h3>${desc}</h3><table border="1"><tr><th>编号</th><td>${id}</td></tr><tr><th>IP</th><td>${ip}</td></tr></table></div>',
  symbol: {
    url: 'http://localhost:28082/GisViewerAssets/Images/SheXiangJi.png',
    layout: { 'icon-size': 0.75 }
  },
  icons: [
    {
      geometry: [120.15156360025, 30.86152989292],
      id: '33050200001310924376',
      properties: {
        url: 'http://localhost:28082/GisViewerAssets/Images/SheXiangJi.png',
        ip: '33.151.190.1',
        desc: '吴兴大道蜀山路-东1'
      }
    },
    {
      url: 'http://localhost:28082/GisViewerAssets/Images/SheXiangJi.png',
      geometry: [120.15701206663, 30.86049412983],
      id: '33050200001310924383',
      properties: {
        ip: '33.151.190.26',
        desc: '吴兴大道乌山路-东1'
      }
    }
  ]
});

3.2.3 添加折线

描述

• 在地图指定坐标添加折线。
• 若 type 和 id 与现有折线重复, 现有折线会被替代。

接口定义

• addLines(params: IAddLinesParams): IResult

参数

• IAddLinesParams | 参数名 | 必选 | 参数类型 | 说明 | | ------------- | ----- | -------------- | -------------------------------------------------------------------------------------------------- | | type | true | string | 点位类型 | | popupTemplate | false | string | 弹出框 html 模板。模板中使用${}作为占位符，显示 icon.properties 中的属性。不传则不显示弹框。 | | symbol | true | ILineSymbol | 折线样式。 | | lines | true | ILineOverlay[] | 折线列表。 |

• ILineSymbol | 参数名 | 必选 | 参数类型 | 说明 | | ------------- | ----- | -------------- | ----------------------------------- | | layout | false | any | 折线样式的布局属性。设置项参考MapMost SDK中分类为layout的属性。 | | paint | false | any | 折线样式的绘制属性。设置项参考MapMost SDK中分类为paint的属性。 |

• ILineOverlay | 参数名 | 必选 | 参数类型 | 说明 | | ------------- | ----- | -------------- | ----------------------------------- | | id | true | string | 唯一 id。 | | symbol | false | ILineSymbol | 折线样式。会覆盖默认折线样式。 | | geometry | true | number[][] | 折线节点坐标数组。至少 2 个点。 | | properties | false | any | 业务属性。用于点击图标后的显示和回传。 |

调用示例

gisViewer.addLines({
  type: 'road',
  symbol: {
    paint: {
      'line-width': 4,
      'line-color': 'rgb(255, 0, 0)',
      'line-opacity': 0.8,
      'line-dasharray': [4, 1] // 虚线时使用，虚线实虚比。
    }
  },
  lines: [
    {
      geometry: [
        [120.15156360025, 30.86152989292],
        [120.15701206663, 30.86049412983],
        [120.16345965918, 30.85680210606],
        [120.1785427274, 30.8558678532]
      ],
      id: 'line1',
      properties: { name: '吴兴大道' }
    }
  ]
});

3.2.4 添加多边形

描述

• 在地图指定坐标添加多边形。
• 若 type 和 id 与现有多边形重复, 现有多边形会被替代。

接口定义

• addPolygons(params: IAddPolygonsParams): IResult

参数

• IAddPolygonsParams | 参数名 | 必选 | 参数类型 | 说明 | | ------------- | ----- | -------------- | -------------------------------------------------------------------------------------------------- | | type | true | string | 点位类型 | | popupTemplate | false | string | 弹出框 html 模板。模板中使用${}作为占位符，显示 icon.properties 中的属性。不传则不显示弹框。 | | symbol | true | IPolygonSymbol | 多边形样式。 | | lines | true | IPolygonOverlay[] | 多边形列表。 |

• IPolygonSymbol | 参数名 | 必选 | 参数类型 | 说明 | | ------------- | ----- | -------------- | ----------------------------------- | | layout | false | any | 多边形样式的布局属性。设置项参考MapMost SDK中分类为layout的属性。 | | paint | false | any | 多边形样式的绘制属性。设置项参考MapMost SDK中分类为paint的属性。 |

• IPolygonOverlay | 参数名 | 必选 | 参数类型 | 说明 | | ------------- | ----- | -------------- | ----------------------------------- | | id | true | string | 唯一 id。 |
  | symbol | false | IPolygonSymbol | 多边形样式。会覆盖默认多边形样式。 | | geometry | true | number[][] | 多边形轮廓节点坐标数组。至少三个点。api 会检查首尾是否重合，不重合自动补足。 | | properties | false | any | 业务属性。用于点击图标后的显示和回传。 |

调用示例

gisViewer.addPolygons({
  type: 'area',
  symbol: {
    paint: {
      'fill-color': '#ABC6EF',
      'fill-outline-color': '#3bb2d0',
      'fill-opacity': 0.6
    }
  },
  polygons: [
    {
      geometry: [
        [120.15156360025, 30.86152989292],
        [120.15701206663, 30.86049412983],
        [120.16345965918, 30.85680210606],
        [120.1785427274, 30.8558678532],
        [(120.15156360025, 30.86152989292)]
      ],
      id: 'area1',
      properties: { name: '吴兴大道' }
    }
  ]
});

3.2.5 移除覆盖物

描述

• 按type或id 属性移除一个或多个覆盖物。

接口定义

• removeOverlays(params: IRemoveOverlayParams): IResult

参数

• IRemoveOverlayParams | 参数名 | 必选 | 参数类型 | 说明 | | ------ | ----- | -------- | ------------------------------------------------------------- | | type | true | string | 新增接口中的 type。 | | id | false | string | 新增接口中的 id。不传 id 则移除 type 下所有覆盖物。 |

调用示例

gisViewer.removeOverlays({ type: 'camera', id: '33050200001310924383' });

3.3 全息流相关功能

3.3.1 显示轨迹

描述

• 接收孪生或仿真的车辆轨迹数据，在地图上显示车辆轨迹。

接口定义

• handleVehicleTraceData(traceData: any): Promise<IResult>

参数

• traceData 后端发送的轨迹数据。

// 轨迹典型数据
const traceData = {
  fixAngle: 1,
  angle: 208.87017366791468, // 车身航向角
  jgsj: 1729737679209, // 时间戳
  vehNo: '2791', // 唯一id，也可使用ptcId
  lat: 30.860837817762537, // 纬度，也可使用latitude
  lng: 120.15647384872648, // 经度，也可使用longitude
  cx: '1', // 交通参与者类型，也可使用ptcType
  objKind: 10, // 机动车车型，也可使用vehicleType
  csys: 'A', // 车身颜色，也可使用vehicleColor
  hphm: '浙ER9168', // 号牌号码，也可使用plateNo
  hpys: '2' // 号牌颜色，也可使用plateColor
};

调用示例

const unZip = (key: string) => {
  try {
    const charData = [];
    const keyArray = key.split('');
    for (let i = 0; i < keyArray.length; i++) {
      const item = keyArray[i];
      charData.push(item.charCodeAt(0));
    }
    return pako.inflate(new Uint8Array(charData), { to: 'string' });
  } catch (e) {
    console.log(`非压缩内容: ${key}`);
    return key; // 如果解压失败，返回原始字符串
  }
};

// 获取信号机通道与车道的映射关系
const mapperResponse = await axios.get('http://通道车道映射服务地址');
if (mapperResponse.status === 200 && mapperResponse.data.code === '0') {
  gisViewer.setChannelLaneMapper(mapperResponse.data.data);
} else {
  console.log('获取车道映射失败');
}

const ws = new WebSocket('ws://WebSocket地址');
let result = { status: 0, message: '打开轨迹成功' };

// 发送握手
ws.onopen = () => {
  ws?.send('{"msgType":"handshake"}');
};

ws.onmessage = async (message: MessageEvent) => {
  const messageObj = JSON.parse(message.data);
  const { msgType } = messageObj;

  switch (msgType) {
    // 接收到握手数据
    case 'handshake': {
      const channelId = messageObj.data;
      const crossId = messageObj.crossID;
      const signalId = messageObj.signalID;
      // 订阅轨迹和信号机数据
      const response = await axios.post(
        'http://订阅服务地址',
        {},
        {
          params: {
            channelId,
            topics: 'ws_sign_rt_trace,ws_sign_rt_phase'
          },
          headers: { crossId, signalId, token: '' }
        }
      );
      if (response.status === 200 && response.data.code === '0') {
        console.log('打开轨迹成功');
      }
      break;
    }

    // 接收到轨迹数据
    case 'ws_sign_rt_trace': {
      // 解压
      const trackData = JSON.parse(unZip(messageObj.data));
      gisViewer.handleVehicleTraceData(trackData);
      break;
    }

    // 接收到信号机数据
    case 'ws_sign_rt_phase': {
      // 将路口号加入数据中
      messageObj.data.crossId = messageObj.crossId;
      gisViewer.handleSignalData(messageObj.data);
    }
  }
};

3.3.2 设置车辆号牌可见性

描述

• 设置车辆号牌是否可见

接口定义

• setVehiclePlateVisible(visible: boolean): IResult

3.3.3 清除车辆轨迹

描述

• 清除所有车辆轨迹

接口定义

• clearVehicleTrace(): IResult

3.3.4 显示路口信号机数据

描述

• 显示路口当前相位倒计时和车道通行情况。

接口定义

• handleSignalData(signalData: any): Promise<IResult>

参数

• signalData 后端发送的轨迹数据。

调用示例

见 3.3.1调用示例

3.3.2 清除信号机数据

描述

• 清除路口当前相位倒计时和车道通行情况。

接口定义

• clearSignalData(): IResult

3.3.3 设置信号机通道与车道的映射

描述

• 通过服务地址，获取信号机通道与车道的映射关系后传输给组件。

接口定义

• setChannelLaneMapper(data: any): Promise<IResult>

参数

从路口盒子获取到的映射关系

调用示例

见 3.3.1调用示例