高德地图APIWeb地图开发系列

Posted 生命是有光的

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高德地图APIWeb地图开发系列相关的知识,希望对你有一定的参考价值。

✍、高德地图API

🔥高德地图API地址
🔥【高德地图API】Web地图开发系列(一)https://blog.csdn.net/Augenstern_QXL/article/details/120488096
🔥【高德地图API】Web地图开发系列(二)https://blog.csdn.net/Augenstern_QXL/article/details/120570158

1、图层

1.1、高德官方图层

1.1.1、标准图层

您可以按照如下方法声明和创建一个标准图层,然后给地图对象设置layers属性,将其添加到地图中。

var layer = new AMap.createDefaultLayer({
      zooms:[3,20],    //可见级别
      visible:true,    //是否可见
      opacity:1,       //透明度
      zIndex:0         //叠加层级
})
var map = new AMap.Map('container',{
      layers:[layer] //当只想显示标准图层时layers属性可缺省
});

如果在地图初始时您只需要标准图层,那么地图对象的layers属性可以缺省,我们将为您自动添加一个标准图层:

var map = new AMap.Map('container');
属性类型说明
zooms[Number,Number]支持的缩放级别范围,默认范围 [2-30]
dataZooms[Number,Number]数据支持的缩放级别范围,默认范围 [2-30]
opacityNumber透明度,默认 1
visiableBoolean是否显示,默认 true
zIndexNumber图层叠加的顺序值,1 表示最底层。默认 zIndex:4

1.1.2、卫星与路网图层

卫星图层与路网图层通常一起使用,这两个图层的创建和使用方法和TileLayer类似,只需要修改类名为对应的类名即可。

var satellite = new AMap.TileLayer.Satellite();
var roadNet = new AMap.TileLayer.RoadNet();

var map = new AMap.Map('container',{
         zoom:10,
         layers:[
                satellite,
                roadNet
         ]
});

1.1.3、实时交通图层

实时交通图层用于展示当前时刻的道路交通状况,不同的颜色代表不同的拥堵程度

  • 暗红色代表极度拥堵,绿色代表通畅,灰色代表路况不明。
  • 作为一种特殊的TileLayer,使用方法同卫星、路网等官方图层一样。
  • 特殊之处在于可以通过autoRefreshinterval参数指定是否自动刷新和刷新周期。
var map = new AMap.Map('container',{
     zoom:10
})

var traffic = new AMap.TileLayer.Traffic({
    'autoRefresh': true,     //是否自动刷新,默认为false
    'interval': 180,         //刷新间隔,默认180s
});

map.add(traffic); //通过add方法添加图层
//map.remove(traffic) //需要时可以移除

1.1.4、楼快图层

  • 楼块图层专门用来展示矢量的建筑物层,与标准图层中的楼块要素的效果相同,所以使用时应先通过features属性隐藏地图的默认楼块
  • 二者区别在于,楼块图层显示的级别范围较标准图层中的楼块大,可以用来实现一些特殊的效果,3D 视图下还可以为楼块指定高度比例系数heightFactor
  • 与其他图层不同,楼块图层的有效级别范围为[ 17, 20 ]
var satellite = new AMap.TileLayer.Satellite();			// 默认图层
var buildings = new AMap.Buildings({
    'zooms':[16,18],
    'zIndex':10,
    'heightFactor':2,	//2倍于默认高度,3D下有效
    'wallColor': 'red'	//楼块侧面颜色
});//楼块图层    

var map = new AMap.Map('container', {
    center: [116.397428, 39.90923],
    viewMode:'3D',
    pitch:60,
    rotation:-35,
    features:['bg','road','point'],//隐藏默认楼块
    mapStyle:'amap://styles/light',
    layers:[
             satellite,
             Buildings
            ]
    zoom: 17
});
属性类型描述
wallColorString楼块侧面颜色,支持 rgba、rgb、十六进制等
roofColorString楼块顶面颜色,支持 rgba、rgb、十六进制等
heightFactorNumber楼块的高度系数因子,默认为 1,也就是正常高度

1.1.5、室内地图

  • 当地图处在合适的级别下,移动到有室内地图的地方就会自动显示室内地图。
  • 可以通过监听地图 indoor_create 事件来获取这个室内图层,取得控制权。

默认室内图层

// 调用默认室内图层
var map = new AMap.Map('container',{
  showIndoorMap: true, //显示地图默认的室内地图图层
});
map.on('indoor_create',function(){
  map.indoorMap.showIndoorMap('B000A8VT15',4); // 显示指定 POI 室内信息
})

官方参考手册有很多成员函数:室内地图

②独立的室内图层

当然,也可以自己来创建室内图层,这时需要将地图的默认室内图层隐藏,如:

1.2、简易行政区图

  1. 世界简易行政区图层AMap.DistrictLayer.World
  2. 国家简易行政区图层 AMap.DistrictLayer.Country
  3. 省市简易行政区图层 AMap.DistrictLayer.Province

这些图层各自的使用场景为:

名称适用范围
AMap.DistrictLayer.World世界全部国家和地区的区域面和边界一并展示,可分别配置各国区域面的颜色,统一配置国界线、海岸线的颜色
AMap.DistrictLayer.Country单独展示某个国家或地区的所有省级行政区域,可配置国界颜色、分别配置各省区域的面填充色和边界颜色;中国支持全部地级市一级的展示,可配置国界颜色、省界线、市界限颜色和省、市区域的面填充色
AMap.DistrictLayer.Province单独展示一个或者组合展示多个中国行政区的区域,支持展示省级、市级、县级。可配置各省、市、县的边界颜色和面填充色

在使用这组图层之前首先需要引入AMap.DistrictLayer插件,

1.2.1、世界简易行政区图层

2、地图和覆盖物事件

除了地图展示外,当我们在地图上进行操作时,少不了要对各种交互事件进行处理。

2.1、事件绑定和解绑

  • 和大多数类库使用方式相同,直接使用 Map、覆盖物对象的 onoff 方法
var map = new AMap.Map("container");
var clickHandler = function(e) {
    console.log(e);
    alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图!');
    // alert('您在[ '+e.lnglat.lng+','+e.lnglat.lat+' ]的位置点击了地图!');
    // 触发事件的对象
    console.log(e.target);
    // 触发事件的地理坐标
    console.log(e.lnglat);
    // 触发事件的像素坐标
    console.log(e.pixel);
    // 触发事件类型
    console.log(e.type);
};

// 绑定事件
map.on('click', clickHandler);
// 解绑事件
map.off('click', clickHandler);

通过打印事件对象 e 来查看事件都包含什么属性,官方参考手册:地图和覆盖物事件

3、几何计算

3.1、距离、长度、面积

  • 空间数据计算的函数库 AMap.GeometryUtil

3.1.1、计算两点间的实际距离

当需要计算两个地理位置间的实际地面距离时,可以使用静态方法 AMap.GeometryUtil.distance,返回数据以米为单位

var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回 p1 到 p2 间的地面距离,单位:米
var dis = AMap.GeometryUtil.distance(p1, p2);

3.1.2、点到线段的最短距离

当需要计算某一点到线段的最短地面距离时,可以使用静态方法 AMap.GeometryUtil.distanceToSegment,返回数据以米为单位

var p0 = [116.450378, 39.947585];
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回 p0 到线段 p1-p2 的最短地面距离,单位:米
var dis = AMap.GeometryUtil.distanceToSegment(p0, p1, p2);

3.1.3、计算点到路径的最短距离

当需要计算某一点到一段路径的最短地面距离时,可以使用静态方法 AMap.GeometryUtil.distanceToLine,返回数据以米为单位。该方法与上条的区别在于该方法支持多点组成的线段。

var p0 = [116.450378, 39.947585];
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
var p3 = [116.466171, 39.937977];
// 返回 p0 到线段 p1-p2-p3 的最短地面距离,单位:米
var dis = AMap.GeometryUtil.distanceToSegment(p0, [p1, p2, p3]);

3.1.4、计算路径的实际长度

当需要计算某段路径的实际长度时,可以使用静态方法 AMap.GeometryUtil.distanceOfLine,返回数据以米为单位

var p0 = [116.450378, 39.947585];
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回线段 p0-p1-p2 的实际长度,单位:米
var dis = AMap.GeometryUtil.distanceOfLine([p0, p1, p2]);

3.1.5、计算封闭区域的面积

当需要计算指定路径围成的闭合区域面积时,可以使用静态方法 AMap.GeometryUtil.ringArea,返回数据以平方米为单位。

var p0 = [116.450378, 39.947585];
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回点 p0-p1-p2 围成的闭合区域面积,单位:平方米
var area = AMap.GeometryUtil.ringArea([p0, p1, p2]);

还有很多其他方法,具体参考官方手册即可:官方色手册

4、服务

4.1、路线规划

路线规划方式有驾车、公交、步行、骑乘和货车等,以驾车规划为例

  1. 获取驾车路线规划数据

  2. 使用默认UI显示驾车路线详情

  3. 使用驾车规划拖拽插件编辑路线

  4. 其它路线规划 API

4.1.1、获取驾车路线规划数据

  1. 引入 AMap.Driving 插件

  2. 使用关键字获取驾车规划数据。

  3. 使用默认UI显示驾车路线规划

    • 使用AMap.Driving获取驾车路线规划发起搜索后,需要开发者根据返回的路线方案数据结构自行显示路线详情并结合AMap.Polyline绘制到地图上。
    • 同时高德JS API还提供了默认的UI帮助开发者节省时间、提升效率,自动在地图上显示结构化的路线详情。
<body>

    <div id="container"></div>
    <div id="panel"></div>
    <script>
        var map = new AMap.Map('container', {
            zoom: 11, //级别
            center: [116.397428, 39.90923], //中心点坐标
        });
        AMap.plugin('AMap.Driving', function() {
            var driving = new AMap.Driving({
                // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                policy: AMap.DrivingPolicy.LEAST_TIME,
                // map 指定将路线规划方案绘制到对应的AMap.Map对象上
                map: map,
                // panel 指定将结构化的路线详情数据显示的对应的DOM上,传入值需是DOM的ID
                panel: 'panel'
            })

            var points = [{
                keyword: '北京市地震局(公交站)',
                city: '北京'
            }, {
                keyword: '亦庄文化园(地铁站)',
                city: '北京'
            }]

            // 搜索完成后,将自动绘制路线到地图上
            driving.search(points);
        })
    </script>
</body>

这么做其实只将路线画到了地图上,但是默认的 UI 没有显示,这是因为我们没有给装路线规划的盒子设置样式,这里官方demo有样式设置,并且还引入了几个 js 文件,我们需要默认UI 时直接复制即可。地点关键字+驾车路线规划

new AMap.Driving 的参数如下

属性类型描述
mapMapAMap.Map 对象,展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上。
policynumber驾车路线规划策略
extensionsstring默认值:base,返回基本地址信息。当取值为:all,返回DriveStep基本信息+DriveStep详细信息
panelstring|htmlElement结果列表的HTML容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。
showTrafficboolean设置是否显示实时路况信息,默认设置为true。 显示绿色代表畅通,黄色代表轻微拥堵,红色代表比较拥堵,灰色表示无路况信息。

官方还提供了其他路线规划,例如货车、公交、步行、骑行等。

4.2、行政区查询

在开发地图产品的时候,经常会有获取某一行政区下所有下级行政区信息的需求。以获取中国所有省份信息为例,

  1. 引入插件 AMap.DistrictSearch
AMap.plugin('AMap.DistrictSearch', function () {
  var districtSearch = new AMap.DistrictSearch({
    // 关键字对应的行政区级别,country表示国家
    level: 'country',
    //  显示下级行政区级数,1表示返回下一级行政区
    subdistrict: 1
  })
  
  // 搜索所有省/直辖市信息
  districtSearch.search('中国', function(status, result) {
    // 查询成功时,result即为对应的行政区信息
  })
})
// 除了获取所有省份/直辖市信息外,您可以通过修改level和subdistrict并配合search传入对应keyword查询对应信息。

AMap.DistrictSearch 的参数如下

属性类型描述
levelstring关键字对应的行政区级别或商圈,可选值: country:国家 province:省/直辖市 city:市 district:区/县 biz_area:商圈
showbizboolean是否显示商圈,默认值true 可选为true/false,为了能够精准的定位到街道,特别是在快递、物流、送餐等场景下,强烈建议将此设置为false
extensionsstring是否返回行政区边界坐标点,默认值:base,不返回行政区边界坐标点,取值:all,返回完整行政区边界坐标点
subdistrictnumber显示下级行政区级数(行政区级别包括:国家、省/直辖市、市、区/县4个级别),商圈为区/县下一 级,可选值:0、1、2、3,默认值:1 0:不返回下级行政区 1:返回下一级行政区 2:返回下两级行政区 3:返回下三级行政区

这里看官方示例DEMO即可,官方文档其实代码并不支持运行,在官方文档看了基本信息参数等去官方Demo看,其中引入的 css、js 文件我们可以不用管,只要注意看其中的 js 逻辑即可

以上是关于高德地图APIWeb地图开发系列的主要内容,如果未能解决你的问题,请参考以下文章

arcgis api for js入门开发系列十七在线地图(天地图百度地图高德地图)

Androidd 移动端地图开发之高德地图全功能系列开发二(搜索模块)

百度地图sdk和高德地图sdk 哪一个更加适合ios 或者安卓平台开发

android开发如何用高德地图进行模拟定位.

高德地图怎样实现实时定位,得到当前地点的坐标,位置

高德地图怎样实现实时定位,得到当前地点的坐标,位置