3D地图与3D柱状图联合使用

[复制链接]
 楼主| 森友小锘 发表于 2021-7-30 11:41 | 显示全部楼层 |阅读模式
#申请原创# #每日话题# #有奖活动# #技术资源# #申请开发板#

3D地图添加3D柱状图使用的功能原理是在地图上加上圆柱对象,可以用颜色和高度分别代表分类和值大小,根据需要将柱状图放置到指定位置即可。3D地图与3D柱状图联合使用,效果大概是这样:





注:根据你项目需求的不同,需要的可能是整个中国的地图数据,也可能是某个省的,市的,县的,区的等,这时怎么办?

1. 去网上搜有很多,但是可能数据不全,或者会员才能下载。

2、CityBuilder 提供了多种地理图形素材,一键生成初始模板,简直是神器!

优点在于普通开发人员也能随手搭建3D地图,可以快速应用于三维城市项目。支持多种建筑、路网、河流等图层的动效渲染,可以在此基础上构建出折线图、柱状图、散点图、K线图、饼图等等,同时支持多图表混合展现等。让大屏变立体就是如此简单!





配合上图表还可以做出更优秀,更酷炫的效果!

看一下3D地图与3D柱状图联合使用的实现代码吧!

  1. var app = new THING.App();
  2. // 设置app背景为黑色
  3. app.background = [0, 0, 0];
  4. var newarr = [];
  5. var newarr2 = [];
  6. var arr = [
  7. [2165655.1396114295, 4114352.0966101163, 4365832.415936076],
  8. [2662057.5622300194, 4418588.240325375, 3750750.348959174],
  9. [1767421.0596036618, 4228474.383904113, 4434558.528500963],
  10. [2394868.6435673204, 3769006.698589486, 4553000.555517837],
  11. [2486086.5614174376, 3329024.786824286, 4838712.726484586],
  12. [1218816.9869283293, 3246017.2371543637, 5352094.171977467],
  13. [2329539.893699594, 2565281.065092118, 5353712.6602103505],
  14. [2030091.0181420585, 2113557.693443252, 5664375.176012668],
  15. [-331990.1761847738, 4095658.023244825, 4876877.566923073]
  16. ];
  17. var arr2 = [
  18. [2616998.3939855373, 4244380.281059966, 3976812.7153125475],
  19. [2657034.0993919773, 4600324.120928961, 3528972.4762104847],
  20. [2133668.39296656, 3962963.9461863646, 4518025.034522062],
  21. [1911719.0939941471, 3859355.61517046, 4703444.055135107],
  22. [1710907.0406027823, 3597407.209459497, 4980305.344902273],
  23. [2084471.9009466884, 2966999.365445058, 5245799.075529899],
  24. [42737.188761066296, 3256126.370391139, 5483013.354519836],
  25. ]
  26. var colorMapping = {
  27. 0: "#004FEA",
  28. 0.24: "#004FEA",
  29. 0.241: "#00B3B3",
  30. 0.5: "#00B3B3",
  31. 0.501: "#00B450",
  32. 0.74: "#00B450",
  33. 0.741: "#EAC700",
  34. 1: "#EAC700"
  35. };

  36. // 引用地图组件脚本
  37. THING.Utils.dynamicLoad(["https://www.thingjs.com/uearth/uearth.min.js"], function () {
  38. app.create({
  39. type: "Map",
  40. url: "https://www.thingjs.com/citybuilder_console/mapProject/config/TVRFek5ETXdDaXR5QnVpbGRlckAyMDE5",
  41. complete: function (event) {
  42.   for (var i = 0; i < arr.length; i++) {
  43. newarr.push(CMAP.Util.convertWorldToLonlat(arr[i]))
  44. }
  45. for (var i = 0; i < arr2.length; i++) {
  46. newarr2.push(CMAP.Util.convertWorldToLonlat(arr2[i]))
  47. }
  48. for (var i = 0; i < newarr.length; i++) {
  49. var coordinates = createCoordinates(newarr[i], 15);
  50. createPoint(coordinates, colorMapping);
  51. }
  52. for (var i = 0; i < newarr2.length; i++) {
  53. var coordinates = createCoordinates(newarr2[i], 15);
  54. createPoint(coordinates, colorMapping);
  55. }
  56. }
  57. });
  58. });

  59. function createCoordinates(point, n) {
  60. var coordinates = [];
  61. for (var i = 0; i < n; i++) {
  62. var xy = [point[0] + 0.3 * Math.cos(2 * Math.PI * i / n), point[1] + 0.3 * Math.sin(2 * Math.PI * i / n) * 0.75];
  63. coordinates.push(xy);
  64. }
  65. return coordinates;
  66. }

  67. /**
  68. * 创建地理多边形
  69. */
  70. function createPoint(coordinates, colorMapping) {
  71. var geoPolygon = app.create({
  72. type: 'GeoPolygon',
  73. name: '多边形_纯色',
  74. coordinates:coordinates, // 支持Polygon和MultiPolygon,格式可参考geoJson规范
  75. extrudeHeight: 300000, //拉伸高度100m
  76. renderer: {
  77. type: 'vector', // 纯色填充
  78. color: "#EAC700", // 面填充颜色
  79. lights: false,//默认为true,受光照影响,为false不受光照影响
  80. colorMapping:colorMapping,
  81. }
  82. });
  83. }





本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?注册

×
您需要登录后才可以回帖 登录 | 注册

本版积分规则

107

主题

107

帖子

0

粉丝
快速回复 返回顶部 返回列表