0、开始

本篇文章介绍如何使用高德地图 Web API,在地图中显示具有高度和面的自定义多边形标注。

1、准备工作

首先申请高德地图的key。申请完毕之后,新建一个空白的 html 页面,引入需要的资源:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德地图开发示例</title>
    <style>
        html,
        body,
        #map {
            height: 100%;
        }
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
</body>

</html>
<script src="https://webapi.amap.com/maps?v=2.0&key=your_key"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=your_key"></script>
<script>
    //我们就在这里编写代码
</script>

2、初始化

初始化地图:

var map = new AMap.Map('map', {
    zoom: 17.6,
    viewMode: '3D', //使用3D模式才能显示3D标注
    pitch: 45, //倾斜角度
    mapStyle: 'amap://styles/darkblue', //使用黑色地图看起来更神秘…
    center: [116.40,39.92], //使用故宫作为地图中心点
    showBuildingBlock: false, //不显示建筑块
    showLabel: false, //不显示街道名之类的标签
});

接着初始化Loca

var loca = window.loca = new Loca.Container({ map });

3、获取多边形数据

接受的数据是标准GeoJSON格式的,我们需要准备GeoJSON格式的数据。格式如下:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            lng,
                            lat
                        ],
                        ......
                    ]
                ]
            }
        },
        ......
    ]
}

有4种方法获取数据

  1. 使用阿里的DataV.GeoAtlas地理小工具,不过,对于一些偏远地区,地图上没有道路和建筑,一片空白,没办法按照所需目标的轮廓标注多边形,而卫星地图模式清晰度非常差。
  2. 使用高德地图官方提供的地图快速生成工具,利用“添加标注”功能,把需要标注的区域标注好,然后点击“获取代码”按钮,找到features变量,这里面包含了我们想要的数据,但并不是GeoJSON格式,不过这对于程序员来说非常简单,只需要非常简单的处理,就能获取到上面代码中coordinates部分需要的数组,这里不再赘述。
  3. 使用这个GeoJSON在线编辑器,它的卫星地图比较清晰,但有三个缺点:1是可能需要科学上网,它自带3种地图模式,第一种不能显示。另外,地图缩放后,需要拖动一下地图,才能触发地图的加载。2是标注对于高德地图有所偏移,需要处理,一般是将获取到的经纬度统一加减一些比较小的数值,大约是在小数点后3、4位。3是经度的表示方法可能与高德地图不同,例如-243.63281249999997,需要如下处理:

    360 - Math.abs(-243.63281249999997)

  4. 当然,也可以使用坐标拾取器,一个点一个点地获取和填写coordinates数组。需要注意的是,必须要登录高德地图网站,才能获取精确的位置。

这里使用第二种方法,获取到故宫的外形如下:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": 10647,
            "properties": {},
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            116.39156454,
                            39.92287908
                        ],
                        [
                            116.40190578,
                            39.92322019
                        ],
                        [
                            116.40229494,
                            39.91337002
                        ],
                        [
                            116.39189816,
                            39.91294358
                        ],
                        [
                            116.39156454,
                            39.92287908
                        ]
                    ]
                ]
            },
            "bbox": [
                116.39156454,
                39.91294358,
                116.40229494,
                39.92322019
            ]
        }
    ],
    "gid": 7711
}

新建polygon.json,将上面的数据粘贴进去。

4、将数据添加到地图上

代码如下:

var geo = new Loca.GeoJSONSource({
    url: './polygon.json',
});

var pl = new Loca.PolygonLayer({
    zIndex: 120,
    opacity: 0.8,
    shininess: 10,
    hasSide: true,
});

pl.setSource(geo);

pl.setStyle({
    //设置不同面的颜色
    topColor: 'rgba(43,83,144,0.5)',
    sideTopColor: 'rgba(43,83,144,0.5)',
    sideBottomColor: 'rgba(43,83,144,0.5)',
    height: 2000, //物体的高度
    altitude: 0,
});

loca.add(pl);

这段代码非常简单。需要注意的是,高德的文档或者示例代码可能不一致,如果你遇到代码不起作用的情况,需要尝试改为 API 文档中的代码或者示例代码中的代码。

下面是显示效果:

1.png

这是某工厂的建筑:

2.png

除了三维多边形,还可以添加许多东西,详情参考Loca数据可视化API

End

标签: GIS, 高德地图

评论已关闭