第十一章 D3地理

d3繪制地圖思路

繪制思路:

  1. 首先 定義地圖的投影和地理路徑生成器:
  2. 獲取Json文件,
  3. 拿到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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末爪模,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子荚藻,更是在濱河造成了極大的恐慌屋灌,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件应狱,死亡現(xiàn)場離奇詭異共郭,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)疾呻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進(jìn)店門除嘹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人罐韩,你說我怎么就攤上這事憾赁。” “怎么了散吵?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵龙考,是天一觀的道長。 經(jīng)常有香客問我矾睦,道長晦款,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任枚冗,我火速辦了婚禮缓溅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘赁温。我一直安慰自己坛怪,他們只是感情好淤齐,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著袜匿,像睡著了一般更啄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上居灯,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天祭务,我揣著相機(jī)與錄音,去河邊找鬼怪嫌。 笑死义锥,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的岩灭。 我是一名探鬼主播拌倍,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼噪径!你這毒婦竟也來了贰拿?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤熄云,失蹤者是張志新(化名)和其女友劉穎膨更,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缴允,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡荚守,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了练般。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片矗漾。...
    茶點(diǎn)故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖薄料,靈堂內(nèi)的尸體忽然破棺而出敞贡,到底是詐尸還是另有隱情,我是刑警寧澤摄职,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布誊役,位于F島的核電站,受9級特大地震影響谷市,放射性物質(zhì)發(fā)生泄漏蛔垢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一迫悠、第九天 我趴在偏房一處隱蔽的房頂上張望鹏漆。 院中可真熱鬧,春花似錦、人聲如沸艺玲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽饭聚。三九已至又跛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間若治,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工感混, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留端幼,地道東北人。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓弧满,卻偏偏與公主長得像婆跑,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子庭呜,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容