室内地图制作-电子地图管理系统源代码公开-室内地图开源-SDK调用指南（二）

通过源代码实现室内地图制作,室内地图开发,室内地图API,室内地图SDK，电子地图一体化

维小帮定位导航

766人浏览 · 2024-10-18 16:23:27

维小帮定位导航 · 2024-10-18 16:23:27 发布

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

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

在开源室内地图编辑-电子地图管理系统源代码公开-SDK调用实战指南（一）一文中我们提到了基础室内地图的基础呈现、2D/3D切换、图地图POI点击以及坐标转换的实现代码。今天，我们将深入探讨电子地图室内外一体化技术，并通过实例代码展示如何实现室内外一体化电子地图的集成与应用。

二、室内外电子地图切换

开发者可以实现电子地图室内外无缝切换，用户移动地图并缩放，将自动切换室内外模式，比如初始视角是室外电子地图：

放大某一栋楼后可平滑切换到室内地图，无需进行格外的按钮点击，如下图所示：

三、室内电子地图源代码

以下代码展示了如何在电子地图上进行室内外切换：

<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;
    position: relative;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    移动地图并缩放，将自动切换室内外模式
  </div>
</body>
<script>
  let mapId = '1661676290278822678' // 您创建的地图ID

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

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

</html>

在本文中，我们通过代码示例，详细介绍了一些电子地图的室内外切换。开发者可以根据自己的应用场景灵活实现，从而开发出更智能、更高效的基于地图服务的应用。接下来我会分享关于室内地图制作有关的楼层控件、指南针控件、电子地图缩放放大等控件的操作，大家可以期待一下，也欢迎大家跟我分享。