gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
163 lines (162 loc) • 5.11 kB
JavaScript
import { Draw as d } from "ol/interaction";
import u from "ol/layer/Vector";
import w from "ol/source/Vector";
import { getLineStyle as p } from "./style/line-style.mjs";
import { getPointStyle as y } from "./style/point-style.mjs";
import { getPolygonStyle as l } from "./style/polygon-style.mjs";
class I {
constructor(t) {
this.drawInteraction = null, this.drawSource = null, this.drawLayer = null, this.map = t;
}
/**
* 开始绘制指定类型的几何图形
* @param params.geometryType 几何类型: 'Point' | 'LineString' | 'Polygon' | 'Circle' | 'Rectangle'
* @param params.callback 绘制完成后的回调函数，返回绘制的 Feature
* @param params.style 可选的绘制样式（JSON 格式），使用 ./style/ 中的样式配置格式
*
* @example
* // 基本用法
* drawController.startDraw({
* geometryType: 'Polygon',
* callback: (result) => {
* console.log('绘制完成:', result.coordinates);
* }
* });
*
* @example
* // 自定义样式 - Point 类型（使用 point-style 格式）
* drawController.startDraw({
* geometryType: 'Point',
* style: { type: 'circle', radius: 8, fillColor: '#ff0000', strokeColor: '#ffffff', strokeWidth: 2 },
* callback: (result) => console.log('绘制完成:', result)
* });
*
* @example
* // 自定义样式 - LineString 类型（使用 line-style 格式）
* drawController.startDraw({
* geometryType: 'LineString',
* style: { type: 'simple-line', color: [0, 0, 255, 1], width: 3, style: 'dash' },
* callback: (result) => console.log('绘制完成:', result)
* });
*
* @example
* // 自定义样式 - Polygon 类型（使用 polygon-style 格式）
* drawController.startDraw({
* geometryType: 'Polygon',
* style: {
* type: 'simple-fill',
* style: 'solid',
* color: [0, 123, 255, 0.3],
* outline: { color: [0, 0, 128, 1], width: 2, style: 'solid' }
* },
* callback: (result) => console.log('绘制完成:', result)
* });
*/
startDraw(t) {
this.stopDraw(), this.drawSource = new w({ wrapX: !1 });
const e = this.parseStyleConfig(t.geometryType, t.style);
this.drawLayer = new u({
source: this.drawSource,
style: e
}), this.drawLayer.set("id", "__draw_layer__"), this.map.addLayer(this.drawLayer);
const o = this.mapGeometryType(t.geometryType);
if (!o) {
console.warn(`不支持的绘制类型: ${t.geometryType}`);
return;
}
const c = {
source: this.drawSource,
type: o
};
t.geometryType.toLowerCase() === "rectangle" && (c.type = "Circle", c.geometryFunction = (s, r) => {
const n = require("ol/geom/Polygon").default;
r || (r = new n([]));
const a = s[0], i = s[1];
return a && i && r.setCoordinates([
[a, [a[0], i[1]], i, [i[0], a[1]], a]
]), r;
}), this.drawInteraction = new d(c), this.drawInteraction.on("drawend", (s) => {
const r = s.feature, n = r.getGeometry(), a = n == null ? void 0 : n.getType(), i = {
feature: r,
geometry: n,
geometryType: a,
coordinates: this.getCoordinates(n)
};
t.callback && t.callback(i);
}), this.map.addInteraction(this.drawInteraction);
}
/**
* 停止绘制（保留已绘制的内容）
*/
stopDraw() {
this.drawInteraction && (this.map.removeInteraction(this.drawInteraction), this.drawInteraction = null);
}
/**
* 清除绘制的图形（保留绘制交互）
*/
clearDraw() {
this.drawSource && this.drawSource.clear();
}
/**
* 将用户传入的类型映射为 OpenLayers Draw 支持的类型
*/
mapGeometryType(t) {
return {
point: "Point",
linestring: "LineString",
line: "LineString",
polygon: "Polygon",
circle: "Circle",
rectangle: "Circle"
// Rectangle 使用 Circle 配合 geometryFunction
}[t.toLowerCase()] || null;
}
/**
* 根据绘制类型将 JSON 格式的样式配置转换为 OpenLayers Style 对象
* 复用 ./style/ 中的样式解析方法
* @param geometryType 绘制类型
* @param styleConfig JSON 格式的样式配置
* @returns OpenLayers Style 对象
*/
parseStyleConfig(t, e) {
switch (t.toLowerCase()) {
case "point":
return y(e);
case "linestring":
case "line":
return p(e);
case "polygon":
case "rectangle":
case "circle":
return l(e);
default:
return l(e);
}
}
/**
* 从 Geometry 中提取坐标
*/
getCoordinates(t) {
var o;
if (!t)
return null;
switch (t.getType()) {
case "Point":
return t.getCoordinates();
case "LineString":
return t.getCoordinates();
case "Polygon":
return t.getCoordinates();
case "Circle":
return {
center: t.getCenter(),
radius: t.getRadius()
};
default:
return ((o = t.getCoordinates) == null ? void 0 : o.call(t)) || null;
}
}
}
export {
I as default
};