| | |
| | | import { nextTick, onMounted, onUnmounted } from 'vue' |
| | | import { read } from 'xlsx' |
| | | |
| | | import startPng from '@/assets/map_images/Startingpointicon.png' |
| | | import endPng from '@/assets/map_images/EndPointicon.png' |
| | | |
| | | window.$viewer = null |
| | | window.$Cesium = null |
| | | let pointLayer = null |
| | | let polylineLayer = null |
| | | let pointHtmlLayer = null |
| | | |
| | | const { VITE_APP_BASE } = import.meta.env |
| | | // import * as Cesium from 'cesium' |
| | |
| | | window.$viewer?.addLayer(pointLayer) |
| | | polylineLayer = new DC.VectorLayer('polylineLayer') |
| | | window.$viewer?.addLayer(polylineLayer) |
| | | pointHtmlLayer = new DC.HtmlLayer('pointHtmlLayer') |
| | | window.$viewer?.addLayer(pointHtmlLayer) |
| | | |
| | | isViewerReady.value = true |
| | | } |
| | |
| | | |
| | | if (!lng || !lat) return |
| | | |
| | | let [newLng, newLat] = DC.CoordTransform.GCJ02ToWGS84(lng, lat) |
| | | |
| | | let point = new DC.Point(new DC.Position(newLng, newLat)) |
| | | let point = new DC.Point(new DC.Position(lng, lat)) |
| | | pointLayer.addOverlay(point) |
| | | |
| | | window.$viewer?.zoomTo(pointLayer) |
| | |
| | | */ |
| | | function addPolyline (data) { |
| | | if (polylineLayer) polylineLayer.clear() |
| | | if (pointHtmlLayer) pointHtmlLayer.clear() |
| | | |
| | | if (data.length === 0) return |
| | | |
| | | const positionStr = data.map(item => { |
| | | const [lng, lat] = item |
| | | |
| | | let [newLng, newLat] = DC.CoordTransform.GCJ02ToWGS84(lng, lat) |
| | | |
| | | return `${newLng}, ${newLat}` |
| | | return `${lng}, ${lat}` |
| | | }).join(';') |
| | | |
| | | let polyline = new DC.Polyline(positionStr) |
| | |
| | | }) |
| | | polylineLayer.addOverlay(polyline) |
| | | |
| | | |
| | | data.forEach((item, index) => { |
| | | const [lng, lat] = item |
| | | let position = new DC.Position(lng, lat) |
| | | |
| | | console.log(lng, lat) |
| | | let billboard = null |
| | | |
| | | if (index === 0) { |
| | | billboard = new DC.Billboard(position, startPng) |
| | | } |
| | | |
| | | if (index === data.length - 1) { |
| | | billboard = new DC.Billboard(position, endPng) |
| | | } |
| | | |
| | | |
| | | billboard && (billboard.size = [20, 20]) |
| | | billboard && (billboard.setStyle({ |
| | | "pixelOffset": { "x": 0, "y": -8 } |
| | | })) |
| | | billboard && polylineLayer.addOverlay(billboard) |
| | | |
| | | if (index !== 0 && index !== data.length - 1) { |
| | | let divIcon = new DC.DivIcon( |
| | | position, |
| | | `<div class="point-icon-box">${index}</div>` |
| | | ) |
| | | pointHtmlLayer.addOverlay(divIcon) |
| | | } |
| | | }) |
| | | |
| | | const line = turf.lineString(positionStr.split(';').map(i => i.split(','))) |
| | | const bbox = turf.bbox(line) |
| | | const bboxPolygon = turf.bboxPolygon(bbox) |