arcgis for js css3

  
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="//js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
      @-webkit-keyframes
       pulse
      {
        0%
        {
          opacity: 1.0;

        }
        45%
        {
          opacity: .20;

        }
        100%
        {
          opacity: 1.0;

        }
      }
      #blink_layer { 
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: pulse;
        -moz-animation-duration: 3s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-name: pulse;
      }
    </style>

    <script src="//js.arcgis.com/3.6/"></script>
    <script>
      var map;
    
      require([
        "esri/map", 
        "esri/geometry/Point",
        "esri/graphic",
        "esri/layers/GraphicsLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "dojo/_base/Color",
        "dojo/domReady!"
      ], function(
        Map, Point, Graphic, GraphicsLayer, SimpleMarkerSymbol, Color
      ) {
        var center = [ 19.291, 48.343 ];
        map = new Map("map", {
          basemap: "oceans",
          center: center,
          zoom: 4 
        });

        var gl = new GraphicsLayer({ id: "blink" });
        var symbol = new SimpleMarkerSymbol("solid", 14, null, new Color("green"));
        // five points
        for ( var i = 0; i < 5; i++ ) {
          var dx = (Math.random() < 0.5 ? -1 : 1) * i;
          var dy = (Math.random() < 0.5 ? -1 : 1) * i;
          var point = new Point(center[0] + dx, center[1] + dy);
          var graphic = new Graphic(point, symbol);
          gl.add(graphic);
        }
        map.addLayer(gl);

        // map.on("click", function(e) {
        //   gl.add(new Graphic(e.mapPoint, symbol));
        // });
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

 

posted @ 2016-03-24 19:05  zhh  阅读(280)  评论(0)    收藏  举报