Mars3d开发——鹰眼地图

Mars3d开发——鹰眼地图

合抱之木，生于毫末；
九层之台，起于累土；
千里之行，始于足下。

---

---

一、简单介绍

拥有鹰眼地图的厂商有很多，比如百度的鹰眼地图、高德的鹰眼地图等等，但是要实现这个功能却很麻烦。无论是代码量还是复杂程度都不是一个很好的选择。
所有我选择了mars3d的鹰眼地图，它基于cesium对鹰眼地图进行重新的封装，所以使用起来很方便。下面将通过使用mars3d创建一个鹰眼地图。
都是基于mars3d项目基础上进行开发的。

二、使用步骤

1.引入mars3d和cesium类库

<!--引入cesium基础lib-->
<link href="https://unpkg.com/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>
 
<!--引入mars3d库lib-->
<link href="https://unpkg.com/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d/dist/mars3d.js" type="text/javascript" ></script>  
</script> 

2.在文件中引入mars3d

import * as mars3d from "mars3d"
let map  // mars3d.Map三维地图对象

3.初始化地图场景配置

/**
 * 合并属性参数，可覆盖config.json中的对应配置
 * @type {object}
 */
export const mapOptions = {
  scene: {
    center: { lat: 31.73204, lng: 117.286568, alt: 50785, heading: 359, pitch: -76 }
  }
}

4.构造一个鹰眼地图

构造一个鹰眼地图需要使用mars3d.control.OverviewMap这个类。
详细的配置可以查看 API

// 构造鹰眼地图
  const overviewMap = new mars3d.control.OverviewMap({
    basemap: {
      name: "天地图电子",
      type: "group",
      layers: [
        { name: "底图", type: "tdt", layer: "vec_d", key: ["9ae78c51a0a28f06444d541148496e36"] },
        { name: "注记", type: "tdt", layer: "vec_z", key: ["9ae78c51a0a28f06444d541148496e36"] }
      ]
    },
    rectangle: {
      color: "#fecd78",
      opacity: 0.2,
      outline: 1,
      outlineColor: "#ff7800"
    },
    style: {
      right: "5px",
      top: "5px",
      width: "200px",
      height: "150px"
    }
  })
  map.addControl(overviewMap)
}