lbs

以下内容转载自面糊的文章《腾讯地图SDK距离测量小工具》 作者：面糊 链接： https://www.jianshu.com/p/6e507ebcdd93 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 前言 为了熟悉腾讯地图SDK中的QGeometry几何类，以及点和线之间的配合，编写了这个可以在地图上面打点并获取直线距离的小Demo。 使用场景 对于一些需要快速知道某段并不是很长的路径，并且需要自己来规划路线的场景，使用腾讯地图的 路线规划功能 可能并不是自己想要的结果，并且需要时刻联网。 该功能主旨自己在地图上面规划路线，获取这条路线的距离，并且可以将其保存为自己的路线。 但是由于只是通过经纬度来计算的直线距离，在精度上会存在一定的误差。 准备 腾讯地图3D SDK 在地图上添加自定义手势 Poyline的绘制 距离计算 流程 1、在MapView上添加自定义长按手势，并将手势在屏幕上的点转为地图坐标，添加Marker： - (void)setupLongPressGesture { self.addMarkerGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(addMarker:)]; [self.mapView

以下内容转载自Crape的文章《web页面上的旋转矩形碰撞》 作者：Crape 链接： https://juejin.im/post/5eede991e51d45740950c946 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 前言 本文主要是总结一下web页面中的旋转矩形的碰撞检测，碰撞算法本身并不难，只是需要注意web坐标系在计算中的影响。碰撞检测应该是在游戏等场景中很常见且基础的功能，本文记录了在 JavaScript API GL 遇到了这类碰撞问题的调研和实现的过程。 需求场景 用户在地图上实现MultiLabel文本标注覆盖物时，会由于两个label坐标过近，或者地图的旋转、缩放产生的变化而相互重叠。目前label的背景色均为透明且暂时还不支持配置，文字重叠之后识别度下降很多，就计划先实现label之间的避让功能。检测到两个label碰撞时，根据优先级选择隐藏其中的一个，保证文字的可读性。 确定算法 在JSAPI GL中，label并不是在三维空间中的，而是绘制在屏幕上的，只是会根据用户视角的移动实时计算出label在屏幕坐标中所处的位置，然后在每一帧中进行绘制。label实际上就是一行文字，我们可以把它用一个矩形包围起来，当做整体计算，因为每个字之间的相对位置并不会变

目前腾讯为大家提供了海量的街景数据，并对其服务接口做出了详细的说明（ https://lbs.qq.com/uri_v1/guide-showPano.html ）。 　　 需要注意的是这里的referer需改为key，至于后边key对应的值需自己注册自己应用的key值。 地址： https://lbs.qq.com/dev/console/key/manage 请求连接： https://apis.map.qq.com/ws/streetview/v1/image?size=640x480&pano=10141050150725145721000&heading=0&pitch=0&key=K76BZ-W3O2Q-RFL5S-GXOPR-3ARIT-6KFE5 浏览器请求结果： 直接输入连接则会失败，需设置请求头。 失败效果图： 成功效果图： （设置Referer） Python源代码 说明： 　　本次实验主要需对武汉、北京等地区的街景数据爬虫，采用的核心方法如下： 采用市区最小外包矩形坐标限定拾取街景范围； 坐标采用wgs84转高德火星坐标的方式，坐标千分位依次递增1的方式逐点查询街景图片ID； 根据街景ID获取图片并保存； 　　本文并未进行断点续爬以及相同街景去重操作，后续将完善； 　　 腾讯该接口并不稳定，维护时间距今较长，服务调用不易成功不建议使用该服务； #

链家实现的效果 分析 地图找房功能使用点聚合来实现的。官网示例如下： https://lbs.qq.com/javascript_v2/sample/overlay-markercluster.html 链家的地图找房主要分为三层。第一层为市区层，比如南山、罗湖等；第二层为片区，比如南头、科技园等；第三层则为小区。 因为第一层，第二层的数据没有那么多，这两个接口都是把所有的数据一次返回给前端。但是第三层的数据量就非常的巨大了，链家采取的是返回部分数据，将前端页面上显示的最大经纬度以及最小经纬度传给后台，后台再将筛选后的数据返回给前端。（接口地址大家可以使用 Chrome 的开发工具进行抓包，这里需要注意的是链家的接口采用 jsonp 的形式，所以需要抓取 JS） 实现 首先需要添加腾讯地图的API，这里推荐使用异步加载的方式。因为项目使用 Vue 进行开发的单页应用，有可能用户并没有进入地图找房的页面，所以这里建议在打开地图找房的页面时添加腾讯地图的API。 异步加载需要避免一个重复加载的问题，即不管用户是第几次打开地图找房，地图的 API 都是同一个。 这里为了降低代码复杂度，没有使用单例模式，具体的代码如下: const TXMap = { map: undefined, // 地图实例 // 异步加载获取api getApi (funName) { let script =

以下内容转载自木的树的文章《WebGL着色器32位浮点数精度损失问题》 作者：木的树 链接： https://www.cnblogs.com/dojo-lzz/p/11250327.html 来源：博客园 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 前言 Javascript API GL 是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅。 提供丰富的功能接口，包括点、线、面绘制，自定义图层、个性化样式及绘图、测距工具等，使开发者更加容易的实现产品构思。 充分发挥GPU的并行计算能力，同时结合WebWorker多线程技术，大幅度提升了大数据量的渲染性能。最高支持百万级点、线、面绘制，同时可以保持高帧率运行。 同步推出基于Javascript API GL的 位置数据可视化API库 ，欢迎体验。 问题 WebGL浮点数精度最大的问题是就是因为js是64位精度的，js往着色器里面穿的时候只能是32位浮点数，有效数是8位，精度丢失比较严重。 分析 在基础底图中，所有的要素拿到的都是瓦片里面的相对坐标，坐标范围在0-256之间。在每次渲染时都会重新实时计算瓦片相对中心点的一个偏移来计算瓦片自己的矩阵，这种情况下精度损失比较小，而且每个zoom级别都会加载新的瓦片，不会出现精度损失过大问题。 但是对于一些覆盖物，比如marker

以下内容转载自面糊的文章《模仿微信发送位置功能》 作者：面糊 链接： https://www.jianshu.com/p/47b3ada2e36d 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 前言 微信的发送位置功能是一个十分方便的功能，他会定位用户当前所在地点，然后请求用户周边的POI，并且还可以通过拖动地图来获取其他的位置发送给对方，本Demo是结合腾讯地图SDK来实现类似的功能。 使用场景 拖动地图选择地图的中心点，然后请求该点周边的门店信息，可以通过设置搜索分类来指定搜索门店的类型，如：美食、学校等。 准备 腾讯地图3D SDK Marker 地点检索 核心代码： 1、设置大头针，固定在地图中央，并监听地图移动的时候大头针跟随移动： - (void)mapViewRegionChange:(QMapView *)mapView { // 更新位置 _annotation.coordinate = mapView.centerCoordinate; } 2、配置周边检索功能，将检索类型设置为"美食"： - (void)searchCurrentLocationWithKeyword:(NSString *)keyword { CLLocationCoordinate2D centerCoord = self.mapView

一、背景 1.1 GATT协议 GATT （Generic Attributes Profile）的缩写，中文是通用属性协议，是已连接的低功耗蓝牙设备之间进行通信的协议。 一旦两个设备建立起了连接，GATT 就开始起作用了，这也意味着，你必需完成前面的GAP协议。 GATT使用了 ATT （Attribute Protocol）协议，ATT 协议把 Service，Characteristic 对应的数据保存在一个查找表中，查找表使用 16bit ID 作为每一项的索引。 GATT定义的多层数据结构简要概括起来就是 服务（Service） 可以包含多个 特征（Characteristic） ，每个特征包含 属性（Properties） 和 值（Value） ，还可以包含多个 描述（Descriptor） 。 1.2 属性协议（ATT） 属性协议层 负责数据检索，允许一个设备暴露一些数据块给其他设备，其他设备称之为“属性”。 在ATT环境中，展示属性的设备称之为服务器，与它配对的设备称之为客户端。链路层的主机从机和这里的服务器、客服端是两种概念，主设备既可以是服务器，也可以是客户端。从设备毅然。 1.3 GATT通信中角色 从GATT的角度来看，处于连接状态时的两个设备，它们各自充当两种角色中的一种： 服务端（Server） 包含被GATT客户端读取或写入的特征数据的设备。 客户端

当大潮退去，才知道谁在裸泳。 作者 ：A哥（YourBatman） 公众号 ：BAT的乌托邦（ID：BAT-utopia） 文末是否有彩蛋 ：有 目录 前言 正文 1、贫苦大众 游戏人生 1.1 家徒四壁 呱呱坠地 1.2 被耽误的高中 回不去的青春 2、迷茫大学 似梦年华 2.1 疲于奔命的大学四年 2.2 跌落深渊的毕业答辩 2.3 百无一成的初出茅庐 3、凤凰涅槃 程序生涯 3.1 欲练此功 必先闭关 3.2 崭新篇章 程序人生 笔耕不辍 钟情翰墨 2018年：CSDN 2020年：微信公众号 总结 文末彩蛋 前言 各位小伙伴大家好，我是A哥，一个前25年还不会写Hallo World的半残程序猿。也许你看到这个介绍心里一阵美滋滋： 卧槽，终于有一个不是大佬（话外音：并不优秀）的人可以关注了 ，一下子阳光了起来有木有。 啊，问我多大了？反正是大龄程序员一枚没跑了😁 近期，在我朋友圈看了不下5篇的“个人介绍”文章，看完之后我每每只能附上本就匮乏的赞美之词：666、牛逼牛逼、大佬带带我......每看完一篇，我的心是这样的： 24岁买房，25岁年薪50万+，26岁孩子可以帮忙打酱油......有些人过着开挂式人生，而有些人也过着“开挂式人生”~ 画外音：我们同样都有腰间盘，为何大佬们如此突出呢？得看看医生了呀😄 这就是强者的世界，大多数人（那必须包括我啊）所向往的世界

当大潮退去，才知道谁在裸泳。 作者 ：A哥（YourBatman） 公众号 ：BAT的乌托邦（ID：BAT-utopia） 文末是否有彩蛋 ：有 目录 前言 正文 1、贫苦大众 游戏人生 1.1 家徒四壁 呱呱坠地 1.2 被耽误的高中 回不去的青春 2、迷茫大学 似梦年华 2.1 疲于奔命的大学四年 2.2 跌落深渊的毕业答辩 2.3 百无一成的初出茅庐 3、凤凰涅槃 程序生涯 3.1 欲练此功 必先闭关 3.2 崭新篇章 程序人生 笔耕不辍 钟情翰墨 2018年：CSDN 2020年：微信公众号 总结 文末彩蛋 前言 各位小伙伴大家好，我是A哥，一个前25年还不会写Hallo World的半残程序猿。也许你看到这个介绍心里一阵美滋滋： 卧槽，终于有一个不是大佬（话外音：并不优秀）的人可以关注了 ，一下子阳光了起来有木有。 啊，问我多大了？反正是大龄程序员一枚没跑了😁 近期，在我朋友圈看了不下5篇的“个人介绍”文章，看完之后我每每只能附上本就匮乏的赞美之词：666、牛逼牛逼、大佬带带我......每看完一篇，我的心是这样的： 24岁买房，25岁年薪50万+，26岁孩子可以帮忙打酱油......有些人过着开挂式人生，而有些人也过着“开挂式人生”~ 画外音：我们同样都有腰间盘，为何大佬们如此突出呢？得看看医生了呀😄 这就是强者的世界，大多数人（那必须包括我啊）所向往的世界

以下内容转载自多多洛爱学习的文章《JSAPI-在地图上添加自定义覆盖物》 作者：多多洛爱学习 链接： https://juejin.im/post/5ee5f80d51882542e2695874 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 地图上的覆盖物 在地图上添加覆盖物有两种方式，一是在canvas画布上渲染，比如JSAPI GL绘制 MultiMarker/MultiPolygon 等矢量图形覆盖物就是通过编写对应图形的数据解析及渲染程序，直接绘制在底图上层。这样的渲染方式下视角变换时图形也可以实现3D形变。另一种方式是通过CSS布局将其他DOM元素叠加到地图容器之上，这种方式下视角变换时DOM元素需重新计算布局，比如JSAPI v2的 Marker/Polygon 等覆盖物，以及JSAPI GL的 InfoWindow 信息窗，这些都属于DOM覆盖物。 如果你需要叠加一个自定义的复杂元素，第一种方式的话需要实现对应的数据解析和着色器程序，需要了解WebGL的渲染原理，成本很高，且不易变通。而DOM是每个前端工程师都非常熟悉的，简单几个标签加CSS就能实现高度定制的DOM元素。但是如何将一个DOM元素正确地安置在地图上，并且随着地图平移、旋转、缩放实时调整自己的位置呢？ 这就要使用到 DOMOverlay 了