[请教前端技术问题] Web 端 JS 实现勾勒矢量图功能

[Cui]

现在项目中遇到一个需求

可参考：

https://www.indoorway.com/videos/map_editor.mp4

https://www.indoorway.com/videos/dashboard_animation_v2.mp4

流程为：

1. 上传一张户型图（ jpg、png 文件）
2. 勾勒出户型图的每个房间，并定义房间名称
3. 生成一个矢量的户型图
4. 可通矢量的户型图交互，定义每个房间的信息
5. 最后可通过矢量的户型图，查看房间统计信息、展示房间热力图

请教前端大神，该如何实现这个功能，有没有类似的开源插件；

或者可私信报价，完成这个插件:cuiqi#focusx.cn

[zhlssg]

感觉用 canvas 做好一点

[jinwyp]

估计要 2-3 万，这东西肯定没有开源的，有也不可能好用。

[shui14]

难点在 23，45 现在已有流行的图表库，问题是从一张图片识别户型并格勒轮廓，这就是图像处理的问题了，应该换个思路吧，图像处理没那么轻松，服务端处理好，返回前端这个矢量图，前端做交互展示数据

[qiaobeier]

搜索 image mark 有个插件前端和你需求一致，至于编辑功能，我记得 wp 有个收费插件和你的需求完全一致。这个插件开发成本主要在编辑功能，前端没啥花头，canvas 和 svg 方面有大把的插件可以用

[YangXiaoming]

类似的需求地图和 GIS 行业已经解决烂掉了，和你的唯一区别就是那边出来的结果是地图坐标，你不需要地图坐标。 http://leafletjs.com/ http://leafletjs.com/plugins.html#heatmaps http://leafletjs.com/plugins.html#edit-geometries

[YangXiaoming]

编辑矢量数据的 demo https://leaflet.github.io/Leaflet.draw/docs/examples/full.html

[YangXiaoming]

自动识别这个功能还是算了吧，有多少人工就能产出多少人工智能。就酱紫。