地图_地图api - CSDN
精华内容
参与话题
  • 中国高清地图

    2020-07-30 23:31:51
    中国高清地图,可供放大,高清查看地图,下载即可查看
  • 全国分乡镇地图

    热门讨论 2020-07-30 23:30:32
    全国各省的分乡镇地图,详细得让你不敢相信。
  • html网页生成动态地图

    千次阅读 2018-08-17 11:33:57
    主要从... 例如:<script type="text/javascript">  //创建和初始化地图函数:  function initMap() {  createMap(); //创建地图  setMapEvent(...

    主要从http://api.map.baidu.com/lbsapi/creatmap/index.html中获取代码而得:

    例如:<script type="text/javascript">

        //创建和初始化地图函数:

        function initMap() {

            createMap(); //创建地图

            setMapEvent(); //设置地图事件

            addMapControl(); //向地图添加控件

            addMarker(); //向地图中添加marker

        }

     

        //创建地图函数:

        function createMap() {

            var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图

            var point = new BMap.Point(106.54904, 29.60076); //定义一个中心点坐标

            map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中

            window.map = map; //将map变量存储在全局

        }

        //地图事件设置函数:

        function setMapEvent() {

            map.enableDragging(); //启用地图拖拽事件,默认启用(可不写)

            map.enableScrollWheelZoom(); //启用地图滚轮放大缩小

            map.enableDoubleClickZoom(); //启用鼠标双击放大,默认启用(可不写)

            map.enableKeyboard(); //启用键盘上下左右键移动地图

        }

        //地图控件添加函数:

        function addMapControl() {

            //向地图中添加缩放控件

            var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });

            map.addControl(ctrl_nav);

            //向地图中添加缩略图控件

            var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });

            map.addControl(ctrl_ove);

            //向地图中添加比例尺控件

            var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });

            map.addControl(ctrl_sca);

        }

        //标注点数组

        var markerArr = [{ title: "公司名称", content: "公司地址", point: "106.549449|29.600407", isOpen: 0, icon: { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5} }

     ];    

        //创建marker

        function addMarker() {

            for (var i = 0; i < markerArr.length; i++) {

                var json = markerArr[i];

                var p0 = json.point.split("|")[0];

                var p1 = json.point.split("|")[1];

                var point = new BMap.Point(p0, p1);

                var iconImg = createIcon(json.icon);

                var marker = new BMap.Marker(point, { icon: iconImg });

                var iw = createInfoWindow(i);

                var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });

                marker.setLabel(label);

                map.addOverlay(marker);

                label.setStyle({

                    borderColor: "#808080",

                    color: "#333",

                    cursor: "pointer"

                });

                (function () {

                    var index = i;

                    var _iw = createInfoWindow(i);

                    var _marker = marker;

                    _marker.addEventListener("click", function () {

                        this.openInfoWindow(_iw);

                    });

                    _iw.addEventListener("open", function () {

                        _marker.getLabel().hide();

                    })

                    _iw.addEventListener("close", function () {

                        _marker.getLabel().show();

                    })

                    label.addEventListener("click", function () {

                        _marker.openInfoWindow(_iw);

                    })

                    if (!!json.isOpen) {

                        label.hide();

                        _marker.openInfoWindow(_iw);

                    }

                })()

            }

        }

        //创建InfoWindow

        function createInfoWindow(i) {

            var json = markerArr[i];

            var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");

            return iw;

        }

        //创建一个Icon

        function createIcon(json) {

            var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })

            return icon;

        }

        initMap(); //创建和初始化地图

    </script>   

     <!--引用百度地图API-->

    <style type="text/css">

        .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}

        .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

     #dituContent div span.BMap_Marker.BMap_noprint{background: url('/images/marker_red.png') !important;height:26px !important;}

     #dituContent .BMapLabel{background-color:white; border:0px !important;left:15px !important;font-size:14px !important;font-weight:bold !important;color:Red !important;font-family:'宋体' !important;}

      #dituContent span.BMap_Marker div{width:0px !important;height:0px !important;}

    </style>

    展开全文
  • 中国地图shp文件

    千次下载 热门讨论 2020-07-29 14:18:56
    1:400万shp文件,主要包括:国界、国界与省界、首都和省级行政中心、地级行政界线、县级行政界线、地市级以上居民地、县级居民地、主要公路、主要铁路、一级河流、三级以上河流、四级河流、五级河流
  • 通过本课程的学习,大家可以系统的学习高德地图各个接口如何在自己的项目中使用。以及如何进行扩展学习。 学习完本课程可以继续学习“Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例”, 主要内容: ...
  • 一个无须翻墙的绘制中国地图的方法(R)

    ggmap

    说起用R绘制中国地图,很多有经验的老司机肯定会推荐ggmap,无论是里面自带的各种地区绘图、经纬度查询以及可以与ggplot无缝衔接绘制地区统计图,这都是R中其它绘制地图所难以超越的优势。

    但奈何校园网现在时不时抽风,常年处于R无法获取上ggmap里面的地图(其实是连不上google)。当我想导入中国地图时,就会出现如下图所示的问题。
    报错信息
    由于数模所需,为了硬着头皮进行绘制,哪怕丑一些,所以探索出了下面两种不需要梯子的绘制中国地图的方法。


    maps + mapdata

    这种方式绘制中国地图非常的简单,只需要一行代码(注意要先调用两个R包maps, mapdata):

    map("china", col = "red4", ylim = c(18, 54), panel.first = grid())
    

    便可以得到如下图所示的绘制结果。

    但这幅图只是一幅单纯的中国地图,如果我们想要插入部分城市的人口数据以及其它信息,该如何添加呢?(数据来源:2015-2016年中国城市人口数量排名

    首先来看看我们的数据信息(代码有点丑,不要在意这些细节):

    beijing = c('北京&天津', 39.90419989999999, 116.4073963, 1961.24 + 1293.82)
    shanghai = c('上海', 31.2303904, 121.4737021, 2301.91)
    zhengzhou = c('郑州', 34.7472541716, 113.6249284647, 862.65)
    wulumuqi = c('乌鲁木齐', 43.8266013700, 87.6168405804, 311.03)
    haerbin = c('哈尔滨', 45.8021755616, 126.5358247345, 1063.6)
    xian = c('西安', 34.3412614674, 108.9398165260, 846.78)
    wuhan = c('武汉', 30.5927599029, 114.3052387810, 978.54)
    chengdu = c('成都', 30.5702183724, 104.0647735044, 1404.76)
    lasa = c('拉萨', 29.6441135160, 91.1144530801, 55.94)
    chongqing = c('重庆', 29.5647048135, 106.5507137149, 2884.62)
    kunming = c('昆明', 24.8796595146, 102.8332118852, 643.2)
    guangshen = c('广州&深圳', 23.0206747828, 113.7517837567, 1270.08 + 1035.79)
    
    cities = c(beijing, shanghai, zhengzhou, wulumuqi, haerbin, xian, wuhan,
               chengdu, lasa, chongqing, kunming, guangshen)
    mat.cities = as.data.frame(matrix(cities, ncol = 4, byrow = T), stringsAsFactors = F)
    names(mat.cities) = c('names', 'lat', 'long', 'population')
    mat.cities$population = as.numeric(as.character(mat.cities$population)) / 100
    mat.cities$lat = as.numeric(as.character(mat.cities$lat))
    mat.cities$long = as.numeric(as.character(mat.cities$long))
    

    具体操作其实也非常简单:使用for循环搭配基础的points()函数,使用如下所示的代码即可:

    map("china", col = "red4", ylim = c(18, 54), panel.first = grid())
    for (i in 1:12) {
      points(mat.cities$long[i], mat.cities$lat[i], cex = 1.5, pch = 16)
    }
    title('Population')
    

    这里应该还需要用其它信息来展现我们的人口数,但是由于这个绘图不是很漂亮,所以就不进行接下来的操作了。后面介绍一个更漂亮的不翻墙绘制人口地图的方法——ggplot + mapdata


    ggplot2 + mapdata

    话不多说,直接用我们前面生成的数据进行绘制。这里讲一下大概的流程:

    • 同上一种方式,利用map()函数产生中国地图的轮廓(如果能上google,使用ggmap当然更好)。
    • 使用ggplot进行绘图:
      1. 使用geom_path()函数将我们生成的中国地图的轮廓绘制出来,这里修改颜色,选择清新自然的粉色;
      2. geom_point()将各个城市的位置用散点点上,同时点的大小表示人口的多少,这里用清新蓝;
      3. geom_text()在每个点上添加上城市的名称;
      4. 修改各个标签以及各种title的名称;
      5. 进行修改主题、Mac上显示中文字等操作。
    china <- map("china", plot = F)
    ggplot() + 
      geom_path(data = china, aes(long, lat, group = group), color = '#FD9FA4', show.legend = F) +
      geom_point(data = mat.cities, aes(x = long, y = lat, size = population), alpha = 0.8, color = '#8BB6D6') +
      # geom_text_repel(data = mat.cities, aes(x = long, y = lat, label = names), family = "STHeiti") +
      geom_text(data = mat.cities, aes(x = long, y = lat, label = names), family = "STHeiti") +
      labs(x = '经度', y = '纬度', title = '中国十二个地区人口地图', size = '人口(百万)') + 
      theme_bw() +
      theme(panel.border = element_blank(),
            text = element_text(family = "STHeiti"),
            plot.title = element_text(hjust = 0.5))
    

    产生出来的图像如下图所示:
    人口图1

    这样的图已经基本算作是能看的了,但这并不是强迫症患者所最终追求的绘图。其美中不足的是每个城市的名称覆盖在我们的散点上了。

    通常我们的做法非常简单,在geom_text()中设置参数,将所有的文字向上下左右选一个方向,防止覆盖。这样做当然没问题,这里介绍另一种方法,可以进行自适应调整以防覆盖。


    ggrepel

    我们的做法是使用ggrepel包中的geom_text_repel()函数替换掉我们原本的geom_text(),细心的同学已经发现,这就是我们上面代码注释掉的部分。这时只需将其封印解除,同时封印住geom_text()这个小顽皮,我们的绘图就大功告成了!
    人口地图2

    最后吐槽一下:这个新版CSDN编辑器的插入R代码是怎么肥四,全是一种颜色,代码看着很难受。

    展开全文
  • 百度地图 省市区县 信息展示

    万次阅读 热门讨论 2017-09-21 15:17:03
    1.一级地图 2.二级地图 3.三级地图 、 4.四级地图 概述效果图是不是有点多呀,不过能看到这里的估计这些效果图就是你们想要的效果啦,好,下面就来介绍一下1. 功能概述 1.展示所有省份门店汇总信息,且...

    先上效果图(PS:数据为mock数据):
    1.一级地图
    这里写图片描述
    2.二级地图
    这里写图片描述
    3.三级地图
    这里写图片描述
    4.四级地图
    这里写图片描述

    概述

    效果图是不是有点多呀,不过能看到这里的估计这些效果图就是你们想要的效果啦,好,下面就来介绍一下

    1. 功能概述
    1.展示所有省份门店汇总信息,且门店数越大,标记越深,标记越大(热力效果)
    2.悬停标记,展示标记对应的省市区县的详细信息,并显示该省市区县的行政区划
    3.点击省份标记进入市级地图,显示该省的所有市级热力标记信息,并显示该省的行政区划,悬停某个市,显示该市的详细信息,并显示该市的行政区划
    4.点击市级标记进入区县级地图,显示该市的所有区县级热力标记信息,并显示该区县的行政区划,悬停某个区县,显示该区县的详细信息,并显示该区县的行政区划
    5.点击区县级标记进入街道乡镇地图,显示该区县的所有门店详细信息,包括地理位置
    6.鼠标滚动缩放也能达到同样的效果
    7.在市级及区县级地图上拖动地图,可以动态跨省跨市显示数据

    2. 地图选择
    百度地图 JavaScript API
    百度地图开发者平台:http://lbsyun.baidu.com/index.php?title=jspopular

    3. 涉及到地图API类
    Map:地图核心类
    Point:点基础类
    Marker:标记类
    Label:标签类
    Polygon:自定义覆盖物类
    Convertor:用于将其他坐标系的坐标转换为百度坐标
    Size:以像素表示一个矩形区域的大小
    Icon:标注覆盖物所使用的图标
    InfoWindow:地图上包含信息的窗口
    Geocoder:获取用户的地址解析
    Boundary:一个行政区域的边界
    具体类及方法参考:http://lbsyun.baidu.com/cms/jsapi/class/jsapi_reference.html#a0b0
    具体demo参考:http://lbsyun.baidu.com/jsdemo.htm?a#a1_2
    其他的开源库参考:http://lbsyun.baidu.com/index.php?title=open/library

    4. 技术方案
    初始进入门店区域分布页面,初始化地图,中心定到北京,缩放zoom=5,设置zoom属于(5,17),初始化地图缩放监听事件(此方法监听地图缩放级数变化),初始化map拖动动态加载数据监听事件,js从后台抓取所有以省份为整体的门店信息数据,然后把标记(带上门店数量)和标签渲染到地图的相关省上
    当缩放zoom时:
    1 .当zoom∈(5,8),地图标记不变化。
    2. 当zoom = 8 时,清除所有省份标记,js调用map. getCenter()来获取地图中心坐标,在通过Geocoder逆向获取中心地址省份名称,js从后台拿到该省的以市级为整体的门店数量数据,然后把标记和标签渲染到地图的相关市上。
    3. 当zoom∈(8,11),地图标记不变化。
    4. 当zoom = 11 时,清除所有市级标记,js调用map. getCenter()来获取地图中心坐标,在通过Geocoder逆向获取中心地址市级名称,js从后台拿到该市的所有区县门店坐标信息,然后把标记和标签渲染到地图的相关区县上。
    5. 当zoom = 12 时,清除所有区县级标记,js调用map. getCenter()来获取地图中心坐标,在通过Geocoder逆向获取中心地址区县级名称,js从后台拿到该区县级的所有乡镇街道门店坐标信息,渲染到地图上。
    当zoom∈(14,18),地图标记不变化。
    当点击标记时:
    1. 当省份标记被点击时,清除所有省份标记,js从后台拿到该省的以市级为整体的门店数量数据,然后把标记(带上门店数量)渲染到地图的相关市上,zoom调整到8。
    2. 当市级标记被点击时,清除所有市级标记,js从后台拿到该市的所有区县门店坐标信息,创建位置标记对象,然后把标记渲染到地图上,zoom调整到11。
    3. 当区县级标记被点击时,清除所有区县级标记,js从后台拿到该区县的所有乡镇街道门店坐标信息,创建位置标记对象,然后把标记渲染到地图上,zoom调整到12。
    当拖动地图时:
    当zoom∈(8,11),js获取拖动结束后的鼠标的坐标,在通过Geocoder逆向获取中心地址市级名称,js从后台拿到该省的以市级为整体的门店数量数据,然后把标记和标签渲染到地图的相关市上。
    当zoom = 11时,js获取拖动结束后的鼠标的坐标,在通过Geocoder逆向获取中心地址市级名称,js从后台拿到该市的所有区县门店坐标信息,然后把标记和标签渲染到地图的相关区县上。

    5. 需要后台提供的接口方法
    1.getProvincesList 获取所有省份信息
    2.getCitiesByProvince 根据某个省份获取该省所有市级信息
    3.getDistrictsByCity 根据某市获取该市所有区县级信息
    4.getStreetsByDistrict 根据区县获取该区县所有乡镇街道信息

    HTML代码详解

    1.dom结构
    so easy

    <div id="container"></div>

    2.js引入
    这里用到了loading插件,详见:https://github.com/imingyu/jquery.mloading

    <script charset="utf-8" src="jquery-mloading/jquery.mloading.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your key"></script>

    JS代码详解

    1. 常量定义

    //三级(市,区县,街道)直辖市,除此之外的省都是四级(省,市,区县,街道)
    const municipality = ["北京市","天津市","上海市","重庆市","香港特别行政区","澳门特别行政区"];
    //最小级zoom,省级zoom
    const ZOOM_PROVINCE_LEVEL = 5;
    //市级zoom
    const ZOOM_CITY_LEVEL = 8;
    //区县级zoom
    const ZOOM_DISTRICT_LEVEL = 11;
    //街道级zoom
    const ZOOM_STREET_LEVEL = 13;
    //缩放最大级别 zoom
    const ZOOM_MAX_LEVEL = 17;
    //当前zoom级别
    let current_zoom = ZOOM_PROVINCE_LEVEL;
    
    //省市区县级别
    const LEVEL_PROVINCE = 1;
    const LEVEL_CITY = 2;
    const LEVEL_DISTRICT = 3;
    const LEVEL_STREET = 4;
    
    //事件控制变量
    let marker_mouseover_flag = true;

    2. 清除覆盖物与设置所有覆盖物为可清除
    因为行政区划在市级区县级时,外框行政区划不清除,而内部行政区划鼠标悬停才显示,而且行政区划与marker,label同属于覆盖物,所以需要按需求清除需要清除的覆盖物

     //清除覆盖物
    function removeOverlay(map) {
        map.clearOverlays();
    }
    
    //设置所有覆盖物为可清除
    function setAllOverLayClear(map){
        let allOverlay = map.getOverlays();
        for(let overlay of allOverlay){
            overlay.enableMassClear();
        }
    }

    3.添加行政区边框
    方法用于根据省市区县名称获取行政区划并且设置行政区边框的样式

    /**
    * 添加行政区边框
    * @param map
    * @param args 行政区域名称数组,以百度地图标准行政区域名称为主
    * @param isAlwaysShow 是否持续显示,默认为false
    * @param strokeColor 边框线条颜色,填入颜色编码,默认为#ff9a39
    * @param fillColor 覆盖物背景色,填入颜色编码,默认为无色透明
    */
    function getBoundaryAndColor(map, arg,isAlwaysShow,fillColor,strokeWeight,strokeColor) {
       strokeColor = strokeColor || "#ff4700";
       if(fillColor == null){
           fillColor = "#61dcff";
       }
       isAlwaysShow = isAlwaysShow || false;
       strokeWeight = strokeWeight || 2;
       //通过行政区域名称获取行政区划
       let bdary = new BMap.Boundary();
       bdary.get(arg, function (rs) {
           let count = rs.boundaries.length;
           if (count === 0) {
               return;
           }
           let ply = new BMap.Polygon(rs.boundaries[0],
               { strokeColor: strokeColor,fillColor: fillColor,strokeWeight:strokeWeight});
           if(isAlwaysShow){
               ply.disableMassClear();
           }
           map.addOverlay(ply);
           $("#container").mLoading("hide");
           marker_mouseover_flag = true;
       });
    }

    4.渲染marker与label
    这是重点方法,主要渲染marker与label,方法里有一些为业务代码,大家可根据自己的实际需求删减代码
    省市区县的marker为自定义marker,marker的icon为m0-m9.png的十套蓝色渐进图标,附件会提供下载

    /**
     * 渲染标记和标签(重点方法)
     * @param map map地图对象
     * @param level 地图级别 1:省级 2:市级 3:区县级
     * @param data json数据
     * @param markerClickCallback 标记点击事件方法回调函数
     * @param center 中心坐标
     */
    function renderMarkersAndLabels(map, level, data, markerClickCallback, center, isClick) {
        //设置所有覆盖物均可清除
        setAllOverLayClear(map);
        //清除所有覆盖物
        removeOverlay(map);
        //点击时需要设置zoom级别与定位中心,并将current_zoom置为当前zoom
        if(level != LEVEL_PROVINCE && center){
            if(level == LEVEL_CITY && isClick){
                map.setZoom(ZOOM_CITY_LEVEL);
                current_zoom = ZOOM_CITY_LEVEL;
                map.panTo(center);
            }
            else if(level == LEVEL_DISTRICT && isClick){
                map.setZoom(ZOOM_DISTRICT_LEVEL);
                current_zoom = ZOOM_DISTRICT_LEVEL;
                map.panTo(center);
            }
            else if(level == LEVEL_STREET && isClick){
                map.setZoom(ZOOM_STREET_LEVEL);
                current_zoom = ZOOM_STREET_LEVEL;
                map.panTo(center);
            }
        }
        //1,2,3级地图省略道路,4级地图展示道路
        if(level == LEVEL_STREET){
            map.setMapStyle({});
        }
        else{
            map.setMapStyle({
                styleJson:[
                    {
                        "featureType": "road",
                        "elementType": "all",
                        "stylers": {
                            "color": "#ffffff",
                            "visibility": "off"
                        }
                    }
                ]
            });
        }
        for (let i = 0; i < data.length; i++) {
            let d = data[i];
            if (d.position) {
                let x = d.position.split(",")[0];
                let y = d.position.split(",")[1];
                let TXPointArr = [new BMap.Point(y,x)];
                //腾讯坐标系 转化为 百度坐标系
                new BMap.Convertor().translate(TXPointArr, 3, 5, function (data) {
                    //标记显示文本
                    let labelContent;
                    //悬停信息框展示文本
                    let windowInfoContent;
                    //获取图片的序号 对应m0-m9.png
                    let img_num;
                    //图片的偏移位置大小
                    let size;
                    if (level == LEVEL_PROVINCE) {
                        windowInfoContent = "省份:" + d.provinceName + "<br>排名:" + d.rank + "<br>省销售额:" + d.sale + "<br>省门店数量:" + d.shopNum;
                        labelContent = d.shopNum;
                        //3.6保证35个省能分布到0-9的渐进图片里,每张图有两个级别,偏移位置根据图片大小而定的
                        img_num = Math.floor(d.rank/3.6);
                        size = new BMap.Size(-10 - ((10 - img_num) * 0.6),-4 + (10 - img_num) * 0.2);
                    }
                    else if (level == LEVEL_CITY) {
                        windowInfoContent = "城市:" + d.cityName + "<br>排名:" + d.rank + "<br>市销售额:" + d.sale + "<br>市门店数量:" + d.shopNum;
                        labelContent = d.shopNum;
                        //2.2保证15个市能分布到0-7的渐进图片里,每张图有两个级别,偏移位置根据图片大小而定的
                        img_num = Math.floor(d.rank/2.2);
                        size = new BMap.Size(-8- ((10 - img_num) * 0.4),-4 + (10 - img_num) * 0.2);
                    }
                    else if (level == LEVEL_DISTRICT) {
                        windowInfoContent = "区县:" + d.districtName + "<br>排名:" + d.rank + "<br>区县销售额:" + d.sale + "<br>区县门店数量:" + d.shopNum;
                        labelContent = d.shopNum;
                        //2.2保证15个区县能分布到0-7的渐进图片里,每张图有两个级别,偏移位置根据图片大小而定的
                        img_num = Math.floor(d.rank/2.2);
                        size = new BMap.Size(-6- ((10 - img_num) * 0.4),-5 + (10 - img_num) * 0.2);
                    }
                    else if (level == LEVEL_STREET) {
                        windowInfoContent = "门店名称" + d.shopName + "<br>销售额:" + d.shopSale;
                        labelContent = d.shopName;
                    }
                    let marker;
                    let label;
                    //1,2,3级地图选用自定义marker,4级地图选用默认地图,且label也不一样
                    if(level != LEVEL_STREET){
                        //创建自定义icon以及自定义icon大小
                        let myIcon = new BMap.Icon("../static/slice/mendianfenbu/m"+ img_num + ".png", new BMap.Size(50+(10-img_num)*2,50+(10-img_num)*2));
                        marker = new BMap.Marker(data.points[0],{icon:myIcon});
                        let opts = {
                            position: data.points[0], // 指定文本标注所在的地理位置
                            offset:size
                        };
                        label = new BMap.Label(labelContent,opts);
                        label.setStyle({
                            color: "white",
                            fontSize: "4px",
                            height: "auto",
                            lineHeight: "6px",
                            fontFamily: "微软雅黑",
                            backgroundColor: 'none',
                            maxWidth: 'none',
                            border: 'none',
                            'font-weight':'bold'
                        });
                    }else{
                        marker = new BMap.Marker(data.points[0]);
                        let opts = {
                            position: data.points[0] // 指定文本标注所在的地理位置
                        };
                        label = new BMap.Label(labelContent,opts);
                        label.setStyle({
                            color: "black",
                            fontSize: "12px",
                            height: "auto",
                            lineHeight: "15px",
                            fontFamily: "微软雅黑",
                            backgroundColor: 'white',
                            maxWidth: 'none'
                        });
                    }
    
                    //禁止覆盖物在map.clearOverlays方法中被清除,与行政区划覆盖物区别
                    marker.disableMassClear();
                    label.disableMassClear();
    
                    //注册标记鼠标悬停事件
                    marker.addEventListener('mouseover',function (e) {
                        if(marker_mouseover_flag){
                            marker_mouseover_flag = false;
                            removeOverlay(map);
                            setTimeout(function(){
                                label.setContent(labelContent);
                                let opts = {
                                    width : 50,     // 信息窗口宽度
                                    height: 100,     // 信息窗口高度
                                    offset : new BMap.Size(20,-30), //信息窗口偏移
                                };
                                // 创建信息窗口对象
                                let infoWindow = new BMap.InfoWindow(windowInfoContent, opts);
                                //开启信息窗口
                                map.openInfoWindow(infoWindow,e.target.point);
                                if(level == LEVEL_PROVINCE){
                                    getBoundaryAndColor(map,d.provinceName);
                                }
                                else if(level == LEVEL_CITY){
                                    getBoundaryAndColor(map,d.cityName);
                                }
                                else if(level == LEVEL_DISTRICT){
                                    getBoundaryAndColor(map,d.districtName);
                                }
                                marker_mouseover_flag = true;
                            },300);
                        }
                    });
    
                    marker.addEventListener('mouseout',function () {
                        if(marker_mouseover_flag){
                            removeOverlay(map);
                        }
                    });
    
    
    
                    //初始化标记点击事件
                    if (markerClickCallback) {
                        markerClickCallback(map, marker,level);
                    }
                    map.addOverlay(marker);
                    map.addOverlay(label);
                });
            }
        }
    }

    5.设置标记点击事件

     /**
     * 设置区县级标记点击事件
     * @param marker 标记对象
     * @param markerLevel 标记所在的地图级别
     */
    function bindMarkersEvent(map, marker, markerLevel) {
        marker.addEventListener('click', function () {
            let _this = $(this);
            let center = new BMap.Point(_this[0].IA.lng, _this[0].IA.lat);
            //显示loading组件
            $("#container").mLoading("show");
            if(markerLevel == LEVEL_PROVINCE){
                renderLevelTwoMap(map,center,true);
            }
            else if(markerLevel == LEVEL_CITY){
                renderLevelThreeMap(map,center,true);
            }
            else if(markerLevel == LEVEL_DISTRICT){
                renderLevelFourMap(map,center,true);
            }
        });
    }

    6.四级地图渲染方法
    下方的permissionService的方法为后端接口方法,即序言里提到的后端需提供的方法

    /**
     * 获得所有省份信息并渲染省级级(一级)地图
     * @param map map地图对象
     */
    function renderLevelOneMap(map) {
        permissionService.getProvincesList(params).then((data) => {
            renderMarkersAndLabels(map , LEVEL_PROVINCE , data , bindMarkersEvent);
        });
    }
    
    //逆向解析省级坐标并渲染该省的市级(二级)地图
    function renderLevelTwoMap(map,center,isClick){
        center = center || map.getCenter();
        isClick = isClick || false;
        let geoc = new BMap.Geocoder();
        geoc.getLocation(center, function (rs) {
            //获得省份
            params.province = rs.addressComponents.province;
            //判断是否属于直辖市
            if($.inArray(params.province , municipality) == -1){
                //调用后台接口获取城市数据cityData
                permissionService.getCitiesByProvince(params).then((cityData) => {
                    renderMarkersAndLabels(map, LEVEL_CITY, cityData, bindMarkersEvent,center,isClick);
                    getBoundaryAndColor(map,params.province,true,"",4);
                });
            }
            else {
                params.city = rs.addressComponents.city;
                //调用后台接口获取区县数据DistrictData
                permissionService.getDistrictsByCity(params).then((DistrictData) => {
                    renderMarkersAndLabels(map, LEVEL_DISTRICT, DistrictData, bindMarkersEvent,center,isClick);
                    getBoundaryAndColor(map,params.city,true,"",4);
                });
            }
        });
    }
    
    //逆向解析市级坐标并渲染该市的区县级(三级)地图
    function renderLevelThreeMap(map,center,isClick){
        center = center || map.getCenter();
        isClick = isClick || false;
        let geoc = new BMap.Geocoder();
        geoc.getLocation(center, function (rs) {
            //获得市级
            params.city = rs.addressComponents.city;
            //调用后台接口获取区县数据DistrictData
            permissionService.getDistrictsByCity(params).then((DistrictData) => {
                renderMarkersAndLabels(map, LEVEL_DISTRICT, DistrictData, bindMarkersEvent,center,isClick);
                getBoundaryAndColor(map,params.city,true,"",4);
            });
        });
    }
    
    //逆向解析区县级坐标并渲染该区县的乡镇街道级(四级)地图
    function renderLevelFourMap(map,center,isClick){
        center = center || map.getCenter();
        isClick = isClick || false;
        let geoc = new BMap.Geocoder();
        geoc.getLocation(center, function (rs) {
            //获得区县
            params.district = rs.addressComponents.district;
            //调用后台接口获取乡镇街道数据streetData
            permissionService.getStreetsByDistrict(params).then((streetData) => {
                renderMarkersAndLabels(map, LEVEL_STREET, streetData, null,center,isClick);
                getBoundaryAndColor(map,params.district,true,"",4);
            });
        });
    }

    7.zoom监听事件
    坑爹的百度没有提供地图缩放监听事件,所以只能自定义滚轮事件,而且chrome与firefox两大浏览器的滚轮事件定义不一样,需要单独设置,这里在zoom监听时,是禁止掉了地图滚轮,监听滚轮向上向下滚,向上滚动,让zoom+1,向下滚动,让zoom-1,如果不禁止地图滚动,那么大幅滚动时,地图可能会一下同时缩放好几级,这样会造成四级显示问题。

    /**
     * zoom切换监听事件
     * @param map map地图对象
     */
    function bindZoomSwithListener(map) {
        let flag = true;
        const scrollFunc = (e)=>{
            if(flag){
                flag = false;
                setTimeout(function () {
                    //是否放大
                    let isUp = false;
                    //IE/Opera/Chrome 的滚轮判断为wheelDelta = +- 120 ,firefox的滚轮判断为detail = +- 3
                    //+120为放大,-120为缩小 -3为放大,+3为缩小
                    if(e.wheelDelta){
                        if(e.wheelDelta == 120){
                            isUp = true;
                            map.zoomIn();
                        }
                        else{
                            map.zoomOut();
                        }
                    }else if(e.detail){//Firefox
                        if(e.detail == -3){
                            isUp = true;
                            map.zoomIn();
                        }
                        else{
                            map.zoomOut();
                        }
                    }
                    //从一级跳二级
                    if(isUp && current_zoom == ZOOM_CITY_LEVEL - 1){
                        renderLevelTwoMap(map);
                    }
                    //从二级跳一级
                    else if(!isUp && current_zoom == ZOOM_CITY_LEVEL){
                        renderLevelOneMap(map);
                    }
                    //从二级跳三级
                    else if(isUp && current_zoom == ZOOM_DISTRICT_LEVEL - 1){
                        renderLevelThreeMap(map);
                    }
                    //从三级跳二级
                    else if(!isUp && current_zoom == ZOOM_DISTRICT_LEVEL){
                        renderLevelTwoMap(map);
                    }
                    //从三级跳四级
                    else if(isUp && current_zoom == ZOOM_STREET_LEVEL - 1){
                        renderLevelFourMap(map);
                    }
                    //从四级跳三级
                    else if(!isUp && current_zoom == ZOOM_STREET_LEVEL){
                        renderLevelThreeMap(map);
                    }
                    else{
                        map.removeOverlay();
                    }
                    if(isUp){
                        current_zoom = map.getZoom();
                    }else{
                        current_zoom = map.getZoom();
                    }
                    flag = true;
                },300);
            }
        };
        /*注册事件*/
        let userAgent = navigator.userAgent;
        let isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
        if(isFF){
            document.addEventListener('DOMMouseScroll',scrollFunc,false);
        }else{
            window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
        }
    }

    8.鼠标拖动地图事件
    这里增加了市级,区县级的鼠标拖动事件,为了实现跨省,跨市,动态获取数据

    /**
     * 鼠标拖动地图触发事件
     * @param map
     */
    function bindProvinceAndCitySwitchListener(map) {
        let mouseFlag = true;
        map.addEventListener('dragend',function () {
            if(mouseFlag){
                mouseFlag = false;
                setTimeout(function () {
                    let zoom = map.getZoom();
                    //市级
                    if(zoom >= ZOOM_CITY_LEVEL && zoom < ZOOM_DISTRICT_LEVEL){
                        $("#container").mLoading("show");
                        renderLevelTwoMap(map);
                    }
                    //区县级
                    else if(zoom >= ZOOM_DISTRICT_LEVEL && zoom < ZOOM_STREET_LEVEL){
                        $("#container").mLoading("show");
                        renderLevelThreeMap(map);
                    }
                    mouseFlag = true;
                },200);
            }
        });
    }

    9.地图初始化
    哈哈,地图最开始的初始化,放在最后说

    /**
     * 初始化地图
     */
    //显示loading组件
    $("#container").mLoading("show");
    let point = new BMap.Point(116.404, 39.915);
    //初始化地图
    let map = new BMap.Map("container");
    map.centerAndZoom(point , current_zoom); //创建中心点与zoom缩放级别
    map.setMinZoom(ZOOM_PROVINCE_LEVEL);  //最小zoom缩放级别
    map.setMaxZoom(ZOOM_MAX_LEVEL); //最大zoom缩放级别
    map.disableScrollWheelZoom();     //关闭鼠标滚轮缩放,自定义滚轮事件,调用map.zoomIn()与map.zoomOut()来控制缩放,避免直接使用而导致一次放大或缩小几级导致数据加载问题
    bindZoomSwithListener(map); //初始化zoom缩放监听事件
    bindProvinceAndCitySwitchListener(map); //初始化map拖动监听事件
    renderLevelOneMap(map);

    附件:m0-m9的png图片:
    m0.png:
    这里写图片描述
    m1.png:
    这里写图片描述
    m2.png:
    这里写图片描述
    m3.png:
    这里写图片描述
    m4.png:
    这里写图片描述
    m5.png:
    这里写图片描述
    m6.png:
    这里写图片描述
    m7.png:
    这里写图片描述
    m8.png:
    这里写图片描述
    m9.png:
    这里写图片描述

    展开全文
  • 【资料整理】高精地图

    万次阅读 2018-01-10 20:04:51
    高精细地图是指高精度、精细化定义的地图,其精度需要达到分米级才能够区分各个车道,如今随着定位技术的发展,高精度的定位已经成为可能。而精细化定义,则是需要格式化存储交通场景中的各种交通要素,包括传统地图...

    本文资料均来源于网上,由作者整理合并,侵删

    • 高精电子地图
      高精细地图是指高精度、精细化定义的地图,其精度需要达到分米级才能够区分各个车道,如今随着定位技术的发展,高精度的定位已经成为可能。而精细化定义,则是需要格式化存储交通场景中的各种交通要素,包括传统地图的道路网数据、车道网络数据、车道线以和交通标志等数据。
      与传统电子地图不同,高精度电子地图的主要服务对象是无人驾驶车,或者说是机器驾驶员。和人类驾驶员不同,机器驾驶员缺乏与生俱来的视觉识别、逻辑分析能力。比如,人可以很轻松、准确地利用图像、GPS定位自己,鉴别障碍物、人、交通信号灯等,但这对当前的机器人来说都是非常困难的任务。因此,高精度电子地图是当前无人驾驶车技术中必不可少的一个组成部分。高精度电子地图包含大量行车辅助信息,其中,最重要的是对路网精确的三维表征(厘米级精度)。比如,路面的几何结构,道路标示线的位置,周边道路环境的点云模型等。有了这些高精度的三维表征,车载机器人就可以通过比对车载GPS、IMU、LiDAR或摄像头数据来精确确认自己的当前位置。此外,高精地图还包含丰富的语义信息,比如交通信号灯的位置及类型,道路标示线的类型,识别哪些路面可以行驶等。这些能极大提高车载机器人鉴别周围环境的能力。此外,高精度地图还能帮助无人车识别车辆、行人及未知障碍物。这是因为高精地图一般会过滤掉车辆、行人等活动障碍物。如果无人车在行驶过程中发现当前高精地图中没有的物体,便有很大几率是车辆、行人或障碍物。因此,高精地图可以提高无人车发现并鉴别障碍物的速度和精度。
      这里写图片描述

    • 高精地图特点
      相比服务于GPS导航系统的传统地图而言,高精地图最显著的特点是其表征路面特征的精准性。传统地图只需要做到米级精度即可实现GPS导航,但高精地图需要达到厘米级精度才能保证无人车行驶安全。
      高精地图是无人驾驶核心技术之一,精准的地图对无人车定位、导航与控制,以及安全至关重要。我们马路上的车道线的宽度大约都在10cm左右,如果让行驶的车辆完全自动驾驶的情况下同时避免压线,就需要地图的定位精准度到10cm,甚至要达到该值的范围以内。其次高精度地图还要反馈给车辆例如道路前方信号灯的状态、判断道路前方的道路指示线是实或虚,判断限高、禁行等等,所以高精度地图对于车辆的行驶来说要能够反馈准确的信息,来保证车辆安全、正常行驶。高精度电子地图包含大量的行车辅助信息,包括路面的几何结构、标示线位置、周边道路环境的点云模型等。有了这些高精度的三维表征,无人驾驶系统就可以通过比对车载GPS、IMU、LiDAR或摄像头的数据来精确确认自己当前的位置,并进行实时导航。
      这里写图片描述
      此外,高精地图还需要比传统地图有更高的实时性。由于路网每天都有变化,如整修、道路标识线磨损及重漆、交通标示改变等。这些变化需要及时反映在高精地图上以确保无人车行驶安全。实时高精地图有很高的难度,但随着越来越多载有多种传感器的无人车行驶在路网中,一旦有一辆或几辆无人车发现了路网的变化,通过与云端通信,就可以把路网更新信息告诉其他无人车,使其他无人车更加聪明和安全。

    • 高精地图生产
      美国加州大学河滨分校Sutarwala,Behlul Zoeb的研究使用配备RTK-GPS的采集车沿着所需线路车道驾驶采集数据,这个方法存在的问题是只能获取车道中心线信息,其精度也容易受到驾驶员的驾驶路线的影响,而且每条车道都需要行驶一遍,对于复杂的交通路况不实用。
      Markus Schreier在研究中提出使用激光雷达和广角摄像头结合的方法提取道路信息,加上配备的高精度GNSS能够达到 10cm精度。此方法中需要使用 64 线激光雷达,传感器成本比较高,而且依靠激光雷达反射率生成的俯视图在清晰度方面很难保证,很难在上面使用图像处理方法对线进行提取,人工标注也比较困难。
      Chunzhao Guo在他的研究中提出使用低成本传感器创建车道级地图的方法,提出使用GPS/INS紧耦合结合光流法进行定位,在卫星数量较少的城市环境也能够实现可靠定位,从拼接的正射影像图中提取信息,但是绝对定位系统精度在很大程度还是依赖GPS。
      这里写图片描述
      传统电子地图主要依靠卫星图片产生,然后由GPS定位,这种方法可以达到米级精度。而高精地图需要达到厘米级精度,仅靠卫星与GPS是不够的。因此,其生产涉及多种传感器, 由于产生的数据量庞大,通常会使用数据采集车收集,然后通过线下处理把各种数据融合产生高精地图。目前,高精度地图正在形成一种“专业采集+众包维护”的生产方式,即通过少量专业采集车实现初期数据采集,借助大量半社会化和社会化车辆及时发现并反馈道路变化,并通过云端实现数据计算与更新。大量的数据传输,对于网络条件也提出了很高要求。
      高精度地图数据采集车
      高精度地图数据采集车
      高精地图的制作是个多传感器融合的过程, 包括了以下几种:
      陀螺仪(IMU): 一般使用6轴运动处理组件,包含了3轴加速度和3轴陀螺仪。加速度传感器是力传感器,用来检查上下左右前后哪几个面都受了多少力(包括重力),然后计算每个上的加速度。陀螺仪就是角速度检测仪,检测每个上的加速度。假设无人车以Z轴为轴心,在一秒钟转到了90度,那么它在Z轴上的角速度就是90度/秒。从加速度推算出运动距离需要经过两次积分,所以,但凡加速度测量上有任何不正确,在两次积分后,位置错误会积累然后导致位置预测错误。所以单靠陀螺仪并不能精准地预测无人车位置。
      轮测距器(Wheel Odometer): 我们可以通过轮测距器推算出无人车的位置。汽车的前轮通常安装了轮测距器,分别会记录左轮与右轮的总转数。通过分析每个时间段里左右轮的转数,我们可以推算出车辆向前走了多远,向左右转了多少度等。可是由于在不同地面材质(比如冰面与水泥地)上转数对距离转换的偏差,随着时间推进,测量偏差会越来越大。所以单靠轮测距器并不能精准预测无人车位置。
      GPS:任务是确定四颗或更多卫星的位置,并计算出它与每颗卫星之间的距离,然后用这些信息使用三维空间的三边测量法推算出自己的位置。要使用距离信息进行定位,接收机还必须知道卫星的确切位置。GPS接收机储存有星历,其作用是告诉接收机每颗卫星在各个时刻的位置。在无人车复杂的动态环境,尤其在大城市中,由于各种高大建筑物的阻拦。GPS多路径反射(Multi-Path)的问题会更加明显。这样得到的GPS定位信息很容易就有几十厘米甚至几米的误差,所以单靠GPS不可以制作高精地图。
      激光雷达(LiDAR): 光学雷达通过首先向目标物体发射一束激光,然后根据接收-反射的时间间隔来确定目标物体的实际距离。然后根据距离及激光发射的角度,通过简单的几何变化可以推导出物体的位置信息。LiDAR系统一般分为三个部分:一是激光发射器,发出波长为600nm到1000nm的激光射线;二是扫描与光学部件,主要用于收集反射点距离与该点发生的时间和水平角度(Azimuth);三是感光部件,主要检测返回光的强度。因此我们检测到的每一个点都包括了空间坐标信息以及光强度信息<i>。光强度与物体的光反射度(reflectivity) 直接相关,所以从检测到的光强度也可以对检测到的物体有初步判断。

    • 高精地图的机遇与挑战
      随着自动驾驶的发展,更多的汽车厂、风投越来越认识到高精地图的重要性。BBA投资了Here地图,福特、上汽投资了Civil Maps 、软银投资 Mapbox等一系列投资,无非就是汽车行业和IT巨头们非常看重这些创新企业或者图商未来在未来的发展潜力。
      同时,BAT通过收购、控股或入股的方式将几大的数据商全部瓜分,在国内要抢占高精度地图或导航电子地图资质的门槛,这些都给高精地图带来非常好的发展机遇。
      这里写图片描述
      在这么好机遇下,高精地图的发展还面临如下挑战:

      • 高精地图的精度要求
        这里写图片描述
        不同数据内容表达的精度是不同的。真实情况其实比上图更复杂,不同场景面临的精度要求也不同。例如在道路宽度或道路车线精度是正负10厘米,那么在隧道里,就不一定要求正负10厘米了,因为定位基本做不到正负10厘米。所以在不同场景下,它对精度要求是不一样的。
        这也与自动驾驶的需求有密切关系。不同阶段的自动驾驶(Level 1到Level 5)的功能,会因为具体的精度而有不同需求。所以精度就是地图中一个可变的尺度,可高可低。
        目前,无论是从图商还是车企角度来看,精度问题都没有非常准确的答案。
        业界有一种说法,就是“相对精度做到20厘米”,这是好多车厂和自动驾驶团队的需求,但这个说法本身就有问题。但是在测绘界,“相对精度”是不会有一个绝对值的,它是一个量级百分比,所以“相对精度”的提法是有问题的。举个例子,车线宽度正负10厘米,信息牌是正负50厘米,它的精度会不一样,但实际上它的作用是一样的。
        车辆如果在道路上行驶的时候,从车辆本身看车线的精度,它离车线很近,可能就两三米远,这个时候正负10厘米的误差,影响很大。但是它离信息牌很远,可能十几米,这个时候50厘米的误差,与车线的10厘米误差,可能就是一样的。所以这种精度在表达的时候,“相对精度20厘米”的表达是不准确的。

      • 地图如何更新
        这里写图片描述
        目前还存在一种高精地图无用论:现实世界是千变万化的,地图做出来就是一次性的、是静态的。但这里谈到地图高精动态,实际上,在如何制作动态地图的时候,就需要考虑如何更新。实际上很简单——通过众包。
        这种方法的来源是多种多样的,来源于政府的智慧城市和智慧交通上的业务、大数据人工智能方面的分析业务、共享业务、手机终端服务数据以及车厂中的导航业务、自动驾驶的任务以及人工智能业务。
        只要拥有通讯的智能设备,只要它能够获得位置信息,这个位置信息的精度能达到一定精度,这样的数据来源就是做地图更新的数据来源。这就是一个简单的业务闭环的概念。
        将HAD多级数据提供给政府、车厂和普通用户,他们在使用之后,不断传回这些位置数据。通过这种众包方式来更新地图,这也是未来的发展趋势,同时面临的挑战也非常之多。
        首先是数据的精度,有没有那么多高速定位的设备来反馈这样的数据;其次是这些闭环是否能够无缝打造;最后是各家是否愿意将数据贡献出来。这在未来都是非常大的课题。

      • 高精地图的生产成本
        这里写图片描述
        这可能是图商之间谈论比较多的问题。从Level 2到Level 5,它对数据要求的内容和精度的要求会越来越高。
        在数据采集过程中,从作业效率一人/天百公里,一直到Level 5已经降到了每天能做几公里的速度。这个生产效率的下滑,相当于成本在不断提升。
        在这种情况下,需要引入人工智能。随着人工智能的提高,高精地图的生产成本会逐步下降,最终趋于平稳。
        地图制作包含哪些内容?首先是车线识别、特征点提取、构建车道的拓扑网络以及制作各种地物(人行横道、标线、交通标志)等等,这是一个基础的数据制作内容。
        这里写图片描述
        按照图商制作的方式,这些是分为很多步骤来实现的,每一步都涉及到很多的质量控制和成本。在这样的一个基础上,中海庭针对这种情况,开发了自动化生产的平台,引进AI技术和自动化生产技术。
        比如在基于激光点云的处理中,可以通过自动化识别的方式来自动化提取道路标线,把各种标线提取之后,车线以及路面标识都可以通过自动化方式来实现。在路口拓扑的构建中,选择不同模式,通过自动化生产平台就能自动地将路口所有的拓扑关系自动生成出来。整个生产过程中,是一步到位来实施的,把所有中间过程全部给省掉了。将有些通过数据编译的过程,全部融合到生产过程中,这是一次性到位,极大减少了中间过程。这样可以降低高精地图生产成本。

      • 其实最核心的问题可能是政策问题
        这里写图片描述
        法律法规问题在国际上一直存在,只是国外更加注重安全,更加注重于价值授权方面的法律法规。在中国,就有独特的社会法规来进行限制。
        在《基础地理信息公开表示内容的规定》中就规定,快速路、高架路、引道、街道和内部道路的铺设材料、最大纵坡、最小曲率半径不可公开。同时,也不能记录涉密的地理信息数据(坐标、高程等)。所以在自动驾驶中,关于坡度和高程问题无法使用的问题,对地图造成非常大影响。但更重要的就是加密,加密带来的误差。
        在测绘领域的加密,造成的精度误差,实际上并不是大家所理解的那样:加密之后,地图全部偏转和扭曲。它实际上是两个步骤,一个是地图偏转,另外一个是定位偏转。定位偏转和地图偏转如果是一样的,那就没有任何问题。但现在它的问题是两者不同,它会有随机误差。目前通过加密的调参数,可以做到定位加密和地图加密偏差不超过20厘米。
        如何减少加密对自动驾驶产生的影响(是减少影响,影响依然存在)。20厘米只是一个坐标偏离的问题,但实际上还有很多精度没有确定,比如相位的变化,有可能通过正负10厘米的偏差之后,导致相位发生反转,这是非常严重的问题。
        高精度电子地图的信息量与质量直接决定了无人驾驶系统的安全性、可靠性,以及效率。与传统电子地图不同,高精地图更精准(厘米级),更新更快,并且包含了更多信息(语义信息)。由于这些特性,制作高精地图并不容易,需要使用多种传感器互相纠正。在初始图制作完成后,还需要进行过滤以降低数据量达到更好的实时性。在拥有了这些高精度地图信息后,无人驾驶系统就可以通过比对车载GPS、IMU、LiDAR或摄像头数据来确认当前的精确位置,并进行实时导航。

    展开全文
  • 这是一个h5页面– ...在你的index.html页面上加载百度地图js(获取ak) 正确安装了vue 使用vue-cli可以快速开发 &lt;script type="text/javascript" src="http://api.map.baidu...
  • 离线地图使用方法

    万次阅读 2019-08-28 12:11:20
    最近接手了一个web项目,其中因为是内网,所以,必须用离线的地图,以便于在离线地图上标注位置。 经过了一天多的学习查阅资料,现终于成功,总结如下: 首先开发web GIS 主要是采用一些前端框架,目前主流的gis...
  • Java实现百度地图距离计算

    千次阅读 2019-05-06 13:30:18
    1.注册自己百度应用取得AK码 **2.需要的Jar包 ** 类型服务端 白名单不想限制就写 0.0.0.0/0 取得自己的AK码 jsp代码 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
  • 一张新型肺炎地区分布地图是怎么制作的?

    万次阅读 多人点赞 2020-02-07 16:19:46
    一张新型肺炎地区分布地图是怎么制作的? 前言 让我们从环境开始 创建工程,添加引用 GIS数据 剩下的工作就很简单了 叠加世界数据 叠加中国数据 调整可视范围 连接动态数据 样式化地图 写在最后 前言 2020年刚...
  • 如何下载石家庄市卫星地图高清版大图 石家庄市行政区域简介 石家庄,简称“石”,河北省省会,地处河北省西南部,旧称石门。截至2016年底,石家庄辖区总面积15848平方公里,市区面积2206平方公里,全市常住人口...
  • 如何下载中国卫星地图高清版大图

    万次阅读 2019-02-28 16:30:38
    如何下载中国卫星地图高清版大图 中国行政区域简介 中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的...
  • 百度地图开发(三)之地图控制 + 定位

    万次阅读 多人点赞 2015-02-24 12:28:33
     前两篇关于百度地图的blog写的是,一些基本图层的展示 和 覆盖物的添加+地理编码和反地理编码。  接下来,这篇blog主要说一些关于地图控制方面的内容和定位功能。  百度地图提供的关于地图的操作主要有:单击...
  • 百度地图API授权ak失败

    万次阅读 2014-03-04 10:46:46
    当申请过百度地图密钥后,引用百度地图: 运行网页时提示:“百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度开放平台密钥,或此密钥未对本应用的百度地图JavasoriptAPI授权。……”。下面给出的...
  • (注:Bigemap 3D地球是一个三维地图浏览功能,是基于高程数据进行的实时渲染,无法进行下载标注等,如需三维城市、创建三维地图模型等,可通过右侧【联系我们】进行咨询。另:3D地球浏览城市时无3D效果)   3D...
  • 百度地图开发(四)之POI检索

    万次阅读 多人点赞 2015-03-09 10:15:28
    我们在使用地图的时候,搜索周边的ktv,饭店,或者宾馆的时候,输入关键字,然后地图展示给我们很多个点,这些点就是我需要的信息。这就是所谓的兴趣点,也就是一个普通的查询,然后结果的反馈罢了。  百度地图SDK...
  • Echarts地图详解(地图样式、合并地图、增加地图

    万次阅读 多人点赞 2019-02-12 14:36:49
     地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气。尤其是在大屏展示中更是扮演着必不可缺的角色。 地图实现 下面我们就来实现一个基本的地图,并为之添加一些好看的样式。 &...
  • 上篇博客已经实现了地图的定位以及结合了方向传感器用户路痴定位方向,如果你还不清楚,请查看:Android 百度地图 SDK v3.0.0 (二) 定位与结合方向传感器,本章会教大家如何添加覆盖物,实现周边搜索,以及对覆盖...
1 2 3 4 5 ... 20
收藏数 378,993
精华内容 151,597
关键字:

地图