战斗中的老胡-CSDN博客

原创 Openlayers源码实践系列：通过在ol.source.ImageCanvas中获取VectorContext对象高效率绘制海量要素（支持点、线、面）

使用OpenLayers构建项目时，有时会遇到一些性能优化的问题，比如大量要素的绘制。OpenLayers为绘制海量的点要素提供了一些手段，比如版本6之前的ol.WebGLMap，6之后的ol.layer.WebGLPoints。但是当我们需要绘制海量的其他类型要素（LineString、Polygon）时，貌似没有比较合适的方案。本文通过对VectorContext对象的研究和对源码的分析，...

2019-11-17 15:51:44 3141 3

原创 OpenLayers 6 绘制高德导航路径的蚂蚁线样式并实现箭头动画——VectorContext的重度使用

OpenLayers架构之内提供了矢量对象样式化的一些手段，但平时的使用总感觉有一些单一；而像高德、百度、腾讯地图这样的框架有着美观丰富的UI样式。从接触OpenLayers开始，就一直有一起学习的朋友讨论如何做一个像高德导航那样的路径样式，这个需求确实在很多项目中也会用到。本文就针对这个问题进行一下详细介绍。原版高德导航的路径样式OpenLayers实现的动态样式问题分析...

2019-11-03 00:18:46 8780 7

原创 OpenLayers 5 使用turf.js渲染克里金插值计算的等值面

之前Trojx同学实现了一个克里金插值渲染等值面的例子，使用的是kriging.js内置的绘图函数，然后在openlayer中利用ImageCanvas渲染。这个方法比较简便，但是有一些性能上的问题：网格切分比较小的时候，总体的网格数增加，每次重新渲染都要将整个网格数组遍历一次，交互体验不是很好；网格是以方块的形式呈现的，视觉效果不如曲线和多边形。我使用了turf.js来处理网格数据...

2019-10-14 02:06:03 11372 30

原创海量小文件前提下，针对存储系统/文件系统的IOPS测试真的科学吗？

海量小文件一般简称为LOSF(lots of samll file)，LOSF是存储系统的业界难题。通常认为大小在1KB~10MB的文件称为小文件，百万级数量及以上称为海量文件，由此量化定义海量小文件。基于SAN的传统文件系统如Ext4、XFS、NTFS以及NFS、CIFS等NAS存储系统管理LOSF的性能和效率都比较低下，主要瓶颈集中在海量文件的元数据管理、存储介质的性能限制两个方面。近年来随着闪存技术和分布式文件系统的发展，存储介质性能限制逐渐消失，但海量文件的元数据管理仍然制约着文件系统和存储系统

2021-01-14 11:30:21 831

原创 TRICK系列：Openlayers 中实现Draw通过键盘按键取消全部绘制、取消上一步绘制

Draw是OpenLayers中常用的一个组件，默认是单击绘制，双击结束绘制。但是在实际工程中常常需要在绘制过程中使用按键来取消全部绘制、取消上一步绘制，如何做到呢？

2020-05-05 02:03:05 3264 1

转载通过在ol.source.ImageCanvas中获取VectorContext对象高效率绘制海量要素

使用OpenLayers构建项目时，有时会遇到一些性能优化的问题，比如大量要素的绘制。OpenLayers为绘制海量的点要素提供了一些手段，比如版本6之前的ol.WebGLMap，6之后的ol.layer.WebGLPoints。但是当我们需要绘制海量的其他类型要素（LineString、Polygon）时，貌似没有比较合适的方案。本文通过对VectorContext对象的研究和对源码的分析，...

2020-04-17 23:13:16 2832 18

原创简简单单，解决 GeoServer 的跨域（CORS）问题

前言先贴一张常见的报错信息：相信很多同学在WebGIS开发中经常遇到。这个问题在各种社区里也是被问了很多次了，解决办法也不尽相同，那么这个CORS错误到底是个啥意思？怎么解决呢？跨域资源共享(CORS)首先说说CORS这个东西：以下是MDN关于CORS的解释跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器让运行在一个 origin (do...

2020-04-15 01:10:29 2830

原创 Openlayers源码实践系列：ol.layer.Vector矢量地图图层获取要素为空的问题原因分析及解决（基于版本6，数据使用GeoJSON）

前言ol.layer.Vector(vectorLayer)是我们在OpenLayers开发中使用非常频繁的一个图层容器类，有时我们需要在交互中获取矢量图层中的要素(Feature)对象，但是在某些情形下，自己觉得毫无问题的代码，却无法获取到想要的数据。本文结合源码浅析一下这个问题的原因，并提出解决的方法。现象先来看一段代码：var vectorLayer = new Ve...

2020-04-04 04:30:51 2400

原创 Openlayers源码实践系列：探索layer的渲染机制——从分析OpenLayers 6 的WebGLPointsLayer动画效果实现说起

最新的OpenLayers 6.1.1 中提供了一个基于WebGL用于渲染大量点要素并且支持类expressions语法描述的动画渲染。OpenLayers6之前的老版本是不支持动画渲染的，如果想要实现动画要素效果，需要利用OpenLayers的render机制来实现动画帧的渲染...

2019-12-28 01:01:04 3887

原创 OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解

引言OpenLayers可以通过代码绘制多种几何形状，也可以通过draw类型的交互组件绘制几何形状，官方实例提供了类如圆、折线、矩形、星形等方法。除此之外，椭圆这种图形其实也是非常常见的几何图形，但是官方没有提供现成的API，本文从使用代码绘制和交互绘制两种途径详细讲解一下椭圆的绘制。一点理论基础众所周知，OGC提供的标准geometry类型只有点、线、面以及它们的组合，并没有圆和...

2019-12-23 02:00:10 3347 2

原创 OpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图

这是一个做完很久的demo，主要还是为了摆脱echarts那种“图层脱线”的问题，提升可视化渲染性能。使用的数据还是来自echarts，模拟了全国各地到湖南重点景区的客流情况。分析要实现动态迁徙图的效果，主要需解决两个问题曲线的绘制。因为给出的数据只有起点和终点两个点位，所以想要绘制曲线可以参考turf中的bezier曲线生成API。点迹的动画播放。仍然要依靠render机...

2019-12-07 00:00:56 5991 19

原创 OpenLayers 6 实现带有4个控制点的三阶贝塞尔曲线

问题实现一个类似Photoshop钢笔工具画出来的贝赛尔曲线，带有4个控制点，可以通过控制点实现对曲线的修改。分析绘制贝塞尔曲线的原理比较简单，网上一搜一大把，对照着公式去计算就好了，这里有一篇可以参考的文章；控制点和曲线分别使用两个矢量图层渲染，便于后期开发隐藏控制点；实现为了方便计算，首先需要实现一个阶乘函数： function factorial...

2019-11-28 19:45:09 2585 3

原创通过 OpenLayers 加载CAD导出位图和 math.js 构造的仿射变换实现地理坐标系到任意CAD图上像素坐标系的互转

WebGIS开发过程中会遇到这样一种情况：需要使用OpenLayers加载一个未校准的CAD导出的位图；并且还需要通过经纬度坐标数据在这个位图上做一些标记，还需要能通过在OpenLayers取得的图上要素的像素坐标获知实际的经纬度。总结起来就是两个需求：加载位图经纬度坐标与像素坐标互转分析：由于从CAD导出的位图并不带有定位信息，所以需要通过仿射变换将图上的像素坐标转换到地理坐标...

2019-11-18 01:52:13 2558 3

原创 OpenLayers 6 中实现“上一视图”、“下一视图”的视图切换功能，类似arcgis for js的Navigation

需求：需要用OpenLayers实现视图切换，即在某一视图下，可以保存当前的视图状态，经过平移/缩放等改变视图的操作之后，通过点击按钮等交互动作可以回到上一视图，并且能够按顺序在保存的视图之间按顺序逐个切换。分析：核心部分是view状态的处理，实际只需要保存对应视图的extent即可。视图的切换可以通过view.fit(extent)实现。难点在视图状态的保留与切换，需要维...

2019-11-08 16:47:07 2326

原创 OpenLayers 6 连点成线——限制只能在已有的点要素之间画线

我们有时候会遇到这样一种需求：地图上已经产生了一些点，需要手动在这些点之间画线连接。分析：我们知道OpenLayers原生的ol.interaction.Draw类型是无法支持这种限制的。于是仍然考虑在事件处理上找找机会：ol.interaction.Draw有一个属性condition，它的定义是一个函数，接受event作为参数（实际上只限于click类型的event），然...

2019-11-08 00:35:35 2936 3

原创 OpenLayers 6 实现百度echarts风格的“空气质量”散点图

百度的echarts（现在被Apache收编了）所包含的可视化样式非常的丰富多彩，是众多可视化项目必选的框架之一。除了直方图等各种图标之外，echarts也有一些基于地图（当然是百度地图）的可视化功能，还有大神将OpenLayers和echarts结合起来做成了现成的组件供调用。但是在实际使用中，我发现echarts地图应用的交互体验其实并不是很好，图形化数据在地图层之上像是“挂”上去的，在拖...

2019-11-08 00:21:17 3127

原创 OpenLayers 6 如何优雅的使用天地图WMTS服务“经纬度投影(CGCS2000)”和“球面墨卡托投影(EPSG:3857)”

最近google.com卫星图和bing卫星图相继有重大变动，常规方式已经没办法使用XYZ方式加载在线图了，于是我把目光转向了天地图。之前以为天地图是GCJ02加偏的资源，直到看到官网上这么一句话：于是眼前一亮，申请了一个开发者API(过程很简单，略)，搞起。但是因为天地图在WMTS的基础上加了个key，没办法用getCapablities的方法加载，每次都需要自己配置长长一大堆参数，...

2019-11-05 02:01:51 9683 1

原创 OpenLayers 6 在指定多边形区域划定的范围内修改多边形(源码hack)

今天又被问到一个需求：有两个多边形，一个大多边形作为不规则范围限定里面的小多边形顶点范围，在修改小多边形的时候不超过大多边形的边界。分析起初想了很多办法来捕捉鼠标指针超越边界的情况，包括：function callback(event){}modify.on('modifystart',function(evt){ map.on('pointermove',call...

2019-10-29 12:57:08 2421

原创 Leaflet 实现使用GeoJSON进行行政区域剪裁，非矢量图层覆盖

前几天利用OpenLayers做了一个使用GeoJSON数据按行政区域剪裁栅格图层的案例，然后有使用Leaflet的朋友也想实现这样的效果。好在Leaflet有一个插件是专门干这个的：戳我直达项目地址使用起来很简单，就是准备好GeoJSON的数据，初始化图层，加到地图上：var osm = new L.TileLayer.BoundaryCanvas(tileLayerUrl, op...

2019-10-25 13:46:46 3841

原创 OpenLayers 6 图标定位问题：anchor详解

因为OpenLayers不像Leaflet这种面向UI的地图框架一样有marker的概念，所有的“Marker”都是通过以下两种方式之一实现的：Overlay承载<img>元素； Point类型的要素使用image属性进行样式化。它们的区别是：Overlay会实实在在的在网页上生成一个DOM容器，把图片放到里面；而样式化的Point要素则是通过样式化过程，将图标绘制在canva...

2019-10-24 15:33:54 6553

原创 OpenLayers 和 turf.js 的灵异事件：什么？我画的圆居然不是圆！

为什么有时我们在OpenLayers中明明画的是个圆，从实地采集的坐标理应在圆内确不在圆内？为什么有事我们用turf做空间分析画了个圆，放到OpenLayers上却不是个圆？本文老胡带你一起解析。

2019-10-24 02:21:48 2627 1

原创 OpenLayers 6 + webpack 通过源码分析来实现一个简单的自定义控件

晚上鼓捣webpack环境的时候，忽然心血来潮，想试试实现一个自定义的地图控件。其实网络上已经有很多相关的教程，实现思路大多是采用jQuery做一个UI组件外挂上去。不过这种方式实现的控件可重用性不是很高。为了有别于其他人的方案，达到可重用的要求，我采用的是通过继承ol.control类的方式来实现。基本思路：通过阅读OpenLayers的源码，仿制一个点击之后可以弹出一个警告框的控件...

2019-10-20 22:44:40 1465

原创 OpenLayers 5 使用GeoJSON进行行政区划剪裁（clip, not mask or filter），非矢量图层覆盖

常规的行政区划剪裁是使用一个中空的多边形做一个遮罩，这种方法的问题是无法实现多种类型图层信息的叠加。OpenLayer 5提供了几个ol.render类里面的静态函数，用来在canvas上绘制一些要素、几何，利用这个机制，下面实现了一个根据GeoJSON数据进行行政区划剪裁的实例。代码很简单，一看就懂。<!doctype html><html lan...

2019-10-17 17:42:24 4045 2

原创 OpenLayers 5 一个固定视口中心位置的球面测距demo

代码功能：使用屏幕中心点作为终点，平移地图时动态修改起始点（天津）到屏幕中心点所在位置的连线，并实时计算两点间的球面距离（EPSG:3857坐标系），显示距离的文字沿连线做出标记。主要思想是借用了openlayers的渲染机制，监听tileLayer的postcompose事件，在回调函数中使用vectorContext的API动态绘制图形。代码中的ol.js和ol.css请自备，版本是5...

2019-10-12 11:05:49 1037

原创 OpenLayers 5 使用GeoJSON数据渲染热力图

GIS开发中会遇到需要使用热力图Heatmap的时候，openlayers5官方示例给出的是kml文件描述的热力图数据，开发中接触更多的还是GeoJSON格式，本文就使用GeoJSON格式来实现一个热力图。一、实现思路https://openlayers.org/en/latest/examples/heatmap-earthquakes.html官方例子是从一个kml文件解析出生成的热力...

2019-05-08 03:12:17 4809

原创一款从剪贴板直接上传图像到sm.ms的VS code插件

前阵子在简书上写的东西比较多，但是很多时候简书的后台同步预览不是很灵光，编辑器毕竟也只是在线的，功能有限，于是又想退回到VS code来写md，但无奈很多时候截图粘贴到文档毕竟不如简书那样方便，MPE的图片上传也只是支持本地文件上传，操作繁琐。干脆自己写一个插件。经过一夜的研究，第一个版本就这样诞生了。图床采用了众所周知的sm.ms，速度快，稳定，方便，不需要自己搞API之类的。目前不支持...

2019-01-13 21:33:24 1055 2

原创 VS code插件paste-smms带你开启简书写作新体验

简书的书友们除了在线写文章之外一定还有自己的编辑器，我也不例外，为了少装一点软件，以前我就用工作上常用的VS code+Markdown Preview Enhanced，完全能够胜任本地编辑预览Markdown的任务。但是美中不足的是，有很多时候需要一遍截图一遍写文档，这时候就比较麻烦了，首先我们得把截取的图像保存到本地，然后再使用MPE的图片上传工具：当图片比较多的时候，那真的是。。。...

2019-01-13 21:31:13 724

老胡的CSDN博客