Cesium 加载json数据
2021/5/13 10:30:06
本文主要是介绍Cesium 加载json数据,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Cesium.GeoJsonDataSource.load(json).then(function (dataSource) { viewer.dataSources.add(dataSource).then(res => { test = res; test.name = '测试' }); });
案例:
<!DOCTYPE html> <html lang="ch-en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./js/Cesium-1.72/Build/Cesium/Widgets/widgets.css"> <style> #map3d { height: 1000px; width: 1000px; margin: 0 auto; } </style> </head> <body> <div id="map3d"></div> </body> <script src="./js/Cesium-1.72/Build/Cesium/Cesium.js"></script> <script src="./js/jQuery.js"></script> <script> viewer = new Cesium.Viewer('map3d', { selectionIndicator: false, animation: false, baseLayerPicker: false, timeline: false, sceneModePicker: false, navigationHelpButton: false, fullscreenButton: false, imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=7fdca056b488529020b96dd0a6891579', layer: 'img', style: 'default', tileMatrixSetID: 'w', format: 'tiles', tileHeight: 0, maximumLevel: 18 }), }); const json = { "type": "Polygon", "coordinates": [[[106.818340748, 35.345186594], [106.912227457, 35.857950428], [107.235357796, 35.9277981500001], [107.730486478, 36.022622105], [107.85655614, 35.8806908460001], [107.822121228, 35.5285600620001], [107.584770259, 35.2284864530001], [107.376631529, 35.1572428380001], [107.022823644, 35.1807053140001], [106.988349662, 35.2733902210001], [106.818340748, 35.345186594]]] } Cesium.GeoJsonDataSource.load(json).then(function (dataSource) { viewer.dataSources.add(dataSource).then(res => { test = res; test.name = '测试' }); }); </script> </html>
这篇关于Cesium 加载json数据的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略