地图小区景点边界轮廓实现

十一月 01, 2018 15284

效果截图

最近我们就有一个需求，需要标识出一些热门场所的人流的热力图情况，同时需要给出该热门场所的边界轮廓。经过查看百度地图和高德地图的开发者 API 文档，发现并没有这类公共接口提供我们使用。目前地图能够提供我们使用的，基本只能是一些行政区划的边界范围，这个在我之前的文章中也有写过，大家可以参照《仿链家地图找房的简单实现》。

那么现在面临的需求该如何实现呢？

通过查看地图功能的接口调用情况和在网上查询相关资料，最终我们找到了下面这个“不算是方法的方法”。

  • 使用了地图的相关 API 接口获取相关数据
  • API 接口不是官方给出的，所以也就面临着稳定性的问题，可能随时被关（高德的只能简单参考，本身就存在较大缺陷，后面会说）

实现思路

  • 通过地图的 POI 查询服务获取到兴趣点 id

    那么什么是 POI 呢？

    检索服务提供某一特定地区的兴趣点位置查询服务（POI：Point of Interest，感兴趣点）

    相关的官方文档请参照以下地址：

  • 通过兴趣点 id 获取该兴趣点的详细信息

    这里面需要用到的相关 API 就需要我们查看地图的执行过程，找到对应的 API 了。（也希望各个地图官方能够给出官方的方法吧）

PS:地图功能的使用情况在本篇不做说明，具体申请相关 Key 的过程请分别参照官网说明即可。

下面我们来分别给出百度地图和高德地图的实现方法：

百度地图实现

闲话休谈，咱们直接上码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
</html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>百度地图DEMO</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的AK"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        var queryHouseOutline = function(hid, callback) {
            var baseURL = 'http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18';
            var url = baseURL + "&uid=" + hid;
            callback && (window.queryHouseOutlineCallback = callback);
            $.ajax({
                type: "get",
                async: false,
                url: url,
                dataType: "jsonp",
                jsonpCallback: "queryHouseOutlineCallback",
                success: function(datas) {}
            });
        };

        /**
         * 模糊查询小区信息, 无返回值
         * @param {} house  小区名称
         * @param {} city   所属城市名称
         * @param {} ak     百度地图AK
         * @param {} callback   回调函数，该函数可以接收到请求的返回值
         */
        var queryHouse = function(house, city, ak, callback) {
            var baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2';
            var url = baseURL + "&q=" + house + "&region=" + city + "&ak=" + ak;
            callback && (window.queryHouseCallback = callback);
            $.ajax({
                type: "get",
                async: false,
                url: url,
                dataType: "jsonp",
                jsonpCallback: "queryHouseCallback",
                success: function(datas) {}
            });
        };

        /**
         * 墨卡托坐标转百度坐标
         * @param {} coordinate
         * @return {}
         */
        var coordinateToPoints = function(map, coordinate) {
            var points = [];
            if (coordinate) {
                var arr = coordinate.split(";");
                if (arr) {
                    for (var i = 0; i < arr.length; i++) {
                        var coord = arr[i].split(",");
                        if (coord && coord.length == 2) {
                            var mctXY = new BMap.Pixel(coord[0], coord[1]);
                            var project = map.getMapType().getProjection();
                            var point = project.pointToLngLat(mctXY);
                            points.push(new BMap.Point(point.lng, point.lat));
                        }
                    }
                }
            }
            return points;
        };
        /**
         * 墨卡托坐标解析
         * @param {} mocator
         * @return {}
         */
        var parseGeo = function(mocator) {
            if (typeof mocator != 'string') {
                return {};
            }
            var t = mocator.split("|");
            var n = parseInt(t[0]);
            var i = t[1];
            var r = t[2];
            var o = r.split(";");
            if (n === 4) {
                for (var a = [], s = 0; s < o.length - 1; s++) {
                    "1" === o[s].split("-")[0] && a.push(o[s].split("-")[1]);
                }
                o = a;
                o.push("");
            }
            var u = [];
            switch (n) {
                case 1:
                    u.push(o[0]);
                    break;
                case 2:
                case 3:
                case 4:
                    for (var s = 0; s < o.length - 1; s++) {
                        var l = o[s];
                        if (l.length > 100) {
                            l = l.replace(/(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*),(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*)(,)/g,
                                "$1,$2;");
                            u.push(l);
                        } else {
                            for (var c = [], d = l.split(","), f = 0; f < d.length; f += 2) {
                                var p = d[f];
                                var h = d[f + 1];
                                c.push(p + "," + h);
                            }
                            u.push(c.join(";"))
                        }
                    }
                    break;
                default:
                    break;
            }

            if (u.length <= 1) {
                u = u.toString();
            }

            var result = {
                type: n,
                bound: i,
                points: u
            };
            return result;
        };


        var map = new BMap.Map("allmap"); // 创建Map实例
        map.centerAndZoom("北京", 19);
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

        map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放

        /**
         * 第一个参数是城市名，第二参数是小区名
         */
        var showArea = function(city, area) {
            queryHouse(area, city, "你申请的AK", function(data) {
                if (data.message == 'ok') {
                    var houses = data.results;
                    if (houses && houses.length > 0) {
                        var house = houses[0];
                        queryHouseOutline(house.uid, function(houseOutline) {
                            var geo = houseOutline.content.geo;
                            if (!geo) {
                                var location = house.location;
                                var point = new BMap.Point(location.lng, location.lat);
                                map.centerAndZoom(point, 19);
                                var marker = new BMap.Marker(point);
                                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                                map.addOverlay(marker);
                            } else {
                                map.clearOverlays();
                                var geoObj = parseGeo(geo);
                                //边界点
                                var points = coordinateToPoints(map, geoObj.points);
                                var ply = new BMap.Polygon(points, {
                                    strokeWeight: 2,
                                    strokeColor: "#F01B2D",
                                    strokeOpacity: 0.9,
                                    fillColor: "transparent"
                                }); //建立多边形覆盖物
                                map.addOverlay(ply); //添加覆盖物
                                map.setViewport(ply.getPath()); //调整视野
                            }
                        });
                    }
                }
            });
        };

        showArea($('#cityId').val(), $('#areaId').val());

        $('#showBtn').click(function() {
            debugger;
            showArea($('#cityId').val(), $('#areaId').val());
        });

        $("#areaId").keydown(function(e) {
            if (event.keyCode == "13") {
                showArea($('#cityId').val(), $('#areaId').val());
            }
        })
    });
    </script>
</head>

<body>
    <table>
        <tr>
            <td>城市:</td>
            <td>
                <input id="cityId" type="text" value="北京" />
            </td>
            <td>小区:</td>
            <td>
                <input id="areaId" type="text" value="故宫博物院" />
            </td>
            <td>
                <button id="showBtn">显示</button>
            </td>
        </tr>
    </table>
    <div id="allmap" style="width: 90vw; height: 90vh;"></div>
</body>

</html>

相关的代码注释都有所添加，参照即可。其中需要注意的是百度地图获取到的坐标点需要进行转换成百度地图识别的点位形式。
另外，边界的描画使用到的是地图的 Polygon 功能，相关内容请参照

高德地图实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
</html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>高德地图DEMO</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=你申请的AK"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var map = new AMap.Map('allmap', {
            zoom: 19,
            center: [116.397428, 39.90923]
        }); // 创建Map实例

        /**
         * 第一个参数是城市名，第二参数是小区名
         */
        var showArea = function(city, area) {
            queryHouse(area, city, "你申请的AK", function(data) {
                console.error(data)
                if (data.status == 1) {
                    var houses = data.pois;
                    if (houses && houses.length > 0) {
                        var house = houses[0];
                        queryHouseOutline(house.id, function(houseOutline) {
                            console.error("get outline success");

                            var pathPoints = houseOutline.data.spec.mining_shape.shape;

                            var tmpPath = pathPoints.split(";");

                            var points = [];
                            tmpPath.forEach(function(value, index, array) {
                                points.push(value.split(","))
                            });

                            map.clearMap();

                            var ply = new AMap.Polygon({
                                map: map,
                                path: points,
                                strokeColor: "#F01B2D",
                                fillColor: "transparent"
                            }); //建立多边形覆盖物

                            map.setFitView(); //调整最佳显示
                        });
                    }
                }
            });
        };

        var queryHouseOutline = function(hid, callback) {
            var baseURL = 'https://www.amap.com/detail/get/detail';
            $.ajax({
                type: "get",
                data: {
                    id: hid
                },
                url: baseURL,
                dataType: "json",
                success: function(datas) {
                    callback(datas)
                }
            });
        };

        /**
         * 模糊查询小区信息, 无返回值
         * @param {} house  小区名称
         * @param {} city   所属城市名称
         * @param {} ak     高德地图AK
         * @param {} callback   回调函数，该函数可以接收到请求的返回值
         */
        var queryHouse = function(house, city, ak, callback) {
            var baseURL = 'http://restapi.amap.com/v3/place/text?&keywords=' + house + '&city=' + city + '&output=json&offset=20&page=1&key=' + ak;
            callback && (window.queryHouseCallback = callback);
            $.ajax({
                type: "get",
                async: false,
                url: baseURL,
                dataType: "jsonp",
                jsonpCallback: "queryHouseCallback",
                success: function(datas) {}
            });
        };

        showArea($('#cityId').val(), $('#areaId').val());

        $('#showBtn').click(function() {
            showArea($('#cityId').val(), $('#areaId').val());
        });

        $("#areaId").keydown(function(e) {
            if (event.keyCode == "13") {
                showArea($('#cityId').val(), $('#areaId').val());
            }
        })
    });
    </script>
</head>

<body>
    <table>
        <tr>
            <td>城市:</td>
            <td>
                <input id="cityId" type="text" value="北京" />
            </td>
            <td>小区:</td>
            <td>
                <input id="areaId" type="text" value="故宫博物院" />
            </td>
            <td>
                <button id="showBtn">显示</button>
            </td>
        </tr>
    </table>
    <div id="allmap" style="width: 90vw; height: 90vh;"></div>
</body>

</html>

高德地图的实现方式根据实际的效果来看，本身应该是做了 API 接口限制的处理，经常会出现获取不到详细信息或者给出的详细信息中的边界信息数据不准确。
这里只是作为一个对比参照，高德地图不推荐来做这个需求，API 接口稳定性太差。

后记

① 百度地图会涉及到功能接口配额的问题

配额截图

主要会涉及到上面的地点检索配额，如果只是个人简单使用的，可以注册个人开发者，基本配额就够使用了

② 高德地图没有找到配额相关的数据，毕竟走的非正规手段吧

③ 百度地图和高德地图对于一些位置的边界数据不同

有些地点只会在其中一个能够获取到（高德地图能够返回数据的情况下）

④ 高德地图在检索位置时，能够支持全拼音输入，也能检索出来（感觉这个厉害，但是中文多音字处理不知道会怎么样）

参考资料：

百度地图小区边界（轮廓）处理
高德地图之 python 爬取 POI 数据及其边界经纬度(根据关键字在城市范围内搜索)

查看评论