update

update demo
TalkingData · Dec 11, 2017 · c0b81c0 · c0b81c0
1 parent 3be01e4
commit c0b81c0
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 142 deletions.
diff --git a/examples/BoundaryOverlay.html b/examples/BoundaryOverlay.html
@@ -1,9 +1,8 @@
 <!DOCTYPE html>
-<html>
-
+<html lang="zh-CN">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
     <style type="text/css">
         body,
         html {
@@ -27,17 +26,15 @@
             padding: 5px 20px;
         }
     </style>
-    <script>
-    </script>
+
     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U3q69k0Dv0GCYNiiZeHPf7BS"></script>
     <script type="text/javascript" src="http://huiyan.baidu.com/mapv/demo/js/dist/BaiduMap_cityCenter.js"></script>
     <script src="./data/shenzhen.js"></script>
     <script src="../dist/inmap.js"></script>
     <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
     <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
     <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
-</head>
-</head>
+
 <title></title>
 </head>
 
@@ -50,122 +47,115 @@
     </div>
     <div id="allmap"></div>
 </body>
-
-</html>
 <script>
-
-    var inMapVue = new Vue({
-        el: '#app',
-        data: {
-            boundarys: [],
-            model: ''
-        },
-        watch: {
-            model: function (newVal, oldVal) {
-                console.log(newVal);
-                overlay.setSelectd("name=='" + newVal + "'", true);
-            }
-        },
-        mounted: function () {
-            data.forEach(function (element) {
-                this.boundarys.push({
-                    value: element.name,
-                    label: element.name
-                })
-            }, this);
-        }
-    })
+   var inMapVue = new Vue({
+       el: '#app',
+       data: {
+           boundarys: [],
+           model: ''
+       },
+       watch: {
+           model: function (newVal, oldVal) {
+               console.log(newVal);
+               overlay.setSelectd("name=='" + newVal + "'", true);
+           }
+       },
+       mounted: function () {
+           data.forEach(function (element) {
+               this.boundarys.push({
+                   value: element.name,
+                   label: element.name
+               })
+           }, this);
+       }
+   })
+   var inmap = new inMap.Map({
+       id: 'allmap',
+       skin:"Blueness",
+       center: ["114.16248337214269", "22.559515429553684"],
+       zoom: {
+           value: 11,
+           show: true,
+           max: 22
+       }
+   })
+   var overlay = new inMap.BoundaryOverlay({
+       tooltip: {
+           show: true,
+           // formatter: "{name}~{count}",
+           formatter: function (params) {
+               return params.count;
+           }
+       },
+       legend: {
+           show: true,
+           // title: "板块去重设备数 "
+       },
 
-    var inmap = new inMap.Map({
-        id: 'allmap',
-        skin:"Blueness",
-        center: ["114.16248337214269", "22.559515429553684"],
-        zoom: {
-            value: 11,
-            show: true,
-            max: 22
-        }
-    })
-    var overlay = new inMap.BoundaryOverlay({
-        tooltip: {
-            show: true,
-            // formatter: "{name}~{count}",
-            formatter: function (params) {
-                return params.count;
-            }
-        },
-        legend: {
-            show: true,
-            // title: "板块去重设备数 "
-        },
+       style: {
+           normal: {
+               backgroundColor: 'rgba(0, 0, 0, 1)',
+               borderWidth: 3,
+               label: {
+                   show: true, // 是否显示
+                   font: "11px", // 设置字号
+                   minZoom: 7, // 最小显示的级别
+                   color: 'rgba(0, 0, 0, 1)'
+               },
+               // borderColor: "rgba(255,255,255,1)",
+           },
+           mouseOver: {
+               backgroundColor: 'rgba(200, 200, 200, 1)',
+               borderColor: "rgba(10,225,70,1)",
+               label: {
+                   color: 'rgba(255,0,0,1)'
+               }
 
-        style: {
-            normal: {
-                backgroundColor: 'rgba(0, 0, 0, 1)',
-                borderWidth: 3,
-                label: {
-                    show: true, // 是否显示
-                    font: "11px", // 设置字号
-                    minZoom: 7, // 最小显示的级别
-                    color: 'rgba(0, 0, 0, 1)'
-                },
-                // borderColor: "rgba(255,255,255,1)",
-            },
-            mouseOver: {
-                backgroundColor: 'rgba(200, 200, 200, 1)',
-                borderColor: "rgba(10,225,70,1)",
-                label: {
-                    color: 'rgba(255,0,0,1)'
-                }
+           },
+           selected: {
+               backgroundColor: 'rgba(184,0,0,1)',
+               borderColor: "rgba(255,255,255,1)",
+               label: {
+                   color: 'rgba(255,255,255,1)'
+               }
+           },
+           colors: [
+               "rgba(156,200,249,0.6)", "rgba(93,158,247,0.6)",
+               "rgba(134,207,55,0.6)",
+               "rgba(252,198,10,0.6)", "rgba(255,144,0,0.6)", 
+                "rgba(255,0,0,0.6)"
+           ],
+           splitList: [{ //设置区间颜色
+                   start: 0,
+                   end: 1,
+                   backgroundColor: 'rgba(200, 200, 50, 1)',
+               },
+               {
+                   start: 1,
+                   end: 2,
+                   backgroundColor: 'rgba(255,132,41,1)',
+               },
+               {
+                   start: 2,
+                   end: 3,
+                   backgroundColor: 'rgba(255,241,0,1)',
+               },
+               {
+                   start: 3,
+                   backgroundColor: 'rgba(148,238,136,1)',
+               }
+           ],
+       },
+       data: [],
 
-            },
-            selected: {
-                backgroundColor: 'rgba(184,0,0,1)',
-                borderColor: "rgba(255,255,255,1)",
-                label: {
-                    color: 'rgba(255,255,255,1)'
-                }
-            },
-            colors: [
-                "rgba(156,200,249,0.6)", "rgba(93,158,247,0.6)",
-                "rgba(134,207,55,0.6)",
-                "rgba(252,198,10,0.6)", "rgba(255,144,0,0.6)", 
-                 "rgba(255,0,0,0.6)"
-            ],
-            splitList: [{ //设置区间颜色
-                    start: 0,
-                    end: 1,
-                    backgroundColor: 'rgba(200, 200, 50, 1)',
-                },
-                {
-                    start: 1,
-                    end: 2,
-                    backgroundColor: 'rgba(255,132,41,1)',
-                },
-                {
-                    start: 2,
-                    end: 3,
-                    backgroundColor: 'rgba(255,241,0,1)',
-                },
-                {
-                    start: 3,
-                    backgroundColor: 'rgba(148,238,136,1)',
-                }
-            ],
-        },
-        data: [],
+       event: {
+           onMouseClick: function (item) {
+               //能获取当前点的信息
+           }
+       }
+   });
+   inmap.add(overlay);
+   overlay.setPoints(data);
 
-        event: {
-            onMouseClick: function (item) {
-                //能获取当前点的信息
-            }
-        }
-    });
-
-    inmap.add(overlay);
-
-
-    overlay.setPoints(data);
-    //判断点是否在围栏内
-    //  console.log(inmap.utils.isPolyContainsPt(114.16248337214269, 22.559515429553684, data[0].geo));
-</script>
+</script>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <title>
+        demo List
+    </title>
+</head>
+
+<body>
+    <p>
+        <a href="./BoundaryOverlay.html">BoundaryOverlay</a>
+    </p>
+    <p>
+        <a href="./CircuitOverlay.html">CircuitOverlay</a>
+    </p>
+    <p>
+        <a href="./DotOverlay.html">DotOverlay</a>
+    </p>
+    <p>
+        <a href="./DotOverlay-shadow.html">DotOverlay-shadow</a>
+    </p>
+    <p>
+        <a href="./DotOverlay-polyme.html">DotOverlay-polyme</a>
+    </p>
+    <p>
+        <a href="./DotOverlay-Dluster.html">DotOverlay-Dluster</a>
+    </p>
+    <p>
+        <a href="./GriddingOverlay.html">GriddingOverlay</a>
+    </p>
+    <p>
+        <a href="./HoneycombOverlay.html">HoneycombOverlay</a>
+    </p>
+    <p>
+        <a href="./ImgOverlay.html">ImgOverlay</a>
+    </p>
+    <p>
+        <a href="./switchSkin.html">switchSkin</a>
+    </p>
+</body>
+
+</html>
diff --git a/examples/BoundaryOverlay-shadowColor.html → examples/switchSkin.html b/examples/BoundaryOverlay-shadowColor.html → examples/switchSkin.html
@@ -1,9 +1,8 @@
 <!DOCTYPE html>
-<html>
-
+<html lang="zh-CN">
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+    <meta charset="utf-8">
+    <title></title>
     <style type="text/css">
         body,
         html {
@@ -39,9 +38,6 @@
         crossorigin="anonymous">
     <script src="../dist/inmap.js"></script>
 </head>
-</head>
-<title></title>
-</head>
 
 <body>
     <div id="allmap"></div>
@@ -64,9 +60,6 @@
         }
     })
 
-
-
-
     var map = new inMap.Map({
         id: 'allmap',
         center: ["114.16248337214269", "22.559515429553684"],
@@ -81,11 +74,14 @@
         skin: "Blueness",
         tooltip: {
             show: true,
+            offsets: {
+                top: 0, //上偏移
+                left: 0 //左偏移
+            },
             formatter: function (params) {
                 return `${params.name}-设备数量：${params.count}<br/>
                          ${params.name}-人口密度：${params.count}<br/>
                         `
-
             }
         },
         legend: {
@@ -122,7 +118,7 @@
                 "rgba(255,0,0,0.7)"
             ]
         },
-        data: [],
+
 
         event: {
             onMouseClick: function (item) {
@@ -173,14 +169,15 @@
                 borderColor: "rgba(255,255,255,1)"
             },
             colors: [
-                "rgba(156,200,249,0.7)", "rgba(93,158,247,0.7)",
-                "rgba(134,207,55,0.7)",
-                "rgba(252,198,10,0.7)", "rgba(255,144,0,0.7)", "rgba(255,72,0,0.7)",
-                "rgba(255,0,0,0.7)"
+                "rgba(156,200,249,0.4)",
+                "rgba(93,158,247,0.4)",
+                "rgba(134,207,55,0.4)",
+                "rgba(252,198,10,0.4)",
+                "rgba(255,144,0,0.4)"
             ],
 
         },
-        data: [],
+
 
         event: {
             onMouseClick: function (item) {

diff --git a/src/map/index.js b/src/map/index.js
@@ -53,7 +53,6 @@ export class Map {
         bmap.centerAndZoom(new BMap.Point(center[0], center[1]), this.option.zoom.value);
 
         if (this.option.zoom.show) {
-
             //添加地图级别工具条
             new MapZoom(bmap);
         }