Cesium中将wkt数据转化为geoJSON格式后渲染至地球上

最新推荐文章于 2025-07-14 17:09:31 发布

刚刚好ā

最新推荐文章于 2025-07-14 17:09:31 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：接口 Cesium 文章标签： vue.js 前端 javascript vue vscode

本文链接：https://blog.csdn.net/weixin_43312391/article/details/124692377

接口同时被 2 个专栏收录

24 篇文章

订阅专栏

Cesium

7 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue应用中调用后端接口获取WKT数据，然后利用Turf.js和Cesium库将WKT格式转换为GeoJSON，并在3D地球上进行渲染。当点击关闭按钮时，可以移除渲染效果。实现过程中涉及到Vue组件、axios请求、GeoJSON数据处理和Cesium地图交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现目标：点击显示按钮，调用后端传递来的接口接收wkt数据，在vscode中将wkt数据转化为geoJSON格式，并渲染至地球上。点击关闭按钮，渲染效果移除。

实现方法：

一.调用后端接口

1.后端Swagger中：

2.api的js文件中：

export function getAllData() {
    return request({
        url: '/xxxx/xxxx/all',
        method: 'get',
    });
}

3.vue文件中：

import { getAllDemolition } from '@/api/xxxx/xxxx.js'

// 点击显示按钮处，该按钮再次点击变成关闭
openAdd() {
			this.showAll = !this.showAll
			if (this.showAll == true) {
				getAllData().then((res) => {
					if (res.data.code == 200) {
					}
				})
			} 
		}

二、将后端传来的wkt数据转化为GeoJSON并渲染至地球上

1.vue文件中：在接口调用处，直接将传来的数据传递给js中的方法，前提是已引入js中的方法

import { addGeoJson, removeGeoJson } from '@/earth/xxxx/xxxx.js'

openAdd() {
			this.showAll = !this.showAll
			if (this.showAll == true) {
				getAllData().then((res) => {
					if (res.data.code == 200) {
						addGeoJSON(res.data.data)
					}
				})
			} else {
				removeGeoJson() // 移除渲染效果
			}
		}

2.写数据转换及渲染的js文件中：

import * as turf from '@turf/turf'
let WKT = require('terraformer-wkt-parser'); // 需安装

// let geojson = WKT.parse('LINESTRING (30 10, 10 30, 40 40)');
let addGeoJsonData = []
let labelsData = [];



function addGeoJSON(arr) {
    arr.forEach(item => {
        if (item.geo) {
            let geo = WKT.parse(item.geo)
                // let center = turf.pointOnFeature(geo).geometry.coordinates; // 找中心点
            switch (item.status) {
                case 'XXX':
                    addGeoJson(geo, '#ead980')
                    break
                case 'XXXX':
                    addGeoJson(geo, '#eef237')
                    break
            }
        }

    })

}

function addGeoJson(urlStr, colorStr, callback) {
    let entity = null
    if (!urlStr) return
    Cesium.GeoJsonDataSource.load(urlStr).then((dataSource) => {
        let color = Cesium.Color.fromCssColorString(colorStr).withAlpha(0.7)
        for (let i = 0; i < dataSource.entities.values.length; ++i) {
            entity = dataSource.entities.values[i]

            if (entity) {
                // 形状总体
                if (entity._polygon) {
                    entity._polygon = new Cesium.PolygonGraphics({
                        hierarchy: entity._polygon._hierarchy._value,
                        outline: false,
                        material: color,
                        classificationType: Cesium.ClassificationType.TERRAIN,
                        zIndex: 10,
                        outlineColor: color,
                        outlineWidth: 2,
                        extrudedHeight: 10,
                        show: true
                    })
                }

                // if (entity._polyline) {
                //     entity._polyline = new Cesium.PolylineGraphics({
                //         positions: entity._polyline._positions,
                //         width: 2,
                //         material: color,
                //         clampToGround: true,
                //         classificationType: Cesium.ClassificationType.TERRAIN,
                //         show: true
                //     })
                // }
            }
            entity.cursor = true
        }
        addGeoJsonData.push(dataSource)
        viewer.dataSources.add(dataSource)
        callback(dataSource.entities.values)
    })
}

// 清除拆迁数据
function removeGeoJson() {
    for (let i = 0; i < addGeoJsonData.length; ++i) {
        viewer.dataSources.remove(addGeoJsonData[i])
    }
    addGeoJsonData.length = 0
    addGeoJsonData = []
    for (let j = 0; j < labelsData.length; j++) {
        viewer.entities.remove(labelsData[j])
    }
    labelsData = []
}

export {addGeoJson, removeGeoJson }

这样就实现了上述目标。