地图集成方案

1. 基础概念

1.1. POI & AOI

知乎 - 全国 AOI 数据，POI 边界数据 2.0

1.2. GEOJSON

鲲鹏 Web 数据抓取 - 百度地图 POI 的边界 GEOJSON 数据采集

1.3. WebGL

测试浏览器是否支持 WebGL：https://get.webgl.org/
测试浏览器 WebGL 渲染性能：https://webglsamples.org/field/field.html

2. 百度地图

官方文档：

2.1. AIO 获取

Note：参考搜索关键字：queryHouseOutlineCallback（参考找房实验室的实现方案）。

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) {
                            console.log(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"
                                }); //建立多边形覆盖物
                                
                                
                                // let arr = ''
                                // ply.Bo.forEach(a=>{
                                //     // arr.push([a.lng,a.lat])
                                //     arr+=arr?(','+a.lng+','+a.lat):(a.lng+','+a.lat)
                                // }) //用来把轮廓集合根据需要的格式进行打印出来
                                // console.log(arr)
                                console.log(ply.Bo)
                                
                                
                                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>

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
213
214
215
216

3. 第三方案例

3.1. 找房实验室

官方网站：https://ditu.jinfuyun.cn/static/index.html。

3.1.1. API 分析

3.1.1.1. 通过小区名获取 POI

GET 请求示例：

Text

https://api.map.baidu.com/place/v2/search?output=json&scope=2&q=%E7%A3%90%E5%9F%BA%E4%B8%AD%E5%BF%83&region=%E5%8E%A6%E9%97%A8%E5%B8%82&ak=Zgig91wyDZW0l8SeETdQMGoek2q7oogO&callback=queryHouseCallback&_=1708247404871

响应示例。

3.1.1.2. 通过 POI 获取 AOI

GET 请求示例：

Text

https://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18&uid=8649315416de1ae28c1a8971&callback=queryHouseOutlineCallback&_=1708247404872

响应示例。

参考链接

地图集成方案 ​

1. 基础概念 ​

1.1. POI & AOI ​

1.2. GEOJSON ​

1.3. WebGL ​

2. 百度地图 ​

2.1. AIO 获取 ​

3. 第三方案例 ​

3.1. 找房实验室 ​

3.1.1. API 分析 ​

3.1.1.1. 通过小区名获取 POI ​

3.1.1.2. 通过 POI 获取 AOI ​