KCGIS平台结合 ,SVG结合解决地铁拓扑网络展现 项目需求
展现成都市地铁拓扑网络,要求要美观,性能要求高;美观方面,要求连线要平滑,地图缩放的时候没有延迟情况;要求支持10万也上的用户访问;客户端有web浏览器端,手机端等;用户点击站点可以看见站点的信息,拥挤成都等信息;地铁采用双线的方式显示,使用颜色表示该路段的拥挤程度;
【KCGIS平台结合 Leaflet,SVG结合解决地铁拓扑网络展现】思考 考虑到成都市地铁数据不大,可以通过离线下载到客户端的方式实现,这样可以解决地图大量用户访问的问题;这样就排除了使用动态地图等方案;由于用户要求的是拓扑网络,所以数据应该是逻辑的,不是实际的;这个可以参考地铁上的车站图;连线要采用B样条曲线连接;地图缩放的时候,需要重绘数据,可能会出现一个短暂的停顿情况,如下视频1所示;可以采用webgl//svg三种方式来解决,他们各自的优缺点可以在互联网上找到;我这里地铁的底图是不变的,我采用的是svg文件的方式绘制,逻辑网络在后台完成;拥堵情况采用webgl来绘制;点击站点,通过气泡的方式显示站点的信息;这个需要在gis中有对应的要素,可以采用一个透明的图片的方式来实现; 实现
后台的工作需要通过KCGIS 地图平台生成逻辑点生成拓扑网络;
从用户哪里获取到所有站点的信息,连接关系等信息;通过等工具进行数据加工;当我们用到拐点的时候需要采用B样条插值计算;箭头所示的位置是一个隐藏的点,这个点是用于计算B样条.
我们可以直接指定拓扑连接关系,录入天府广场是1号线和2号线的交叉口

文章插图
文字标注的位置,要通过用户指定的方式显示,一般分为在站点的上部,下部,左边,右边显示,如果发现有重叠,可以换一个位置显示;一般一条显示的站点,可以交叉的显示,例如前面一个在上面,后面一个就换成下面显示;
地图查询这些功能,使用来加载SVG数据和空间数据;这块需要考虑一个坐标匹配的问题,需要在后台处理好;考虑后续要对每条线路进行图层控制显示,所以每条线路为一个图层
** 前端实现
**

文章插图
var map = L.map('map', { crs: L.CRS.EPSG3857 });var myRenderer = L.svg({ padding: 0.5 });var bounds = [[0, 0], [14.94, 20.00]];function distance(x1, y1, x2, y2) {var calX =Math.abs(x2 - x1);var calY =Math.abs(y2 - y1);var d = Math.sqrt( calX * calX + calY * calY );return d;}function querySub(e){var text = "";var d = 100;var name = "";var x = e.latlng.lng;var y = e.latlng.lat;for(var i=0;i
实现效果
效果地址:
:8000//web/.html
:8000//web/index.html

• 淄博高新区中小学招生咨询电话+地址 淄博市高新区中小学招生平台
• 浙里快处绍兴交通事故线上处理平台2023
• 中西结合治疗前列腺痛是否有效
• 云资源PAAS平台如何高效管理硬件设备？
• 腾讯开放平台成立时间 腾讯开放平台推出时间
• 江苏社会救助省内通办线上申请平台+流程
• 基于Java+Vue+uniapp微信小程序绘画学习平台设计和实现
• 陕西高龄补贴复审年检移动平台 陕西高龄补贴最新年检时间安排
• 南京健康证办理预约平台 南京健康证小程序办理图文流程
• 抖音广告投放平台教程 抖音广告投放推广平台