开源室内地图编辑-电子地图管理系统源代码公开-SDK调用实战指南（一）

原创已于 2024-10-16 17:47:58 修改 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#开源 #物联网 #webgl #python #java

于 2024-10-15 17:48:51 首次发布

技术详解专栏收录该内容

14 篇文章

订阅专栏

一、室内外电子地图可视化制图项目需求

室内外地图开发需满足开发者可以在Android、iOs、web应用中加入地图相关的功能，包括：地图展示、地图交互、在地图上绘制路线、POI点、搜索、AR导航、蓝牙点位、离线地图等功能。

二、基础电子地图呈现

1、基础地图

这里的基础电子地图是指3d室内地图,对于室内环境来说，3d地图和2.5d地图更加能满足实际需求。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>基础地图</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1.1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1.1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    console.log('地图加载成功')
  })
</script>

</html>

前端呈现效果：

2、2D/3D切换

开发者可以实现电子地图 2D/3D的切换，可选择地形优先展现还是地图POI文字信息优先展现，以下代码展示了如何在室内电子地图上进行2D/3D切换。

// 监听地图加载完成
  map.on('loaded', () => {
    // 地图加载成功后添加事件
    let changeBtn = document.querySelector('.changeBtn')

    changeBtn.addEventListener('click', () => {
      status = status == '3D' ? '2D' : '3D'

      // 切换3D/2D
      map.setViewMode(status)

      changeBtn.innerHTML = status

前端呈现效果：

3、地图POI点击（地图信息介绍）

开发者可实现在一些区域添加，用户可选中，不如在商场内实现一些店铺区域的选中，可支持出发该POI点位的文字、图片、视频信息介绍。以下代码展示了如何在室内电子地图上进行地图POI点击。

 // 监听地图加载完成
  map.on('loaded', () => {
    console.log('地图加载成功')

    // 监听地图点击事件
    map.on('click', (e) => {
      marker && map.removeAllCustomMarker()
      // 获取poi点数据
      const polygon = e.object?.userData?.polygonData

      console.log(polygon, 'polygon')
      if (polygon) {
        card.style.display = 'block'
        card.innerHTML = `名称: ${polygon.name || '未命名'}，id: ${polygon.id}`
        // 通过poi点数据创建覆盖物
        marker = map.addMarker(polygon.parent.id, {
          isCollision: false,
          position: polygon.center,
          scale: 0.15,
          src: 'https://vgo-1258766855.cos.ap-nanjing.myqcloud.com/saas/general/8011b647-303c-4858-b12d-91b8c9268635.png',
        })
      } else {
        card.style.display = 'none'

前端呈现效果：

4、坐标转换

开发者可实现经纬度坐标与地图容器像素坐标，以下代码展示了如何在室内电子地图上进行坐标转换。

// 监听地图加载完成
  map.on('loaded', () => {
    console.log('地图加载成功')

    map.on('click', (e) => {
      // 获取poi点数据
      const polygon = e.object?.userData?.polygonData

      if (polygon?.center) {
        // 将地图容器像素坐标转换成经纬度
        let lngLat = map.coordsToLngLat(polygon.center)

        // 将经纬度转换成容器坐标
        let coords = map.lngLatToCoord(lngLat)

        containerX.innerHTML = 'x: ' + coords.x
        containerY.innerHTML = 'y: ' + coords.y


        lng.innerHTML = 'lng: ' + lngLat.lng
        lat.innerHTML = 'lat: ' + lngLat.lat
      }
    })
  })
</script>

</html>

在本文中，我们通过多个代码示例，详细介绍了一些基础电子地图的呈现代码。开发者可以根据自己的应用场景灵活实现，从而开发出更智能、更高效的基于地图服务的应用。接下来我会分享关于室内外地图一体化的干活，大家可以期待一下，也欢迎大家跟我分享。