mapbox

基于Turf.js教你快速实现地理围栏的合并拆分

隐身守侯 提交于 2020-08-19 13:50:29
以下内容转载自totoro的文章《几何计算-基于Turf.js实现多边形的拆分及合并》 作者:totoro 链接: https://blog.totoroxiao.com/geo-polygon-split-union/ 来源: https://blog.totoroxiao.com/ 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 JavaScript API GL 近期为支持物流行业实现了几何图形编辑器,用户可通过编辑器接口进行点、线、面、圆的绘制和编辑。在物流行业中常见的使用场景是配送区域及地理围栏的绘制,常会有对已有区域进行拆分或者合并的需要,所以编辑器也提供了相应的功能。本文介绍了如何基于Turf实现多边形的拆分及合并。 背景介绍 多边形的拆分合并 多边形的拆分是指将多边形沿着线切分为几个多边形。如下图所示,不仅可以沿线一分为二,当线与多边形有多段相交时也可以分为多份,另外当多边形带洞(环多边形)时也可以在拆分后保持洞的形状。 多边形的合并是指将多个多边形合并为一个多边形,其前提条件是多边形之间有交叉区域或者共边。如下图所示,完全共边或者部分共边都可以合并,当有交叉时会贯通交叉部分。 Turf.js 不难发现,多边形的拆分合并中会有大量且复杂的几何计算,包括点、线、面相互之间的相交、包含等计算。不过我们并不需要造轮子,可以使用Turf

3dTiles 数据规范详解[4.5] *一个被废弃的非正式瓦片规范

泪湿孤枕 提交于 2020-08-16 17:57:20
此部分尚未纳入正式 3dTiles 规范。 除了 b3dm、i3dm、pnts以及复合类型 cmpt,其实还有一种尚未纳入规范的瓦片类型:二维矢量瓦片。 实际上,矢量瓦片已经有 MapBox 的实现了,但是 Cesium 并未兼容,需要自己写 DataSource 加载。 二维矢量瓦片:Vctr 这部分已经被官方团队废止了,不过在关闭分支前,我恰好收集过这种瓦片的定义,并且在 1.66版本(至少在这个版本我找到过) Cesium 源代码中是预先设置有这种类型的加载代码的,App目录也存在这种瓦片类型的 3dtiles。 我们可以拿来短暂的学习,并与MapBox提供的 矢量瓦片 对比。 ① 文件头部定义 这回头部长达11个属性: 属性名 字节长 类别 说明 magic 4byte,下同 char[4] 标识符,字符串常量 "vctr" version / uint32,下同 版本,未指定,应该是1 byteLength / / 瓦片文件大小 featureTableJSONByteLength / / 要素表JSON二进制字符串长 featureTableBinaryByteLength / / 要素表体二进制数据大小 batchTableJSONByteLength / / 批量表JSON二进制字符串长 batchTableBinaryByteLength / /

1分钟教你完美解决地图开发中WebGL着色器32位浮点数精度损失问题

放肆的年华 提交于 2020-08-15 15:53:39
以下内容转载自木的树的文章《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

文字渲染一探

爷,独闯天下 提交于 2020-08-12 20:10:33
引子 近一个月都在与字体打交道,查阅了不少资料。 发现国内很少有这方面的一些资源,有点奇怪。 故此,想稍微梳理一下这方面的一些资料以及信息,方便对这方面感兴趣的朋友参阅。 文字渲染的组成 文字渲染严格意义上来说包含几个主要的核心模块,分别是: 1.字体光栅化 FreeType 它是一个软件字体引擎,它被设计成小巧、高效、可高度定制和可移植,同时能够生成高质量的输出(字形图像)。它还可以用于图形库、显示服务器、字体转换工具、文本图像生成工具和许多其他产品。 2.字体适配 Fontconfig 主要用于配置、定制管理系统里的 字体 ,简单的说就是通过给出的字体信息,例如粗体,斜体等,找到现有系统中最匹配的这些特征的字体文件。 3.Unicode文本双向算法 FriBidi 主要用来转换不同语系中存在的文本方向问题,例如右向左的文本, 翻转后为左向右顺序的文本。 4.文字塑形 HarfBuzz HarfBuzz是一种文字塑形布局引擎(text shaping library),它主要将Unicode转换为格式正确且位置正确的字形输出。 简单地说就是用于适配全世界不同语言的文字编码布局。 另一个非常知名库是 ICU ,而HarfBuzz的实现中将其作为第三方库引入 5.布局渲染 Cairo 或 Skia Graphics Library 当你拿到字体字形的数据之后,毫无疑问,

局域网Cesium离线影像及瓦片影像地图加载

房东的猫 提交于 2020-08-12 04:44:28
1、Cesium简介 优点: cesium展示地图数据效果比较好,解析2D地图各种不同服务类型的数据源,比如百度地图、天地图、arcgis地图、BingMap、openStreetMap、MapBox等等;解析地形图加载;解析3D模型,包括动态加载以及3Dtitles切片形式加载展示,尤其是3Dtitles,大大的加快了展示3D模型的展示效率; Cesium封装部分地图控件,直接调用即可,不用自己写; 缺点: 跟商业3DGIS软件对比,比如skyline,cesium三维分析功能较弱, cesium官网关于三维分析的例子难以找到(需要自己底层去实现),大多是以展示数据以及渲染数据为主的例子; 尚未提供交互式标绘工具Draw接口,2DGIS一般都是提供Draw工具的,比如arcgis api以及openlayer api;cesium想要绘制点、线、面,只能通过代码来绘制,貌似不能在线手动画; 没有地图量算工具、地图比例尺、拉框缩放等,这些地图基本工具,在cesium都需要自己来写实现。 2、软件下载瓦片并发布地图服务方式 软件环境: cesium1.25,tomcat7 1,首先使用XX地图下载器,破解版4.6,下载全球高德影像图,我下载1-7级,大概几百兆,比较快,第八级1个多G,指数级增长,学习阶段不需要太多。 下载操作:首先缩小地图,框选全球地图,双击,弹出下载页面

文字渲染一探

社会主义新天地 提交于 2020-08-09 11:55:16
引子 近一个月都在与字体打交道,查阅了不少资料。 发现国内很少有这方面的一些资源,有点奇怪。 故此,想稍微梳理一下这方面的一些资料以及信息,方便对这方面感兴趣的朋友参阅。 文字渲染的组成 文字渲染严格意义上来说包含几个主要的核心模块,分别是: 1.字体光栅化 FreeType 它是一个软件字体引擎,它被设计成小巧、高效、可高度定制和可移植,同时能够生成高质量的输出(字形图像)。它还可以用于图形库、显示服务器、字体转换工具、文本图像生成工具和许多其他产品。 2.字体适配 Fontconfig 主要用于配置、定制管理系统里的 字体 ,简单的说就是通过给出的字体信息,例如粗体,斜体等,找到现有系统中最匹配的这些特征的字体文件。 3.Unicode文本双向算法 FriBidi 主要用来转换不同语系中存在的文本方向问题,例如右向左的文本, 翻转后为左向右顺序的文本。 4.文字塑形 HarfBuzz HarfBuzz是一种文字塑形布局引擎(text shaping library),它主要将Unicode转换为格式正确且位置正确的字形输出。 简单地说就是用于适配全世界不同语言的文字编码布局。 另一个非常知名库是 ICU ,而HarfBuzz的实现中将其作为第三方库引入 5.布局渲染 Cairo 或 Skia Graphics Library 当你拿到字体字形的数据之后,毫无疑问,

地图开发中WebGL着色器32位浮点数精度损失问题

若如初见. 提交于 2020-08-08 16:48:42
以下内容转载自木的树的文章《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

最全vue的vue-amap使用高德地图插件画多边形范围

江枫思渺然 提交于 2020-08-07 01:32:26
一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWorker' Vue.use(VueAMap) Vue.use(ElementUI) VueAMap.initAMapApiLoader({ // 高德的key key: '你的高德key', // 插件集合 plugin: [ 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geocoder', 'AMap.Geolocation' ], // 高德 sdk 版本,默认为 1.4.4 v: '1.4.10' }) Vue.config