components_cluster_vue.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8" />
  8. <title data-i18n="resources.title_componentsCluster_Vue"></title>
  9. <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
  10. <script
  11. include="iclient-mapboxgl-vue,mapbox-gl-enhance"
  12. src="../../dist/mapboxgl/include-mapboxgl.js"
  13. ></script>
  14. <style>
  15. #main {
  16. margin: 0 auto;
  17. width: 100%;
  18. height: 100%;
  19. }
  20. </style>
  21. </head>
  22. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  23. <div id="main">
  24. <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="1329428269">
  25. <sm-cluster-layer :data="culsterLayerData" :radius="100"></sm-cluster-layer>
  26. </sm-web-map>
  27. </div>
  28. <script>
  29. $.get("../data/chinaEarthquake.csv", function(response) {
  30. var dataObj = Papa.parse(response, {
  31. skipEmptyLines: true,
  32. header: true
  33. });
  34. var data = dataObj.data;
  35. var geojson = {
  36. type: "FeatureCollection",
  37. features: []
  38. };
  39. for (var i = 0; i < data.length; i++) {
  40. var item = data[i];
  41. var date = new Date(item.date);
  42. var year = date.getFullYear();
  43. //2w+地震数据
  44. if (year > 2000 && year < 2015) {
  45. var feature = {
  46. type: "feature",
  47. geometry: {
  48. type: "Point",
  49. coordinates: []
  50. },
  51. properties: {
  52. value: parseFloat(item.level)
  53. }
  54. };
  55. feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];
  56. geojson.features.push(feature);
  57. }
  58. }
  59. new Vue({
  60. el: "#main",
  61. data() {
  62. return {
  63. culsterLayerData: geojson
  64. };
  65. }
  66. });
  67. });
  68. </script>
  69. </body>
  70. </html>