MoreRSS

site iconIsming | 码农明明桑修改

程序员,安徽人,现居上海。擅长Android开发,对Python和Web前端有所了解。
请复制 RSS 到你的阅读器,或快速订阅到 :

Inoreader Feedly Follow Feedbin Local Reader

Isming | 码农明明桑的 RSS 预览

Chromebook折腾之2025

2025-03-05 14:40:56

最近淘了一台洋垃圾Chromebook,折腾了一段时间,目前已经基本在日常使用了。在折腾过程中查找了许多的网上资料,解决了不少中文环境使用ChromeOS的问题,这里就分享一下Chromebook的选购和软件安装。

ChromeOS是什么

ChromeOS是Google从2009年开始开发的项目,可以简单理解为在Linux内核上运行的,以Chrome浏览器作为桌面环境,主要功能也是运行Web应用程序的一个操作系统。在之后,该系统也支持了运行Android应用程序,以及通过容器运行Linux程序,这样一套组合下来,我们就获得了一个原生支持运行Android应用,Linux应用和Web应用的系统,这比在Windows下面折腾Linux子系统,Android子系统要流畅得多。

目前为止,想要运行ChromeOS有两种方式,第一种就是购买ChromeBook,也就是搭载了ChromeOS的笔记本电脑或者触屏电脑。第二种方式,Google在2022年发布了ChromeOS Flex,让用户可以在经过认证的设备上安装ChromeOS Flex,包括一些Mac电脑也是支持的。

而想要激活ChromeOS,你需要有可以顺畅访问Google服务的网络。如果你没有这个条件,来自中国的fydeOS它是一个本地化的ChromeOS,内置了本地化定制和国内可以使用的网络服务,感兴趣可以去他们的官网看看。

Chromebook适合谁

ChromeOS最初设计出来也主要是方便云端办公,提供简单、快速、安全的环境,因此它更适合于对于性能没有要求,而希望简单吗体验的人。比如说:使用在线文档的文字工作者,得益于Google doc,飞书文档,语雀等文字和表格类在线工具,Chromebook简单的功能以及比较长的续航是一个性价比比较高的选择。除此之外,对于性能没有要求的开发者和数码极客或许也会考虑由于一台自己的Chromebook。

最新的Chromebook有两档标准,普通的Chromebook,以及Chromebook Plus,普通的Chromebook可能只搭载Intel Celeron处理器以及4GB的ROM, Plus也只是它性能的两到三倍。目前Chromebook在国内没有销售,通过天猫国际等平台平台购买的新机器一般也都比较贵没有性价比。对于普通用户国内平台在销售的平板电脑或者笔记本都比它有性价比的多。

而对于我所说的极客用户来说,在闲鱼淘一台洋垃圾Chromebook可能是一个比较有性价比的选择。比如我这台Lenovo Duet5,骁龙7C,8GB内存,256GB存储,13寸的OLED屏幕,搭配触控笔加键盘,支持平板模式和桌面模式,只要不到1500块钱,相比于iPad,看起来还是有点性价比的。

Chromebook选购指南

再次强调一下选择Chromebook需要保证有能够激活Google服务的网络环境。不具备的可以考虑fydeos,以及他们的Fydetab Duo设备。

在淘设备的时候,因为我们可能买到的是2019年或者更早发布的设备,我们需要关注设备的自动更新到期时间(简称AUE),所有ChromeOS设备都能够借助于Chrome浏览器几乎同步的更新节奏收到Google的定期更新。因此决定购买之前可以在Google的这个页面看一下该产品型号的AUE日期。

其次,电池健康度也是选择二手Chromebook产品时候值得关注的信息。本身购买Chromebook就是为了优秀的能耗和续航体验,电池不行这些就没办法完全达成了。购买前最好和商家沟通让对方打开「关于 ChromeOS > 诊断」界面并提供截图,可以在这个界面中清楚地看到当前设备的电池寿命、循环计数等信息。从这里可以大概预估该设备之前的运行时长,并且电池寿命高于90%应该是比较好的。我在这里就踩到了坑,因为是专门的二手商家,说了是库存设备,并且说没法激活设备不愿意提供截图导致我收到的设备实际上电池已经循环过了300多次,电池寿命只有86%,同时因为运行时间过长oled屏幕也有一点烧屏了。

最后,屏幕这块OLE屏幕可以让卖家把屏幕亮度跳到最低拍照这样也能看到一部分屏幕的缺陷,以及全白页面拍照测试等。关于型号的话,考虑到Android应用的兼容性,我选择的是ARM芯片的Duet设备,如果更加关注Linux应用的兼容性或许可以考虑X86芯片的设备。设备的型号这块,除了我提到的Duet,Google推出的Pixelbook Go, Pixelbook也是可以考虑的型号。

最后的最后,实际购买之前可以考虑使用现有设备刷如ChromeOS Flex或者fydeOS体验一下再做决定。

ChromeOS 初始化

ChromeOS本身的内核是Linux,但是为了安全,我们是没办法在上面安装Linux应用的,同时Android应用的安装也必须通过Play store才能安装,因此如果想要获得系统的完全控制权是需要开启开发者模式的。开启开发者模式后可以直接安装Android APK文件,同时也拥有了Root权限,可以在系统做修改,比如安装类似Mac下面homebrew的chromebrew工具等。但是代价是,每次启动电脑都会先跳出一个60s的警告页面(可以跳过),而在普通模式和开发者模式之间切换,所有的系统数据都会被清除,需要提前做好备份。

在我体验完开发者模式之后,决定还是回到安全模式。对于大部分人也都不需要开发者模式,我们通过Linux子系统开启Linux子系统的开发者模式,也就可以通过ADB来安装Android应用。因此如果想要开启开发者模式可以查看网上的资料。 初始化,可以通过家庭的软路由,或者手机上面开启Clash作为代理服务,在连接完网络后,修改网络中的代理服务,把手机或者软路由作为Chromebook的代理服务器,从而可以激活服务。同时要系统更新和安装Linux子系统需要稳定的翻墙服务,不然可能会失败。

ChromeOS初体验

ChromeOS内已经内置了一部分Web应用,包括了Google全家桶和一些工具应用。在未连接键盘鼠标前是平板模式,连接了之后为桌面模式。

以上为桌面模式,打开两个应用平铺,左下角为应用列表。

以上为平板模式的桌面

很多场景也可以通过浏览器进行,对于一些提供了PWA的网站,可以点击地址栏的安装按钮,这样就会生成一个桌面图标方便下次使用。也可以在Chrome应用商店安装扩展程序。

因为登录了Google账号,Chrome浏览器上安装的扩展程序,一些设置,书签等也都会同步过来。

同时ChromeOS还支持与Android手机连接,能够对手机进行简单的控制,包括手机的静音,地理位置权限开关,控制手机的热点并连接上网,查看手机最近的照片,打开的Chrome标签页等,如下图所示。

对于中文输入,Chrome内置了拼音输入法,如果使用双拼的话可以考虑使用fydeos提供的真文韵输入法,不过真文韵输入法没有软键盘,在平板模式还是没法使用,另外真文韵在Linux应用也无法使用,解决方法后面再说。

配置Linux子系统

Linux系统模式是未开启的,需要首先到「关于 ChromeOS 」中开发者部分开启,最新版本默认安装的是Debian 12,因为需要到Google的服务器上下载Linux镜像文件,这个过程可能非常慢,我这里差不多半个小时才完成。

有了Linux系统,我们首先需要安装中文环境,执行如下命令安装中文字体:

1
sudo apt install fonts-wqy-microhei fonts-wqy-zenhei fonts-noto-cjk

Linux上面是没法使用系统的输入法的,我们需要安装Linux的中文输入法,我这里就是安装的fcitx5,可以使用如下命令安装:

1
sudo apt install zenity fcitx5 fcitx5-rime

安装之后在 /etc/environment.d/ 文件中创建一个im.conf文件,并且写入如下内容:

1
2
3
4
GTK_IM_MODULE=fcitx
QT_IM_MODULE=fcitx
XMODIFIERS=@im=fcitx
SDL_IM_MODULE=fcitx

之后手动打开fcitx5,并且配置好自己的输入法选项就可以在Linux中使用应用了。

除此之外,就跟正常使用linux一样,安装的Linux应用如果是有桌面图标的也会在Chrome的应用列表中展示,同样对于deb文件,也可以直接在chrome的文件管理器中直接点击安装。

现在ChromeOS也支持了安装多个容器,也就是说可以运行多个不同的Linux,感兴趣的可以看看这位博主的这篇安装ArchLinux的文章

安装微信

微信算是每个人都必须有的通信工具了,在ChromeOS中有两种方式可以安装,一个是安装到Android子系统,直接在Google play下载就行了,另一种则是安装Linux版本的桌面微信。

但既然有这么大的屏幕,当然是桌面版使用体验更好了。我这里介绍一下在我的Debian12下面安装arm版本的微信的过程吧,因为微信的有一些依赖系统内是没有的组件需要安装。

1
sudo apt install libatomic1 -y && wget -O libwebp6.deb https://security.debian.org/pool/updates/main/libw/libwebp/libwebp6_0.6.1-2.1+deb11u2_arm64.deb && sudo dpkg -i libwebp6.deb

除了这个之外还缺少一个libtiff5,debian12上面已经有libtiff6了,我们创建一个链接就可以了。

1
sudo ln -s /usr/lib/aarch64-linux-gnu/libtiff.so.6 /usr/lib/aarch64-linux-gnu/libtiff.so.5

之后我们应该就可以使用Linux版本的微信了。

另外还推荐在Linux子系统安装stalonetray,这样就可以展示Linux的软件的托盘,比如去查看输入法状态,和切换输入选项等。可以参考这篇文章

对于Linux直接在Chrome点击deb文件安装的应用,虽然安装完了但是有可能点击图标打开的时候总是在转圈却打不开,这可能是因为程序出错了,可以在命令行中手动运行,这样错误日志就可以查看了。

配置安装非Google play的Android应用

如果想要安装国内的应用,可能很多都无法在Google play商店下载,一种方式是打开ChromeOS的开发者模式,但是那样每次开机就要忍受开机警告。我这里选择通过Linux子系统来安装。

首先打开「关于 ChromeOS -> Linux开发环境 -> 开发Android应用」,将其中的启用ADB调试打开。

点击启用的时候会有如下提示:

并且如果停用的话也会将Chromebook恢复出厂设置,所有数据被清空,使用这个功能需要谨慎。

再打开Linux命令行,执行如下命令安装adb工具。

1
sudo apt install adb

之后打开「设置 -> 应用 -> 管理Google Play 偏好设置 -> Android设置」,这样就进入Android系统的设置应用中了,可以在关于设备中多次点击版本号,开启Android子系统的开发者模式,在然后到系统,开发者选项中打开ADB调试。之后在linux命令行执行如下命令并显示正常就说明配置好了。

1
adb devices

之后就可以通过ADB安装程序了,当然也可以选择使用adb安装一个国内的应用商店,之后通过应用商店安装应用。

ChromeOS的体验介绍

使用了一段时间之后来说,作为一个轻量化的Linux 本来说,这台设备还是符合期望的。Linux,Android子系统都和宿主系统有着很好的深度绑定,使用子系统的应用也和使用宿主一样有着很好的体验。而在我这里一大缺陷为,因为Linux子系统和Android子系统都被划分到了私有网络,因此它们实际上网络是和Chromeos宿主共享的,但是和局域网的其他设备不是在同一个子网里面的,因此类似LocalSend这种工具是不能使用的。这里目前我的解决办法是使用fydeOS提供的fyDrop工具和其他局域网进行文件传输。

这个设备同时还支持通过usb typec接口连接外接显示器,chromeos有着不错的窗口管理,桌面分屏,这些功能都为使用体验加分许多。

如果只是轻办公我感觉这是一台很棒的设备,但是得益于这个性能,想要在这上面做Android开发,去编译程序那就不敢想象了。而至于要不要入坑,还是要你自己决定。

最后照例来推荐一些可以参考的资料:

  1. fydeOS源于chromeOS,这边的中文资料都可以参考:https://community.fydeos.com/t/topic/40986
  2. Chrome 官方的文档: https://chromeos.dev/en/linux
  3. 解锁开发者模式和一些折腾,可以参考这边文章和博主的其他文章: 打造一台适合生产的Chromebook

看完评论一下吧

互联网上的朋友们

2025-03-04 01:18:46

朋友们

博客导航

本站信息

标题: 码农明明桑
Url: https://isming.me
头像: https://isming.me/chrome-512.png
简介: 一心写码,无心务农

友链申请要求

交换友链可以发送邮件到[email protected] 或者在本页留言,博主看到后会及时处理。

申请友链需满足以下要求:

  • 个人独立博客,拥有独立域名
  • 建站时间一年及以上
  • 内容健康且原创文章不少于十篇
  • 申请友链前已添加本站链接

看完评论一下吧

关于我

2025-03-04 01:18:46

  • 程序员一枚,家里世代农民,工作跟农民好像也没有太大差别,自嘲为码农。
  • 原在老家安徽耕田,现在上海码字搬砖。
  • 主要从事Android软件开发,对于Python,web前端也略有了解。
  • 热爱新技术,包括但不限于软件新技术、区块链、Web3等。常年混迹于网络。
  • 好读书,阅读甚杂,只求看过,不求甚解。
  • 相机使用者,业务摄影爱好者,野生B站UP主,拍的不好,欢迎吐槽。

网上主要使用两个名字“明明同学”和“码农明明桑”,使用同学是因为各个公司内都喊别人老师,只好谦逊的自称“同学”。“码农明明桑”最早是微博id,这个名字有点模仿“妈妈桑的意思”。

关于博客

从QQ空间和网易博客起接触博客,后又自己搭建wordpress,然而数次荒废,多次博客被废,最终选择了使用hugo静态托管。 先前博客存放于github pages,由于国内无法访问,后又托管于Vercel。由此每年的费用更低,维护更加简单,也更加容易坚持下来。 博客内容主要记录我的技术踩坑,个人随感,旅行记录等。

联系我

版权声明

本站所有内容(包括文章和照片)遵循「CC BY-NC-SA 4.0(署名—非商业性使用—相同方式共享)」协议,转载请保留署名并注明来源。

你可以通过博客留言,或者公众号、邮箱与我联系。欢迎与我交流,共同进步成长!^_^

看完评论一下吧

转瞬即逝的二月月报

2025-02-28 20:50:52

不知道是因为2月比较短还是因为春节刚回来没多久,感觉二月很快就过完了。如此的快以至于这个月感觉都还没做什么就结束了,现在就来对本月做个回顾吧。

折腾

这个月对于博客的足迹功能做了一些优化,一是给去过的城市或者国家加了地图mask,对于感兴趣的可以查看我的上一篇文章了解。另外对于标记点过于密的问题,也借助chatgpt,做了优化,根据地图的放大级别来把一些点进行合并,这个后面倒是可以写文章再详细说说,另外就是地图的展示还有优化的空间。

购物

这个月购买了种草很久的ChromeBook,在闲鱼淘了个联想的Duet5,支持平板和桌面两种模式,可以安装Linux应用和Android应用,除了性能比较差之外真是程序员的理想装备。但是国内使用加上版本兼容等等,还是遇到了不少问题,对于非技术人员来说体验还是会差一点。而对于一个13寸的大平板,并且只要1000多块钱,这都不是事。到目前为止还没完全驯服,后面使用一段时间再来分享折腾的一些过程。

另外之前使用了几年的手环屏幕和手环本体开胶了,于是乎就趁着有国补,买了个小米Watch 4S,小米这款的外形和华为、OPPO的相比都不够好看,但是因为手机是小米的,之前的一些数据也是在小米的APP里面,还是决定买了小米的。因为esim款是皮质的表带,因此选了它,但是用了半个月感觉也没必要开通esim。功能方面,比之前的手环要多了不少,但是不能安装app,所以本质上还是一个大号手环,另外运动记录不能导出,所以对于非小米手机用户,我是不推荐啦。

对手表爱不释手的小朋友

因为大年初七才从老家回来,这个月也只出去了一次。带着娃去了嘉兴的南北湖风景区,徒步8公里,走了谈仙岭古道,怕了嘉兴最高峰 高阳山。因为当天后面下了小雨,南北湖也没去看。

前一段是比较原始的攀爬路段,甚至还有一些地方比较陡峭,后面回程则是车行道,以及部分谈仙岭古道。在其中的云釉古庵看到了好看的梅花。

月初带这娃去看了哪吒二,娃第一次去电影院,也是我时隔多年再次走进电影院。

哪吒

之前多次尝试带她去看电影均失败,这次因为提前给她看了哪吒第一部,剧情不错,画面她也喜欢,这就顺利把他带进影院了。而哪吒确实也是部不错的片子,再加上同期有没有别的能打的电影,干到100亿票房,确实是很厉害。

周末还带娃去看了个狮子王情景剧表演,表演不到一个小时,剧情没新意,相比于迪士尼的电影狮子王真是差远了,但现场却还是爆满的,如果不是因为在各个幼儿园推广,估计不会有这么多人。另外就是虽然剧情没啥意思,但是现场的很多小朋友看得却是津津有味。

在午休和晚上的时候,这个月把赵本山的新剧《鹊刀门传奇第二部》给看完了,这个剧仍然延续第一部的高效,无厘头,无法在春晚看到赵本山表演,在这里算是重新获得赵氏表演的满足。

文字内容,读库2501看了一部分,其中的电力往事,金谷,英语走出中世纪都还挺有趣的。其他的书籍,最近倒是没看多少,这里也就不说了。

总结

匆匆而过的二月,感觉没做什么事情就结束了,写完之后发现倒也不是什么都没做,那么就这样结束这个月吧。

看完评论一下吧

使用Leafletjs实现足迹地图功能

2025-02-09 11:40:56

我的博客上面挂着一个使用Leaflet实现的足迹地图功能,最近又给他添加了一些功能并且进行了一些美化。之前也有人问题这个怎么实现的,趁着刚折腾完来分享一下。

代码库的选择

早前一直想要做一个足迹的功能,像是国内的百度地图和阿里地图都有js的sdk,但是他们的sdk使用不简单,并且他们的地图只有国内的。后来了解过google map以及mapbox,但是都没有深入研究。后来看到博主水八口记使用了leaflet还比较简单,就使用这个库来实现了我的足迹功能。

地图图层

使用leaflet的一大好处是,你可以自由使用你想要的地图图层,对于符合Leaflet的地图瓦片地址我们是可以直接使用的,通常是类似这种格式的地址: https://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png,其中的{z}/{x}/{y}是必须要支持的,leaflet会在运行的时候替换具体的值,从而请求对应的放大级别(z,zoom), 对应坐标(x, y)的瓦片进行渲染。

一般使用cartocdn提供的openstreetmap的地图时,是可以直接使用的,但是我们如果想要使用mapbox地图或者其他地图供应商的时候,就需要借助插件了,可以在这个页面看看有没有Plugins - Leaflet - a JavaScript library for interactive maps

对于地图图层,leaflet是支持同时加载多个图层的,比如说我可以添加一层底图再添加一层天气卫星图。

我们这里先看一下如何创建一个地图并且设置我们的地图图层. 首先需要引入leaflet的css和js文件

1
2
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<!-- js引入一定要放到css的后面 --> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

之后,在我们需要显示地图的位置放一个div元素,并且设置一个id,这样我们在后面的js代码中才能控制它:

1
<div id="footprintmap"></div>

同时我们可以通过css设置这个容器的宽度高度:

1
2
3
4
#footprintmap {
width: 100%;
 height: 180px;
}

这些做完之后就可以在javascript中去创建地图对象,并且给它添加地图图层了:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">

 //地图的版权声明,使用三方地图数据出于对版权的尊重最好加一下
      var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution" target="_blank">CARTO</a>';
      var map = L.map('map', {gestureHandling: true, minZoom: 1, maxZoom: 14}).setView([33.3007613,117.2345622], 4); //创建地图,设置最大最小放大级别,setView设置地图初始化时候的中心点坐标和放大级别
      map.zoomControl.setPosition('topright'); //设置放大控制按钮的位置
      map.createPane('labels');

      map.getPane('labels').style.zIndex = 650;

      map.getPane('labels').style.pointerEvents = 'none';

      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {

    attribution: cartodbAttribution

}).addTo(map); //添加地图图层到map对象当中

</script>

添加足迹点到地图中

经过以上的步骤我们就可以在网页上展示一个地图了,而我们实现足迹功能一般会给我们去过的地点打上标记。一种方法是给去过的城市做一个蒙层,一种方式是加一些点标记。这里先看加点标记的方法。

标记在Leaflet中称为Marker, 我们可以使用以下代码添加默认的Market:

1
marker = new L.marker([33.3007613,117.2345622]).bindPopup("popup text").addTo(map);

效果如下:

在上面我们通过bindPopup来设置点击Marker之后弹出的内容,其中我们是可以设置HTML元素的,因此我们就可以显示图片或者超链接之类的内容了。

如果不喜欢这个默认的蓝色Marker,也可以替换为图片。比如我用如下的代码就设置类一个svg图片作为Market标记图:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
function colorMarker() {
  const svgTemplate = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="marker">
      <path fill-opacity=".25" d="M16 32s1.427-9.585 3.761-12.025c4.595-4.805 8.685-.99 8.685-.99s4.044 3.964-.526 8.743C25.514 30.245 16 32 16 32z"/>
      <path stroke="#fff" fill="#ff471a" d="M15.938 32S6 17.938 6 11.938C6 .125 15.938 0 15.938 0S26 .125 26 11.875C26 18.062 15.938 32 15.938 32zM16 6a4 4 0 100 8 4 4 0 000-8z"/>
    </svg>`;
  const icon = L.divIcon({
    className: "marker",
    html: svgTemplate,
    iconSize: [28, 28],
    iconAnchor: [12, 24],
    popupAnchor: [7, -16],
  });
  return icon;
}

marker = new L.marker([lat, lng], {
    icon: colorMarker(),
  }).bindPopup(popupText).addTo(map);

主要是在前面创建marker的时候传的这个icon,你也可以传普通的图片。

如果我们需要展示多个点的时候,我们可以把这些点的数据存储成一个json,并且把他作为一个JavaScript对象加载,再读取他把每个点添加到地图中。 我就创建了一个points.js的文件保存所有的点:

1
2
3
let points = [
    ["<b>北京</b><i>Beijing</i><a href='/2025-01-beijing/'><img src='https://img.isming.me/photo/IMG_20250101_133455.jpg' />北京游流水账</a>", 40.190632,116.412144],
    ["<b>广州</b><i>Guangzhou</i>", 23.1220615,113.3714803],];

内容大概如上:

1
2
<!--加载点数据这样我们在javascript环境中就可以拿到points这个数组-->
 <script type="text/javascript" src="/points.js"></script>

以上加载了点数据,通过下面的代码来读取并且添加点:

1
2
3
4
5
6
7
for (let i = 0; i < points.length; i++) {
//循环遍历所有点,并且保存到如下三个变量中
  const [popupText, lat, lng] = points[i];
  marker = new L.marker([lat, lng], {
    icon: colorMarker(),
  }).bindPopup(popupText).addTo(map);
}

到此为止就完成了足迹点功能的开发。

去过的区域图层开发

而我们要实现去过的城市标记,这个时候就不是一个一个的点了,我们可能给去过的城市添加遮罩,这个其实就是给地图上画一个新的图层。每一个城市本质上就是许多个点围成的多边形,我们可以使用Leaflet提供的polygon方法来绘制,但是我们需要给把每个城市的多边形的各个顶点找到并且组织成一个数组,工作量真的是巨大的。

这样的难题我们不是第一个遇到的,前人已经遇到并且帮我们解决了。在2015年就有了GeoJson这种用Json描述的地理空间数据交换格式,他支持描述点,线,多边形。而Leaflet对齐也有支持。因此,我们只需要找到我们所需要的城市的geojson数据的MultiPolygon或者Polygon数据,就可以在Leaflet中进行绘制了。

对于中国的数据,我们可以在阿里云的datev平台进行下载,你可以省份数据或者按照城市甚至更小的行政单位下载数据。对于国外的数据可以到github上面去查找,这里是一份国家数据: datasets/geo-countries: Country polygons as GeoJSON in a datapackage

对于我们下载的中国的geojson数据,因为比较详细,也就比较大,我们可以使用mapshaper这个工具来对数据进行一些处理,直接使用Simplify功能,使用它减少点的数量,从而减少我们的文件的大小。

按照geojson文件格式,我们对于多个城市需要组成一个类似如下的json:

1
2
3
4
5
6
{
"type": "FeatureCollection", features: [
{"type": "Feature", "geometry": {"type": "Polygon", "coordinates": [[[88.40590939643968,22.55522906690669],[88.36498482718275,22.494854169816982],[88.28898205570562,22.51497913551355],[88.2714429545955,22.55235407180718],[88.32990662496253,22.55235407180718],[88.36498482718275,22.60410398359836],[88.35913846014606,22.62997893949395],[88.38837029532957,22.62710394439444],[88.40590939643968,22.55522906690669]]]}},
...
]
}

对于这样的一个json对象,我们就可以直接使用Leaflet的geojson文件进行加载,代码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function onEachFeature(feature, layer) { // does this feature have a property named popupContent?
 if (feature.properties && feature.properties.popupContent) {
 layer.bindPopup(feature.properties.popupContent); //从json文件中读取属性进行popup展示
 }
}

var geojson = L.geoJSON(areas, {
 onEachFeature: onEachFeature,
  style: function (geoJsonFeature) {
    return {
      color: '#ffcc80', //设置遮罩的颜色
      fillOpacity: 0.4, //设置透明度
      stroke: false, //是否要显示边缘线
    };
  }
}).addTo(map);

对于geojson我们也可以在properties中设置弹框的内容进行展示。

总结

到这里我们就完成了基于leaflet的一个足迹地图,既包括足迹点,也包括去过的城市的遮罩。而geojson和Leaflet的功能远远不止这些,感兴趣的可以去看相关文档。另外因为我使用的地图是openstreetmap的数据,关于中国领土有争议的部分标记不正确,这个不在我的解决能力范围之内,只能暂且使用,但是不代表本人观点。

参考资料:

  1. Tutorials - Leaflet - a JavaScript library for interactive maps
  2. https://tomickigrzegorz.github.io/leaflet-examples/
  3. GeoJSON - 维基百科,自由的百科全书
  4. DataV.GeoAtlas地理小工具系列

看完评论一下吧

过完春节方动笔的一月月报

2025-02-05 23:01:03

月初是元旦,月尾是新年。新年第一个月,工作走上正轨,满足小朋友去北京的愿望,以下是详细内容。

工作

十二月进入新的团队,目前算是融入完成。并且答应了老板时间线,结果是我们在年前答应的时间线根本就完成不了,同时设计也跟不上,到目前为止是拖了一周又一周,希望二月结束,应用能够达到上线状态。

这个月初是元旦,月尾是农历新年,因此只有月初去北京玩了一趟,后面就期盼着春节的到来,于24号开车回了池州老家准备过年。在家里仍然继续上班也就没有去哪里玩。

关于月初北京的行程,算是把北京的各个景点都打卡了一遍,感兴趣的可以查看之前的文章

而这个月是小朋友在幼儿园的最后一个生日了,以前没有办过生日宴,这次决定给她搞个生日聚会,花了几天时间策划,买了些道具,准备了一些套圈、智力题之类的游戏,带着她和她的小伙伴们开心的玩了一天。

因为工作比较忙,书和影视内容看的都比较少。

书这块在看余晟的《正则指引》,断断续续的看,才看到第六章,基本是把正则表达式的语法了解清楚,而应用到各种语言的内容和涉及不多。这本书多年前就翻过,因为前段时间的需求涉及到正则表达式,于是就想着再看看,关于正则的各方面介绍的都不错,推荐对于正则感兴趣的读一读。

影视方面,首先是把《人生切割术》第二季的前两集看完了,因为已经过了好长时间,对于第一季的很多内容已经有点忘记了,推荐看的时候还是把第一季先补补。

爱奇艺的新剧《漂白》也刷完了,看豆瓣上面评分挺低的,这个片子还涉及到抄袭,看的过程中确实很多地方设计的不够严谨,但是剧情还可以,值得一看,但是血腥和恶心的画面挺多的,不适合小朋友在旁边的时候观看。

再有归到阳历一月份的就是《央视25年春晚》,几个分会场感觉挺有意思的,武汉的《counting star》好听,王菲的《这世界赠予我的》也好听,其他的话感觉没啥心意,很多节目给人嘎然而知的感觉。但是这也是小朋友要看,陪着她一起看到零点的晚会了,也是一场家庭共同的活动吧。

《哪吒二》在大年初一上映,在老家的我们就陪伴小朋友一起看了哪吒第一部,几个小孩对于哪吒是真的喜欢。今天就带着小朋友去了电影院把《哪吒二》给补上了,小朋友第一次去影院看电影,之前一直不愿意去电影院,去了一次感觉还不错,这是属于二月了,就放到以后再写把。

后记

这个月比较忙碌,学习和看书的时间都少了很多。关于提笔写月报,春节期间用手机写了几个字,但是因为懒惰最终也是没写完。节后开工第一天,算是匆匆写完,给自己一个交代。农历新年对于很多人来说才是新的一年,春节假期结束,重新回到工作岗位,开始新一年的征程。这就祝大家开工大吉吧。

看完评论一下吧