|
|
@@ -1,108 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="cesium-map-container">
|
|
|
- <div id="cesiumContainer" ref="cesiumContainer"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { ref, onMounted, onUnmounted } from "vue"
|
|
|
-
|
|
|
-const cesiumContainer = ref(null)
|
|
|
-let viewer = null
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- // 使用 CDN 方式引入 Cesium
|
|
|
- if (typeof Cesium === 'undefined') {
|
|
|
- const script = document.createElement('script')
|
|
|
- script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js'
|
|
|
- script.onload = initCesium
|
|
|
- document.head.appendChild(script)
|
|
|
-
|
|
|
- const link = document.createElement('link')
|
|
|
- link.rel = 'stylesheet'
|
|
|
- link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css'
|
|
|
- document.head.appendChild(link)
|
|
|
- } else {
|
|
|
- initCesium()
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-function initCesium() {
|
|
|
- if (cesiumContainer.value && typeof Cesium !== 'undefined') {
|
|
|
- // 初始化 Cesium 视图器
|
|
|
- viewer = new Cesium.Viewer(cesiumContainer.value, {
|
|
|
- imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
|
|
|
- url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
|
|
|
- }),
|
|
|
- baseLayerPicker: true,
|
|
|
- geocoder: true,
|
|
|
- homeButton: true,
|
|
|
- navigationHelpButton: true,
|
|
|
- animation: false,
|
|
|
- timeline: false,
|
|
|
- fullscreenButton: true,
|
|
|
- scene3DOnly: false
|
|
|
- })
|
|
|
-
|
|
|
- // 设置初始视图为昆山地区
|
|
|
- const kunshanPosition = Cesium.Cartesian3.fromDegrees(120.98422, 31.39244, 10000)
|
|
|
- viewer.camera.flyTo({
|
|
|
- destination: kunshanPosition,
|
|
|
- duration: 3
|
|
|
- })
|
|
|
-
|
|
|
- // 添加昆山区域标记
|
|
|
- addKunshanMarker()
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function addKunshanMarker() {
|
|
|
- if (viewer) {
|
|
|
- // 添加昆山区域的点标记
|
|
|
- const kunshanPosition = Cesium.Cartesian3.fromDegrees(120.98422, 31.39244, 0)
|
|
|
-
|
|
|
- const pinBuilder = new Cesium.PinBuilder()
|
|
|
- const pin = pinBuilder.fromText('昆山', Cesium.Color.RED, 48)
|
|
|
-
|
|
|
- viewer.entities.add({
|
|
|
- position: kunshanPosition,
|
|
|
- name: '昆山市',
|
|
|
- billboard: {
|
|
|
- image: pin.toDataURL(),
|
|
|
- scale: 0.5
|
|
|
- },
|
|
|
- label: {
|
|
|
- text: '昆山市',
|
|
|
- font: '14pt monospace',
|
|
|
- style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
- outlineWidth: 2,
|
|
|
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
- pixelOffset: new Cesium.Cartesian2(0, -30)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-onUnmounted(() => {
|
|
|
- if (viewer) {
|
|
|
- viewer.destroy()
|
|
|
- viewer = null
|
|
|
- }
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.cesium-map-container {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
-
|
|
|
-#cesiumContainer {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-</style>
|