SuperMap · alanjin · Jun 13, 2017 · Jun 13, 2017 · Jun 13, 2017
diff --git a/examples/GraphicsEvents.html b/examples/GraphicsEvents.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Graphic图层符号绘制</title>
+    <style type="text/css">
+        body{
+            margin: 0;
+            overflow: hidden;
+            background: #fff;
+        }
+        #map{
+            position: relative;
+            height: 500px;
+            border:1px solid #3473b7;
+        }
+        #toolbar {
+            position: relative;
+            padding-top: 5px;
+            padding-bottom: 10px;
+        }
+    </style>
+
+    <script type="text/javascript">
+        var map,layer, graphicLayer, symbolinfo, selectGraphic, popup = null,img,imageWidth=32, imagePaths = ['./images/marker_blue.png','./images/marker_red.png'],imageIdx = 0,
+                host = document.location.toString().match(/file:\/\//) ? "http://support.supermap.com.cn:8090" : 'http://' + document.location.host;
+        url = host + "/iserver/services/map-china400/rest/maps/China";
+        function init()
+        {
+
+            if(!document.createElement("canvas").getContext){
+                alert("您的浏览器不支持Canvas，请先升级");
+                return;
+            }
+            map = new SuperMap.Map("map",{controls:[
+                new SuperMap.Control.Zoom(),
+                new SuperMap.Control.Navigation() ,
+                new SuperMap.Control.LayerSwitcher()
+            ]});
+            layer= new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"});
+            layer.events.on({"layerInitialized":addLayer});
+            graphicLayer = new SuperMap.Layer.Graphics("Graphic Layer", null, {hitDetection: true, useCanvasEvent: false});
+
+            selectGraphic = new SuperMap.Control.SelectGraphic(graphicLayer, {
+                onSelect: onGraphicSelect,
+                hover: false,
+                onUnSelect: onUnGraphicSelect
+            });
+        }
+
+        function onGraphicSelect(result, evt) {
+            var image = graphicLayer.style.image;
+
+            var pixel = map.getPixelFromLonLat(new SuperMap.LonLat(result.geometry.x, result.geometry.y));
+            var evtPixel = evt.xy;
+            //点击点与中心点的角度
+            var angle = (Math.atan2(evtPixel.y - pixel.y, evtPixel.x - pixel.x))/Math.PI*180;
+            angle = angle > 0 ? angle : 360+angle;
+            //确定扇叶
+            var index = Math.ceil(angle/(image.angle + image.spaceAngle));
+            addPopup(result, evt, index);
+        }
+        function onUnGraphicSelect(evt) {
+            //alert(2);
+        }
+
+        function addPopup(feature, evt, index) {
+            if(!!popup) {
+                map.removePopup(popup);
+            }
+            selectedFeature = feature;
+            var lonlat = new SuperMap.LonLat(feature.geometry.x,feature.geometry.y);
+            var  contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>" +
+                      "<span style='font-weight: bold; font-size: 12px;'>要素ID： " + feature.id + "</span><br>";
+            if(symbolinfo instanceof SuperMap.Style.Clover){
+                 contentHTML +="<span style='font-weight: bold; font-size: 12px;'>叶数索引： " + index + "</span><br>";
+                 lonlat = map.getLonLatFromPixel(evt.xy);
+            }else{
+              lonlat = new SuperMap.LonLat(feature.geometry.x,feature.geometry.y);
+            }
+            contentHTML +="</div>"
+            //初始化一个弹出窗口，当某个地图要素被选中时会弹出此窗口，用来显示选中地图要素的属性信息
+            popup = new SuperMap.Popup.FramedCloud("chicken",
+                    lonlat,
+                    null,
+                    contentHTML,
+                    null,
+                    true);
+            feature.popup = popup;
+            map.addPopup(popup);
+
+        }
+
+        function addLayer(){
+            map.addLayers([layer,graphicLayer]);
+            //显示地图范围
+            map.setCenter(new SuperMap.LonLat(0, 0), 1);
+
+            map.addControl(selectGraphic);
+            selectGraphic.activate();
+            addClover();
+        }
+
+        //symbol相关属性 填充色、边框颜色、半径、
+        var fillColors = 'rgba(255,153,0,1)';
+        var strokeColors = 'rgba(255,204,0,1)';
+        var radius = 9;
+
+
+        var e = 10000000;
+        function addClover() {
+          symbolinfo = new SuperMap.Style.Clover({
+                radius: radius,
+                fill: new SuperMap.Style.Fill({
+                    color: fillColors
+                }),
+                stroke: new SuperMap.Style.Stroke({
+                    color: strokeColors
+                })
+        });
+        loadData();
+        }
+        function addData(img)
+        {
+            if(img.complete ){
+              loadData();
+            }else{
+              img.onload = function() {
+                loadData();
+              }
+            }
+        }
+
+        function loadData() {
+          if(!!popup) {
+              map.removePopup(popup);
+          }
+          graphicLayer.removeAllGraphics();
+          var total = document.getElementById("total").value;
+          graphicLayer.style = {
+              image: symbolinfo
+          };
+          var points = [];
+          for(var i = 0; i<total; i++){
+              var point= new SuperMap.Geometry.Point(2 * e * Math.random() - e, 2 * e * Math.random() - e);
+              var pointVector = new SuperMap.Graphic(point);
+              //pointVector.style = ;
+              points.push(pointVector)
+          }
+          graphicLayer.addGraphics(points);
+        }
+
+        function redraw() {
+          var idx = (++imageIdx)%2;
+          img = new Image();
+          img.src = imagePaths[idx];
+          symbolinfo = new SuperMap.Style.Image({
+            img:img,
+            anchor:[16,16]
+          });
+          graphicLayer.style = {
+              image: symbolinfo
+          };
+          if(img.complete ){
+            graphicLayer.redraw();
+          }else{
+            img.onload = function() {
+              graphicLayer.redraw();
+            }
+          }
+
+        }
+
+        //移除数据
+        function removeData()
+        {
+            if(!!popup) {
+                map.removePopup(popup);
+            }
+            graphicLayer.removeAllGraphics();
+            graphicLayer.refresh();
+        }
+        function plus() {
+          var idx = (++imageIdx)%2;
+          img = new Image();
+          imageWidth +=10;
+          img.src = imagePaths[idx];
+          symbolinfo = new SuperMap.Style.Image({
+            img:img,
+            anchor:[imageWidth/2,imageWidth/2]
+          });
+          graphicLayer.style = {
+              image: symbolinfo,
+              graphicHeight:imageWidth,
+              graphicWidth:imageWidth
+          };
+          if(img.complete ){
+            graphicLayer.redraw();
+          }else{
+            img.onload = function() {
+              graphicLayer.redraw();
+            }
+          }
+        }
+        function minus() {
+          var idx = (++imageIdx)%2;
+          img = new Image();
+          imageWidth -=10;
+          if(imageWidth < 5){
+            imageWidth = 5;
+          }
+          img.src = imagePaths[idx];
+          symbolinfo = new SuperMap.Style.Image({
+            img:img,
+            anchor:[imageWidth/2,imageWidth/2]
+          });
+          graphicLayer.style = {
+              image: symbolinfo,
+              graphicHeight:imageWidth,
+              graphicWidth:imageWidth
+          };
+          if(img.complete ){
+            graphicLayer.redraw();
+          }else{
+            img.onload = function() {
+              graphicLayer.redraw();
+            }
+          }
+        }
+    </script>
+</head>
+<body onload="init()" >
+<div id="toolbar">
+    <input id="total" type="text" style="width: 100px" value="100000">
+    <input type="button" class="btn" style="margin-bottom: 10px" value="开始绘制" onclick="addClover()">
+    <input type="button" class="btn" style="margin-bottom: 10px" value="切换图标并重绘" onclick="redraw()">
+    <input type="button" class="btn" style="margin-bottom: 10px" value="+" onclick="plus()">
+    <input type="button" class="btn" style="margin-bottom: 10px" value="-" onclick="minus()">
+    <input type="button" class="btn" style="margin-bottom: 10px" value="移除" onclick="removeData()">
+
+</div>
+<div id="map"></div>
+<script src = '../libs/SuperMap.Include.js'></script>
+</body>
+</html>
diff --git a/examples/aMap.html b/examples/aMap.html
@@ -62,7 +62,8 @@
                       themeParameters = new SuperMap.REST.ThemeParameters({
                           themes: [themeDotDensity],
                           datasetNames: ["Countries"],
-                          dataSourceNames: ["World"]
+                          dataSourceNames: ["World"],
+                          types:['REGION']
                       });
               //向iserver发送请求
              themeService.processAsync(themeParameters);

diff --git a/examples/animatorMigrate.html b/examples/animatorMigrate.html
@@ -25,28 +25,32 @@
 <script src='../libs/SuperMap.Include.js'></script>
 <script type="text" id="cartocssStr">
     @color:#111;
-    #World_Continent_txt__China400::hover{
+    #World_Continent_txt___China::hover{
     text-fill:#0f0;
     }
-    #World_Division__China400{
+    #World_Division_pl___China{
     polygon-fill:#123;
     ::click{
     polygon-fill:#123;
     }
     }
-    #World_Continent__China400{
+    #World_Continent_pl___China{
     polygon-fill:#000002;
+    line-width:1;
     line-color:#888;
     ::hover[featureID=73]{
     polygon-fill:#f00;
     }
     }
-    #China_Capital_P__China400 [zoom>4] {
+    #China_Capital_Pt___China [zoom>4] {
     point-file:url("../examples/images/marker2.png");
     }
-    #China_Province_R__China400{
+    #China_Province_pl___China{
     polygon-fill:#555;
     }
+    #China_Boundary_A___China{
+    line-color:#000000;
+    }
 </script>
 <script type="text/javascript">
 var map, layer,animatorVector,vectorLayer,url2,     host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
@@ -175,12 +179,11 @@
     //初始化图层
     var cartoCssStr=document.getElementById("cartocssStr");
     var cartoCss=cartoCssStr.text;
-    var layerNames=["World_Division@China400","World_Continent@China400",
-        "China_Province_R@China400","China_island_R@China400",
-        "China_Provinces_L@China400","China_Capital_P@China400",
-        "China_BeiJing@China400"].join(",");
+    var layerNames=["World_Division_pl@China","World_Continent_pl@China",
+        "China_Province_pl@China","China_Island@China",
+        "China_Capital_Pt@China", "China_Boundary_A"].join(",");
     layerNames="["+layerNames+"]";
-    layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true,layerNames:layerNames},{useLocalStorage:true,cartoCss:cartoCss});
+    layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true, layerNames: layerNames},{useLocalStorage:true, cartoCSS: cartoCss});
     layer.events.on({"layerInitialized": addLayer});
 
 }

diff --git a/examples/animatorTrain.html b/examples/animatorTrain.html
@@ -36,13 +36,13 @@
         @provinceLineColor:rgb(180,0,0);
 
 
-        #China_Railway_L___China400::a{
+        #China_Railway_L___China::a{
 
         /*每一段的长度为15px,间隔也是15px*/
         line-color:@railwayColora;
         line-width:2.5;
         }
-        #China_Railway_L___China400::b{
+        #China_Railway_L___China::b{
 
         /*每一段的长度为15px,间隔也是15px*/
         line-dasharray:18,18;
@@ -51,19 +51,19 @@
         }
         /*底下的地图背景图层*/
 
-        #World_Division___China400{
+        #World_Division_pl___China{
         polygon-fill:@waterColor;
         }
 
         /*中国除外的其他国家的图层*/
 
-        #World_Continent___China400{
+        #World_Continent_pl___China{
         polygon-fill:@continentColor;
         line-width:1;
         line-color:rgb(180,180,180);
         }
 
-        #World_Division___China400{
+        #World_Division_pl___China{
         polygon-fill:@waterColor;
         }
 </script>
@@ -104,10 +104,9 @@
         //初始化图层
         var cartoCssStr=document.getElementById("cartocssStr");
         var cartoCss=cartoCssStr.text;
-        var layerNames=["World_Division@China400","World_Continent@China400",
-            "China_Province_R@China400","China_island_R@China400",
-            "China_Provinces_L@China400","China_Capital_P@China400",
-            "China_BeiJing@China400"].join(",");
+        var layerNames=["World_Division_pl@China","World_Continent_pl@China",
+            "China_Province_pl@China","China_Island@China",
+            "China_Capital_Pt@China", "China_Boundary_A"].join(",");
         layerNames="["+layerNames+"]";
         layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true,layerNames:layerNames},{useLocalStorage:true,cartoCss:cartoCss});
         layer.events.on({"layerInitialized": addLayer});

diff --git a/examples/arcGIS93Rest.html b/examples/arcGIS93Rest.html
@@ -208,9 +208,10 @@
         });
         //设置专题图参数
         themeParameters = new SuperMap.REST.ThemeParameters({
-            datasetNames: ["China_Province_R"],
-            dataSourceNames: ["China400"],
-            themes: [themeUnique]
+            datasetNames: ["China_Province_pg"],
+            dataSourceNames: ["China"],
+            themes: [themeUnique],
+            types:['REGION']
         });
         //向iserver发送请求
         themeService.processAsync(themeParameters);

diff --git a/examples/baidu.html b/examples/baidu.html
@@ -70,8 +70,9 @@
                 }),
                 themeParameters = new SuperMap.REST.ThemeParameters({
                     themes: [themeGraduatedSymbol],
-                    datasetNames: ["China_Province_R"],
-                    dataSourceNames: ["China400"]
+                    datasetNames: ["China_Province_pg"],
+                    dataSourceNames: ["China"],
+                    types:['REGION']
                 });
         //向iserver发送请求
         themeService.processAsync(themeParameters);