太酷炫了，我用 Python 畫出了北上廣深的地鐵路線動態圖

天教大家用python制作北上廣深——地鐵線路動態圖，這可能是全網最全最詳細的教程了。

坐標點的采集

之前做過類似的地理可視化，不過都是使用網絡上收集到的json數據。但很多數據其實是過時的，甚至是錯誤/不全的。所以我們最好還是要自己動手，豐衣足食（爬蟲大法好）。打開高德地圖的地鐵網頁， map.amap.com/subway/inde…

可以輕松得到北京地鐵數據的接口，同理也把其他三個城市的url復制出來。有了api，解析json即可獲得數據?

url = 'http://map.amap.com/service/subway?_1615466846985&srhdata=1100_drw_beijing.json'
response = requests.get(url)
result = json.loads(response.text)
stations = []
for i in result['l']:
    station = []
    for a in i['st']:
        station.append([float(b) for b in a['sl'].split(',')])
    stations.append(station)
pprint.pprint(stations)
復制代碼

pprint格式化打印結果，方便預覽

坐標系的轉換

其實我之前有看到類似地理可視化文章，結果自己一試發現縮小看還行，一放大就會發現坐標點飄出二里地了?正好拿上文獲取的坐標點給大家演示一下，看看同樣的經緯度在不同地圖里的地理位置?

?可以看到該經緯度在高德地圖里指的是金安橋地鐵站，然而在百度地圖里，地理位置則指向了幾公里外的某大廈。為什么會出現這個問題呢？其實是不同地圖產品的地理坐標系導致的。

下面說一下常見的地理坐標系：地球坐標系是國際通用坐標系，比較適合國際地圖可視化。不過在我國范圍內，一般不會直接使用它，而是使用由國家測繪局在其基礎上加密的火星坐標系。另外還有公司會在火星坐標系上進行二次加密，比如百度坐標系、搜狗坐標系等。我網上找到了一張圖：

上圖可以作為參考，具體原因我們就不細究了。重點是什么，如何利用python轉換坐標系？例如在本文中，我們是在高德地圖中獲得的坐標點集合，那么也就是使用的是GCJ-02坐標系。而下文可視化中會調用百度地圖的接口，也就是需要在BD-09坐標系中進行可視化。幸好我在網上搜到了GCJ-02轉BD-09的公式，并用python實現此公式：

#需要的兩個常量先設置好
pi = 3.1415926535897932384 #π
r_pi = pi * 3000.0/180.0

def gcj02_bd09(lon_gcj02,lat_gcj02):
    b = math.sqrt(lon_gcj02 * lon_gcj02 + lat_gcj02 * lat_gcj02) + 0.00002 * math.sin(lat_gcj02 * r_pi)
    o = math.atan2(lat_gcj02 , lon_gcj02) + 0.000003 * math.cos(lon_gcj02 * r_pi)
    lon_bd09 = b * math.cos(o) + 0.0065
    lat_bd09 = b * math.sin(o) + 0.006
    return [lon_bd09,lat_bd09]
復制代碼

這樣我們就寫好了一個python將GCJ-02坐標系轉成BD-09的函數，調用這個函數，就可以將高德地圖獲取的坐標點集合統統轉換成百度坐標系。

result = []
for station in stations:
    result.append([gcj02_bd09(*point) for point in station])
復制代碼

以其中一個坐標點為例：

到此，我們的前期數據工作終于準備齊了。當然，如果我們一開始獲取的數據就是BD_09(百度地圖)坐標系的，轉換這步就可以直接省略嘍~

地理可視化

接下來就要利用pyecharts中的BMap來可視化了，不過需要先獲取百度開放平臺的密鑰。百度地圖開放平臺? lbsyun.baidu.com/apiconsole/…

復制?上圖中的訪問應用（AK），保存好，這在后續的可視化中將要用到。我們使用pyecharts中的BMap，先導入模塊

from pyecharts.charts import BMap 
from pyecharts import options as opts 
from pyecharts.globals import BMapType, ChartType 
復制代碼

在導入數據（也就是上文轉換后的經緯度數據result）后，可以調整一下參數以及增添一些控件。?關鍵參數都做了注釋，方便大家查看（其中百度appkey記得替換成自己的）

map_b = (
    BMap(init_opts = opts.InitOpts(width = "800px", height = "600px"))
    .add_schema(
        baidu_ak = '****************', #百度地圖開發應用appkey
        center = [116.403963, 39.915119], #當前視角的中心點
        zoom = 10, #當前視角的縮放比例
        is_roam = True, #開啟鼠標縮放和平移漫游
    )
    .add(
        series_name = "",
        type_ = ChartType.LINES, #設置Geo圖類型
        data_pair = result, #數據項
        is_polyline = True, #是否是多段線，在畫lines圖情況下#
        linestyle_opts = opts.LineStyleOpts(color = "blue", opacity = 0.5, width = 1), # 線樣式配置項
    )
    .add_control_panel(
        maptype_control_opts = opts.BMapTypeControlOpts(type_ = BMapType.MAPTYPE_CONTROL_DROPDOWN), #切換地圖類型的控件
        scale_control_opts = opts.BMapScaleControlOpts(), #比例尺控件
        overview_map_opts = opts.BMapOverviewMapControlOpts(is_open = True), #添加縮略地圖
        navigation_control_opts = opts.BMapNavigationControlOpts() #地圖的平移縮放控件
    )
)

map_b.render(path = 'subway_beijing.html')
復制代碼

注：因為是北京地圖，所以設置天安門的經緯度[116.403963, 39.915119]為視角中心。

讓我們看一下可視化的結果吧：

?上圖中的四個角都有控件，這是我們在代碼中添加了控件參數，它們分別為：地圖的平移縮放控件、切換地圖類型的控件、縮略地圖、以及比例尺控件。是不是還闊以

其他效果展示

上文已經基本實現了用python制作地鐵線路動態圖。不過大家都用同一種顏色背景制作動態圖的話，就顯得就太單調了。正好我們還要繪制其他三個城市的地鐵圖，那就調整一些參數，看看能獲得什么效果吧？

上海-變色

上海的數據接口是：

http://map.amap.com/service/subway?_1615467204533&srhdata=3100_drw_shanghai.json
復制代碼

上海市的地鐵圖我們改一下line的顏色，可在參數linestyle_opts中修改color。?下圖中的線條顏色是lilac——淺紫色

廣州-衛星圖

廣州的數據接口是：

http://map.amap.com/service/subway?_1615494419554&srhdata=4401_drw_guangzhou.json
復制代碼

其實我們還可以調整可視化背景為衛星圖。不過這一操作并不需要額外寫代碼，因為剛剛上文提到我在調整參數時添加了4個控件，其中右上角的就可以直接切換地圖類型，具體操作見下圖。

深圳-個性化配色

深圳的數據接口是：

http://map.amap.com/service/subway?_1615494473615&srhdata=4403_drw_shenzhen.json
復制代碼

如果不滿意百度地圖設置好的地圖背景，我們還可以個性化設置mapStyle，調整自己的配色styleJson。

小結

今天帶大家學習了如何利用python繪制一線城市的地鐵線路動圖。主要分為四個部分：坐標點的采集、坐標系的轉換、利用pyecharts地理可視化、其他效果展示。

行文本展開收起是一個很常見的交互，如下圖演示

實現這一類布局和交互難點主要有以下幾點

位于多行文本右下角的“展開收起”按鈕
“展開”和“收起”兩種狀態的切換
當文本不超過指定行數時，不顯示“展開收起”按鈕

說實話，之前單獨看這個布局，即使借助 JavaScript 也不是一件容易的事啊（需要計算文字寬度動態截取文本，vue-clamp 就是這么做的），更別說下面的交互和判斷邏輯了，不過經過我的一番琢磨，其實純 CSS 也能完美實現的，下面就一步一步來看看如何實現吧~

一、位于右下角的“展開收起”按鈕

很多設計同學都喜歡這樣的設計，把按鈕放在右下角，和文本混合在一起，而不是單獨一行，視覺上可能更加舒適美觀。先看看多行文本截斷吧，這個比較簡單

多行文本截斷

假設有這樣一個 html 結構

<div class="text">
  浮動元素是如何定位的
正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
</div>

多行文本超出省略大家應該很熟悉這個了吧，主要用到用到 line-clamp ，關鍵樣式如下

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

右下角環繞效果

提到文本環繞效果，一般能想到 浮動 float ，沒錯，千萬不要以為浮動已經是過去式了，具體的場景還是很有用的。比如下面放一個按鈕，然后設置浮動

<div class="text">
  <button class="btn">展開</button>
  浮動元素是如何定位的
正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
</div>

.btn {
  float: left;
  /*其他裝飾樣式*/
}

如果設置右浮動

.btn {
  float: right;
  /*其他裝飾樣式*/
}

這時已經有了環繞的效果了，只是位于右上角，如何將按鈕移到右下角呢？先嘗試一下 margin

.btn {
  float: right;
  margin-top: 50px;
  /*其他裝飾樣式*/
}

可以看到，雖然按鈕到了右下角，但是文本卻沒有環繞按鈕上方的空間，空出了一大截，無能為力了嗎？

雖然 margin 不能解決問題，但是整個文本還是受到了浮動按鈕的影響，如果有多個浮動元素會怎么樣呢？這里用偽元素來 ::before 代替

.text::before{
  content: '';
  float: right;
  width: 10px;
  height: 50px;/*先隨便設置一個高度*/
  background: red
}

現在按鈕到了偽元素的左側，如何移到下面呢？很簡單，清除一下浮動 clear: both; 就可以了

.btn {
  float: right;
  clear: both;
  /*其他裝飾樣式*/
}

可以看到，現在文本是完全環繞在右側的兩個浮動元素了，只要把紅色背景的偽元素寬度設置為0（或者不設置寬度，默認就是 0），就實現了右下角環繞的效果

.text::before{
  content: '';
  float: right;
  width: 0; /*設置為0，或者不設置寬度*/
  height: 50px;/*先隨便設置一個高度*/
}

動態高度

上面雖然完成了右下加環繞，但是高度是固定的，如何動態設置呢？這里可以用到 calc 計算，用整個容器高度減去按鈕的高度即可，如下

.text::before{
  content: '';
  float: right;
  width: 0;
  height: calc(100% - 24px);
}

很可惜，好像并沒有什么效果，打開控制臺看看，結果發現 calc(100% - 24px) 計算高度為 0

原因其實很容易想到，就是 高度 100% 失效 的問題，關于這類問題網上的分析有很多，通常的解決方式是給父級指定一個高度，但是這里的高度是動態變化的，而且還有展開狀態，高度更是不可預知，所以設置高度不可取。

除此之外，其實還有另一種方式，那就是利用 flex 布局。大概的方法就是在 flex 布局的子項中，可以通過百分比來計算變化高度，具體可參考 w3.org 中關于 css-flexbox 的描述

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

因此，這里需要給 .text 包裹一層，然后設置 display: flex

<div class="wrap">
  <div class="text">
    <button class="btn">展開</button>
    浮動元素是如何定位的
  正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
  </div>
</div>

.wrap{
  display: flex;
}

實踐下來，display: grid 和 display: -webkit-box 同樣有效，原理類似

這樣下來，剛才的計算高度就生效了，改變文本的行數，同樣位于右下角~

除此之外，動態高度也可以采用負的 margin 來實現（性能會比 calc 略好一點）

.text::before{
  content: '';
  float: right;
  width: 0;
  /*height: calc(100% - 24px);*/
  height: 100%;
  margin-bottom: -24px;
}

到這里，右下角環繞的效果就基本完成，省略號也是位于展開按鈕之前的，完整代碼可以查看 codepen 右下角多行展開環繞效果

4.其他瀏覽器的兼容處理

上面的實現是最完美的處理方式。原本以為兼容性沒什么大問題的，畢竟只用到了文本截斷和浮動，-webkit-line-clamp 雖然是 -webkit- 前綴，不過 firefox 也是支持的，打開一看傻了眼，safari 和 firefox 居然全亂了！

這就有點難受了，前面那么多努力都白費了嗎？不可能不管這兩個，不然就只能是 demo 了，無法用于生產環境。

趕緊打開控制臺看看是什么原因。一番查找，結果發現是 display: -webkit-box ！設置該屬性后，原本的文本好像變成了一整塊，浮動元素也無法產生環繞效果，去掉之后浮動就正常了

那么問題來了：沒有 display: -webkit-box 怎么實現多行截斷呢？

其實上面的努力已經實現了右下角環繞的效果，如果在知道行數的情況下設置一個最大高度，是不是也完成了多行截斷呢？為了便于設置高度，可以添加一個行高 line-height，如果需要設置成3行，那高度就設置成 line-height * 3

.text {
  /*
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  */
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

為了方便更好的控制行數，這里可以把常用的行數通過屬性選擇器獨立出來（通常不會太多），如下

[line-clamp="1"] {
  max-height: 1.5em;
}
[line-clamp="2"] {
  max-height: 3em;
}
[line-clamp="3"] {
  max-height: 4.5em;
}
...

<!--3行-->
<div class="text" line-clamp="3">
...
</div>
<!--5行-->
<div class="text" line-clamp="5">
 ...
</div>

可以看到基本上正常了，除了沒有省略號，現在加上省略號吧，跟在展開按鈕之前就可以了，可以用偽元素實現

.btn::before{
  content: '...';
  position: absolute;
  left: -10px;
  color: #333;
  transform: translateX(-100%)
}

這樣，Safari 和 Firefox 的兼容布局基本上就完成了，完整代碼可以查看 codepen 右下角多行展開環繞效果（全兼容）

二、“展開”和“收起”兩種狀態

提到 CSS 狀態切換，大家都能想到 input type="checkbox" 吧。這里我們也需要用到這個特性，首先加一個 input ，然后把之前的 button 換成 label ，并且通過 for 屬性關聯起來

<div class="wrap">
  <input type="checkbox" id="exp">
  <div class="text">
    <label class="btn" for="exp">展開</label>
    浮動元素是如何定位的
  正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
  </div>
</div>

這樣，在點擊 label 的時候，實際上是點擊了 input 元素，現在來添加兩種狀態，分別是只顯示 3 行和不做行數限制

.exp:checked+.text{
  -webkit-line-clamp: 999; /*設置一個足夠大的行數就可以了*/
}

兼容版本可以直接設置最大高度 max-height 為一個較大的值，或者直接設置為 none

.exp:checked+.text{
  max-height: none;
}

這里還有一個小問題，“展開”按鈕在點擊后應該變成“收起”，如何修改呢？

有一個技巧，凡是碰到需要動態修改內容的，都可以使用偽類 content 生成技術，具體做法就是去除或者隱藏按鈕里面的文字，采用偽元素生成

<label class="btn" for="exp"></label><!--去除按鈕文字-->

.btn::after{
  content:'展開' /*采用content生成*/
}

添加 :checked 狀態

.exp:checked+.text .btn::after{
  content:'收起'
}

兼容版本由于前面的省略號是模擬出來的，不能自動隱藏，所以需要額外來處理

.exp:checked+.text .btn::before {
    visibility: hidden; /*在展開狀態下隱藏省略號*/
}

基本和本文開頭的效果一致了，完整代碼可以查看 codepen 多行展開收起交互，兼容版本可以查看 codepen 多行展開收起交互（全兼容）

還有一點，如果給 max-height 設置一個合適的值，注意，是合適的值，具體原理可以參考CSS 奇技淫巧：動態高度過渡動畫，還能加上過渡動畫

.text{
  transition: .3s max-height;
}
.exp:checked+.text{
  max-height: 200px; /*超出最大行高度就可以了*/
}

三、文本行數的判斷

上面的交互已經基本滿足要求了，但是還是會有問題。比如當文本較少時，此時是沒有發生截斷，也就是沒有省略號的，但是“展開”按鈕卻仍然位于右下角，如何隱藏呢？

通常 js 的解決方式很容易，比較一下元素的 scrollHeight 和 clientHeight 即可，然后添加相對應的類名。下面是偽代碼

if (el.scrollHeight > el.clientHeight) {
  // 文本超出了
  el.classList.add('trunk')
}

那么，CSS 如何實現這類判斷呢？

可以肯定的是，CSS 是沒有這類邏輯判斷，大多數我們都需要從別的角度，采用 “障眼法”來實現。比如在這個場景，當沒有發生截斷的時候，表示文本完全可見了，這時，如果在文本末尾添加一個元素（紅色小方塊），為了不影響原有布局，這里設置了絕對定位

.text::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    background: red;
}

可以看到，這里的紅色小方塊是完全跟隨省略號的。當省略號出現時，紅色小方塊必定消失，因為已經被擠下去了，這里把父級 overflow: hidden 暫時隱藏就能看到是什么原理了

然后，可以把剛才這個紅色的小方塊設置一個足夠大的尺寸，并且降低透明度，比如 100% * 100%

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: red;
}

可以看到，紅色的塊塊把右下角的都覆蓋了，現在把背景改為白色（和父級同底色），父級 overflow: hidden 重新加上

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
}

現在看看點擊展開的效果吧

現在展開以后，發現按鈕不見（被剛才那個偽元素所覆蓋，并且也點擊不了），如果希望點擊以后仍然可見呢？添加一下 :checked 狀態即可，在展開時隱藏覆蓋層

.exp:checked+.text::after{
    visibility: hidden;
}

這樣，就實現了在文字較少的情況下隱藏展開按鈕的功能

最終完整代碼可以查看 codepen 多行展開收起自動隱藏，兼容版本可以查看 codepen 多行展開收起自動隱藏（全兼容）

需要注意的是，兼容版本可以支持到 IE 10+（這就過分了啊，居然還支持 IE），但是由于 IE 不支持 codepen，所以測試 IE 可以自行復制在本地測試。

四、總結和說明

總的來說，重點還是在布局方面，交互其實相對容易，整體實現的成本其實是很低的，也沒有比較生僻的屬性，除了布局方面 -webkit-box 貌似有點 bug （畢竟是-webkit-內核，火狐只是借鑒了過來，難免有些問題），幸運的是可以通過另一種方式實現多行文本截斷效果，兼容性相當不錯，基本上全兼容（IE10+），這里整理一下實現重點

文本環繞效果首先考慮 浮動 float
flex 布局子元素可以通過百分比計算高度
多行文本截斷還可以結合文本環繞效果用 max-height 模擬實現
狀態切換可以借助 checkbox
CSS 改變文本可以采用偽元素生成
多利用 CSS 遮擋“障眼法”

多行文本展開收起效果可以說是業界一個老大難的問題了，有很多 js 解決方案，但是感覺都不是很完美，希望這個全新思路的 CSS 解決方式能給各位帶來不一樣的啟發，感謝閱讀，歡迎點贊、收藏、轉發～

References

[1] vue-clamp: https://justineo.github.io/vue-clamp/demo/?lang=zh
[2] css-flexbox: https://www.w3.org/TR/css-flexbox-1/#algo-stretch
[3] codepen 右下角多行展開環繞效果: https://codepen.io/xboxyan/pen/ExWaBJO
[4] codepen 右下角多行展開環繞效果（全兼容）: https://codepen.io/xboxyan/pen/dyvYNxr
[5] codepen 多行展開收起交互: https://codepen.io/xboxyan/pen/XWMbJeQ
[6] codepen 多行展開收起交互（全兼容）: https://codepen.io/xboxyan/pen/OJpypmR
[7] CSS 奇技淫巧：動態高度過渡動畫: https://github.com/chokcoco/iCSS/issues/91
[8] codepen 多行展開收起自動隱藏: https://codepen.io/xboxyan/pen/eYvNvYK
[9] codepen 多行展開收起自動隱藏（全兼容）: https://codepen.io/xboxyan/pen/LYWpWzK

、制作網頁動畫(了解)

本章目標

會使用transform 2D變形設置網頁元素樣式
會使用transition制作過渡動畫
會使用animation制作網頁動畫

如何在網頁中實現動畫效果？

動態圖片
Flash
JavaScript

Flash需要插件支持，文件體積大從這次課開始學習使用CSS代碼來完成動畫：存在兼容性問題

CSS3變形
CSS3過渡
CSS3動畫

6.1、CSS變形

CSS3變形是一些效果的集合
如平移、旋轉、縮放、傾斜效果
簡言之，平移就是一個變形，旋轉就是一個變形。。。

每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化

在這里插入圖片描述

在線咨詢

上一篇：Web前端：JavaScript與HTML—你應該知道的基本區別
下一篇：html亂碼-解決gb2312編碼導致亂碼問題

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商