Cesium 鹰眼地图

最新推荐文章于 2024-05-15 15:02:10 发布

林林开飞机

最新推荐文章于 2024-05-15 15:02:10 发布

阅读量666

点赞数

分类专栏： cesium相关文章标签：前端

本文链接：https://blog.csdn.net/weixin_48569975/article/details/131068177

版权

本文介绍了如何在Vue项目中使用Cesium实现鹰眼地图功能，选择了Leaflet作为2D地图库，并针对高德地图的坐标偏移问题，采用coordtransform进行地理坐标纠偏。同时提到了在双击鹰眼图时可能出现的偏移问题。

摘要由CSDN通过智能技术生成

如图

鹰眼地图其实就是一个小地图，可以放在视窗的任何位置。这里选择2D地图，地图可以用常见的leaflet或者openlayer，此处示例选用leaflet，也借鉴了其他文章。

此处小地图使用高德地图，由于地图坐标偏移问题，本文对地图联动进行了偏移更改，选用了coordtransform进行了地理坐标纠偏。

//安装

npm i leaflet 
npm i coordtransform

下面是vue代码

<template>
  <div id="overview" class="overview"></div>
  <div class="yydt-wz">鹰眼地图</div>
</template>
<script lang="ts" setup>
import { CesiumOverviewMapControl } from './CesiumOverviewMapControl'
import * as L from 'leaflet'

const data = reactive({
  overviewCtr: ''
})

const initMap = () => {
  // 加载鹰眼地图
  var url = 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
  var layer = new L.TileLayer(url, {
    minZoom: 0,
    maxZoom: 20
  })
  var container = document.getElementById('overview')
  var options = {
    container: container,
    toggleDisplay: true,
    width: 281,
    height: 153,
    position: 'topright',
    aimingRectOptions: {
      color: '#ff1100',
      weight: 2
    },
    shadowRectOptions: {
      color: '#0000AA',
      weight: 1,
      opacity: 0,
      fillOpacity: 0
    }
  }
  data.overviewCtr = new CesiumOverviewMapControl(viewer, layer, options)
}

onMounted(async () => {
  initMap()
})
</script>

<style lang="scss" scoped>
.overview {
  position: absolute;
  z-index: 999;
  right: 85px;
  bottom: 37px;

  width: 281px;
  height: 153px;

 

  border: 1px solid gainsboro;
}
.yydt-wz {
  position: absolute;
  z-index: 1000;
  right: 85px;
  bottom: 37px;

  width: 281px;
  height: 32px;

  text-align: center;

  color: #ffffff;
  background-color: rgba($color: #000000, $alpha: 0.4);

  font-family: 'Source Han Sans CN';
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
}
</style>

下面是CesiumOverviewMapControl.ts代码

// 引入
import * as L from 'leaflet'
import coordtransform from 'coordtransform';

export const CesiumOverviewMapControl = function () {
  this.init.apply(this, arguments)
}

CesiumOverviewMapControl.prototype = {
  _container: null,
  _miniMap: null,
  _viewerMoving: false,
  _miniMapMoving: false,
  _userToggledDisplay: false,
  _minimized: false,
  viewer: null,
  tileLayer: null,
  options: {
    po