個人中心
退出
OpenLayers 6 代碼繪制/draw交互組件繪制兩種方式繪制橢圓過程詳解
引言
OpenLayers可以通過代碼繪制多種幾何形狀，也可以通過draw類型的交互組件繪制幾何形狀，官方實例提供了類如圓、折線、矩形、星形等方法。除此之外，橢圓這種圖形其實也是非常常見的幾何圖形，但是官方沒有提供現(xiàn)成的API，本文從使用代碼繪制和交互繪制兩種途徑詳細講解一下橢圓的繪制。
一點理論基礎
眾所周知，OGC提供的標準geometry類型只有點、線、面以及它們的組合，并沒有圓和橢圓，OpenLayers繪制圓的時候，采用的是正多邊形逼近法擬合的“圓形”。雖然渲染到canvas上的實際圖形是個多邊形，但是在數據結構上，它仍然是個圓。圓形的公式可以寫為：
\frac{X{2}}{a{2}}+\frac{Y{2}}{a{2}}=1
相對的，橢圓的公式可以寫為：
\frac{X{2}}{a{2}}+\frac{Y{2}}{b{2}}=1
橢圓公式中的Y可以看做圓公式中的Y變換了\frac{a}倍之后得來。這里的公式中的X和Y對應的就是橫縱坐標值。
OpenLayers的SimpleGeometry類及其子類提供了具有這種功能的函數scale，可以對橫縱坐標進行按比例的拉伸變換。可以利用這個函數實現(xiàn)橢圓的繪制。
核心代碼
下面是實現(xiàn)繪制橢圓的核心代碼，無論是用代碼繪制還是用draw交互組件繪制都需要用到它：
function genEllipseGeom(radiusMajor, radiusMinor, center, rotation) {
var circle = new Circle(center, radiusMinor);
var polygon = fromCircle(circle, 64);
polygon.scale(radiusMajor / radiusMinor, 1);
polygon.rotate(rotation, center);
return polygon;
}
參數radiusMajor, radiusMinor, center, rotation分別對應橢圓的長半軸、短半軸、重心和旋轉角度。
算法的主要思想是：首先以短半軸為半徑生成了一個Circle類型的幾何，然后通過這個理想圓生成了一個正64邊形多邊形，擬合這個圓。再將這個多邊形進行按比例變換，變換之后的結果再進行旋轉，最后得到的就是使用多邊形擬合的橢圓。
代碼控制繪制橢圓的完整代碼
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Circle from 'ol/geom/Circle';
import { fromCircle } from 'ol/geom/Polygon'
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
let tileLayer = new TileLayer({
source: new OSM()
})
let map = new Map({
target: 'map',
layers: [
tileLayer
],
view: new View({
center: [11936406.337013, 3786384.633134],
zoom: 5,
constrainResolution: true
})
});
var vSource = new VectorSource()
var vLayer = new VectorLayer(
{
source: vSource,
}
)
function genEllipseGeom(radiusMajor, radiusMinor, center, rotation) {
var circle = new Circle(center, radiusMinor);
var polygon = fromCircle(circle, 64);
polygon.scale(radiusMajor / radiusMinor, 1);
polygon.rotate(rotation, center);
return polygon;
}
var elGeom = genEllipseGeom(600000, 400000, [11936406.337013, 3786384.633134], Math.PI / 4);
var ef = new Feature(elGeom);
vSource.addFeature(ef);
map.addLayer(vLayer)
draw交互組件繪制橢圓
使用draw交互組件繪制橢圓與繪制圓形是類似的，可以有兩種思路：
兩點法：第一個點確定重心，第二個點與重心的橫坐標之差確定長半軸，縱坐標值差確定短半軸。這個方案的缺點是無法通過繪制來自由定義橢圓的旋轉角度。
三點法：同樣第一個點確定重心，第二個點與重心的連線確定長半軸，連線與橫坐標軸的夾角確定旋轉角度；第三個點到長半軸的距離確定短半軸。
本文使用三點法來實現(xiàn)橢圓的交互繪制。主要思路是通過自定義draw組件的geometryFunction來實現(xiàn)三點法繪制的邏輯。
draw交互組件繪制橢圓的完整代碼
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Circle from 'ol/geom/Circle';
import Polygon from 'ol/geom/Polygon';
import { fromCircle } from 'ol/geom/Polygon'
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
import Draw from 'ol/interaction/Draw';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import CircleStyle from 'ol/style/Circle';
import GeometryType from 'ol/geom/GeometryType';
function createEditingStyle(feature) {
const styles = {};
const white = [255, 255, 255, 1];
const blue = [0, 0, 255, 1];
const width = 3;
styles[GeometryType.POLYGON] = [
new Style({
fill: new Fill({
color: [255, 255, 255, 0.3]
}),
stroke: new Stroke({
color: "#00FF00",
})
})
];
styles[GeometryType.MULTI_POLYGON] =
styles[GeometryType.POLYGON];
styles[GeometryType.LINE_STRING] = [
new Style({
stroke: new Stroke({
color: [0, 255, 0, 0.3],
width: width
})
})
];
styles[GeometryType.POINT] = [
new Style({
image: new CircleStyle({
radius: width * 2,
fill: new Fill({
color: blue
}),
stroke: new Stroke({
color: white,
width: width / 2
})
}),
zIndex: Infinity
})
];
return styles[feature.getGeometry().getType()]
}
let tileLayer = new TileLayer({
source: new OSM()
})
let map = new Map({
target: 'map',
layers: [
tileLayer
],
view: new View({
center: [11936406.337013, 3786384.633134],
zoom: 5,
constrainResolution: true
})
});
var vSource = new VectorSource()
var vLayer = new VectorLayer(
{
source: vSource,
}
)
function genEllipseGeom(radiusMajor, radiusMinor, center, rotation) {
var circle = new Circle(center, radiusMinor);
var polygon = fromCircle(circle, 64);
polygon.scale(radiusMajor / radiusMinor, 1);
polygon.rotate(rotation, center);
return polygon;
}
var elGeom = genEllipseGeom(600000, 400000, [11936406.337013, 3786384.633134], 0);
var ef = new Feature(elGeom);
vSource.addFeature(ef);
map.addLayer(vLayer)
var value = 'Polygon';
var geometryFunction;
var maxPoints = 3;
function geometryFunction(coordinates, geometry) {
let cArray = coordinates[0]
let center = cArray[0];
let startPoint = cArray[1];
let endPoint = cArray[2];
if (!geometry) {
geometry = new Polygon([]);
}
if (cArray.length == 3) {
let coordinatesRing = cArray.slice()
coordinatesRing.push(center)
let plg = new Polygon([coordinatesRing])
let plygArea = plg.getArea()
let radiusMajor = Math.sqrt(
Math.pow(center[0] - startPoint[0], 2) +
Math.pow(center[1] - startPoint[1], 2)
)
let radiusMinor = (plygArea * 2) / radiusMajor;
let dx = startPoint[0] - center[0];
let dy = startPoint[1] - center[1];
let rotation = Math.atan(dx / dy);
rotation = dy > 0 ? -rotation - Math.PI * 0.5 : -(Math.PI * 0.5 + rotation);
let f = genEllipseGeom(radiusMajor, radiusMinor, center, rotation)
geometry.setCoordinates(
f.getCoordinates()
)
}
return geometry
}
var draw = new Draw({
source: vSource,
type: value,
geometryFunction: geometryFunction,
maxPoints: maxPoints,
style: createEditingStyle
});
map.addInteraction(draw);
我在企鵝家的課堂和CSDN學院都開通了《OpenLayers實例詳解》課程，歡迎報名學習。
分類導航