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