原创 Openlayers源碼實踐系列：探索layer的渲染機制——從分析OpenLayers 6 的WebGLPointsLayer動畫效果實現說起
前言 最新的OpenLayers 6.1.1 中提供了一個基於WebGL用於渲染大量點要素並且支持類expressions語法描述的動畫渲染。OpenLayers6之前的老版本是不支持動畫渲染的，如果想要實現動畫要素效果，需要利用
2020-06-26 10:14:55
23
原创 OpenLayers 6 實現百度echarts風格的“空氣質量”散點圖
百度的echarts（現在被Apache收編了）所包含的可視化樣式非常的豐富多彩，是衆多可視化項目必選的框架之一。 除了直方圖等各種圖標之外，echarts也有一些基於地圖（當然是百度地圖）的可視化功能，還有大神將OpenLayers和e
2020-06-26 07:44:08
5
原创 OpenLayers 6 在指定多邊形區域劃定的範圍內修改多邊形(源碼hack)
今天又被問到一個需求：有兩個多邊形，一個大多邊形作爲不規則範圍限定裏面的小多邊形頂點範圍，在修改小多邊形的時候不超過大多邊形的邊界。 分析 起初想了很多辦法來捕捉鼠標指針超越邊界的情況，包括： function callback(ev
2020-06-26 07:44:08
2
原创 OpenLayers 6 如何優雅的使用天地圖WMTS服務“經緯度投影(CGCS2000)”和“球面墨卡託投影(EPSG:3857)”
最近google.com衛星圖和bing衛星圖相繼有重大變動，常規方式已經沒辦法使用XYZ方式加載在線圖了，於是我把目光轉向了天地圖。之前以爲天地圖是GCJ02加偏的資源，直到看到官網上這麼一句話： 於是眼前一亮，申請了一個開發者API
2020-06-26 07:44:08
4
原创 Openlayers源碼實踐系列：通過在ol.source.ImageCanvas中獲取VectorContext對象高效率繪製海量要素（支持點、線、面）
使用OpenLayers構建項目時，有時會遇到一些性能優化的問題，比如大量要素的繪製。OpenLayers爲繪製海量的點要素提供了一些手段，比如版本6之前的ol.WebGLMap，6之後的ol.layer.WebGLPoints。但是當我
2020-06-26 07:44:08
6
原创 OpenLayers 6 中實現“上一視圖”、“下一視圖”的視圖切換功能，類似arcgis for js的Navigation
需求： 需要用OpenLayers實現視圖切換，即在某一視圖下，可以保存當前的視圖狀態，經過平移/縮放等改變視圖的操作之後，通過點擊按鈕等交互動作可以回到上一視圖，並且能夠按順序在保存的視圖之間按順序逐個切換。 分析： 核心部分是vie
2020-06-26 07:44:08
24
原创 OpenLayers 6 連點成線——限制只能在已有的點要素之間畫線
我們有時候會遇到這樣一種需求：地圖上已經產生了一些點，需要手動在這些點之間畫線連接。 分析： 我們知道OpenLayers原生的ol.interaction.Draw類型是無法支持這種限制的。於是仍然考慮在事件處理上找找機會：ol
2020-06-26 07:44:08
1
原创 OpenLayers 6 實現帶有4個控制點的三階貝塞爾曲線
問題 實現一個類似Photoshop鋼筆工具畫出來的貝賽爾曲線，帶有4個控制點，可以通過控制點實現對曲線的修改。 分析 繪製貝塞爾曲線的原理比較簡單，網上一搜一大把，對照着公式去計算就好了，這裏有一篇可以參考的文章； 控制點和曲線分別使
2020-06-26 07:43:58
1
原创 OpenLayers 6 實現仿Echarts風格的動態遷徙圖/航班圖
這是一個做完很久的demo，主要還是爲了擺脫echarts那種“圖層脫線”的問題，提升可視化渲染性能。 使用的數據還是來自echarts，模擬了全國各地到湖南重點景區的客流情況。 分析 要實現動態遷徙圖的效果，主要需解決兩個問題 曲線的
2020-06-26 07:43:58
3
原创 OpenLayers 6 繪製高德導航路徑的螞蟻線樣式並實現箭頭動畫——VectorContext的重度使用
OpenLayers架構之內提供了矢量對象樣式化的一些手段，但平時的使用總感覺有一些單一；而像高德、百度、騰訊地圖這樣的框架有着美觀豐富的UI樣式。從接觸OpenLayers開始，就一直有一起學習的朋友討論如何做一個像高德導航那樣的路徑樣
2020-06-26 07:43:57
1
原创 OpenLayers 6 代碼繪製/draw交互組件繪製兩種方式繪製橢圓過程詳解
引言 OpenLayers可以通過代碼繪製多種幾何形狀，也可以通過draw類型的交互組件繪製幾何形狀，官方實例提供了類如圓、折線、矩形、星形等方法。除此之外，橢圓這種圖形其實也是非常常見的幾何圖形，但是官方沒有提供現成的API，本文從使用
2020-06-26 07:43:57
6
原创 通過 OpenLayers 加載CAD導出位圖 和 math.js 構造的仿射變換實現地理座標系到任意CAD圖上像素座標系的互轉
WebGIS開發過程中會遇到這樣一種情況：需要使用OpenLayers加載一個未校準的CAD導出的位圖；並且還需要通過經緯度座標數據在這個位圖上做一些標記，還需要能通過在OpenLayers取得的圖上要素的像素座標獲知實際的經緯度。 總結
2020-06-26 07:43:57
2
原创 新書推廣：Python與開源GIS——數據處理、空間分析與地圖製圖
本書內容介紹 本書主要以空間數據的處理、分析以及地圖製圖爲主線。在選擇內容時，以目前最爲經典、常用的類庫爲主，目的是爲了給初學者對基本的概念進行系統的講解。 本書從應用開發角度，根據作者幾年的工作經驗，介紹 Python 語言在開源 G
2020-06-26 07:43:56
原创 TRICK系列：Openlayers 中實現Draw通過鍵盤按鍵取消全部繪製、取消上一步繪製
前言 Draw是OpenLayers中常用的一個組件，默認是單擊繪製，雙擊結束繪製。 但是在實際工程中常常需要在繪製過程中使用按鍵來取消全部繪製、取消上一步繪製，如何做到呢？ 閒言少敘，直接上乾貨。 原理 在draw中是不處理鍵盤的按鍵事
2020-05-06 09:01:53
原创 通過在ol.source.ImageCanvas中獲取VectorContext對象高效率繪製海量要素
使用OpenLayers構建項目時，有時會遇到一些性能優化的問題，比如大量要素的繪製。OpenLayers爲繪製海量的點要素提供了一些手段，比如版本6之前的ol.WebGLMap，6之後的ol.layer.WebGLPoints。但是當我
2020-04-18 16:23:05
26