gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
161 lines (160 loc) • 4.96 kB
JavaScript
import y from "ol/Feature";
import { Polygon as u, Point as M } from "ol/geom";
import E from "ol/layer/Vector";
import A from "ol/source/Vector";
import { Style as f, Stroke as w, Text as L, Fill as D } from "ol/style";
import { toRaw as P } from "vue";
import C from "../../stores/index.mjs";
import { getLineStyle as S } from "./style/line-style.mjs";
class T {
constructor(t) {
this.initialized = !1, this.ddMap = /* @__PURE__ */ new Map(), this.zdMap = /* @__PURE__ */ new Map(), this.map = t, this.source = new A(), this.policeAreaLayer = new E({
source: this.source
}), this.policeAreaLayer.set("id", "police-area-layer"), this.map.addLayer(this.policeAreaLayer), this.zdBoundaryLayer = new E({
source: new A()
}), this.zdBoundaryLayer.set("id", "zd-boundary-layer"), this.map.addLayer(this.zdBoundaryLayer);
}
async initialize() {
const t = C.useAppDataStore, r = P(t.mapConfig), a = `${r.assetsRoot}/${r.policeArea.ddLayer}`;
(await (await fetch(a)).json()).features.forEach((e) => {
this.ddMap.set(e.properties.DD_CODE, {
name: e.properties.DD_NAME,
coordinates: e.geometry.coordinates,
zdCode: e.properties.ZD_CODE
});
});
const l = `${r.assetsRoot}/${r.policeArea.zdLayer}`;
(await (await fetch(l)).json()).features.forEach((e) => {
this.zdMap.set(e.properties.ZD_CODE, {
name: e.properties.ZD_NAME,
coordinates: e.geometry.coordinates
});
}), this.zdMap.forEach((e, d) => {
var c;
const n = [];
this.isMultiPolygon(e.coordinates) ? e.coordinates.forEach((i) => {
i.forEach((g) => n.push(g));
}) : e.coordinates.forEach((i) => {
n.push(i);
});
const h = new u(n), p = new y({
geometry: h,
type: "zd-boundary",
id: d,
name: e.name
});
p.setStyle(
new f({
stroke: new w({
color: "rgba(30, 144, 255, 0.8)",
width: 1,
lineDash: [10, 20]
})
})
), (c = this.zdBoundaryLayer.getSource()) == null || c.addFeature(p);
});
}
// 判断 coordinates 是 Polygon（三维）还是 MultiPolygon（四维）
isMultiPolygon(t) {
return Array.isArray(t) && Array.isArray(t[0]) && Array.isArray(t[0][0]) && Array.isArray(t[0][0][0]);
}
async showJurisdiction(t) {
this.initialized || (await this.initialize(), this.initialized = !0), this.source.clear();
const r = [
[
[-180, -90],
[-180, 90],
[180, 90],
[180, -90],
[-180, -90]
]
], a = [], m = (s) => {
this.isMultiPolygon(s) ? s.forEach((o) => {
o.forEach((e) => {
a.push(e);
});
}) : s.forEach((o) => {
a.push(o);
});
};
if (t.type === "zd") {
const s = this.zdMap.get(t.id);
s && m(s.coordinates), this.ddMap.forEach((o, e) => {
if (o.zdCode === t.id) {
const d = [];
this.isMultiPolygon(o.coordinates) ? o.coordinates.forEach((i) => {
i.forEach((g) => d.push(g));
}) : o.coordinates.forEach((i) => {
d.push(i);
});
const n = new u(d), h = new y({
geometry: n,
type: "dd-boundary",
id: e,
name: o.name
});
h.setStyle(
S({
type: "simple-line",
style: "dash",
width: 2,
color: [30, 144, 255, 0.8]
})
), this.source.addFeature(h);
const p = n.getInteriorPoint().getCoordinates(), c = new y({
geometry: new M(p),
type: "dd-label",
id: e,
name: o.name
});
c.setStyle(
new f({
text: new L({
text: o.name,
font: "bold 14px sans-serif",
fill: new D({
color: "rgba(30, 144, 255, 1)"
}),
stroke: new w({
color: "#fff",
width: 3
})
})
})
), this.source.addFeature(c);
}
});
} else if (t.type === "dd") {
const s = this.ddMap.get(t.id);
s && m(s.coordinates);
}
console.log("holesToCut:", a), a.forEach((s) => {
r.push(s);
});
const z = new u(r), l = new y({
geometry: z
});
if (console.log("maskCoords:", r), l.setStyle(
new f({
fill: new D({
color: "rgba(128, 128, 128, 0.6)"
}),
stroke: new w({
color: "rgba(30, 144, 255, 1)",
width: 2
})
})
), this.source.addFeature(l), a.length > 0) {
const o = new u(a).getExtent();
this.map.getView().fit(o, {
padding: [50, 50, 50, 50]
});
}
}
clearJurisdiction() {
this.source.clear();
}
}
export {
T as default
};