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地圖
- openlayers根據座標在地圖上劃區域地圖
- d3.js 入門學習記錄(十一) 地圖上的視覺化JS地圖視覺化
- 如何判斷一個點在地圖上?如何判斷一個點在多邊形內?地圖
- 百度地圖框選標註座標點功能地圖
- 百度地圖開發-在地圖上檢索資料 08地圖
- 在 React 中使用 SVG 圖示元件ReactSVG元件
- 百度地圖開發-在地圖上實現路線導航 09地圖
- 在點雲上計算兩點之間的測地線
- SVG 在 image 標籤中的動態修改技巧SVG
- svg08——<use>&<defs>標籤建立圖形引用SVG
- 線上SVG轉換,支援SVG to PNG、SVG to JPEG、SVG to WEBP 圖片轉換操作-toolfk程式設計師線上工具網SVGWeb程式設計師
- Python爬取房產資料,在地圖上展現!Python地圖
- 高德地圖api標記點和線段重合點選響應問題地圖API
- 公司位置怎麼上地圖,怎麼在地圖上畫出區域地圖
- SVG 座標系統SVG
- 高德地圖聚合點,增加所有點選標記,點選後展示該聚合點下所有資訊地圖
- vue如何使用騰訊地圖JavaScript API GL進行打點標記Vue地圖JavaScriptAPI
- 圖觀™引擎開發小技巧——三維場景地標點繪製
- day03-svg標籤SVG
- D3.js上手——餅狀圖JS
- D3.js上手——折線圖JS
- 【遊戲設計圖形學】在地圖上生成蜿蜒河流的兩種方法遊戲設計地圖
- 騰訊地圖定位及座標解析地圖
- 地圖免費標註公司位置,怎麼做業務分佈地圖地圖
- 百度地圖API : 自定義標註圖示地圖API
- 向量圖SVG的使用SVG
- 地圖網點分佈圖怎麼做,如何製作地圖資料分佈圖地圖
- xml.etree.ElementTree 文件中文翻譯; SVG向量圖;Python標準庫XMLSVGPython
- d3.js 入門學習筆記( 八) 實現 面積圖(線圖) 散點圖 氣泡圖 條形圖JS筆記
- DataV動態GPS資料來源在高德地圖上座標轉換方案地圖
- 高德座標打點(點為正常的WGS84地球座標系,常見於 GPS 裝置,Google 地圖等國際標準的座標體系)偏移,調整偏移量Go地圖
- svg 使用中的疑惑點SVG
- Simple Icons - 在WordPress加入超過500個熱門Svg圖示SVG
- 如何在 CSS 背景圖片中對 SVG 圖片進行著色 ,修改svg圖片顏色CSSSVG
- 自定義室內地圖-商場室內地圖線上編輯工具地圖
- svg圖片 填充顏色SVG
- SVG繪製餅狀圖SVG
- svg圖示使用心得SVG