前端gis开发以及2D地图和3D地图开发策略

10 篇文章 15 订阅

场景:

前端很少涉及到地图展示开发(展示地图,对地图进行操作,数据可视化等),但特定公司专门做gis开发和地图开发(比如:建设公司,中铁集团等)。我之前外派到中交建,就专门做的是关于gis开发和地图方面的开发。

地图开发策略

 场景一:直接调用成熟的api(腾讯地图、高德地图、百度地图、goole地图等等)。往往这类都是很简单的地图操作,比如导航和计算路程等。总之就是只是简单的地图操作。

场景二:

个性化的地图操作,定制各种各样的效果,自由度很高

可供选择的技术:

 Leaflet、openlayers、mapbox、arcgis  --这些是2D

Leaflet无疑是发展潜力最好的,首先它够简单,其次得移动端者得天下。

Mapbox搭建的是地图大前端生态,它的功能性是最好的,应用范围也是很广泛,它在专业领域会是发展最好的,因为它能实现的很多东西,轻量的leaflet是无法实现的。

Openlayer估计使用的人会越来越少,因为它的确过于专业了,不过openlayer更偏于底层,有些东西可能只有用它才能实现。

不了解地图,要做地图前端,首选leaflet;需要做样式丰富的专题图,选mapbox;熟悉专业和规范,试一试openlayer。

本段部分参考于二维地图前端对比分析

Cesium、mapbox、three.js、goole地球(国内得不太好访问)、arcgis 、supermap --3D

具体详情 三维地图前端对比分析

场景三:商业化地图服务(涉及到商业平台产品,就不能简简单单说前端还是后端了,是一整套解决方案。)

arcgis(包含2D、3D)、supermap(包含2D、3D)  需要付费(很专业的地图服务,比如地图数据处理软件、地图服务器等)。

arcgis官网

supermap官网 supermap示例演示

场景四:

还有基于其他地图封装的库:

vue-amap等

总结:

1.如果你们的项目只是涉及导航服务、定位、街景服务等,建议直接使用成熟的地图(腾讯地图、高德地图、百度地图)。

2.如果你们的项目是2维地图,自由度很高,建议使用( Leaflet、openlayers、mapbox)。

3.如果你们的项目是3维地图,建议使用(Cesium、mapbox、three.js、goole地球)。如果是商业化的可以使用(arcgis、supermap等)。

  • 5
    点赞
  • 54
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
/* *author:XudongChen *Date:2010-03-09 *QQ:233828249 81023617(不才) *Email:xznd@163.com */ 2009-8-13 1.加载分块地图 2.添加全景标记窗体 2009-8-14 1.增加控制条 2.增加全景标记、公交车标记显示层 3.解决地图定位问题 4.增加经纬度层功能 5.未修正图标层的定位 2009-8-15 1.已修正8.14地图定位错误,还存在放大缩小时定位不准 2.存在ie内存泄漏问题 2009-8-16 1.已修正8.15 ie内存泄漏问题,chrome下可能还存在内存泄漏 2.增加图标定位功能 3.增加鼠标滚轮事件(http://yongzhi.blog.hexun.com/5057947_d.html) 4.通过jquery加载json数据文件(图标显示层数据) 2009-8-17 1.增加建筑物高亮显示(还需完成鼠标mouseover和mouseout事件) 2009-8-18 1.完成建筑物高亮显示,有点小bug 2009-8-19 1.增加记录原始缩放比例的全局变量 2.解决建筑物高亮显示bug 2009-8-20 1.增加三维全景展示功能 2.浏览建筑详细功能 2009-8-21 1.引入jqueryAlert插件,美化弹出窗体 2009-8-23 1.增加搜索功能 2.清理建筑信息显示页和公交信息页多余数据 2009-10-22 1.增加小沙盘拖动类(鹰眼视图) BirdEye.js 完成小沙盘到地图的同步,同步方法:检测mouseup事件触发->修改url->request->计算坐标->同步行为 2.增加小沙盘样式表BirdEye.css 地图图片路径birdeyemap 3.完成window.parent地图->小沙盘的同步 问题:小沙盘->window.parent地图存在bug,可以尝试开启 2009-10-23 1.在小沙盘中增加浮动绿色框 2009-11-6 1.实现“鹰眼地图”不需移动,一幅可以看到见全景, 当主场景移动时,“鹰眼地图”只有小框在移动。 同时“小框” 主场景也在移动。 2009-12-17 1.测距功能事件配置 2009-12-21 1.完成测距功能 2009-12-22 1.配置搜索功能,后台改用s2sh框架 2.完成hessian+spring+hibernate整合,提供建筑信息和公司信息hessian查找服务 2009-12-23 1.配置hessian服务端缓存 2.配置hessian日志记录,输出到文件/log/wzucxd/html 3.完成建筑信息显示页,配置2级缓存 4.配置oscache 5.配置新闻信息模块 2010-1-13 1.完成chrome和ff下的搜索功能 2.搜索功能支持ie6.0+ //设置Theodolite$setPoint var cpointtmp = new CPoint(this.holder.offsetLeft + evt.clientX - this.mvl.offsetLeft, this.mvl.offsetTop + evt.clientY - this.mvl.offsetTop); Theodolite$setPoint(cpointtmp);

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

崽崽的谷雨

漫漫前端路,摸爬滚打

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值