Arcgis for JS实现台风运动路径与影像范围的显示
首先，看看详细的效果：
初始化状态
绘制中
绘制完毕
首先，组织数据。我组织的数据是JSON的，数据的详细形式例如以下：
其次，实现思路。
1、加入显示路径。
依据起始点，生成polyline的JSON格式。例如以下：
并生成路径线。
2、加入中心点与影响范围
并加入到地图：
3、间隔加入
完整代码例如以下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
.textss{
position: absolute;
right: 20px;
top: 20px;
border: 1px solid #C9DCD7;
background: #bfbfbf;
padding: 0.1em 0.3em 0.1em;
font-size: 11px;
border-radius: 5px;
/*box-shadow: 0 0 0.75em #777777;*/
}
</style>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script>
var drawLine = {
"id":32,
"name":"北京",
"X":116.068276,
"Y":39.892225,
endPt:[{"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},
{"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},
{"id":3,"name":"西宁","X":101.797303,"Y":36.593642},
{"id":4,"name":"兰州","X":103.584297,"Y":36.119086}/*,
{"id":5,"name":"成都","X":104.035508,"Y":30.714179},
{"id":6,"name":"重庆","X":106.519115,"Y":29.478925},
{"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},
{"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
{"id":9,"name":"银川","X":106.167225,"Y":38.598524},
{"id":10,"name":"西安","X":108.967128,"Y":34.276112},
{"id":11,"name":"南宁","X":108.233931,"Y":22.748296},
{"id":12,"name":"海口","X":110.346181,"Y":19.96992},
{"id":13,"name":"广州","X":113.226683,"Y":23.18307},
{"id":14,"name":"长沙","X":112.947928,"Y":28.169916},
{"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
{"id":16,"name":"福州","X":119.246768,"Y":26.070765},
{"id":17,"name":"台北","X":121.503567,"Y":25.008274},
{"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
{"id":19,"name":"上海","X":121.449707,"Y":31.253361},
{"id":20,"name":"武汉","X":114.216597,"Y":30.579253},
{"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
{"id":22,"name":"南京","X":118.805692,"Y":32.085022},
{"id":23,"name":"郑州","X":113.6511,"Y":34.746308},
{"id":24,"name":"济南","X":117.048331,"Y":36.60841},
{"id":25,"name":"石家","X":114.478215,"Y":38.033276},
{"id":26,"name":"太原","X":112.483066,"Y":37.798404},
{"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
{"id":28,"name":"天津","X":117.351094,"Y":38.925719},
{"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},
{"id":30,"name":"长春","X":125.26142,"Y":43.981984},
{"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},
{"id":33,"name":"香港","X":114.093117,"Y":22.427852},
{"id":34,"name":"澳门","X":113.552482,"Y":22.184495}*/
]
};
var path = [
{"id":1, "x":120.49357, "y":44.883323, "radius":100000},
{"id":2, "x":117.9872, "y":42.350326, "radius":80000},
{"id":3, "x":115.545833, "y":39.79259, "radius":120000},
{"id":4, "x":113.508521, "y":38.274465, "radius":40000},
{"id":5, "x":110.551524, "y":37.151942, "radius":150000},
{"id":6, "x":108.67448, "y":36.30474, "radius":110000},
{"id":7, "x":106.491804, "y":36.264706, "radius":130000},
{"id":8, "x":102.495929 ,"y":37.07025, "radius":140000},
{"id":9, "x":98.093644, "y":38.784154, "radius":160000},
{"id":10, "x":92.640902, "y":39.126654, "radius":170000},
{"id":11, "x":91.005868, "y":38.125725, "radius":160000},
{"id":12, "x":90.545122, "y":34.951701, "radius":130000},
{"id":13, "x":91.309324, "y":33.32037, "radius":100000},
{"id":14, "x":93.411982, "y":31.777678, "radius":150000},
{"id":15, "x":98.224212, "y":30.395442, "radius":170000},
{"id":16, "x":100.630326, "y":29.013206, "radius":180000},
{"id":17, "x":101.171328, "y":27.058946, "radius":190000},
{"id":18, "x":104.454919, "y":25.907586, "radius":190000},
{"id":19, "x":108.053446, "y":26.965449, "radius":20000},
{"id":20, "x":113.019257, "y":28.194103, "radius":130000},
{"id":21, "x":116.535467, "y":26.871059, "radius":110000},
{"id":22, "x":117.470083, "y":23.943192, "radius":100000}];
var map, clickLayer,sr;
var index = 0,t=0;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleLineSymbol", //简单线符号
"dojo/_base/Color",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function(Map,
Tiled,
GraphicsLayer,
PictureMarkerSymbol,
SimpleLineSymbol,
Color,
on,
dom
) {
map = new Map("map",{logo:false});
var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer",{"id":"tiled"});
map.addLayer(tiled, 0);
sr = map.spatialReference;
var mapCenter = new esri.geometry.Point(103.847, 36.0473, sr);
map.centerAndZoom(mapCenter); clickLayer = new GraphicsLayer({"id":"clickLayer"});
map.addLayer(clickLayer);
var popupLayer = new GraphicsLayer({"id":"popupLayer"});
map.addLayer(popupLayer, 2);
map.on("load",function(){
addReadPopup(drawLine);
});
function addReadPopup(data){
var pms = new PictureMarkerSymbol('images/red.png', 14, 16);
var pt=new esri.geometry.Point(data.X,data.Y,sr);
var graphic = new esri.Graphic(pt, pms, data);
popupLayer.add(graphic);
};
popupLayer.on("click",popupLayerClick);
popupLayer.on("mouse-over",popupLayerOver);
popupLayer.on("mouse-out",popupLayerOut);
function popupLayerClick(evt){
clickLayer.clear();
var graphic = evt.graphic;
console.log(graphic);
map.infoWindow.setTitle(graphic.attributes.name);
map.infoWindow.setContent(graphic.attributes.name);
map.infoWindow.show(graphic.geometry); var endPts = graphic.attributes.endPt;
var lines = new Array();
for(var i= 0,dl=endPts.length;i<dl;i++){
var endPt = endPts[i];
var pms = new PictureMarkerSymbol('images/house.png', 30, 30);
var pt=new esri.geometry.Point(endPt.X,endPt.Y,sr);
var ptGraphic = new esri.Graphic(pt, pms, endPt);
popupLayer.add(ptGraphic);
lines.push([graphic.attributes.X,graphic.attributes.Y],[endPt.X,endPt.Y]);
}
var lineJson={
"paths":[lines],
"spatialReference":{"wkid":4326}
};
var line = new esri.geometry.Polyline(lineJson);
var sls = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0, 255, 0]),
2
);
var lineGraphic = new esri.Graphic(line, sls , endPt);
clickLayer.add(lineGraphic);
map.setExtent(line.getExtent().expand(2));
}
function popupLayerOver(e){
map.setMapCursor("pointer");
console.log(e.graphic.attributes);
var scrPt = map.toScreen(e.graphic.geometry);
var textDiv = dojo.doc.createElement("div");
dojo.attr(textDiv,{
"id":"text"
});
dojo.style(textDiv, {
"left": scrPt.x+10 + "px",
"top": scrPt.y+10 + "px",
"position": "absolute",
"z-index":99,
"background":"#fcffd1",
"font-size":"10px",
"border":"1px solid #0096ff",
"padding": "0.1em 0.3em 0.1em",
"font-size": "11px",
"border-radius": "3px",
"box-shadow": "0 0 0.75em #777777"
});
textDiv.innerHTML =e.graphic.attributes.name+"市水利自己主动化研究所";
dojo.byId("map").appendChild(textDiv);
};
function popupLayerOut(e){
map.setMapCursor("default");
dojo.byId("map").removeChild(dojo.byId("text"));
}; on(dom.byId("addPath"), "click", function(){
console.log(path);
addPath();
});
}); function addPath(){
require([
"esri/geometry/Circle"
],
function(Circle){
console.log(index);
var sms = new esri.symbol.SimpleMarkerSymbol({
"color": [255,255,0,255],
"size": 8,
"angle": -30,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [255,0,0,255],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
}
});
var sls = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new esri.Color([255, 0, 0]),
2
);
var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
new esri.Color([0,0,255,0.2]), 2),new esri.Color([0,0,255,0.2])
);
var ptStart = new esri.geometry.Point(path[index].x, path[index].y, sr);
var ptEnd = new esri.geometry.Point(path[index+1].x, path[index+1].y, sr);
var gPtStart = new esri.Graphic(
ptStart,
sms
);
var gCircleStart = new esri.Graphic(
new Circle(ptStart, {"radius":path[index].radius}),
sfs
);
var gPtEnd = new esri.Graphic(
ptEnd,
sms
);
var gCircleEnd = new esri.Graphic(
new Circle(ptEnd, {"radius":path[index+1].radius}),
sfs
);
var polylineJson = {
"paths":[[[path[index].x,path[index].y], [path[index+1].x,path[index+1].y]]],
"spatialReference":{"wkid":4326} };
var gLine = new esri.Graphic(
new esri.geometry.Polyline(polylineJson),
sls
);
clickLayer.add(gLine);
if(index<path.length-1){
clickLayer.add(gCircleEnd);
clickLayer.add(gPtEnd);
}
if(index === 0)
{
clickLayer.add(gCircleStart);
clickLayer.add(gPtStart);
} if(index<path.length-2){
t = setTimeout('addPath()',1000);
index++;
}
else{
clearInterval(t);
}
});
}
</script>
</head> <body>
<div id="map">
<button id="addPath" type="button" style="position: absolute; top: 10pt; right: 15pt; z-index: 99;">加入路径</button>
</div>
</body>
</html>
如有疑问，请联系：
QQ：1004740957
Email：niujp08@qq.com
Arcgis for JS实现台风运动路径与影像范围的显示的更多相关文章
- （转）Arcgis for JS实现台风运动路径与影像范围的显示
http://blog.csdn.net/gisshixisheng/article/details/42025435 首先,看看具体的效果: 初始化状态 绘制中 绘制完成 首先,组织数据.我组织的数 ...
- arcgis for js开发之路径分析
arcgis for js开发之路径分析 //方法封装 function routeplan(x1, x2, y1, y2, barrierPathArray, isDraw, callback) { ...
- Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)
原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的) 咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲 ...
- Arcgis for JS之Cluster聚类分析的实现
原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphicla ...
- ArcGIS API for Silverlight 绘制降雨路径动画
原文:ArcGIS API for Silverlight 绘制降雨路径动画 #region 降雨动画演示 2014-04-16 List<Graphic> graphics = new ...
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...
- js获取项目根路径
//js获取项目根路径,如: http://localhost:8083/uimcardprj function getRootPath(){ //获取当前网址,如: http://localhost ...
- java ,js获取web工程路径
一.java获取web工程路径 1),在servlet可以用一下方法取得: request.getRealPath(“/”) 例如:filepach = request.getRealPath(“/” ...
- Arcgis for js载入天地图
综述:本节讲述的是用Arcgis for js载入天地图的切片资源. 天地图的切片地图能够通过esri.layers.TiledMapServiceLayer来载入.在此将之进行了一定的封装,例如以下 ...
随机推荐
- 2014辽宁ACM省赛 Prime Factors
问题 L: Prime Factors 时间限制: 1 Sec 内存限制: 128 MB [提交][状态][论坛] 题目描写叙述 I'll give you a number , please te ...
- 将odbc扩展编译至nodejs程序集中
1． 下载nodejs https://github.com/joyent/node 2． 下载odbc for nodejs 扩展 https://registry.npmjs.org/odbc/- ...
- Scut游戏server引擎Unity3d访问
Scut提供Unity3d Sdk包.便利的高速发展和Scut游戏server对接: 看Unity3d示为以下的比率: 启动Unity3d项目 打开Scutc.svn\SDK\Unity3d\Asse ...
- Youtube最佳Red5 官方视频下载指南，字幕【亲测成功】
前言 最近在研究Red5 流媒体服务框架,官网上的信息足以让一个新手入门 有官方參考手冊 -- 高速了解red5的相关信息 有Red5 on Stackoverflow -- 在上面能够提问或者回答 ...
- Android4.0（Phone）来电过程分析
在开机时.系统会启动PhoneApp类,那是由于在AndroidManifest.xml文件里配置了 <application android:name="PhoneApp" ...
- sql语句like的使用方法
在SQL结构化查询语言中,LIKE语句有着至关关键的数据. LIKE语句的语法格式是:select * from 表名 where 字段名 like 相应值(子串),它主要是针对字符型字段的,它的作用 ...
- java RC4加密和解码
package com.*; public class RC4 { public static String decry_RC4(byte[] data, String key) { if (data ...
- Mybatis基金会: 经常问的问题FAQ
Mybatis基金会: #{...} 和 ${...} 差额 MyBatis将 #{-} 解释为JDBC prepared statement 参数标记.而将 ${-} 解释为一个字符串替换.非常实用 ...
- OCP读书笔记(25) - 题库(ExamE)
401.Which of the following are correct about block media recovery? (Choose all that apply.)A. Physic ...
- DevExpress XtraReports 入门五 创建交叉表报表
原文:DevExpress XtraReports 入门五 创建交叉表报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助更多的人不会像我这样浪 ...