摘要:地圖打點射線動效在項目中,通常使用打點和射線來實現區域的攻防傳達運動等需求,最終效果代碼解析首先引入和導入地圖數據因為數據很長,只貼上了一部分,完整的地圖代碼請在案例中提取。
D3.js地圖打點射線動效
在項目中,通常使用打點和射線來實現區域的攻防、傳達、運動等需求,最終效果
http://en.jsrun.net/ZbiKp/emb...
代碼解析 首先引入d3V3和snap 導入地圖數據{"type":"FeatureCollection", "bbox": [ -180.0, -89.99893, 180.0, 83.59961 ], "features":[ {"type":"Feature","properties":{"name":"Afghanistan"},"geometry":{"type":"Polygon","coordinates":[[[61.210817,35.650072],[62.230651,35.270664],[62.984662,35.404041],[63.193538,35.857166],[63.982896,36.007957],[64.546479,36.312073],[64.746105,37.111818],[65.588948,37.305217],[65.745631,37.661164],[66.217385,37.39379],[66.518607,37.362784],[67.075782,37.356144],[67.83,37.144994],[68.135562,37.023115],[68.859446,37.344336],[69.196273,37.151144],[69.518785,37.608997],[70.116578,37.588223],[70.270574,37.735165],[70.376304,38.138396],[70.806821,38.486282],[71.348131,38.258905],[71.239404,37.953265],[71.541918,37.905774],[71.448693,37.065645],[71.844638,36.738171],[72.193041,36.948288],[72.63689,37.047558],[73.260056,37.495257],[73.948696,37.421566],[74.980002,37.41999],[75.158028,37.133031],[74.575893,37.020841],[74.067552,36.836176],[72.920025,36.720007],[71.846292,36.509942],[71.262348,36.074388],[71.498768,35.650563],[71.613076,35.153203],[71.115019,34.733126],[71.156773,34.348911],[70.881803,33.988856],[69.930543,34.02012],[70.323594,33.358533],[69.687147,33.105499],[69.262522,32.501944],[69.317764,31.901412],[68.926677,31.620189],[68.556932,31.71331],[67.792689,31.58293],[67.683394,31.303154],[66.938891,31.304911],[66.381458,30.738899],[66.346473,29.887943],[65.046862,29.472181],[64.350419,29.560031],[64.148002,29.340819],[63.550261,29.468331],[62.549857,29.318572],[60.874248,29.829239],[61.781222,30.73585],[61.699314,31.379506],[60.941945,31.548075],[60.863655,32.18292],[60.536078,32.981269],[60.9637,33.528832],[60.52843,33.676446],[60.803193,34.404102],[61.210817,35.650072]]]},"id":"AFG"}, {"type":"Feature","properties":{"name":"Angola"},"geometry":{"type":"MultiPolygon","coordinates":[[[[16.326528,-5.87747],[16.57318,-6.622645],[16.860191,-7.222298],[17.089996,-7.545689], //....................
因為數據很長,只貼上了一部分,完整的地圖代碼請在案例中提取。
繪制地圖var width = 800; var height = 500; var svg = d3.select("#map").append("svg") .attr("id","mapSvg") .attr("width",width) .attr("height",height); var projection = d3.geo.mercator() //geo坐標和瀏覽器坐標的換算 .center([5, 32]) .scale(140) .translate([width / 2, height / 2]); var path = d3.geo.path() .projection(projection); var mapG = svg.append("g") .attr("id","mapG"); mapG.selectAll("path") .data(root.features) .enter() .append("path") .attr("class","map-path") .attr("stroke", "#212121") .attr("stroke-width", 1) .attr("fill", "#808080") .attr("style","display:block") .attr("d", path); mapG.append("g").attr("id","pointG") pushData();//傳入源和目標的坐標并觸發繪制點和線
上面的代碼中將地圖數據轉換成了瀏覽器坐標,這樣才可以繪制出svg的路徑。
傳入打點數據function pushData(){ var data = [ { from:[161.71533203124997,-10.387304687499991], to:[117.1115,40.7071] }, { from:[117.5744140625001,4.17060546875004], to:[115.2686,30.6628] }, { from:[90.31328125000007,47.676171874999994], to:[112.6758,30.9979] }, { from:[129.71972656249997,42.47500000000005], to:[121.01931115058903, 23.436683457875347] }, { from:[-85.73383789062493,68.630126953125], to:[91.1865,30.1465] }, { from:[-63.938574218750006,-12.529687499999994], to:[115.2686,30.6628] }, { from:[15.000683593750011,46.6259765625], to:[99.613,24.0546] }, { from:[106.75341796875003,20.73505859375004], to:[117.1115,40.7071] }, ]; //每一個動畫獨立互不影響,所以采取分層的原理 var index = 1; setInterval(function(){ var n = data.length * Math.random(); n = parseInt(n); if(n>7){ n = 7 } var p = d3.select("#pointG").append("svg").attr("id","paper"+index); runAttack("paper"+index,data[n]); index++ },200); }
使用定時器觸發繪制打點。
繪制打點及連線function runAttack(id,data){ var height =500; var width = 800; var s = Snap("#"+id); var projection = d3.geo.mercator() .center([5, 32]) .scale(140) .translate([width / 2, height / 2]); function makePro(arr){ var centroid = projection(arr), x = centroid[0], y = centroid[1]; return [x,y] } var circleF = s.circle(makePro(data.from)[0],makePro(data.from)[1],0); var circleT = s.circle(makePro(data.to)[0],makePro(data.to)[1],0); var lineL = s.line(makePro(data.from)[0],makePro(data.from)[1],makePro(data.from)[0],makePro(data.from)[1]); circleF.attr({ fill: "rgba(0,0,0,0)", stroke:"r()rgba(24,255,253,0.5)-#34A1FF", "stroke-width":"5px" }); circleT.attr({ fill:"#18FFFD", stroke:"r()#34A1FF-rgba(24,255,253,0.5)", "stroke-width":"8px" }); lineL.attr({ stroke:"L(" + makePro(data.to)[0] + "," + makePro(data.to)[1] + "," + makePro(data.from)[0] + "," + makePro(data.from)[1] + ")#18FFFD-rgba(0,225,132,0.1)", "stroke-width":"1px", fill:"rgba(0,0,0,0)" }); circleF.animate({r:20,"stroke-width":"1px"},600,function(){ circleF.remove(); }); lineL.animate({x2:makePro(data.to)[0],y2:makePro(data.to)[1]},500,mina.easeinout,function(){ lineL.animate({x1:makePro(data.to)[0],y1:makePro(data.to)[1],"stroke-width":"0"},500,mina.easein,function(){ lineL.remove(); }) circleT.animate({r:10},1000,function(){ circleT.remove(); s.remove(); }) }); }
這里涉及了snap的一些基本操作,詳細教程請在官網學習,這里不重復贅述。
snap的動畫還是比較容易上手的,原理和jquery的animate差不多。只是snap是針對于svg的動畫框架,在賦予屬性中
非常靈活。在繪制節點前,同樣需要把節點的geo坐標轉換成瀏覽器坐標。
繪制射線其實就是頭寬尾細的尾部逐漸消失的一條直線。
snap繪制射線雖然可以無縫和d3的地圖結合,但是很難做到短的連續的射線,今后將會使用tween完成另一種射線形式。
--修復了defs中漸變定義未清除的問題。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88751.html
摘要:本人也做過一些數據可視化相關的產品,下面聊聊對數據可視化的一些思考。這也是數據可視化最麻煩的一直,一般我們借助的地圖,或者百度地圖,高德地圖等來開發,其實百度地圖也出了個地圖可視化的庫,展示效果沒有好。。。。 最近幾年隨著大數據的興起,以及瀏覽器性能的提升,數據可視化成為了一個熱點,前端也冒出來了很多數據可視化的崗位。本人也做過一些數據可視化相關的產品,下面聊聊對數據可視化的一些思考。...
摘要:本人也做過一些數據可視化相關的產品,下面聊聊對數據可視化的一些思考。這也是數據可視化最麻煩的一直,一般我們借助的地圖,或者百度地圖,高德地圖等來開發,其實百度地圖也出了個地圖可視化的庫,展示效果沒有好。。。。 最近幾年隨著大數據的興起,以及瀏覽器性能的提升,數據可視化成為了一個熱點,前端也冒出來了很多數據可視化的崗位。本人也做過一些數據可視化相關的產品,下面聊聊對數據可視化的一些思考。...
摘要:他們的算法基于兩種,一是庫,二是瓦片定位。如果嫌太費事或者緊急使用可以找我發送源碼或點位庫計算距離核心計算方式 很多專網環境下無法像互聯網一樣直接使用各廠提供的經緯度和地址的互逆轉換,像gd或者bd等提供的離線轉換引擎大概價位在200w+。他們的算法基于兩種,一是POI庫,二是瓦片定位。 poi庫的話其實是可以通過算法算出...
閱讀 1117·2023-04-26 03:02
閱讀 1161·2023-04-25 19:18
閱讀 2583·2021-11-23 09:51
閱讀 2561·2021-11-11 16:55
閱讀 2614·2021-10-21 09:39
閱讀 1694·2021-10-09 09:59
閱讀 1991·2021-09-26 09:55
閱讀 3512·2021-09-26 09:55