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