统一示例等待加载的样式

zhurc · zhurc · commit ec7d02bb6da2 · 2018-04-24T19:59:02.000+08:00
diff --git a/examples/leaflet/12_heatMap_NY.html b/examples/leaflet/12_heatMap_NY.html
@@ -3,28 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <title data-i18n="resources.title_heatMapNY"></title>
-    <script type="text/javascript" include="bootstrap-css,jquery,papaparse" src="../js/include-web.js"></script>
-
-    <style>
-        #loading {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            z-index: 800;
-            margin-left: -130px;
-            text-align: center;
-            margin-top: -50px;
-            width: 290px;
-            padding: 10px;
-            background: rgba(0, 0, 0, 0.5);
-            color: whitesmoke;
-            font-size: 16px;
-        }
-    </style>
+    <script type="text/javascript" include="bootstrap-css,jquery,papaparse,widgets" src="../js/include-web.js"></script>
 </head>
 <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
 <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
-<div id="loading" data-i18n="resources.text_loadingData"></div>
 <script type="text/javascript" include="leaflet.heat" src="../../dist/include-leaflet.js"></script>
 <script type="text/javascript">
     var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
@@ -44,9 +26,10 @@
         //145万个点
         var radius = 30, opacity = 0.5;
         var length = 0;//需要截取示例数据的长度,0表示全部
+        widgets.loader.showLoader();
         $.get('../data/nyc-taxi.csv', function (csvstr) {
+            widgets.loader.removeLoader();
             var result = Papa.parse(csvstr, {skipEmptyLines: true, header: true});
-            $("#loading").hide();
 
             var heatPoints = processData(result, length);
             resultLayer = L.heatLayer(heatPoints, {
diff --git a/examples/leaflet/mapVLayerPoint.html b/examples/leaflet/mapVLayerPoint.html
@@ -3,28 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <title data-i18n="resources.title_mapvNyvTaxi"></title>
-    <script type="text/javascript" include="jquery,dat-gui" src="../js/include-web.js"></script>
-    <style type="text/css">
-        #loading {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            z-index: 800;
-            margin-left: -130px;
-            text-align: center;
-            margin-top: -50px;
-            width: 290px;
-            padding: 10px;
-            background: rgba(0, 0, 0, 0.5);
-            color: whitesmoke;
-            font-size: 16px;
-        }
-
-    </style>
+    <script type="text/javascript" include="jquery,widgets,dat-gui" src="../js/include-web.js"></script>
 </head>
 <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
 <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
-<div id="loading" data-i18n="resources.text_loadingData"></div>
 <script type="text/javascript" include="mapv" src="../../dist/include-leaflet.js"></script>
 <script type="text/javascript">
     var map = L.map('map', {
@@ -38,9 +20,9 @@
     loadData();
 
     function loadData() {
-
+        widgets.loader.showLoader();
         $.get('../data/nyc-taxi.csv', function (csvstr) {
-
+            widgets.loader.removeLoader();
             var options = {
                 size: 1.5,
                 context: 'webgl',
@@ -55,7 +37,6 @@
             var layer = L.supermap.mapVLayer(dataSet, options, {attributionPrefix: dataAttr});
 
             layer.on('loaded', function () {
-                $('#loading').hide();
                 initDatGUI(layer, options)
             });
             layer.addTo(map);
diff --git a/examples/locales/zh-CN/resources.js b/examples/locales/zh-CN/resources.js
@@ -749,7 +749,7 @@ window.resources = {
         "text_deleteSuccess": "删除成功",
         "text_performanceLayer": "高性能标绘图层：",
         "text_performancePlottingLayer": "标绘图层：",
-        "text_loadingData": "正在加载数据请稍等。。。。。。",
+        "text_loadingData": "正在加载数据,请稍等......",
         "text_keyword": "关键字：",
         "text_queryResult": "查询结果: ",
         "text_propertyName": "属性名",
diff --git a/examples/openlayers/mapvNycTaxi.html b/examples/openlayers/mapvNycTaxi.html
@@ -7,20 +7,6 @@
     <script type="text/javascript" include="mapv" src="../../dist/include-openlayers.js"></script>
     <title data-i18n="resources.title_mapvNyvTaxi"></title>
     <style type="text/css">
-        #loading {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin-left: -130px;
-            text-align: center;
-            margin-top: -50px;
-            width: 260px;
-            padding: 20px;
-            background: rgba(0, 0, 0, 0.5);
-            color: yellow;
-            font-size: 12pt;
-        }
-
         .ol-popup {
             position: absolute;
             top: 10px;
@@ -32,8 +18,7 @@
 <div id="popup" class="ol-popup" style='width:20%'>
 </div>
 <div id="map" style="width: 100%;height:100%"></div>
-<div id="loading" data-i18n="resources.text_loadingData"></div>
-<script type="text/javascript" include="jquery,dat-gui" src="../js/include-web.js"></script>
+<script type="text/javascript" include="jquery,widgets,dat-gui" src="../js/include-web.js"></script>
 <script type="text/javascript">
     var map = new ol.Map({
         target: 'map',
@@ -55,7 +40,9 @@
             })
         })
     }));
+    widgets.loader.showLoader();
     $.get('../data/nyc-taxi.csv', function (csvstr) {
+        widgets.loader.removeLoader();
         var dataSet = mapv.csv.getDataSet(csvstr);
 
         dataSet.initGeometry(function (data) {
@@ -82,7 +69,6 @@
         var layer = new ol.layer.Image({
             source: new ol.source.Mapv(options)
         });
-        $('#loading').hide();
         initDatGUI(layer, mapvOptions);
         map.addLayer(layer);
     });
