【高德地图API】Web地图开发系列(二)

生命是有光的

已于 2023-09-01 21:32:53 修改

阅读量4.8k

点赞数 13

分类专栏： # 高德地图api灬太乙文章标签： javascript

于 2021-09-30 17:29:53 首次发布

本文链接：https://blog.csdn.net/Augenstern_QXL/article/details/120570158

版权

高德地图api灬太乙专栏收录该内容

2 篇文章 3 订阅

订阅专栏

✍、高德地图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]
opacity	Number	透明度，默认 1
visiable	Boolean	是否显示，默认 true
zIndex	Number	图层叠加的顺序值，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，使用方法同卫星、路网等官方图层一样。
特殊之处在于可以通过autoRefresh和interval参数指定是否自动刷新和刷新周期。

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
});

属性	类型	描述
wallColor	String	楼块侧面颜色，支持 rgba、rgb、十六进制等
roofColor	String	楼块顶面颜色，支持 rgba、rgb、十六进制等
heightFactor	Number	楼块的高度系数因子，默认为 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、简易行政区图

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

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

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

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

1.2.1、世界简易行政区图层

2、地图和覆盖物事件

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

2.1、事件绑定和解绑

和大多数类库使用方式相同，直接使用 Map、覆盖物对象的 on、off 方法

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、路线规划

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

获取驾车路线规划数据
使用默认UI显示驾车路线详情
使用驾车规划拖拽插件编辑路线
其它路线规划 API

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

引入 AMap.Driving 插件
使用关键字获取驾车规划数据。
使用默认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 的参数如下

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

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

4.2、行政区查询

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

引入插件 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 的参数如下

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