Cesium基础知识-加载json数据

2023-10-18 17:28:40

  1. viewer = new Cesium.Viewer('cesiumContainer');
  3. //加载json数据生成线
  4. function CreateLineFromJson(params) {
  5.     //加载线性的geojson数据，加载之后自动获取geojson的经纬度
  6.     var line1 = Cesium.GeoJsonDataSource.load(
  7.         '../Apps/SampleData/geojson/lineback_1.json', {
  8.             //修改线性对象的颜色
  9.             stroke: Cesium.Color.BLUE,
  10.             //修改线性的宽度
  11.             strokeWidth: 3,
  12.             //是否贴地
  13.             clampToGround: true
  14.         }
  15.     )
  17.     //加载geojson图层到场景内部
  18.     viewer.dataSources.add(line1);
  19.     //定位场景摄像头位置
  20.     viewer.zoomTo(line1);
  21. }
  22. //CreateLineFromJson();
  24. //加载json数据生中国省市轮廓线
  25. function CreateLineFromJson1(params) {
  26.     //加载线性的geojson数据，加载之后自动获取geojson的经纬度
  27.     var line2 = Cesium.GeoJsonDataSource.load(
  28.         '../Apps/SampleData/geojson/中国_1.json', {
  29.             stroke: Cesium.Color.GREEN,
  30.             strokeWidth: 3,
  31.             height: 50000
  32.         }
  33.     )
  35.     //加载geojson图层到场景内部
  36.     viewer.dataSources.add(line2);
  37.     //定位场景摄像头位置
  38.     viewer.zoomTo(line2);
  39. }
  40. //CreateLineFromJson1();
  42. //加载json数据生地球水轮廓
  43. function CreateLineFromJson2(params) {
  44.     //加载线性的geojson数据，加载之后自动获取geojson的经纬度
  45.     var line3 = Cesium.GeoJsonDataSource.load(
  46.         '../Apps/SampleData/geojson/water_R.json', {
  47.             stroke: Cesium.Color.RED,
  48.             strokeWidth: 3
  49.         }
  50.     )
  52.     //加载geojson图层到场景内部
  53.     viewer.dataSources.add(line3);
  54.     //定位场景摄像头位置
  55.     viewer.zoomTo(line3);
  56. }
  57. //CreateLineFromJson2();
  59. //生成点
  60. function CreatePointFromJson(params) {
  61.     var point = Cesium.GeoJsonDataSource.load(
  62.         '../Apps/SampleData/geojson/point.json', {
  63.             //修改marker的icon符号在cesium源码的API对应的ID改一下就可以
  64.             markerSymbol: '!' //'village'
  65.         }
  66.     )
  68.     //可以设置名字方便清除
  69.     point.name = "Point";
  70.     var data = {
  71.         type: 'Feature',
  72.         geometry: {
  73.             type: 'Polygon',
  74.             coordinates: [
  75.                 [
  76.                     [113.490283, 28.88435],
  77.                     [113.596823, 28.895413],
  78.                     [113.626349, 28.784167],
  79.                     [113.299369, 28.775197],
  80.                     [113.490283, 28.88435]
  81.                 ]
  82.             ]
  83.         }
  84.     }
  86.     //point.data=data;
  87.     //加载geojson图层到场景内部
  88.     viewer.dataSources.add(point);
  89.     //定位场景摄像头位置
  90.     viewer.zoomTo(point);
  91. }
  92. //CreatePointFromJson();
  94. //加载polygon,生成中国polygon
  95. function CreatePolygonFromJson() {
  96.     var polygon = Cesium.GeoJsonDataSource.load(
  97.         '../Apps/SampleData/geojson/china/china.json', {
  98.             fill: Cesium.Color.MEDIUMAQUAMARINE.withAlpha(0.5),
  99.             stroke: Cesium.Color.MEDIUMAQUAMARINE,
  100.             strokeWidth: 10,
  101.         }
  102.     );
  104.     //面数据加载并拉伸事件
  105.     polygon.then(function (dataSource) {
  106.         viewer.dataSources.add(dataSource)
  107.         var entities = dataSource.entities.values
  108.         var colorHash = {}
  109.         for (var i = 0; i < entities.length; i++) {
  110.             //     //设置不同颜色的单值专题图
  111.             var entity = entities[i]
  112.             var name = entity.name
  113.             //     //根据json的名字设置
  114.             //     //设置每个面的颜色
  115.             entity.polygon.material = Cesium.Color.GRAY
  116.             //     //设置外边界是否显示
  117.             //entity.polygon.outline = false
  118.              entity.polygon.outline = true
  119.             //     //设置Z轴的拉伸高度
  120.             entity.polygon.extrudedHeight = 50000.0
  121.         }
  122.     })
  124.     //加载geojson图层到场景内部
  125.     //viewer.dataSources.add(polygon);
  126.     //定位场景摄像头位置
  127.     viewer.zoomTo(polygon);
  128. }
  129. ///CreatePolygonFromJson();
  131. //加载polygon,生成天津polygon
  132. function CreatePolygonFromJson1() {
  133.     var polygon1 = Cesium.GeoJsonDataSource.load(
  134.         '../Apps/SampleData/geojson/china/province/120000-天津市.json', {
  135.             fill: Cesium.Color.PINK,
  136.             outline:true,
  137.         }
  138.     );
  140.     //面数据加载并拉伸事件
  141.     polygon1.then(function (dataSource) {
  142.         viewer.dataSources.add(dataSource)
  143.         var entities = dataSource.entities.values
  144.         for (var i = 0; i < entities.length; i++) {
  145.           //设置不同颜色的单值专题图
  146.           var entity = entities[i]
  147.           var name = entity.name
  148.           //根据json的名字设置
  149.           //设置每个面的颜色
  150.           entity.polygon.material = Cesium.Color.GRAY
  151.           //设置外边界是否显示
  152.           entity.polygon.outline = true
  153.           entity.polygon.outlineColor = Cesium.Color.WHITE
  154.           entity.polygon.outlineWidth = 500
  155.   
  156.           //设置Z轴的拉伸高度
  157.           entity.polygon.extrudedHeight = 20000.0
  158.         }
  159.       })
  161.     //加载geojson图层到场景内部
  162.     //viewer.dataSources.add(polygon1);
  163.     //定位场景摄像头位置
  164.     viewer.zoomTo(polygon1);
  165. }
  166. CreatePolygonFromJson1();
上一篇：Cesium占坑


下一篇：pcl_viewer的使用与viewer窗口编程