vue?cesium加載點與定位到指定位置的實現(xiàn)方法

更新時間：2024年03月05日 10:43:55 作者：不想上班只想要錢

Cesium是一個用于創(chuàng)建高性能、跨平臺的3D地球和地圖的開源JavaScript庫,它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導航等,這篇文章主要介紹了vue?cesium加載點與定位到指定位置,需要的朋友可以參考下

Cesium是一個用于創(chuàng)建高性能、跨平臺的3D地球和地圖的開源JavaScript庫。它提供了許多功能，包括地理空間數(shù)據(jù)可視化、地理定位和地圖導航等。在本文中，我們將介紹如何使用Cesium進行定位。
要使用Cesium進行定位，首先需要準備地理空間數(shù)據(jù)。Cesium支持多種數(shù)據(jù)格式，包括GeoJSON、KML、Shapefile等。你可以選擇適合你項目的數(shù)據(jù)格式，并使用Cesium提供的加載器加載地理數(shù)據(jù)。

下面介紹vue cesium加載點與定位到指定位置。

在這里插入圖片描述

vue cesium定位到指定位置

window.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(point.longDeg, point.latDeg, 6500000), orientation: {
                heading: 6.2079384332084935, roll: 0.00031509431759868534, pitch: -1.535
            }, duration: 3
        })

vue cesium加載點

// 加載點位
function addPoints(pointArr, point, show) {
    let shenhaiPoint = ''
    if (boatLayer.length != 0) {
        boatLayer.forEach(item => {
            window.viewer.entities.remove(item)
        })
    }
    pointArr.forEach((item, i) => {
        boatLayer[i] = window.viewer.entities.add({
            id: item.id, name: item.name, position: Cesium.Cartesian3.fromDegrees(item.jd, item.wd, 0), billboard: {
                // 圖像地址，URI或Canvas的屬性
                image: item.img || '/static/img/earth/boat_point.png', // image: item.img,
                // 設置顏色和透明度
                // color: Cesium.Color.WHITE.withAlpha(0.8),
                // 高度（以像素為單位）
                height: 20, // 寬度（以像素為單位）
                width: 15, // 逆時針旋轉(zhuǎn),表示Billboard繞其原點旋轉(zhuǎn)的角度（弧度）
                rotation: -((item.hdg > 360 ? item.cog : item.hdg) * Math.PI / 180), // rotation:-Cesium.Math.PI_OVER_FOUR *2,
                // 大小是否以米為單位
                sizeInMeters: false, // 相對于坐標的垂直位置
                // verticalOrigin: Cesium.VerticalOrigin.CENTER,
                // 相對于坐標的水平位置
                // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                // 該屬性指定標簽在屏幕空間中距此標簽原點的像素偏移量
                // pixelOffset: new Cesium.Cartesian2(-7, 0),
                scaleByDistance: new Cesium.NearFarScalar(2000, 1, 100000000, 0.1), // 顯示在距相機的距離處的屬性，多少區(qū)間內(nèi)是可以顯示的
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000000), show: true,  // 是否顯示
                alignedAxis: Cesium.Cartesian3.ZERO, // default
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            }, label: {
                text: item.name,
                show:true,
                font: "10px Source Han Sans CN", //字體樣式
                fillColor: Cesium.Color.WHITE, //字體顏色
                backgroundColor: Cesium.Color.fromCssColorString('red').withAlpha(0), //背景顏色
                showBackground: true, //是否顯示背景顏色
                style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label樣式
                outlineWidth: 3, // verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
                // horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
                pixelOffset: new Cesium.Cartesian2(0, -15) //偏移
            }, clampToGround: true
        });
    })    
}

到此這篇關于vue cesium加載點與定位到指定位置的文章就介紹到這了,更多相關vue cesium加載點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: