123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title data-i18n="resources.title_componentsCluster_Vue"></title>
- <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
- <script
- include="iclient-mapboxgl-vue,mapbox-gl-enhance"
- src="../../dist/mapboxgl/include-mapboxgl.js"
- ></script>
- <style>
- #main {
- margin: 0 auto;
- width: 100%;
- height: 100%;
- }
- </style>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id="main">
- <sm-web-map server-url="https://iportal.supermap.io/iportal" map-id="1329428269">
- <sm-cluster-layer :data="culsterLayerData" :radius="100"></sm-cluster-layer>
- </sm-web-map>
- </div>
- <script>
- $.get("../data/chinaEarthquake.csv", function(response) {
- var dataObj = Papa.parse(response, {
- skipEmptyLines: true,
- header: true
- });
- var data = dataObj.data;
- var geojson = {
- type: "FeatureCollection",
- features: []
- };
- for (var i = 0; i < data.length; i++) {
- var item = data[i];
- var date = new Date(item.date);
- var year = date.getFullYear();
- //2w+地震数据
- if (year > 2000 && year < 2015) {
- var feature = {
- type: "feature",
- geometry: {
- type: "Point",
- coordinates: []
- },
- properties: {
- value: parseFloat(item.level)
- }
- };
- feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];
- geojson.features.push(feature);
- }
- }
- new Vue({
- el: "#main",
- data() {
- return {
- culsterLayerData: geojson
- };
- }
- });
- });
- </script>
- </body>
- </html>
|