Cesium基础知识-加载json数据

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

你可能感兴趣的:(Cesium,菜鸟学习编程之路,JavaScript,json,javascript,html)