V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
fuzhenn
V2EX  ›  分享创造

我开发的开源 JS 地图引擎 maptalks.js, 请大家不吝赐教!

  fuzhenn · 2017-10-12 22:26:36 +08:00 · 29854 次点击
这是一个创建于 2578 天前的主题,其中的信息可能已经有所发展或是发生改变。

嗨! 今天总算把 maptalks 的示例与文档整理得七七八八, 打算正式发布了.

算一算, 从写下 maptalks 的第一行代码到现在, 已经在这个开源库上花了 4 年时间.

我是个自由职业者, 4 年前因为接了个地图外包项目, 因缘际会开始自己造轮子写引擎, 没想到一写就是 4 年 : P

项目地址是:

https://github.com/maptalks/maptalks.js

项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发:

  • 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角
  • 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等
  • 很认真的优化了绘制性能
  • 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了

以下是一段 maptalks 的 HELLO WORLD:

const map = new maptalks.Map('map', {
    center: [0, 0],
    zoom: 3,
    attribution: {
      content: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors'
    },
    baseLayer: new maptalks.TileLayer('base', {
      'urlTemplate' : 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      'subdomains'  : ['a','b','c']
    })
});

我的目标是把它做成世界上最好的开源地图引擎产品 : ), 目前主要竞争对手有leafletjsopenlayers.

回想开发 maptalks 的过程还是挺唏嘘的, 掉进过一个又一个坑, 不得不一次又一次的重写重构, 总算熬到了现在. 即将发布, 丑媳妇要见公婆, 心情很忐忑 : P

都说 V2EX 是个做第一次分享的好地方, 看官们都很友善, 所以首先发在这里, 请大家提提意见, 不吝赐教.

另外, 既然是开源软件, 如果有同学感兴趣, 想参与开发的, 请随时联系我(fuzhen at maptalks.org)

最后按惯例求个 STAR~

78 条回复    2018-06-26 13:23:34 +08:00
lyog
    1
lyog  
   2017-10-12 22:35:10 +08:00 via Android   ❤️ 1
👍厉害,已 star
lyog
    2
lyog  
   2017-10-12 22:42:14 +08:00 via Android
不过我觉得楼主缺一个美工😂,还有,百度底图挂掉了
megachweng
    3
megachweng  
   2017-10-12 22:45:27 +08:00 via iPhone
感谢分享
fuzhenn
    4
fuzhenn  
OP
   2017-10-12 22:49:07 +08:00
@lyog maptalks.org 是 https 的, 百度的底图文件不支持 https.. 所以...

确实木有美工, 求介绍 : (
fo2w
    5
fo2w  
   2017-10-12 22:55:29 +08:00   ❤️ 1
好想把 lz 吸收进团队, 就是不知道有没有结束自由工作的想法...
AlwaysBee
    6
AlwaysBee  
   2017-10-12 23:08:59 +08:00
太厉害了
tvallday
    7
tvallday  
   2017-10-12 23:26:18 +08:00
4 年这么长时间?怎么熬过来的?地图引擎需要很多算法优化的,如果真能实际应用那是相当厉害。楼主有没有对比过 Mapbox ?这个公司很多高手。
fuzhenn
    8
fuzhenn  
OP
   2017-10-12 23:37:40 +08:00   ❤️ 1
@tvallday 是的! mapbox 很多大神, 它目前是开源 GIS 领域里冉冉升起的新星, 这样的大腿不得不抱, 所以我在 maptalks 里采用了不少 mapbox 的样式标准和数据规范(可以在 maptalks.js 的 github 里搜索 mapbox)

我给 maptalks 主要定位于政府 /企业项目开发, mapbox 更偏服务(类似谷歌地图, 百度地图), 所以两者在定位上是互补的, 我也专门开发了 mapbox-gl-js 插件用来调用他们的服务( https://github.com/maptalks/maptalks.mapboxgl).
jjplay
    9
jjplay  
   2017-10-13 00:02:13 +08:00
很棒,会火!
ashong
    10
ashong  
   2017-10-13 01:05:21 +08:00
确实不错, 顶上去
ashong
    11
ashong  
   2017-10-13 01:14:09 +08:00
没看到用的什么数据, 如何自定义数据?
ashong
    12
ashong  
   2017-10-13 01:16:21 +08:00
不好意思, 看到了用的是 carto
stzz
    13
stzz  
   2017-10-13 09:03:26 +08:00
自由工作,很强
sliwey
    14
sliwey  
   2017-10-13 09:19:59 +08:00
膜拜大佬!已 star~
Rico
    15
Rico  
   2017-10-13 09:38:18 +08:00
必须赞!作为 GISer 的我觉得楼主功力深厚,能实现媲美 OpenLayers3 和 ArcGIS For Javascript API 的库,厉害!
Rico
    16
Rico  
   2017-10-13 09:51:20 +08:00
简单看了一下,好像矢量切片没有?另外有个想法,如果做个 MapTalk 的 React 组件库会降低使用门槛,有更多的人使用。愿意一起搞,如果楼主也有这个想法可以联系我。另外楼主不是科班 GIS 能做出这个真心厉害!
sobigfish
    17
sobigfish  
   2017-10-13 09:57:17 +08:00
厉害,(外行)要做个本地数据 室内地图(+路径导航?)的话 请问需要哪些 API 可以完成
谢谢
fuzhenn
    18
fuzhenn  
OP
   2017-10-13 10:23:12 +08:00
@Rico 哈哈, 来一起玩, 发个邮件给我吧(邮箱见正文最后). 你有啥想法都可以噢, 我会给你发 pull request~
对了, 矢量切片的库正在开发, 开发好了会做成个插件开源出来.
fuzhenn
    19
fuzhenn  
OP
   2017-10-13 10:27:31 +08:00   ❤️ 2
@sobigfish 这个问题比较复杂, 哈哈, 涉及到前端地图渲染, 数据处理和导航算法
maptalks 只是前端地图渲染, 没有路径导航功能, 渲染室内地图是可以的, 晚点我去 examples 里增加一个室内地图的例子 po 回来.

不知道你的项目是 pc 端还是移动端的, 路径导航可以看看这个库:
https://github.com/anvaka/ngraph.path
前几天刚在 twitter 上看到的, 蛮惊艳的
droiz
    20
droiz  
   2017-10-13 10:44:48 +08:00
滋瓷!!!
Phariel
    21
Phariel  
   2017-10-13 10:55:54 +08:00
吼啊!滋瓷!已 Star !
Rico
    22
Rico  
   2017-10-13 11:34:58 +08:00   ❤️ 1
@fuzhenn OK !
@sobigfish 如果是 OL3 可以 配合 AStar 算法或 Dijkstra 算出路径加上静态图片加载就可以实现了 http://openlayers.org/en/latest/examples/static-image.html。
songjiaxin2008
    23
songjiaxin2008  
   2017-10-13 11:44:30 +08:00
牛逼
gooin
    24
gooin  
   2017-10-13 11:59:47 +08:00
支持支持,已 star
ctsed
    25
ctsed  
   2017-10-13 12:29:20 +08:00 via Android
dalao 支持热力图吗
xcold
    26
xcold  
   2017-10-13 12:59:38 +08:00
已支持~
puppychen
    27
puppychen  
   2017-10-13 13:05:10 +08:00
giser 表示支持,已 star。
fuzhenn
    28
fuzhenn  
OP
   2017-10-13 13:29:21 +08:00
感谢楼上各位大佬!


@ctsed 滋瓷的, 还有其他一些插件: https://maptalks.org/plugins.html
lblt102
    29
lblt102  
   2017-10-13 14:03:33 +08:00
支持一下
xwhxbg
    30
xwhxbg  
   2017-10-13 14:38:28 +08:00
nice,支持一波
wangxiaoer
    31
wangxiaoer  
   2017-10-13 14:49:48 +08:00 via Android
最大的竟争对手是 leaflet open layers ? 你把 Mapbox 置于何地
fuzhenn
    32
fuzhenn  
OP
   2017-10-13 15:12:55 +08:00
@wangxiaoer 不敢和大佬(mapbox)竞争, 哈哈.
maptalks 的定位和 mapbox 差异还是蛮大的, 基本上用 mapbox 的不会考虑别的库. 但很多项目也不会考虑用 mapbox
zado
    33
zado  
   2017-10-13 16:33:24 +08:00
太好了,有中文文档,这个我必须要支持!
ggbond1989
    34
ggbond1989  
   2017-10-13 18:00:41 +08:00
官网全英文的,很国际化啊,支持~
xieguanglei
    35
xieguanglei  
   2017-10-13 18:16:44 +08:00   ❤️ 1
厉害了,大佬!

冒昧地问下,有考虑结束自由职业生涯吗?如果有的话,有考虑来阿里吗?如果有考虑的话,能否跟我联系呢(因为没有找到你的邮箱,貌似 V2 没法发私信)?

我的邮箱是 xieguanglei#hotmail.com 。如果无意的话,请无视我吧!冒昧了!
fuzhenn
    36
fuzhenn  
OP
   2017-10-13 18:33:41 +08:00   ❤️ 1
@xieguanglei 谢谢谢谢, 我的邮箱是 fuzhen#maptalks.org, 不过我已经散漫惯了, 暂时没有计划结束自由职业的生活 : P
weloveayaka
    37
weloveayaka  
   2017-10-13 19:41:45 +08:00   ❤️ 2
有没有 donate 渠道?
imn1
    38
imn1  
   2017-10-13 20:35:10 +08:00
五体投地
dyxang
    39
dyxang  
   2017-10-13 20:54:30 +08:00 via Android
有没有 demo ?
fuzhenn
    40
fuzhenn  
OP
   2017-10-13 21:50:38 +08:00
cisisustring
    41
cisisustring  
   2017-10-13 22:24:36 +08:00 via Android
太牛了,点赞
df4VW
    42
df4VW  
   2017-10-13 23:30:52 +08:00
@xieguanglei 难得有会说话的阿里 hr..
xieguanglei
    43
xieguanglei  
   2017-10-14 06:51:48 +08:00
@df4VW 然而不是 HR。。。
rswl
    44
rswl  
   2017-10-14 17:28:30 +08:00
太强了 速度也快
dd0754
    45
dd0754  
   2017-10-14 23:00:26 +08:00
膜拜大佬...
fuzhenn
    46
fuzhenn  
OP
   2017-10-16 00:51:43 +08:00   ❤️ 1
@sobigfish 做了个足球场的例子, 室内地图做起来大致同理, 供参考~

https://maptalks.org/examples/cn/tilelayer-projection/identity/#tilelayer-projection_identity
HelloAmadeus
    47
HelloAmadeus  
   2017-10-17 11:32:04 +08:00
太厉害了,star 关注一下
SparkWong
    48
SparkWong  
   2017-10-18 14:15:36 +08:00
来给 zhen 神捧个场~
fuzhenn
    49
fuzhenn  
OP
   2017-10-18 23:50:55 +08:00
哈哈, 因为这篇贴, maptalks 被顶到了 github trending 总榜, 特地回来感谢一下 V2EX 的同学们!
spring5413
    50
spring5413  
   2017-10-20 19:03:21 +08:00
好厉害 已 star
fuzhenn
    51
fuzhenn  
OP
   2017-10-20 23:14:06 +08:00
1847bell
    52
1847bell  
   2017-10-24 10:31:17 +08:00
非常喜欢!已 Star
wucancc
    53
wucancc  
   2017-10-24 13:56:33 +08:00
已 star,非常厉害。
作为 GIS 从业者只能膜拜了。
不过开源项目,怎么才能让政府把经费支出呢,不支出怎么才能申请更多经费呢,哈哈哈,开个玩笑。
还没有细致研究,不知道地图样式这里是怎么处理的。
请问后台数据服务楼主用的是什么呢?除了 GeoServer,楼主有没有推荐呢。
赞楼主!楼主可以组建战队搞个大新闻了,哈哈。
fuermosi777
    54
fuermosi777  
   2017-10-25 06:23:02 +08:00
人才
a6377508
    55
a6377508  
   2017-10-25 13:00:40 +08:00
膜拜
fuzhenn
    56
fuzhenn  
OP
   2017-10-26 22:39:36 +08:00
@1847bell @fuermosi777 @a6377508 谢谢!

@wucancc 感谢同行! 对于经费, maptalks 不会用来盈利的, 哈哈, 只是希望获得更多同行的认可. 关于后台数据服务, 我们用的是自己开发的服务软件, 类似 geoserver, 但会追踪一些比较新的技术, 比如矢量瓦片等等.
wucancc
    57
wucancc  
   2017-10-27 09:24:11 +08:00
@fuzhenn “自己开发的服务软件”,OMG,看来是要搞个大新闻啊。赞!
作为 GIS 小作坊,目前的巨量数据用 GeoServer 有点无法满足需求了,用主流商业公司产品又太贵。在苦苦寻找中。
期待楼主大作!
fuzhenn
    58
fuzhenn  
OP
   2017-10-28 21:17:42 +08:00
哈哈, 谢谢 @wucancc 的鼓励
dangyuluo
    59
dangyuluo  
   2017-10-29 11:29:59 +08:00
非常欣赏,无论是作品还是这种生活。
fiht
    60
fiht  
   2017-10-29 17:42:09 +08:00
给楼主赞一个,示例十分详细👍
NullPoint
    61
NullPoint  
   2017-11-02 09:24:37 +08:00 via Android
给楼主赞一个
fuzhenn
    62
fuzhenn  
OP
   2017-11-03 19:34:35 +08:00
aleung
    63
aleung  
   2017-11-18 11:22:11 +08:00
不错的项目!

这两天尝试将一个原来用 leaflet 的工具移植到 maptalks,发现文档上还是有些不够理想的地方:
* API document 的描述不够详细,特别是 options 的 type 只是 Object,不知道里面可以放什么,允许取值是什么
* Class 的方法、属性列表没有排序,找起来很费劲

Example 比较丰富,一定程度对 API 文档是补充,文档没有描述的就靠样例来猜了。

大部分 API 组织形式跟 leaflet 很类似,但又都有一点不一样,改起来好费劲啊,想放弃了。(当然这不算 maptalks 缺点)
bbsfoo
    64
bbsfoo  
   2017-11-23 01:08:10 +08:00
能不能加载百度地图?
fuzhenn
    65
fuzhenn  
OP
   2017-11-24 00:58:54 +08:00
fuzhenn
    66
fuzhenn  
OP
   2017-11-24 01:05:02 +08:00
@aleung 谢谢建议!
Class 的方法和属性是按照在源代码中的定义顺序组织的, 我再收集一下其他用户的意见,如果大家都觉得按字母排序更好,我就改成按首字母来排序。

关于构造函数的 options 里的设置和取值范围,文档中其实是有的,但定义在了累的 options 成员属性上的,比如[Map.#options]( https://maptalks.org/maptalks.js/api/0.x/Map.html#options), 不过你说的确实有道理,还是挪到构造函数的参数列表里更直观一些,我晚点会改一下。

以后欢迎在新项目里使用 maptalks,随时来提 ISSUE 和 PR,参与 maptalks 的开发 ^___^
bbsfoo
    67
bbsfoo  
   2017-11-24 02:43:54 +08:00
@fuzhenn 哇,真是厉害。近来可能会在工作中试用一下,谢谢你提供的工具。
fuzhenn
    68
fuzhenn  
OP
   2017-11-24 12:50:24 +08:00
@bbsfoo 哈哈, 欢迎使用,有啥问题随时来提 issue 哈
https://github.com/maptalks/maptalks.js/
openlayers3
    69
openlayers3  
   2018-01-18 13:07:32 +08:00
@fuzhenn 支持 WMTS 吗?
fuzhenn
    70
fuzhenn  
OP
   2018-01-21 10:14:22 +08:00
@openlayers3 暂时不支持,但未来计划增加,具体请见这个链接:
https://github.com/maptalks/maptalks.js/issues/599
wzw
    71
wzw  
   2018-04-08 12:05:24 +08:00
想知道 能不能 弄一个 wgs84 坐标的地图呀
lewhonly
    72
lewhonly  
   2018-04-11 11:03:54 +08:00
大神,你好,能不能请教个问题,threejs 加载法国的三维建筑模型,我看您也是一个 mesh 一个 mesh 的加载的,为什么 FPS 这么高,能达到 60,我用 geometry.merge 方法才只能达到 40,求大神指导
fuzhenn
    73
fuzhenn  
OP
   2018-04-20 20:57:42 +08:00
@wzw 如果你是指基于 wgs84 坐标的 4326 投影地图,示例在这里:
http://maptalks.org/examples/cn/tilelayer-projection/epsg4326/#tilelayer-projection_epsg4326
fuzhenn
    74
fuzhenn  
OP
   2018-04-20 21:01:08 +08:00
@lewhonly 你是说 maptalks 的[three 插件]( https://github.com/maptalks/maptalks.three)吗?还是[biglayer 插件]( https://github.com/maptalks/maptalks.biglayer)? biglayer 是基于 webgl 原生写的,在性能上是做了一些优化。

至于为啥你自己的 three 程序速度会比较慢,你可以用 chrome 的 profile 工具,看看性能瓶颈在哪里
fuzhenn
    75
fuzhenn  
OP
   2018-04-20 21:03:44 +08:00
呃,刚想起来 V2EX 不支持 md,上面提到的两个 maptalks 插件地址如下:
https://github.com/maptalks/maptalks.three
https://github.com/maptalks/maptalks.biglayer
cuipeng
    76
cuipeng  
   2018-05-30 11:39:25 +08:00
可以作为 leaflet 的一款渐进式 3d 地图框架来用~
cuipeng
    77
cuipeng  
   2018-05-30 11:49:53 +08:00
一个优化点,地图倾斜的时候 viewport 不会自动延展,而是基于原来屏幕的区域,边缘会虚化处理。最好跟 mapbox gl 一样,效果比较好
fuzhenn
    78
fuzhenn  
OP
   2018-06-26 13:23:34 +08:00
@cuipeng
感谢你的回复!
边缘虚化范围是可以配置的,maptalks 中可以通过 maxVisualPitch 来调整虚化的角度,把它设成和 maxPitch 一样时,就和 mapbox-gl-js 一样的了。

默认情况下 maxVisualPitch 是 60,maxPitch 是 80,主要是因为 maptalks 的最大倾斜角度比 mapbox-gl-js 更大(目前最大到 60 度),角度很大时会有瓦片载入量过大的问题,为了优化性能,maptalks 有个很独特的 cascadeTile 优化功能,就是远处的瓦片改用上一级的,可以在保证视觉效果的前提下,有效减少瓦片数量(能够减少 50%)
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1372 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 30ms · UTC 17:34 · PVG 01:34 · LAX 10:34 · JFK 13:34
Developed with CodeLauncher
♥ Do have faith in what you're doing.