|
3 | 3 | *********************************************************************--> |
4 | 4 | <!DOCTYPE html> |
5 | 5 | <html> |
6 | | - <head> |
7 | | - <meta charset="UTF-8" /> |
8 | | - <title data-i18n="resources.title_widgetsCluster_Vue"></title> |
9 | | - <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script> |
10 | | - <script |
11 | | - include="iclient9-mapboxgl-widgets-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> |
| 6 | + <head> |
| 7 | + <meta charset="UTF-8" /> |
| 8 | + <title data-i18n="resources.title_widgetsCluster_Vue"></title> |
| 9 | + <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script> |
| 10 | + <script |
| 11 | + include="iclient9-mapboxgl-widgets-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 | 22 |
|
23 | | - <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"> |
24 | | - <div id="main"> |
25 | | - <sm-web-map :web-map-options="{server: 'http://support.supermap.com.cn:8092/'}" map-id="676816598"> |
26 | | - <sm-cluster-layer :data="culsterLayerData" :cluster-radius="100"></sm-cluster-layer> |
27 | | - </sm-web-map> |
28 | | - </div> |
29 | | - <script> |
30 | | - $.get('../data/chinaEarthquake.csv', function(response) { |
31 | | - var dataObj = Papa.parse(response, { |
32 | | - skipEmptyLines: true, |
33 | | - header: true, |
34 | | - }); |
| 23 | + <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"> |
| 24 | + <div id="main"> |
| 25 | + <sm-web-map server-url="http://support.supermap.com.cn:8092/" map-id="676816598"> |
| 26 | + <sm-cluster-layer :data="culsterLayerData" :radius="100"></sm-cluster-layer> |
| 27 | + </sm-web-map> |
| 28 | + </div> |
| 29 | + <script> |
| 30 | + $.get("../data/chinaEarthquake.csv", function(response) { |
| 31 | + var dataObj = Papa.parse(response, { |
| 32 | + skipEmptyLines: true, |
| 33 | + header: true |
| 34 | + }); |
35 | 35 |
|
36 | | - var data = dataObj.data; |
37 | | - var geojson = { |
38 | | - type: 'FeatureCollection', |
39 | | - features: [], |
40 | | - }; |
| 36 | + var data = dataObj.data; |
| 37 | + var geojson = { |
| 38 | + type: "FeatureCollection", |
| 39 | + features: [] |
| 40 | + }; |
41 | 41 |
|
42 | | - for (var i = 0; i < data.length; i++) { |
43 | | - var item = data[i]; |
44 | | - var date = new Date(item.date); |
45 | | - var year = date.getFullYear(); |
| 42 | + for (var i = 0; i < data.length; i++) { |
| 43 | + var item = data[i]; |
| 44 | + var date = new Date(item.date); |
| 45 | + var year = date.getFullYear(); |
46 | 46 |
|
47 | | - //2w+地震数据 |
48 | | - if (year > 2000 && year < 2015) { |
49 | | - var feature = { |
50 | | - type: 'feature', |
51 | | - geometry: { |
52 | | - type: 'Point', |
53 | | - coordinates: [], |
54 | | - }, |
55 | | - properties: { |
56 | | - value: parseFloat(item.level), |
57 | | - }, |
58 | | - }; |
59 | | - feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)]; |
60 | | - geojson.features.push(feature); |
61 | | - } |
62 | | - } |
| 47 | + //2w+地震数据 |
| 48 | + if (year > 2000 && year < 2015) { |
| 49 | + var feature = { |
| 50 | + type: "feature", |
| 51 | + geometry: { |
| 52 | + type: "Point", |
| 53 | + coordinates: [] |
| 54 | + }, |
| 55 | + properties: { |
| 56 | + value: parseFloat(item.level) |
| 57 | + } |
| 58 | + }; |
| 59 | + feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)]; |
| 60 | + geojson.features.push(feature); |
| 61 | + } |
| 62 | + } |
63 | 63 |
|
64 | | - new Vue({ |
65 | | - el: '#main', |
66 | | - data() { |
67 | | - return { |
68 | | - culsterLayerData: geojson, |
69 | | - }; |
70 | | - }, |
71 | | - }); |
72 | | - }); |
73 | | - </script> |
74 | | - </body> |
| 64 | + new Vue({ |
| 65 | + el: "#main", |
| 66 | + data() { |
| 67 | + return { |
| 68 | + culsterLayerData: geojson |
| 69 | + }; |
| 70 | + } |
| 71 | + }); |
| 72 | + }); |
| 73 | + </script> |
| 74 | + </body> |
75 | 75 | </html> |
0 commit comments