Skip to content

基于百度地图的高速公路应急资源调配系统设计与实现。 相关技术:Vue、Baidu Map JavaScript v2.0、优化算法、路径规划、Web前端。

Notifications You must be signed in to change notification settings

huidt/RouteDecision

Repository files navigation

1. 开始

    npm install
    npm start
    npm run build
    点击左上角大字刷新缓存

2. 界面

线上地址:HuiDT_GP

3. 地图基操

支持异步加载,在引用脚本的时候添加 callback 参数,当脚本加载完成后 callback 函数会被立刻调用。

<script type="text/javascript">
  function initialize() {
    var mp = new BMap.Map("map")
    mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11)
  }

  function loadScript() {
    var script = document.createElement("script")
    script.src =
      "http://api.map.baidu.com/api?v=2.0&ak=***AK***&callback=initialize"
    document.body.appendChild(script)
  }

  window.onload = loadScript
</script>

在 vue 项目中引入有几种方式,其中一种是在 index.html 中先用 script 标签引入,然后在 vue.config.js 文件中配置如下:

module.exports = {
  configureWebpack: {
    externals: {
      BaiduMap: "BMap",
    },
  },
}

在组件中 import 即可使用。

3.1. 自定义 Icon

let myIcon = new BMap.Icon(
  "https://ythdong.gitee.io/blog_image/Vue/warehouse.png",
  new BMap.Size(25, 25),
  {}
)
let point = new BMap.Point(`经纬度`)

let marker = new BMap.Marker(point, { icon: myIcon })
this.map.addOverlay(marker)

3.2. 图区功能

3.2.1. 地图标点

https://lbsyun.baidu.com/index.php?title=uri/api/web

注意经纬度反过来

例子:http://api.map.baidu.com/marker?location=30.90896,118.71949&title=肥宣&content=图书馆&output=html&src=webapp.huidt.RouteDecision

参数名称 参数说明 是否必选 备注
location lat<纬度>,lng<经度> 必选 经纬度反过来
title 标注点显示标题 必选 string
content 标注点显示内容 必选 string
output 表示输出类型 必选 指定 html 即可
coord_type 坐标类型,可选参数。 可选 默认为 bd09 经纬度坐标。
zoom 展现地图的级别,默认为视觉最优级别。 可选
src 调用来源,规则:webapp.huidt.RouteDecision 必选 必选但意义不大

3.2.2. 地址解析

通过地址解析

例子:http://api.map.baidu.com/geocoder?address=北京市海淀区上地信息路9号奎科科技大厦&output=html&src=webapp.baidu.openAPIdemo

参数名称 参数说明 是否必选 备注
address 地址名称 必选
output 表示输出类型 必选 手机客户端忽略此参数
coord_type 坐标类型,可选参数。 可选 默认为 bd09 经纬度坐标。
zoom 展现地图的级别,默认为视觉最优级别。 可选
src 调用来源,规则:webapp.companyName.appName。 必选 此参数不传值,不保证服务。

3.2.3. 反向地址解析

通过经纬度解析

例子:http://api.map.baidu.com/geocoder?location=39.990912172420714,116.32715863448607&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo

| 参数名称 | 参数说明 | 是否必选 | 备注 | | :--------: | :----------------------------------: | :------: | :--------------------: | --- | | location | lat<纬度>,lng<经度> | 必选 | | | output | 表示输出类型 | 必选 | 手机客户端忽略此参数 | | coord_type | 坐标类型 | 可选 | 默认为 bd09 经纬度坐标 | | zoom | 展现地图的级别,默认为视觉最优级别。 | 可选 | | | src | | 调用来源 | 必选 | |

3.3. 检索功能

3.3.1. POI 检索

周边检索

3.3.2. 公交、地铁线路查询

例子:http://api.map.baidu.com/line?region=北京&name=518&output=html&src=webapp.baidu.openAPIdemo

3.3.3. 路线规划

例子:http://api.map.baidu.com/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving&region=西安&output=html&src=webapp.baidu.openAPIdemo

//调起百度 PC 或 Web 地图,展示"西安市"从(lat:34.264642646862,lng:108.95108518068 )"我家"到"大雁塔"的驾车路线。

3.4. 信息提示

3.4.1. POI 详情页提示

http://api.map.baidu.com/place/detail?uid=2fd2beabe34a80517adbd220&output=html&src=webapp.baidu.openAPIdemo

3.4.2. 全景服务

需要 flash

http://api.map.baidu.com/pano/?x=120.320032&y=31.589666&lc=0&ak=***AKAKAKAK***&src=webapp.baidu.openAPIdemo

3.5. MapVGL

一款基于 WebGL 的地理信息可视化库,酷炫的效果,装逼用

https://lbsyun.baidu.com/solutions/mapvdata

3.6. Web 服务 API

https://lbsyun.baidu.com/index.php?title=webapi

货车路径规划: http://lbsyun.baidu.com/index.php?title=webapi/direction-api-truck

3.7. 杂

开启滚动缩放:map.enableScrollWheelZoom(true);

非百度坐标转换为百度坐标

添加控件,初始化控件时可提供一个可选参数,可以是一个配置器(对象)。

let config_map = {
  offset: new BMap.Size(150, 5),
  anchor: "BMAP_ANCHOR_TOP_LEFT",
}
map.addControl(new BMap.MapTypeControl(config_map))
map.addControl(new BMap.ScaleControl(config_map))

个性化样式

点击的经纬度:https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference.html#a7b27

地图、覆盖物拖拽: https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference.html#a3b2

4. 结合 PSO 算法

4.1. PSO 简介

已知事故点坐标、仓库坐标、最短直线距离(行车距离可得)

进一步考虑仓库物资存储量和事故点需求量,则需要结合 PSO 算法,进行优化选择。

5. 仓储站信息

name addr posi res
淮北仓储站 淮北市烈山区京台高速与东外环路交叉路口东侧 116.905052,33.885118 39
淮北仓储站 安徽省淮北市濉溪县 116.498819,33.70784 666
亳州东仓储站 安徽省亳州市谯城区 115.864808,33.900788 63
涡阳东仓储站 安徽省亳州市涡阳县 116.365201,33.407492 760
宿州仓储站 安徽省宿州市埇桥区宿州收费站(外环南路西) 116.952821,33.617648 600
宿州东仓储站 安徽省宿州市埇桥区东收费站(宿州大道东) 117.317909,33.695588 657
界首仓储站 安徽省阜阳市界首市 115.388228,33.291389 103
阜阳南仓储站 安徽省阜阳市颍州区 G105(京珠线) 115.93091,32.797736 640
淮南东仓储站 安徽省淮南市大通区东收费站(蚌淮高速公路西) 117.142974,32.619409 662
安丰仓储站 安徽省淮南市寿县瓦埠湖 116.758518,32.185505 14
郑蒲港仓储站 安徽省马鞍山市和县 118.323991,31.627163 473
当涂仓储站 马鞍山市当涂县宁芜高速 118.540563,31.560207 110
林头仓储站 安徽省马鞍山市含山县 117.949576,31.563246 760
双墩仓储站 安徽省合肥市长丰县 117.254063,32.028204 435
肥东仓储站 安徽省合肥市肥东县 G3(京台高速) 117.503966,31.877101 438
蜀山仓储站 合肥市蜀山区铁笛路(合肥汽车客运西站东北侧约 150 米) 117.147201,31.860089 227
金寨仓储站 安徽省六安市金寨县金寨收费站(红军大道东) 115.967995,31.718272 205
霍山仓储站 安徽省六安市霍山县迎宾大道 116.408212,31.411355 60
长集仓储站 六安市霍邱县济广高速 116.162172,32.043771 77
芜湖仓储站 安徽省芜湖市鸠江区 G5011(芜合高速) 118.420576,31.37261 514
铜陵南仓储站 安徽省铜陵市郊区大通镇京台高速公路(铜陵收费站) 117.767096,30.842575 521
横埠仓储站 安徽省铜陵市枞阳县 117.503067,30.917307 266
宿松仓储站 安徽省安庆市宿松县 G50(高界高速) 116.120222,30.1842 303
怀宁仓储站 安徽省安庆市怀宁县金拱镇沪渝高速公路(怀宁收费站) 116.880513,30.796487 417
宣城北高速仓储站 昭亭北路与 S32 宣铜高速出口交叉口北 200 米 118.746693,31.004389 329
广德东仓储站 安徽省宣城市广德市东收费站(太极大道南) 119.515377,30.905072 212
黄山仓储站 安徽省黄山市休宁县黄山收费站(京台高速公路) 118.311341,29.440926 261
谭家桥仓储站 安徽省黄山市黄山区谭家桥收费站(205 国道西) 118.271427,30.170961 463
三阳仓储站 安徽省黄山市歙县三阳收费站(杭徽高速公路北) 118.825166,30.04006 154

6. git 快捷键

git st      status
git co      checkout
git ci      commit
git br      branch
git last    log -1
git lg      log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

About

基于百度地图的高速公路应急资源调配系统设计与实现。 相关技术:Vue、Baidu Map JavaScript v2.0、优化算法、路径规划、Web前端。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published