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

    2020-07-30 23:31:51
    中国高清地图,可供放大,高清查看地图,下载即可查看
  • 中国地图shp文件

    千次下载 热门讨论 2020-07-29 14:18:56
    1:400万shp文件,主要包括:国界、国界与省界、首都和省级行政中心、地级行政界线、县级行政界线、地市级以上居民地、县级居民地、主要公路、主要铁路、一级河流、三级以上河流、四级河流、五级河流
  • 全国分乡镇地图

    热门讨论 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>

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

    万次阅读 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或摄像头数据来确认当前的精确位置,并进行实时导航。

    展开全文
  • 做过数据分析的人都知道,老板最喜欢的莫过于数据可视化,可视化中最喜欢的莫过于地图可视化。但是想要做地图可视化也并非易事,对于大多数人来说,Excel一直都是首选,但是Excel真的是实现地图可视化的最好工具吗?...

    做过数据分析的人都知道,老板最喜欢的莫过于数据可视化,可视化中最喜欢的莫过于地图可视化。但是想要做地图可视化也并非易事,对于大多数人来说,Excel一直都是首选,但是Excel真的是实现地图可视化的最好工具吗?

    目前市场上,能够实现地图可视化的工具有很多,可以分为编程类、平台类和软件类三种:

    • 编程类:Matlab、Python、Echarts
    • 平台类:FineBI、高德Maplab
    • 软件类:Excel

    当然,还有一些别的,如国外的BatchGeo、Fusion Tables等,这里就不一一列举了。

    究竟哪一个工具做地图可视化最简单、最省力、最强大呢?今天我们就来实测一下!

     

    地图可视化是什么?

    在此之前,我们先要知道什么是地图可视化?

    简单点说,地图可视化就是将地理数据转换成可视化形态,通过将具有地域特征的数据或者数据分析结果形象地表现在地图上,使得用户可以更加容易理解数据规律和趋势。

    通俗地讲,地图可视化可以将地理数据更清晰直白地展现出来,比如下面这种:

     

    FineBI热力图

    场景准备

    为了测试各个工具性能如何,我设计了一个简单的场景,使用各个工具制作可视化地图并对最后的效果进行对比。

    • 现有数据:2018年中国各省市常住人口数量(数据来自国家统计局-2018年统计年鉴)
    • 场景:需要通过地图可视化展示各省市人口的分布情况,方便进行直观对比

    制作可视化地图

    1、Excel

    Excel是大多数人都很熟悉的数据处理工具,将数据导入Excel中,选中省份和人口数两个字段后,再点击上方的三维地图,就进入了地图可视化编辑界面。

     

    然后,再将省份字段拖入位置选项,并选择省/市/自治区层级,将人口数字段拖入高度(值)选项,最后在类别选项中选择省份字段,切换为区域地图,一张各省市的常住人口可视化地图就完成了。

     

    评价:

    Excel实现地图可视化的操作相对来说较为简单,但是功能也比较少,类型只有柱形图、气泡图、热度图以及区域地图等,目前大数据领域常见的流向地图等并不在可选范围内,可用的主题也是微软经典的几款,显得有一些“视觉疲劳”。

    2、Echarts

    Echarts是一款商业级数据图表平台,它是一个纯JavaScript的图表库,因此使用Echarts进行地图可视化会稍显复杂,需要有一定JS基础才能较为轻松地上手。

    由于Echarts的官方示例没有区域地图的选项(一个小缺点),因此采用气泡图来进行展示。在Echarts中,数据需要预先进行清洗,再放入代码中。代码块主要分为三部分:字段定义地理位置、字段赋值以及图表框架搭建,部分代码如下所示:

     

    地理字段赋值部分代码

     

    图表框架搭建部分代码

    写了大约300行代码,完成了Echarts的可视化地图,气泡的大小表示各省市人口数量的对比,并且标出了人口数量Top5的省份。

     

    评价:

    纯JavaScript书写的特点让Echarts在实现地图可视化的过程中具有极大的自由度,但与此同时,也带来了上手难度大、花费时间长等问题,总体来看,Echarts作为一款国产工具,可以说瑕不掩瑜,推荐有编程基础的读者使用。

    3、FineBI

    FineBI是新一代自助大数据分析的商业智能产品,提供了从数据准备、自助数据处理、数据分析与挖掘、数据可视化于一体的完整解决方案,也是我比较推崇的可视化工具之一。

    下面就使用FineBI来演示地图可视化的过程。

    • 第一步:抽取数据

    其实就是将准备好的Excel上传到FineBI平台上,好在FineBI可以支持30多种数据库表,多维数据库、程序数据集等数据源,可以说很方便了。

     

    上传数据

    • 第二步:创建仪表板,进行地图可视化编辑

    数据抽取完成后,再添加一个仪表板用于制作和展示可视化地图,然后再添加一个组件,并选取刚上传的数据集,这样就进入了地图可视化编辑界面。

     

    可视化编辑界面

    将省份维度转换成地理角色,并将生成的经度和纬度分别拖入横、纵轴,同时,将人口数指标拖入颜色区域。全程只需要鼠标拖拽,完全不需要进行编程,一个高质量的可视化地图就完成了。

     

    FineBI可视化地图制作过程

    不仅如此,还可以添加组件对省份进行筛选过滤,比如我们需要查看江浙沪三地的情况:

     

    江浙沪三地视图

    同时,也可以根据人口数量区间进行筛选,比如人口数量在7000万以上的省份分布:

     

    人口数量7000万以上省份视图

    • 第三步:展示模板

    对于这一步展示,excel和echart是比不上FineBI的,因为FineBI平台可以将做好的地图可视化模板挂出,领导、同事都可以在平台上查看,不需要再制作PPT或者导出成pdf格式进行汇报,对于有工作需要的人来说,确实是一个大大解放了劳动力的功能。

     

    挂出展示模板

    评价:

    与其他几款工具对比,FineBI操作比较简单,完成效果也很出色。而且,除了上述功能之外,FineBI还支持实时数据更新、地图钻取、自定义区域、模板复用等功能,并涵盖了绝大部分的图表类型,丰富了地图可视化的实用性。

    总结

    通过实际体验三款地图可视化的工具,可以发现不同类型的工具各有各的特色:

    在操作方面,Excel无疑是最简单的,但是它的显示效果不佳,功能丰富性一般,并且用Excel做完图后还需要做一个PPT或者Word用于展示,额外了增加工作量;

    在功能丰富性方面,Echarts作为一款编程型工具占据了极大的优势,但是需要制作者有一定的编程基础,且花费的时间较长;

    在综合性方面,FineBI的表现比较突出,不需要编程而且简单易做,能够实现平台展示,比较适合企业用户,在数据可视化方面是一个不错的选择。

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

    万次阅读 热门讨论 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:
    这里写图片描述

    展开全文
  • GMAP.NET ---生成离线地图

    千次阅读 2018-07-01 11:58:41
    生成离线地图如何生成离线地图,也就是Data.gmdb。1. 选择一个地图厂商(例如百度),并定位你的位置(例如重庆)2. 按中Alt键并使用鼠标框选,会用蓝色区域表示,点击prefetch 3. 然后开始生成了,是否生成下一层会...
  • 离线地图使用方法

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

    万次阅读 多人点赞 2020-02-07 16:19:46
    一张新型肺炎地区分布地图是怎么制作的? 前言 让我们从环境开始 创建工程,添加引用 GIS数据 剩下的工作就很简单了 叠加世界数据 叠加中国数据 调整可视范围 连接动态数据 样式化地图 写在最后 前言 2020年刚...
  • 如何下载中国卫星地图高清版大图

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

    热门讨论 2010-05-10 15:21:00
    一个后生来到一间广州酒类专卖店前面,在路上他看到了一件有趣的事,想以此考考老师父,冷不防地问了一句:“为何团团转?”“皆因绳未断。”老师父随口答道。 后生听了,顿时目瞪口呆:“你怎么知道的?...
  • 世界地图高清图

    万次阅读 2019-04-03 19:45:07
  • 超高清分辨率谷歌卫图(中国) 谷歌中国卫星影像图6400*6144像素 带国界、省界以及地名标注的。 百度网盘下载地址:回复即可查看中国...更多地图资源请访问:http://www.arceyes.com/down/gismapdown/
  • 下载并安装→Bigemap地图下载器,打开软件鼠标移到左上角【选择地图】,即可展开地图源列表,之后选择一种地图就可以下载到全国乃至全球各地的高清卫星影像。 注:免费授权仅能下载被授权的地图源的地图,操作时如有...
  • IOS百度地图开发系列-百度地图不能正常显示

    万次阅读 多人点赞 2013-08-14 11:08:48
    百度地图不能正常显示,只显示灰色网格。
  • 先来看看传说中最争议的天地图吧. 最大放大距离,每厘米25米. 我们用这个体育场和下面的大厦做对比..其实还有大厦下的车..(这张图上的车看不清,真有,没骗你们....) 再上一张高德的, 最大50M 真得是50M...
  • Android百度地图默认位置中心点设置

    万次阅读 多人点赞 2014-06-18 10:38:25
    //初始化地图  MapView mMapView = (MapView) findViewById(R.id.map); BaiduMap mBaidumap = mMapView.getMap(); //设定中心点坐标   LatLng cenpt = new LatLng(29.806651,121.606983);   //...
  • 全能电子地图下载器是一款功能强大的全球卫星地图下载工具,它只要帮助用户从谷歌地图、高德地图、腾讯地图、雅虎地图、必应地图、诺基亚地图、百度地图、天地图等网络地图中下载瓦片地图,并且支持将下载后的地图...
  • (注:Bigemap 3D地球是一个三维地图浏览功能,是基于高程数据进行的实时渲染,无法进行下载标注等,如需三维城市、创建三维地图模型等,可通过右侧【联系我们】进行咨询。另:3D地球浏览城市时无3D效果)   3D...
1 2 3 4 5 ... 20
收藏数 382,789
精华内容 153,115
关键字:

地图