openlayers-quick-tools
v1.1.1
Published
一个便捷实现 OpenLayers 基础功能的工具包，支持地图初始化、添加图层、点线面等操作，并提供强大的动画和坐标系处理工具。
Maintainers
zhangshumingReadme
openlayers-quick-tools
一个便捷实现 OpenLayers 基础功能的工具包，支持地图初始化、添加图层、点线面等操作，并提供强大的坐标系处理工具。
安装
npm install openlayers-quick-tools使用
基础用法
import { OLQuickTools } from 'openlayers-quick-tools';
// 初始化地图
const map = new OLQuickTools({
target: 'map', // 容器元素 ID
center: [116.397428, 39.90923], // 北京坐标
zoom: 10
});
// 添加点
map.addPoint([116.397428, 39.90923]);
// 添加线
map.addLine([
[116.397428, 39.90923],
[116.407428, 39.91923]
]);
// 添加面
map.addPolygon([
[
[116.397428, 39.90923],
[116.407428, 39.90923],
[116.407428, 39.91923],
[116.397428, 39.91923],
[116.397428, 39.90923]
]
]);坐标系工具
除了基础的地图功能，本工具包还提供了坐标系转换工具：
import { CoordTransform, PROJECTIONS } from 'openlayers-quick-tools';
// 坐标系转换
const wgs84Coord = [116.3974, 39.9093]; // 北京天安门
const webMercatorCoord = CoordTransform.toMercator(wgs84Coord);
// 通用坐标系转换
const customCoord = [121.4737, 31.2304]; // 上海
const transformedCoord = CoordTransform.transform(
customCoord,
PROJECTIONS.WGS84,
PROJECTIONS.WEB_MERCATOR
);
// 批量坐标转换
const coordinates = [
[116.3974, 39.9093], // 北京
[121.4737, 31.2304], // 上海
[113.2644, 23.1291], // 广州
[104.0668, 30.5728] // 成都
];
const webMercatorCoords = CoordTransform.transformBatch(
coordinates,
PROJECTIONS.WGS84,
PROJECTIONS.WEB_MERCATOR
);
// 边界框转换
const extent = [116.3970, 39.9090, 116.3980, 39.9100];
const transformedExtent = CoordTransform.transformExtent(
extent,
PROJECTIONS.WGS84,
PROJECTIONS.WEB_MERCATOR
);HTML 示例
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers Quick Tools Demo</title>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import { OLQuickTools } from 'openlayers-quick-tools';
const map = new OLQuickTools({
target: 'map',
center: [116.397428, 39.90923],
zoom: 10
});
// 添加一些示例数据
map.addPoint([116.397428, 39.90923]);
map.addLine([
[116.397428, 39.90923],
[116.407428, 39.91923]
]);
</script>
</body>
</html>API
OLQuickTools
构造函数
new OLQuickTools(options: MapOptions)MapOptions:
target: string | HTMLElement - 地图容器center?: [number, number] - 地图中心坐标，默认 [0, 0]zoom?: number - 缩放级别，默认 2
方法
addPoint(coord: [number, number])- 添加点addLine(coords: [number, number][])- 添加线addPolygon(coords: [number, number][][])- 添加面addLayer(layer: VectorLayer | TileLayer)- 添加图层
CoordTransform
坐标系转换工具类，提供各种坐标系之间的转换功能。
静态方法
坐标系转换:
transform(coordinate, fromProjection, toProjection)- 单个坐标转换transformBatch(coordinates, fromProjection, toProjection)- 批量坐标转换transformExtent(extent, fromProjection, toProjection)- 边界框转换toMercator(coordinate)- WGS84 转 Web MercatortoWgs84(coordinate)- Web Mercator 转 WGS84
PROJECTIONS
预定义的坐标系常量：
PROJECTIONS.WGS84- WGS84 地理坐标系PROJECTIONS.WEB_MERCATOR- Web Mercator 投影坐标系
动画工具
除了坐标系工具，本工具包还提供了强大的动画功能：
import { FlyTo, Easing, MoveController } from 'openlayers-quick-tools';
// 飞行动画
FlyTo.flyToCenter(view, [121.4737, 31.2304], 12, 2000); // 飞行到上海
FlyTo.flyToZoom(view, 15, 1500); // 飞行到指定缩放级别
FlyTo.smoothZoom(view, 2, 1000); // 平滑缩放
FlyTo.smoothPan(view, 1000, 500, 800); // 平滑平移
// 使用自定义缓动
FlyTo.flyTo(view, {
center: [113.2644, 23.1291],
zoom: 14,
duration: 2000,
easing: Easing.elastic // 弹性缓动
});
// 飞行到要素
FlyTo.flyToFeature(view, feature, 1500);
FlyTo.flyToFeatures(view, features, 2000);
// 飞行到边界框
FlyTo.flyToExtent(view, [116.3970, 39.9090, 116.3980, 39.9100], 1500);
// 物体移动动画
MoveController.moveTo(feature, [1000000, 1000000], { duration: 2000 });
MoveController.moveToWithSpeed(feature, [1000000, 1000000], 500); // 基于速度移动
// 路径移动
const path = [[0, 0], [500000, 500000], [1000000, 0]];
MoveController.moveAlongPath(feature, path, { loop: true });
// 圆形移动
MoveController.moveInCircle(feature, [0, 0], 500000, 0, 2 * Math.PI);
// 弹跳移动
MoveController.bounceMove(feature, [1000000, 1000000], 200000);FlyTo
飞行动画工具类，提供各种地图视图动画功能。
静态方法
飞行动画:
flyTo(view, options)- 通用飞行动画flyToCenter(view, center, zoom?, duration?)- 飞行到指定坐标flyToZoom(view, zoom, duration?)- 飞行到指定缩放级别flyToExtent(view, extent, duration?)- 飞行到边界框flyToFeature(view, feature, duration?, padding?)- 飞行到要素flyToFeatures(view, features, duration?, padding?)- 飞行到多个要素
平滑动画:
smoothZoom(view, delta, duration?)- 平滑缩放smoothPan(view, deltaX, deltaY, duration?)- 平滑平移
Easing
缓动动画工具类，提供各种缓动函数。
内置缓动函数
基础缓动:
Easing.linear- 线性缓动Easing.easeIn- 缓入动画Easing.easeOut- 缓出动画Easing.easeInOut- 缓入缓出动画
特效缓动:
Easing.elastic(t)- 弹性缓动Easing.bounce(t)- 弹跳缓动Easing.sine(t)- 正弦缓动
数学缓动:
Easing.quad(t)- 二次缓动Easing.cubic(t)- 三次缓动Easing.quart(t)- 四次缓动Easing.quint(t)- 五次缓动Easing.expo(t)- 指数缓动Easing.circ(t)- 圆形缓动
工具方法:
Easing.createCustom(power)- 创建自定义缓动函数Easing.reverse(easing)- 创建反向缓动函数Easing.combine(easing1, easing2)- 创建组合缓动函数
MoveController
物体移动控制工具类，提供多种要素移动动画功能。
基于时间的移动方法
moveTo(feature, targetCoord, options)- 直线移动到指定坐标moveAlongPath(feature, path, options)- 沿指定路径移动要素moveInCircle(feature, center, radius, startAngle, endAngle, options)- 圆形轨迹移动bounceMove(feature, targetCoord, bounceHeight, options)- 弹跳式移动
基于速度的移动方法
moveToWithSpeed(feature, targetCoord, speed, options)- 基于速度的直线移动moveAlongPathWithSpeed(feature, path, speed, options)- 基于速度的路径移动moveInCircleWithSpeed(feature, center, radius, speed, startAngle, endAngle, options)- 基于速度的圆形移动bounceMoveWithSpeed(feature, targetCoord, speed, bounceHeight, options)- 基于速度的弹跳移动
工具方法
createPath(startCoord, endCoord, type, points)- 创建自定义移动路径stop(feature)- 停止要素移动
路径类型:
'linear'- 直线路径'curve'- 曲线路径'zigzag'- 锯齿形路径
开发
# 安装依赖
npm install
# 构建
npm run build许可证
ISC