地图开发技术报告

文章目录

地图开发技术报告
- 需求描述
- 目前了解信息
- 技术筹备方案——百度地图api
- - 基本介绍
  - 主要功能
  - 基础demo
  - - 1. 地图展示
    - 2. 站点路线显示
  - 技术评价
- 结论
- 结论

需求描述

本次需要的软件需要对地图上公交路线站点，以及地铁线路进行展示，更改，重新放置自定义的公交站点，这些应该是需要根据获得的数据进行调整的，希望能够验证方法的通用性，同时能够动态展示变化过程，以此展示工作成果和工作量，预计需要使用到地图开发，自己从头撰写的方案不太可行，因为计算的算法是python，为便于后台计算与程序对接，考虑使用网页展示，后台接口利用python进行开发，可以使用本地的方法进行，不需要服务器进行。

结束回顾：基本需求并未变化，增加部分的地图视角展示以及动态路书，同时对echarts的自定义配置，设计方案可行，但是仍旧未解决组件使用问题，同时希望拓展下载为excel方法。

目前了解信息

该项目是针对公交站点的变化，但是其中的数据并未有太多的了解，包括公交车发车间次，站点路线限制显示等等，动态地球追踪输入地点等。可能设计技术有地图开发，爬虫，动态变化等等。

结束回顾：针对了解信息可以了解大致想要展示的效果来构造，或者已有数据进行模拟，但是需要控制特征，如果纯粹随机效果并不明显。可能错过好的展示方法。

技术筹备方案——百度地图api

基本介绍

百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口，可帮助在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。

JavaScript API GL使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图。 GL版本接口基本向下兼容，迁移成本低。目前v1.0版本支持了基本的3D地图展示、基本地图控件和覆盖物。

主要功能

基础demo

1. 地图展示

直接使用html进行展示。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>地图展示</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><style>body,html,#container {overflow: hidden;width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}.info {z-index: 999;width: auto;min-width: 22rem;padding: .75rem 1.25rem;margin-left: 1.25rem;position: fixed;top: 1rem;background-color: #fff;border-radius: .25rem;font-size: 14px;color: #666;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);}</style><script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的AC码"></script>
</head>
<body><div class = "info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div><div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>

2. 站点路线显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的AC码"></script><script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script><title>公交/地铁线路查询</title><style>body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#container{height:100%;width:100%;}#r-result {position: fixed;top: 10px;right: 10px;z-index: 99;width: 250px;height: 450px;overflow-y: auto;background: #fff;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);border-radius: 7px;}</style>
</head>
<body><div id='container'></div><div id='r-result'></div><script>var map = new BMapGL.Map("container");            // 创建Map实例map.centerAndZoom(new BMapGL.Point(106.577412,29.49464), 12);var busline = new BMapGL.BusLineSearch(map,{renderOptions:{map:map,panel:"r-result"},onGetBusListComplete: function(result){if(result) {var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上busline.getBusLine(fstLine);}}});function busSearch(){var busName = 475;busline.getBusList(busName);}setTimeout(function(){busSearch();},1500);</script>
</body>
</html>

tips:注意百度地图里面直接复制需要在AC码的src网址地方添加http://这样一个开头

技术评价

百度api提供了充分的文档以及其基础示例，可以方便的学习和进行使用，同时提供了类参考的页面，但是其部分的GL部分的拓展的文档讲解做的不好，虽然可以使用，但是自定义的难度较高。是本项目的一个理想技术，可以进行使用，同时由于提供了基础的示例下载，可以直接让本项目使用html开发，直接引用非常方便。

但是由于其基本是网络调用，所以对于没有网络的地方无法使用，需要考虑其他方案，同时其针对坐标点进行了混淆纠错，有时候需要调整。

结论

可以使用百度地图api完成本次项目的开发，基本能够使用入门案例完成本次开发，只有少量地方需要自定义。

可以直接让本项目使用html开发，直接引用非常方便。

但是由于其基本是网络调用，所以对于没有网络的地方无法使用，需要考虑其他方案，同时其针对坐标点进行了混淆纠错，有时候需要调整。

结论

可以使用百度地图api完成本次项目的开发，基本能够使用入门案例完成本次开发，只有少量地方需要自定义。