D3.js在svg地圖上標點
需要實現的需求就是在一張世界地圖上將給定的經緯度座標點繪製出來。
地圖如下:
地圖使用的是svg格式,而不是d3推薦的GeoJSON格式或TopoJSON格式的地圖資料。地圖是使用svg格式使用path路徑繪製而成。
在地圖上會點,首先設定墨卡託投影:
//translate設定投影轉換的偏移值d3.geo.graticule()獲取經緯網
var projection = d3.geo.mercator().translate([480, 490]).rotate([x_rotate,0,0]),
graticule = d3.geo.graticule();
然後獲取該投影下的路徑
var path = d3.geo.path().projection(projection);
然後將結果資料繪製到svg圖上:
var paths = map_results.data(results)
.enter()
.append("path")
.attr("d", function(d){return path(d.track)})
.attr("id", function(d){return "map_" + d.id})
.attr("class", "svg_trackline")
.attr("fill", "#f00")
.attr("stroke", "#f00")
.attr("stroke-opacity", 1)
.attr("stroke-width", 4);
其中results的資料格式為:
[{"id":"1001","FileName":"檔案1","voyage":"航次1","station":"站位1","track": {"type": "Point", "coordinates": [-74.1682, -37.998]},"observation":"觀測方式1","size":"檔案大小1","downloads":"1"},
{"id":"1002","FileName":"檔案2","voyage":"航次2","station":"站位2","track": {"type": "Point", "coordinates": [-56.8855, -38.1172]},"observation":"觀測方式2","size":"檔案大小2","downloads":"2"},
{"id":"1003","FileName":"檔案3","voyage":"航次3","station":"站位3","track": {"type": "Point", "coordinates": [143.0042, -65]},"observation":"觀測方式3","size":"檔案大小3","downloads":"3"}]
相關文章
- ArcGIS API for JavaScript根據兩個點座標在地圖上畫線APIJavaScript地圖
- ArcGIS API for Silverlight 中根據座標點在地圖上打標記API地圖
- iOS根據地址在地圖上展示座標iOS地圖
- 製作地圖d3.js地圖JS
- openlayers根據座標在地圖上劃區域地圖
- 在地圖上使圖片透明地圖
- ECharts 實現地圖散點圖(上)Echarts地圖
- d3.js 入門學習記錄(十一) 地圖上的視覺化JS地圖視覺化
- 如何判斷一個點在地圖上?如何判斷一個點在多邊形內?地圖
- 百度地圖開發-在地圖上檢索資料 08地圖
- 百度地圖框選標註座標點功能地圖
- 讓人物在地圖上動起來地圖
- 地圖 判斷點在區域內地圖斷點
- 如何製作手繪地圖?如何將圖片圖層精確地對準在地圖上?地圖
- 【D3.js學習總結】26、D3地理地圖JS地圖
- 百度地圖API新增自定義標註多點標註地圖API
- 百度地圖開發-在地圖上實現路線導航 09地圖
- 在點雲上計算兩點之間的測地線
- 在 React 中使用 SVG 圖示元件ReactSVG元件
- 地圖演算法(二):判斷當前點是不是在該多邊形上地圖演算法
- 高德地圖api標記點和線段重合點選響應問題地圖API
- svg08——<use>&<defs>標籤建立圖形引用SVG
- SVG 在 image 標籤中的動態修改技巧SVG
- 高德地圖聚合點,增加所有點選標記,點選後展示該聚合點下所有資訊地圖
- Python爬取房產資料,在地圖上展現!Python地圖
- 公司位置怎麼上地圖,怎麼在地圖上畫出區域地圖
- 【D3.js學習總結】4、D3建立SVGJSSVG
- vue如何使用騰訊地圖JavaScript API GL進行打點標記Vue地圖JavaScriptAPI
- 【遊戲設計圖形學】在地圖上生成蜿蜒河流的兩種方法遊戲設計地圖
- 幾張地圖告訴你亞馬遜在地球上的存在感地圖亞馬遜
- 騰訊地圖定位及座標解析地圖
- 騰訊地圖拾取座標地圖
- SVG 座標系統SVG
- 圖觀™引擎開發小技巧——三維場景地標點繪製
- 地圖點聚合優化方案地圖優化
- 地圖免費標註公司位置,怎麼做業務分佈地圖地圖
- 如何實現在H5裡調起高德地圖APP?(上)H5地圖APP
- 高清圖示SVG解決方案全總結(上)SVG