fix classic 示例部分缺陷。 review by caoxinke.

Author: tangqinGiser

examples/classic/plot_symbolExtendProperty.html

@@ -45,7 +45,7 @@
         .popupWindow {
             position: absolute;
             right: 10px;
-            top: 242px;
+            top: 280px;
             width: 220px;
             background: #FFF;
             z-index: 9999;

examples/classic/theme_ctl_GraphBar3D.html

@@ -30,15 +30,12 @@ <h5 class='panel-title text-center'>三维柱状图</h5>
 <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
 <script type="text/javascript" exclude="iclient-classic" include="Bar3D" src="../../dist/include-classic.js"></script>
 <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
+
 <script src='../data/chinaConsumptionLevel.js'></script>
 <script type="text/javascript">
-    var map, layer, themeLayer;
+    var map, layer, themeLayer, infowin, infowinPosition;
     var host = window.isLocal ? window.server : "http://117.122.248.69:8090",
         url = host + "/iserver/services/map-china400/rest/maps/China_4326";
-    // 信息框 div
-    var infoDom = document.createElement("div");
-    infoDom.style.position = "absolute";
-    infoDom.id = "infowin";
 
     // 统计图模块要求浏览器支持 Canvas 渲染
     if (!document.createElement('canvas').getContext) {
@@ -141,6 +138,16 @@ <h5 class='panel-title text-center'>三维柱状图</h5>
         closeInfoWin();
     }
 
+    // 注册地图 mousemove，用于获取当前鼠标在地图中的像素位置
+    map.events.on({
+        "mousemove": function (e) {
+            infowinPosition = e.xy.clone();
+            // 偏移
+            infowinPosition.x += 40;
+            infowinPosition.y -= 25;
+        }
+    });
+
     // 显示地图弹窗
     function showInfoWin(e) {
         // e.target 是图形对象，即数据的可视化对象，三维柱状图中是指三维柱条;
@@ -154,8 +161,8 @@ <h5 class='panel-title text-center'>三维柱状图</h5>
             var info = e.target.dataInfo;
 
             // 弹窗内容
-            var contentHTML = "<div style='padding: 2px; color: #000; background-color: #d1eeee';'>";
-            contentHTML += "<strong>" + fea.attributes.NAME + "</strong>";
+            var contentHTML = "<div style='color: #000; background-color: #fff'>";
+            contentHTML += "省级行政区名称:<br><strong>" + fea.attributes.NAME + "</strong>";
 
             contentHTML += "<hr style='margin: 3px'>";
             switch (info.field) {
@@ -179,29 +186,38 @@ <h5 class='panel-title text-center'>三维柱状图</h5>
             }
             contentHTML += "</div>";
 
-            infoDom.style.left = e.event.clientX + 40 + "px";
-            infoDom.style.top = e.event.clientY - 25 + "px";
-            infoDom.innerHTML = contentHTML;
-            document.body.appendChild(infoDom);
+            // 弹出框大小
+            var infowinSize = (SuperMap.Browser.name == "firefox") ? new SuperMap.Size(150, 105) : new SuperMap.Size(140, 90);
+
+            // 弹出窗地理位置
+            var lonLat = map.getLonLatFromPixel(infowinPosition);
+            infowin = new SuperMap.Popup(
+                "infowin",
+                lonLat,
+                infowinSize,
+                contentHTML,
+                false,
+                false,
+                null);
+            infowin.setBackgroundColor("#fff");
+            infowin.setOpacity(0.8);
+            if (infowin) map.removePopup(infowin);
+            map.addPopup(infowin);
         }
     }
 
-    // 移除信息窗 div
+    // 移除和销毁地图弹窗
     function closeInfoWin() {
-        // infoDom 是否是 body 的子节点
-        if (isFatcher(document.body, infoDom)) {
-            document.body.removeChild(infoDom);
-        }
-    }
-    // 判断父节点
-    function isFatcher(p, c) {
-        while (c.parentNode) {
-            c = c.parentNode;
-            if (c == p)
-                return true;
+        if (infowin) {
+            try {
+                map.removePopup(infowin);
+            }
+            catch (e) {
+                widgets.alert.showAlert(e.message,false);
+            }
         }
-        return false;
     }
+
 </script>
 </body>
 </html>

examples/classic/topologyValidatorJobService.html

@@ -60,7 +60,7 @@ <h3 class='panel-title'>拓扑检查分析</h3>
 </div>
 <script type="text/javascript" src="../../dist/include-classic.js"></script>
 <script type="text/javascript">
-    var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
+    var host = window.isLocal ? window.server : "http://117.122.248.69:8090";
     var resultLayer,
         processingsUrl = host + "/iserver/services/distributedanalyst/rest/v1/jobs",
         mapURL = host + "/iserver/services/map-world/rest/maps/World",

examples/classic/vizLayer_heatmapColorManual.html

@@ -34,7 +34,7 @@
         .row {
             position: absolute;
             right: 25px;
-            top: 260px;
+            top: 300px;
             background: #FFF;
             z-index: 100;
             border-top-width: 0px;