Circle (Arc) and Ellipse Curves

Arc Fill

Online Example

Usage:

const mapBounds = map.getGeoBounds(0.2);
const center = mapBounds.center();
const radius = mapBounds.width() / 4;
let circle = new vjmap.CircleFill({
    center: center,
    radius: radius,
    startAngle: 120,
    endAngle: 60,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
circle.addTo(map);

let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
let res = await svc.openMap({
    mapid: "sys_hello", // Map ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry data rendering
    style: vjmap.openMapLightStyle() // When div has dark background, pass dark background style here
})
if (res.error) {
    // If open fails
    showError(res.error)
    return;
}
// Get map bounds
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// Create geometric projection coordinate system from map bounds
let prj = new vjmap.GeoProjection(mapBounds);
//
// Map object
let map = new vjmap.Map({
    container: 'map', // DIV container ID
    style: svc.rasterStyle(), // Style, raster style here
    center: prj.toLngLat(mapBounds.center()), // Set map center
    zoom: 1, // Set map zoom level
    pitch: 0,
    renderWorldCopies: false // Do not display multi-screen map
});
// Associate service object and projection object
map.attach(svc, prj);
await map.onLoad();
mapBounds = map.getGeoBounds(0.2);
const center = mapBounds.center();
const radius = mapBounds.width() / 4;
let circle = new vjmap.CircleFill({
    center: center,
    radius: radius,
    startAngle: 120,
    endAngle: 60,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
circle.addTo(map);

Arc Path

Online Example

Usage:

const cirleArcPath = vjmap.getCirclePolygonCoordinates(mapExtent.center(), mapExtent.width() / 5, 360, 120, 60, false);
let path = new vjmap.Polyline({
    data: map.toLngLat(cirleArcPath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);

Circle Fill

Online Example

Usage:

const mapBounds = map.getGeoBounds(0.2);
const center = mapBounds.center();
const radius = mapBounds.width() / 4;
let circle = new vjmap.CircleFill({
    center: center,
    radius: radius,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
circle.addTo(map);

Circle Path

Online Example

Usage:

const cirlePath = vjmap.getCirclePolygonCoordinates(mapExtent.center(), mapExtent.width() / 10, 120, 0, 360, false);
let path = new vjmap.Polyline({
    data: map.toLngLat(cirlePath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);

Ellipse Arc Fill

Online Example

Usage:

const mapBounds = map.getGeoBounds(0.6);
const center = mapBounds.center();
const majorAxis = mapBounds.width() / 4;
const minorAxis = mapBounds.width() / 6;
let ellipseArcFill = new vjmap.EllipseFill({
    center: center,
    majorAxisRadius: majorAxis,
    minorAxisRadius: minorAxis,
    startAngle: 60,
    endAngle: 300,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
ellipseArcFill.addTo(map);

Ellipse Arc Path

Online Example

Usage:

const majorAxisRadius = mapExtent.width() / 5;
const minorAxisRadius = mapExtent.width() / 10;
const ellipseArcPath = vjmap.getEllipsePolygonCoordinates(mapExtent.center(), majorAxisRadius, minorAxisRadius, 360, 100, 300, false);
let path = new vjmap.Polyline({
    data: map.toLngLat(ellipseArcPath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);

Ellipse Fill

Online Example

Usage:

const mapBounds = map.getGeoBounds(0.6);
const center = mapBounds.center();
const majorAxis = mapBounds.width() / 4;
const minorAxis = mapBounds.width() / 6;
let ellipse = new vjmap.EllipseFill({
    center: center,
    majorAxisRadius: majorAxis,
    minorAxisRadius: minorAxis,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
ellipse.addTo(map);

Ellipse Path

Online Example

Usage:

const majorAxisRadius = mapExtent.width() / 4;
const minorAxisRadius = mapExtent.width() / 6;
const ellipsePath = vjmap.getEllipsePolygonCoordinates(mapExtent.center(), majorAxisRadius, minorAxisRadius, 360, 0, 360, false);
let path = new vjmap.Polyline({
    data: map.toLngLat(ellipsePath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);

Bezier Curve Path

Online Example

Usage:

const mapBounds = map.getGeoBounds(0.4);
const curvePoints = [];
curvePoints.push(mapBounds.min.toArray());
curvePoints.push(mapBounds.center().toArray());
curvePoints.push(vjmap.geoPoint([mapBounds.max.x, mapBounds.min.y]).toArray());
curvePoints.push(mapBounds.max.toArray());
// Convert curve points to Bezier curve parameters
const c = vjmap.polylineToBezierCurve(curvePoints);
// Discretize line from Bezier curve parameters
const curvePath = vjmap.bezierCurveToPolyline(c);
let path = new vjmap.Polyline({
    data: map.toLngLat(curvePath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);

Bezier Curve Fill

Online Example

Usage:

const mapBounds = map.getGeoBounds(0.2);
const curvePoints = [];
curvePoints.push(mapBounds.min.toArray());
curvePoints.push(mapBounds.center().toArray());
curvePoints.push(vjmap.geoPoint([mapBounds.max.x, mapBounds.min.y]).toArray());
curvePoints.push(mapBounds.max.toArray());
curvePoints.push(vjmap.geoPoint([mapBounds.min.x, mapBounds.max.y]).toArray());
curvePoints.push(mapBounds.min.toArray());
// Convert curve points to Bezier curve parameters
const c = vjmap.polylineToBezierCurve(curvePoints);
// Discretize line from Bezier curve parameters
const curvePath = vjmap.bezierCurveToPolyline(c);
let polygon = new vjmap.Polygon({
    data: map.toLngLat(curvePath),
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
polygon.addTo(map);