MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MCHMAP > 鹰眼地图

鹰眼图 - MCHMAP

关键引入文件：

第一步：引入框架地图关键文件

https://mhc.ixiera.com/mhc/main_min.js

https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js

https://mhc.ixiera.com/mhc/Cesium3DTile.js

第二步：引入鹰眼图API文件

js/HawkEye.min.js

1.初始化

let hawkEyeMap = new HawkEye3DMap(viewer);

实例代码：

// 极简调用

let hawkEyeMap = new HawkEye3DMap(viewer);

hawkEyeMap.init();

2.参数说明

viewer：创建的view实例。

3.完整代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>鹰眼地图</title>
        <script src="https://mhc.ixiera.com/mhc/main_min.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
        <script src="js/HawkEye.min.js"></script>
        <style type="text/css">
            body{width: 100vw;height: 100vh;display: block;overflow: hidden;position: relative;}
            .cesium-viewer, 
            .cesium-viewer-cesiumWidgetContainer, 
            .cesium-widget, 
            .cesium-widget canvas{width: 100%;height: 100%;}
            .btns-row{position: absolute; top: 15px;left: 15px;}
            .btns-row .item-row{margin-bottom: 10px;}
            .btns-row .item-row input{line-height: 30px;padding: 0px 10px;}
            .btns-row button{width: 100px;height: 30px; border-radius: 2px;margin-right: 15px;font-size: 12px;}
        </style>
    </head>
    <body>
        <div id="container" style="width: 100vw;height: 100vh;display: block;overflow: hidden;"></div>
        <div class="btns-row">
            <div class="item-row">
                <button onclick="renderHawkEye3DMap()">鹰眼图三维</button>
            </div>
        </div>
        <script type="text/javascript">
            // 初始化地图 - 主图
            MchCesium.init('container', true);
            // 聚焦坐标
            MchCesium.flyto(119.23, 30.23, 1000, function () {
                console.log('flyto');
            })
            
            const viewer = MchCesium.viewer;
            
            function renderHawkEye3DMap(){
                // 初始化 - 鹰眼地图（右上小图）
                let hawkEyeMap = new HawkEye3DMap(viewer);
                hawkEyeMap.init();
            }
        </script>
    </body>
</html>

 

  1. 效果展示

 

Demo地址：

https://mhc.ixiera.com/mhc/mchmap/HawkEye/index.html

本文档来自—MCHMAP 丨 地图引擎平台