d3繪制地圖思路
繪制思路:
- 首先 定義地圖的投影和地理路徑生成器:
- 獲取Json文件,
- 拿到geojson.features添加path標(biāo)簽樱调,調(diào)用地理路徑生成器繪制
//定義地圖的投影
var projection = d3.geoAlbers(),
//地理路徑生成器
path = d3.geoPath(projection);
svg.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d',path) // 調(diào)用地理路徑生成器繪制
TopoJSON對GeoJSON的擴(kuò)展,
- 優(yōu)點(diǎn):文件小(geo:topo=5:1)
- 缺點(diǎn):需要用插件轉(zhuǎn)換回geojson
使用TopoJson時(shí)需要將則需要使用topojson.js轉(zhuǎn)換
var georoot = topojson.feature(toporoot,toporoot.objects.china);
d3投影方式類
方法:
invert() 根據(jù)坐標(biāo)點(diǎn)返回經(jīng)緯度
clipAngle() 設(shè)置或獲取投影的裁剪大圓的角度
clipExtent() 設(shè)置或獲取投影的視口裁剪范圍
scale() 設(shè)置或獲取投影的縮放因子
center()
rotate() (控制三維的旋轉(zhuǎn))
fitExtent()
fitSize()
方位角投影(直接將球體投影到平面上)
等面積投影:
- d3.geoAzimuthalEqualArea()
- d3.geoAzimuthalEqualAreaRaw()
等距投影:
- d3.geoAzimuthalEquidistant()
- d3.geoAzimuthalEquidistantRaw()
球心投影:
- d3.geoGnomonic()
- d3.geoGnomonicRaw()
正交投影:
- d3.geoOrthographic()
- d3.geoOrthographicRaw()
球面投影:
- d3.geoStereographic()
- d3.geoStereographicRaw()
復(fù)合投影
- d3.geoAlbersUsa()
圓錐投影將球面覆蓋到一個圓錐上,然后在展開到平面上
阿爾伯斯投影
- d3.geoAlbers()
蘭伯特正形圓錐投影(雙標(biāo)準(zhǔn)緯線默認(rèn)為[30°, 30°])
- d3.geoConicConformal()
雙標(biāo)準(zhǔn)緯線等積圓錐投影
- d3.geoConicEqualArea()
- d3.geoConicEqualAreaRaw()
雙標(biāo)準(zhǔn)緯線等距圓錐投影
- d3.geoConicEquidistant()
- d3.geoConicEquidistantRaw()
圓柱投影
普通圓柱投影:
- d3.geoEquirectangular()
- d3.geoEquirectangularRaw()
默認(rèn)[projection.clipExtent]為±85°經(jīng)度的墨卡托投影
- d3.geoMercator()
橫向墨卡托投影届良。
d3.geoTransverseMercator()
d3.geoTransverseMercatorRaw()
d3路徑生成類
d3.geoPath()
- projection() 設(shè)置投影方式
- context() 設(shè)置canvas上下文
- area() 計(jì)算投影面積
- bounds() 計(jì)算幾何邊界框
- centroid() 計(jì)算幾何中心點(diǎn),(加載標(biāo)簽)
- pointRadius() 設(shè)置點(diǎn)的半徑 適用于Point MultiPoint
經(jīng)緯線
d3.geoCircle() 創(chuàng)建一個圓生成器
.center()
.radius()
.precision()
d3.geoGraticule() 創(chuàng)建一個經(jīng)緯度網(wǎng)格生成器: 默認(rèn)的網(wǎng)格在±80°之間每隔10度有一個維度線笆凌。
.lines() 經(jīng)線和緯線的GeoJSON LineString幾何對象
.outline() 返回一個GeoJSON Polygon幾何對象表示輪廓
.extent() 設(shè)置或獲取球面網(wǎng)格的范圍,等于同時(shí)設(shè)置major和minor
.extentMajor()
.extentMinor()
.step() 設(shè)置或獲取步長士葫,等于同時(shí)設(shè)置major 和 minor的步長乞而,默認(rèn)為?10°, 10°?.
precision() 設(shè)置或獲取網(wǎng)格線的經(jīng)度,默認(rèn)為2.5°.
球面數(shù)學(xué)
d3.geoArea(feature) 返回指定的GeoJSON特征代表的球面的面積
d3.geoBounds(feature) 返回指定GeoJSON特征的包圍框
d3.geoCentroid(feature) 返回指定GeoJSON特征幾何中心
d3.geoDistance(a, b) 返回a到b之間的弧度距離
d3.geoLength(feature) 返回指定GeoJSON的弧長(對于多邊形則返回周長)
d3.geoInterpolate(a, b) 返回一個介于a和b之間的插值器
d3.geoRotation(angles)根據(jù)指定的角度返回一個旋轉(zhuǎn)函數(shù)
d3.geoTransform(methods)
d3.geoIdentity() 恒等轉(zhuǎn)化可以被來縮放慢显,平移和平面的裁剪
.reflectX([reflect])設(shè)置或獲取x方向的反射 reflect
.reflectY([reflect])設(shè)置或獲取x方向的反射 reflect