15 战斗中的老胡

尚未进行身份认证

我要认证

即使每次选择只有2个选项,10次选择之后就会有1024种人生

等级
TA的排名 13w+

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

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

2020-05-05 02:03:05

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

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

2020-04-17 23:13:16

简简单单,解决 GeoServer 的跨域(CORS)问题

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

2020-04-15 01:10:29

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

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

2020-04-04 04:30:51

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

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

2019-12-28 01:01:04

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

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

2019-12-23 02:00:10

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

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

2019-12-07 00:00:56

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

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

2019-11-28 19:45:09

新书推广:Python与开源GIS——数据处理、空间分析与地图制图

本书内容介绍本书主要以空间数据的处理、分析以及地图制图为主线。在选择内容时,以目前最为经典、常用的类库为主,目的是为了给初学者对基本的概念进行系统的讲解。本书从应用开发角度,根据作者几年的工作经验,介绍 Python 语言在开源 GIS 中的应用。 希望能够籍此机会,使得开源 GIS 能够得到应用,并进一步推广开源 GIS 的理念与技术。因为选题时限定了Python,因此,在内容的...

2019-11-20 23:31:07

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

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

2019-11-18 01:23:28

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

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

2019-11-17 14:04:19

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

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

2019-11-08 16:11:56

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

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

2019-11-06 00:43:05

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

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

2019-11-07 23:09:45

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

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

2019-11-05 01:45:58

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

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

2019-11-02 21:32:18

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

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

2019-10-29 12:28:52

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

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

2019-10-25 13:32:26

OpenLayers 6 图标定位问题:anchor详解

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

2019-10-24 15:14:42

OpenLayers 和 turf.js 的灵异事件:什么?我画的圆居然不是圆!

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

2019-10-24 01:49:48

查看更多

勋章 我的勋章
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 新人勋章
    新人勋章
    用户发布第一条blink获赞超过3个即可获得
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。