整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

太酷炫了，我用 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地理可视化、其他效果展示。

行文本展开收起是一个很常见的交互， 如下图演示



实现这一类布局和交互难点主要有以下几点


  1. 位于多行文本右下角的“展开收起”按钮
  2. “展开”和“收起”两种状态的切换
  3. 当文本不超过指定行数时，不显示“展开收起”按钮


说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，vue-clamp 就是这么做的），更别说下面的交互和判断逻辑了，不过经过我的一番琢磨，其实纯 CSS 也能完美实现的，下面就一步一步来看看如何实现吧~



一、位于右下角的“展开收起”按钮


很多设计同学都喜欢这样的设计，把按钮放在右下角，和文本混合在一起，而不是单独一行，视觉上可能更加舒适美观。先看看多行文本截断吧，这个比较简单


  1. 多行文本截断


假设有这样一个 html 结构


<div class="text">
  浮动元素是如何定位的
正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
</div>


多行文本超出省略大家应该很熟悉这个了吧，主要用到用到 line-clamp ，关键样式如下


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



  1. 右下角环绕效果


提到文本环绕效果，一般能想到 浮动 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;/*先随便设置一个高度*/
}



  1. 动态高度


上面虽然完成了右下加环绕，但是高度是固定的，如何动态设置呢？这里可以用到 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+），这里整理一下实现重点


  1. 文本环绕效果首先考虑 浮动 float
  2. flex 布局子元素可以通过百分比计算高度
  3. 多行文本截断还可以结合文本环绕效果用 max-height 模拟实现
  4. 状态切换可以借助 checkbox
  5. CSS 改变文本可以采用伪元素生成
  6. 多利用 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制作网页动画

如何在网页中实现动画效果？

  1. 动态图片
  2. Flash
  3. JavaScript

Flash需要插件支持，文件体积大 从这次课开始学习使用CSS代码来完成动画：存在兼容性问题

  • CSS3变形
  • CSS3过渡
  • CSS3动画

6.1、CSS变形

  • CSS3变形是一些效果的集合
  • 如平移、旋转、缩放、倾斜效果
  • 简言之，平移就是一个变形，旋转就是一个变形。。。


  • 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

在这里插入图片描述


在线咨询
上一篇：Web前端：JavaScript与HTML—你应该知道的基本区别
下一篇：html乱码-解决gb2312编码导致乱码问题

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 乾县 永城市 绍兴县 华莹市 凤阳县 南和县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服