圆(弧)椭圆曲线
圆弧填充
用法:
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)
// 打开地图
let res = await svc.openMap({
mapid: "sys_hello", // 地图ID
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
// 如果打开出错
showError(res.error)
return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
container: 'map', // DIV容器ID
style: svc.rasterStyle(), // 样式，这里是栅格样式
center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
zoom: 1, // 设置地图缩放级别
pitch: 0,
renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
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);圆弧路径
用法:
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);
圆填充
用法:
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);
圆路径
用法:
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);
椭圆弧填充
用法:
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);
椭圆弧路径
用法:
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);
椭圆填充
用法:
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);
椭圆路径
用法:
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);
贝塞尔曲线路径
用法:
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());
// 把曲线上的点转为贝塞尔曲线参数
const c = vjmap.polylineToBezierCurve(curvePoints);
// 据贝塞尔曲线参数离散成线
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);
贝塞尔曲线填充
用法:
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());
// 把曲线上的点转为贝塞尔曲线参数
const c = vjmap.polylineToBezierCurve(curvePoints);
// 据贝塞尔曲线参数离散成线
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);
这篇文档有帮助吗？感谢反馈！