1 简述

今天继续LBS地理信息的学习，目标是写到10篇博客的时候，做出一个地图工具页面用，包含地图空间索引Geohash、S2、H3的可视化展示。

地理特征分为点（POI）、线（路径）、面（AOI），我们用高德地图导航时，其实就用到了这3个特征，简单说一下

  • 首先搜索目的地：三里屯，会搜到一个面数据，就是整个三里屯的边界范围，即AOI
  • 然后选取起点、终点，选取时下拉列表会显示多个地点，即POI
  • 最后按交通方式生成导航路径，即路径轨迹

2 POI

POI是Point of interest的缩写，中文翻译为兴趣点，是点数据。地图上任意一个位置都可以表示兴趣点，由经纬度和其他特征数据组成。

如上面说的三里屯，可以看作一个POI

POI在地图领域应用也挺多的，如：周边搜索，实时位置获取等

3 AOI

AOI是Area of Interest的简称，可以叫兴趣面，是面数据。AOI是POI更高一级的抽象，由多边形围栏边界和特征数据组成。

如高德地图搜索某个地点得到的面数据，就是一个AOI

4 路径

路径是GIS里面最复杂的特征了，是线数据。高德地图上两个位置之间的导航线路就是路径了

5 开发常用

上面说了点、线、面的特征，为了更好地理解，下面通过一个小示例，可视化地去体验数据特征

准备工作：

接着就可以开始搞了

直接上前端代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7.     <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
  8.     <title>地图显示</title>
  9.     <style>
  10.         html,
  11.         body,
  12.         #container {
  13.             width: 100%;
  14.             height: 100%;
  15.         }
  16.     </style>
  17.     <script src="https://webapi.amap.com/loader.js"></script>
  18. </head>
  19. <body>
  20. <div id="container"></div>
  21. </body>
  22. <script src="https://webapi.amap.com/maps?v=2.0&key=17e7146599b94ffcda13bbc48e1b4481"></script>
  23. <script>
  24.     var map = new AMap.Map('container', {
  25.         viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
  26.         zoom: 11, //初始化地图层级
  27.         center: [116.397428, 39.90923], //初始化地图中心点
  28.     });
  30.     //点标记
  31.     var marker = new AMap.Marker({
  32.         position:[116.39, 39.9]//位置
  33.     })
  34.     map.add(marker);//添加到地图
  36.     //线标记
  37.     var lineArr = [
  38.         [116.368,39.91], [116.371,39.94], [116.38,39.95]
  39.     ];
  40.     var polyline = new AMap.Polyline({
  41.         path: lineArr,          //设置线覆盖物路径
  42.         strokeColor: "#b706e9", //线颜色
  43.         strokeWeight: 5,        //线宽
  44.         strokeStyle: "solid",   //线样式
  45.     });
  46.     map.add(polyline);
  48.     //面标记
  49.     // 多边形轮廓线的节点坐标数组
  50.     var path = [
  51.         new AMap.LngLat(116.368904,39.913),
  52.         new AMap.LngLat(116.382122,39.807),
  53.         new AMap.LngLat(116.387271,39.707),
  54.         new AMap.LngLat(116.398258,39.913)
  55.     ];
  56.     var polygon = new AMap.Polygon({
  57.         path: path,
  58.         fillColor: '#f3e780', // 多边形填充颜色
  59.         borderWeight: 2, // 线条宽度，默认为 1
  60.         strokeColor: 'red', // 线条颜色
  61.     });
  62.     map.add(polygon);
  63. </script>
  64. </body>
  65. </html>

看一下点线面的效果图

关注我的公众号：卷福同学，分享更多技术内容哦~

[LBS学习笔记4]地理特征POI、AOI、路径轨迹的更多相关文章

  1. ArcGIS案例学习笔记3_1_地理配准案例_目视找点

    ArcGIS案例学习笔记3_1_地理配准案例_目视找点 计划时间:第3天上午 方法:地理配准/添加链接点/左键/右键/输入坐标 数据:江苏省.zip 矢量:省界,市界,GPS WGS84 地理坐标系 ...

  2. ArcGIS案例学习笔记3_1_地理配准案例_图面控制点

    ArcGIS案例学习笔记3_1_地理配准案例_图面控制点 计划时间:第3天上午 目的:地形图控制点配准 数据:地形图drg 无坐标: 步骤 1.查看地图标注 2. 地理配准,添加控制点 3.结果: 联 ...

  3. Caffe学习笔记4图像特征进行可视化

    Caffe学习笔记4图像特征进行可视化 本文为原创作品,未经本人同意,禁止转载,禁止用于商业用途!本人对博客使用拥有最终解释权 欢迎关注我的博客:http://blog.csdn.net/hit201 ...

  4. 20180821 Python学习笔记：如何获取当前程序路径

    20180821 Python学习笔记:如何获取当前程序路径 启动的脚本的路径为:D:\WORK\gitbase\ShenzhenHouseInfoCrawler\main.py 当前脚本的路径为:D ...

  5. barabasilab-networkScience学习笔记4-无标度特征

    第一次接触复杂性科学是在一本叫think complexity的书上,Allen博士很好的讲述了数据结构与复杂性科学,barabasi是一个知名的复杂性网络科学家,barabasilab则是他所主导的 ...

  6. deeplenrnig学习笔记——什么是特征

     特征是机器学习系统的原材料,对最终模型的影响是毋庸置疑的.如果数据被很好的表达成了特征,通常线性模型就能达到满意的精度. 一.特征的表示粒度:   学习算法在一个什么粒度上的特征表示,才有能发挥作用 ...

  7. MongoDB 学习笔记之 地理空间索引入门

    地理空间索引: 地理空间索引,可用于处理基于地理位置的查询. Point:用于指定所在的具体位置,我们以restaurants为例: db.restaurants.insert({name: &quo ...

  8. 3ds max学习笔记（九）-- 实例操作(路径阵列)

    栅栏 路径阵列也叫间隔工具,将选择的物体沿指定的路径进行复制.实现物体在路径上的饿均匀分布. 选择需要分布的物体对象,在视图中绘制二维图形做为路径线条. 1.选择线条,制作路径 2.选择需要分布的物体 ...

  9. Servlet学习笔记06——什么是转发，路径，状态管理？

    1.include指令 (1)作用: 告诉容器,在将jsp转换成Servlet时,将 某个文件的内容插入到该指令所在的位置. (2)语法: <%@ include file="&quo ...

随机推荐

  1. 什么是springboot？为什么要用springboot？

    一.什么是springboot? Springboot是spring发展到一定程度的产物,但并不是spring的替代品,springboot是为了让程序员更好的使用spring.Spring随着发展逐 ...

  2. 如何实现集群中的 session 共享存储？

    Session 是运行在一台服务器上的,所有的访问都会到达我们的唯一服务器上,这 样我们可以根据客户端传来的 sessionID,来获取 session,或在对应 Session 不 存在的情况下(s ...

  3. java-iov概念

    Ioc-Inversion of Control 即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象 ...

  4. resion 学习笔记

    resin是一个非常流行的web引用服务器,对servlet和jsp提供了良好的支持,自身采用java开发,支持集群,还支持PHP. resin分为普通版和专业版,主要区别是专业版支持缓存和负载均衡. ...

  5. Netty学习摘记 —— 预置SSL / HTTP / WebSocket编解码器

    本文参考 本篇文章是对<Netty In Action>一书第十一章"预置的ChannelHandler和编解码器"的学习摘记,主要内容为通过 SSL/TLS 保护 N ...

  6. Python学习--21天Python基础学习之旅(Day01、Day02)

    21天的python基础学习,使用<Python从入门到实践>,并且需要手敲书中的code,以下为整个学习过程的记录. Day01: 安装python时要选择复选框 Add Python ...

  7. （stm32f103学习总结）—DS18B20

    一. DS18B20简介 DS18B20数字温度传感器接线方便,封装后可应用于多种场合,如管道式,螺纹式,磁铁吸附式,不锈钢封装式.主要根据应用场合的不同而改变其外观.封装后的DS18B20可用于电缆 ...

  8. Vue2的右键弹出菜单（vue-contextmenu）

    给大家推荐一个基于Vue2的右键弹出菜单插件,支持单一SPA页面以及可以在循环绑定中使用. 项目地址为:https://github.com/chIIC/vue-...demo1: 父组件绑定右键事件 ...

  9. web音频流转发之AudioNode

    前言 上一章地址: web音频流转发之音频源下一张地址:web音频流转发之音视频直播在这一章我说几个我们需要用到的音频处理模块也就3个吧,包括我们转发流是需要用到的核心模块.更多模块请看MDN,或者看 ...

  10. Hadoop真分布式实现SSH免密登录

    首先需要两台服务器(CentOS安装Linux见:https://www.cnblogs.com/syq816/p/12355115.html) 伪分布式的搭建见:https://www.cnblog ...