zoukankan      html  css  js  c++  java

  • （转）Arcgis for JS实现台风运动路径与影像范围的显示

    http://blog.csdn.net/gisshixisheng/article/details/42025435

    首先，看看具体的效果：

    初始化状态

    绘制中

    绘制完成

    首先，组织数据。我组织的数据是JSON的，数据的具体形式如下：

    其次，实现思路。

    1、添加显示路径。

    根据起始点，生成polyline的JSON格式。如下：

    并生成路径线。

    2、添加中心点与影响范围

    并添加到地图：

    3、间隔添加

    完整代码如下：

    [html] view plain copy
     
     print?
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>  
    6.     <title>Simple Map</title>  
    7.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">  
    8.     <style>  
    9.         html, body, #map {  
    10.             height: 100%;  
    11.             margin: 0;  
    12.             padding: 0;  
    13.         }  
    14.         body {  
    15.             background-color: #FFF;  
    16.             overflow: hidden;  
    17.             font-family: "Trebuchet MS";  
    18.         }  
    19.         .textss{  
    20.             position: absolute;  
    21.             right: 20px;  
    22.             top: 20px;  
    23.             border: 1px solid #C9DCD7;  
    24.             background: #bfbfbf;  
    25.             padding: 0.1em 0.3em 0.1em;  
    26.             font-size: 11px;  
    27.             border-radius: 5px;  
    28.             /*box-shadow: 0 0 0.75em #777777;*/  
    29.         }  
    30.     </style>  
    31.     <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>  
    32.     <script>  
    33.         var drawLine = {  
    34.             "id":32,  
    35.             "name":"北京",  
    36.             "X":116.068276,  
    37.             "Y":39.892225,  
    38.             endPt:[{"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},  
    39.                 {"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},  
    40.                 {"id":3,"name":"西宁","X":101.797303,"Y":36.593642},  
    41.                 {"id":4,"name":"兰州","X":103.584297,"Y":36.119086}/*,  
    42.                 {"id":5,"name":"成都","X":104.035508,"Y":30.714179},  
    43.                 {"id":6,"name":"重庆","X":106.519115,"Y":29.478925},  
    44.                 {"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},  
    45.                 {"id":8,"name":"昆明","X":102.726775,"Y":24.969385},  
    46.                 {"id":9,"name":"银川","X":106.167225,"Y":38.598524},  
    47.                 {"id":10,"name":"西安","X":108.967128,"Y":34.276112},  
    48.                 {"id":11,"name":"南宁","X":108.233931,"Y":22.748296},  
    49.                 {"id":12,"name":"海口","X":110.346181,"Y":19.96992},  
    50.                 {"id":13,"name":"广州","X":113.226683,"Y":23.18307},  
    51.                 {"id":14,"name":"长沙","X":112.947928,"Y":28.169916},  
    52.                 {"id":15,"name":"南昌","X":115.893715,"Y":28.652363},  
    53.                 {"id":16,"name":"福州","X":119.246768,"Y":26.070765},  
    54.                 {"id":17,"name":"台北","X":121.503567,"Y":25.008274},  
    55.                 {"id":18,"name":"杭州","X":120.183046,"Y":30.330584},  
    56.                 {"id":19,"name":"上海","X":121.449707,"Y":31.253361},  
    57.                 {"id":20,"name":"武汉","X":114.216597,"Y":30.579253},  
    58.                 {"id":21,"name":"合肥","X":117.262302,"Y":31.838353},  
    59.                 {"id":22,"name":"南京","X":118.805692,"Y":32.085022},  
    60.                 {"id":23,"name":"郑州","X":113.6511,"Y":34.746308},  
    61.                 {"id":24,"name":"济南","X":117.048331,"Y":36.60841},  
    62.                 {"id":25,"name":"石家","X":114.478215,"Y":38.033276},  
    63.                 {"id":26,"name":"太原","X":112.483066,"Y":37.798404},  
    64.                 {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},  
    65.                 {"id":28,"name":"天津","X":117.351094,"Y":38.925719},  
    66.                 {"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},  
    67.                 {"id":30,"name":"长春","X":125.26142,"Y":43.981984},  
    68.                 {"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},  
    69.                 {"id":33,"name":"香港","X":114.093117,"Y":22.427852},  
    70.                 {"id":34,"name":"澳门","X":113.552482,"Y":22.184495}*/  
    71.             ]  
    72.         };  
    73.         var path = [  
    74.             {"id":1,  "x":120.49357,  "y":44.883323, "radius":100000},  
    75.             {"id":2,  "x":117.9872,   "y":42.350326, "radius":80000},  
    76.             {"id":3,  "x":115.545833, "y":39.79259,  "radius":120000},  
    77.             {"id":4,  "x":113.508521, "y":38.274465, "radius":40000},  
    78.             {"id":5,  "x":110.551524, "y":37.151942, "radius":150000},  
    79.             {"id":6,  "x":108.67448,  "y":36.30474,  "radius":110000},  
    80.             {"id":7,  "x":106.491804, "y":36.264706, "radius":130000},  
    81.             {"id":8,  "x":102.495929 ,"y":37.07025,  "radius":140000},  
    82.             {"id":9,  "x":98.093644,  "y":38.784154, "radius":160000},  
    83.             {"id":10, "x":92.640902,  "y":39.126654, "radius":170000},  
    84.             {"id":11, "x":91.005868,  "y":38.125725, "radius":160000},  
    85.             {"id":12, "x":90.545122,  "y":34.951701, "radius":130000},  
    86.             {"id":13, "x":91.309324,  "y":33.32037,  "radius":100000},  
    87.             {"id":14, "x":93.411982,  "y":31.777678, "radius":150000},  
    88.             {"id":15, "x":98.224212,  "y":30.395442, "radius":170000},  
    89.             {"id":16, "x":100.630326, "y":29.013206, "radius":180000},  
    90.             {"id":17, "x":101.171328, "y":27.058946, "radius":190000},  
    91.             {"id":18, "x":104.454919, "y":25.907586, "radius":190000},  
    92.             {"id":19, "x":108.053446, "y":26.965449, "radius":20000},  
    93.             {"id":20, "x":113.019257, "y":28.194103, "radius":130000},  
    94.             {"id":21, "x":116.535467, "y":26.871059, "radius":110000},  
    95.             {"id":22, "x":117.470083, "y":23.943192, "radius":100000}];  
    96.         var map, clickLayer,sr;  
    97.         var index = 0,t=0;  
    98.         require([  
    99.             "esri/map",  
    100.             "esri/layers/ArcGISTiledMapServiceLayer",  
    101.             "esri/layers/GraphicsLayer",  
    102.             "esri/symbols/PictureMarkerSymbol",  
    103.             "esri/symbols/SimpleLineSymbol", //简单线符号  
    104.             "dojo/_base/Color",  
    105.             "dojo/on",  
    106.             "dojo/dom",  
    107.             "dojo/domReady!"],  
    108.         function(Map,  
    109.                  Tiled,  
    110.                  GraphicsLayer,  
    111.                  PictureMarkerSymbol,  
    112.                  SimpleLineSymbol,  
    113.                  Color,  
    114.                  on,  
    115.                  dom  
    116.         ) {  
    117.             map = new Map("map",{logo:false});  
    118.             var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer",{"id":"tiled"});  
    119.             map.addLayer(tiled, 0);  
    120.             sr = map.spatialReference;  
    121.             var mapCenter = new esri.geometry.Point(103.847, 36.0473, sr);  
    122.             map.centerAndZoom(mapCenter);  
    123.   
    124.             clickLayer = new GraphicsLayer({"id":"clickLayer"});  
    125.             map.addLayer(clickLayer);  
    126.             var popupLayer = new GraphicsLayer({"id":"popupLayer"});  
    127.             map.addLayer(popupLayer, 2);  
    128.             map.on("load",function(){  
    129.                 addReadPopup(drawLine);  
    130.             });  
    131.             function addReadPopup(data){  
    132.                 var pms = new PictureMarkerSymbol('images/red.png', 14, 16);  
    133.                 var pt=new esri.geometry.Point(data.X,data.Y,sr);  
    134.                 var graphic = new esri.Graphic(pt, pms, data);  
    135.                 popupLayer.add(graphic);  
    136.             };  
    137.             popupLayer.on("click",popupLayerClick);  
    138.             popupLayer.on("mouse-over",popupLayerOver);  
    139.             popupLayer.on("mouse-out",popupLayerOut);  
    140.             function popupLayerClick(evt){  
    141.                 clickLayer.clear();  
    142.                 var graphic = evt.graphic;  
    143.                 console.log(graphic);  
    144.                 map.infoWindow.setTitle(graphic.attributes.name);  
    145.                 map.infoWindow.setContent(graphic.attributes.name);  
    146.                 map.infoWindow.show(graphic.geometry);  
    147.   
    148.                 var endPts = graphic.attributes.endPt;  
    149.                 var lines = new Array();  
    150.                 for(var i= 0,dl=endPts.length;i<dl;i++){  
    151.                     var endPt = endPts[i];  
    152.                     var pms = new PictureMarkerSymbol('images/house.png', 30, 30);  
    153.                     var pt=new esri.geometry.Point(endPt.X,endPt.Y,sr);  
    154.                     var ptGraphic = new esri.Graphic(pt, pms, endPt);  
    155.                     popupLayer.add(ptGraphic);  
    156.                     lines.push([graphic.attributes.X,graphic.attributes.Y],[endPt.X,endPt.Y]);  
    157.                 }  
    158.                 var lineJson={  
    159.                     "paths":[lines],  
    160.                     "spatialReference":{"wkid":4326}  
    161.                 };  
    162.                 var line = new esri.geometry.Polyline(lineJson);  
    163.                 var sls = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,  
    164.                         new Color([0, 255, 0]),  
    165.                         2  
    166.                 );  
    167.                 var lineGraphic = new esri.Graphic(line, sls , endPt);  
    168.                 clickLayer.add(lineGraphic);  
    169.                 map.setExtent(line.getExtent().expand(2));  
    170.             }  
    171.             function popupLayerOver(e){  
    172.                 map.setMapCursor("pointer");  
    173.                 console.log(e.graphic.attributes);  
    174.                 var scrPt = map.toScreen(e.graphic.geometry);  
    175.                 var textDiv = dojo.doc.createElement("div");  
    176.                 dojo.attr(textDiv,{  
    177.                     "id":"text"  
    178.                 });  
    179.                 dojo.style(textDiv, {  
    180.                     "left": scrPt.x+10 + "px",  
    181.                     "top": scrPt.y+10 + "px",  
    182.                     "position": "absolute",  
    183.                     "z-index":99,  
    184.                     "background":"#fcffd1",  
    185.                     "font-size":"10px",  
    186.                     "border":"1px solid #0096ff",  
    187.                     "padding": "0.1em 0.3em 0.1em",  
    188.                     "font-size": "11px",  
    189.                     "border-radius": "3px",  
    190.                     "box-shadow": "0 0 0.75em #777777"  
    191.                 });  
    192.                 textDiv.innerHTML =e.graphic.attributes.name+"市水利自动化研究所";  
    193.                 dojo.byId("map").appendChild(textDiv);  
    194.             };  
    195.             function popupLayerOut(e){  
    196.                 map.setMapCursor("default");  
    197.                 dojo.byId("map").removeChild(dojo.byId("text"));  
    198.             };  
    199.   
    200.             on(dom.byId("addPath"), "click", function(){  
    201.                 console.log(path);  
    202.                 addPath();  
    203.             });  
    204.         });  
    205.   
    206.         function addPath(){  
    207.             require([  
    208.                 "esri/geometry/Circle"  
    209.             ],  
    210.             function(Circle){  
    211.                 console.log(index);  
    212.                 var sms =  new esri.symbol.SimpleMarkerSymbol({  
    213.                     "color": [255,255,0,255],  
    214.                     "size": 8,  
    215.                     "angle": -30,  
    216.                     "xoffset": 0,  
    217.                     "yoffset": 0,  
    218.                     "type": "esriSMS",  
    219.                     "style": "esriSMSCircle",  
    220.                     "outline": {  
    221.                         "color": [255,0,0,255],  
    222.                         "width": 1,  
    223.                         "type": "esriSLS",  
    224.                         "style": "esriSLSSolid"  
    225.                     }  
    226.                 });  
    227.                 var sls = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  
    228.                         new esri.Color([255, 0, 0]),  
    229.                         2  
    230.                 );  
    231.                 var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  
    232.                         new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,  
    233.                                 new esri.Color([0,0,255,0.2]), 2),new esri.Color([0,0,255,0.2])  
    234.                 );  
    235.                 var ptStart = new esri.geometry.Point(path[index].x, path[index].y, sr);  
    236.                 var ptEnd   = new esri.geometry.Point(path[index+1].x, path[index+1].y, sr);  
    237.                 var gPtStart = new esri.Graphic(  
    238.                         ptStart,  
    239.                         sms  
    240.                 );  
    241.                 var gCircleStart = new esri.Graphic(  
    242.                         new Circle(ptStart, {"radius":path[index].radius}),  
    243.                         sfs  
    244.                 );  
    245.                 var gPtEnd = new esri.Graphic(  
    246.                         ptEnd,  
    247.                         sms  
    248.                 );  
    249.                 var gCircleEnd = new esri.Graphic(  
    250.                         new Circle(ptEnd, {"radius":path[index+1].radius}),  
    251.                         sfs  
    252.                 );  
    253.                 var polylineJson = {  
    254.                     "paths":[[[path[index].x,path[index].y], [path[index+1].x,path[index+1].y]]],  
    255.                     "spatialReference":{"wkid":4326}  
    256.   
    257.                 };  
    258.                 var gLine = new esri.Graphic(  
    259.                         new esri.geometry.Polyline(polylineJson),  
    260.                         sls  
    261.                 );  
    262.                 clickLayer.add(gLine);  
    263.                 if(index<path.length-1){  
    264.                     clickLayer.add(gCircleEnd);  
    265.                     clickLayer.add(gPtEnd);  
    266.                 }  
    267.                 if(index === 0)  
    268.                 {  
    269.                     clickLayer.add(gCircleStart);  
    270.                     clickLayer.add(gPtStart);  
    271.                 }  
    272.   
    273.                 if(index<path.length-2){  
    274.                     t = setTimeout('addPath()',1000);  
    275.                     index++;  
    276.                 }  
    277.                 else{  
    278.                     clearInterval(t);  
    279.                 }  
    280.             });  
    281.         }  
    282.     </script>  
    283. </head>  
    284.   
    285. <body>  
    286. <div id="map">  
    287.     <button id="addPath" type="button" style="position: absolute; top: 10pt; right: 15pt; z-index: 99;">添加路径</button>  
    288. </div>  
    289. </body>  
    290. </html>  
  • 相关阅读:
    IO细述
    如何对HashMap按键值排序
    Java编程思想重点
    Java笔试题解答和部分面试题
    mysql优化
    MySQL 创建数据库并且指定编码
    JDBC 工具类
    JSP include标签和include指令
    SpingMVC ModelAttribute的用法
    Java 获取amr音频格式的音频长度
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972969.html
Copyright © 2011-2022 走看看