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>  
  • 相关阅读:
    Codeforces 1045C Hyperspace Highways (看题解) 圆方树
    Codeforces 316E3 线段树 + 斐波那切数列 (看题解)
    Codeforces 803G Periodic RMQ Problem 线段树
    Codeforces 420D Cup Trick 平衡树
    Codeforces 295E Yaroslav and Points 线段树
    Codeforces 196E Opening Portals MST (看题解)
    Codeforces 653F Paper task SA
    Codeforces 542A Place Your Ad Here
    python基础 异常与返回
    mongodb 删除
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972969.html
Copyright © 2011-2022 走看看