vue天地图封装组件

### Vue 中封装天地图组件 #### 创建 `useLeafletMap` Hook 为了实现对 Leaflet 地图的功能扩展，在 Vue 项目中创建了一个名为 `useLeafletMap.js` 的 hook 文件。此文件提供了设置地图缩放级别的方法： ```javascript // useLeafletMap.js import { ref, onMounted } from 'vue'; import L from 'leaflet'; export function useLeafletMap() { const mapRef = ref(null); const setZoomLevels = (minLevel, maxLevel) => { if (!mapRef.value) return; mapRef.value.setMinZoom(minLevel); mapRef.value.setMaxZoom(maxLevel); }; onMounted(() => { // 初始化地图实例并挂载到DOM节点上 mapRef.value = L.map('map').setView([39.9042, 116.4074], 13); // 默认北京坐标 }); return { mapRef, setZoomLevels }; } ``` 该函数允许开发者通过调用 `setZoomLevels(12, 18)` 来限定地图展示的最大最小比例尺[^1]。 #### 构建 `useTdtMap` Hook 针对特定的地图服务提供商——天地图(Tianditu)，还开发了另一个辅助工具 `useTdtMap.js`，用于处理与 Tianditu API 相关的操作，比如向地图添加标记或其他类型的覆盖物: ```javascript // useTdtMap.js import { inject } from 'vue'; import L from 'leaflet'; import TDT from '@turf/turf'; // 假设这里引入的是Tianditu官方库或适配器 const tdtKey = Symbol(); export default function provideTdt(key){ provide(tdtKey, key); } export function useTdtMap(){ const apiKey = inject(tdtKey); const addMapOverlay = (overlayElement)=>{ let layer = new TDT.Layer(apiKey).addTo(map); overlayElement.addTo(layer); } return {addMapOverlay}; } ``` 这段代码展示了如何利用依赖注入机制传递密钥，并提供了一种简便的方法来往现有地图层面上增加新的图形元素[^2]。 #### 实现基于 VUE 组件的地图标注功能 对于更复杂的交互需求，则可以通过构建专门的 Vue 组件来进行管理。例如下面这个案例描述了怎样在一个 CesiumJS 支持下的三维地球仪表面上放置多个兴趣点(Point of Interest): ```html <!-- PointLayer.vue --> <template> <div id="cesiumContainer"></div> </template> <script setup lang="ts"> import * as Cesium from 'cesium'; import './Cesium/Widgets/widgets.css' import 'cesium/Build/CesiumUnminified/Cesium' onMounted(()=>{ var viewer = new Cesium.Viewer('cesiumContainer',{ terrainProvider : Cesium.createWorldTerrain() }); props.poiData.forEach(poi=>{ var entity=viewer.entities.add({ position:Cesium.Cartesian3.fromDegrees(Number(poi.lng),Number(poi.lat)), point:{pixelSize:5,color:Cesium.Color.RED}, label:{ text:`${poi.name}`, font:'14px sans-serif', fillColor:Cesium.Color.BLACK, outlineColor:Cesium.Color.WHITE, verticalOrigin:Cesium.VerticalOrigin.BOTTOM } }) }); }) </script> <style scoped> #cesiumContainer{ width:100%; height:calc(100vh - 1rem); } </style> ``` 上述例子不仅实现了基本的位置渲染逻辑，同时也考虑到了样式定制化的需求，确保最终呈现出来的界面既美观又实用[^3]。 #### 自定义地图容器样式 最后值得注意的一点是，除了核心的地图绘制外，还可以借助 CSS 对地图承载区域进行美化调整，从而更好地融入整个应用的设计风格之中。如下所示即为一段简单的样式声明片段，它能够有效控制地图窗口的实际大小以及边距等属性[^4]: ```css /* Map Container Style */ #map-container { width: 100%; height: 400px; /* 可根据实际页面布局灵活设定 */ border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); } ```