gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
103 lines (102 loc) • 4.21 kB
JavaScript
import r from "ol/Feature";
import i from "ol/geom/Point";
import a from "ol/layer/Vector";
import { unByKey as l } from "ol/Observable";
import m from "ol/source/Vector";
import n from "ol/style/Fill";
import y from "ol/style/Icon";
import g from "ol/style/Stroke";
import u from "ol/style/Style";
import C from "ol/style/Text";
import { PixelClusterCalculator as f } from "../cluster/pixel-cluster-calculator.mjs";
import { getPointStyle as c } from "../style/point-style.mjs";
class L {
constructor(e) {
this.countBackgroundColor = [2, 72, 200, 0.8], this.countFontColor = [255, 255, 255, 1], this.locations = [], this.clusterMarkUrl = "", this.viewChangeKey = null, this.mapMoveKey = null, this.resolutionChangeTimeout = null, this.map = e, this.view = e.getView(), this.clusterCalculator = new f(e), this.source = new m(), this.clusterLayer = new a({
source: this.source
}), this.clusterLayer.set("id", "cluster-points-layer"), this.map.addLayer(this.clusterLayer), this.configureVectorLayerStyle();
}
addClusterPoints(e) {
var t;
this.clusterMarkUrl = ((t = e.clusterSymbol) == null ? void 0 : t.url) || "/GisViewerAssets/Images/cross/gis_xhj_blue.png", this.countBackgroundColor = e.countBackgroundColor || this.countBackgroundColor, this.countFontColor = e.countFontColor || this.countFontColor, this.locations = e.points, this.locations.forEach((o) => {
o.symbol = o.symbol || e.pointSymbol;
}), this.viewChangeKey || (this.viewChangeKey = this.view.on("change:resolution", () => {
this.resolutionChangeTimeout && clearTimeout(this.resolutionChangeTimeout), this.resolutionChangeTimeout = setTimeout(() => {
this.calculateCluster();
}, 150);
})), this.mapMoveKey || (this.mapMoveKey = this.map.on("moveend", () => {
this.calculateCluster();
})), this.calculateCluster();
}
removeAllClusterPoints() {
this.source.clear(), this.viewChangeKey && (l(this.viewChangeKey), this.viewChangeKey = null), this.mapMoveKey && (l(this.mapMoveKey), this.mapMoveKey = null), this.resolutionChangeTimeout && (clearTimeout(this.resolutionChangeTimeout), this.resolutionChangeTimeout = null);
}
configureVectorLayerStyle() {
const e = this.view.getResolutionForZoom(18);
this.clusterLayer.setStyle((t, o) => {
const s = t.get("type");
if (o <= e)
return c(t.getProperties().symbol);
if (s === "cluster-point")
return c(t.getProperties().symbol);
if (s === "cluster-cluster")
return this.getClusterStyle(t.getProperties());
});
}
getClusterStyle(e) {
const t = e.clusterSymbolSize, o = new y({
src: this.clusterMarkUrl,
scale: t / 32
// 近似缩放
}), s = -(t + 10), h = new C({
text: String(e.count ?? 0),
font: "16px Arial Unicode MS",
fill: new n({ color: this.countFontColor }),
backgroundFill: new n({ color: this.countBackgroundColor }),
backgroundStroke: new g({
color: [
this.countBackgroundColor[0],
this.countBackgroundColor[1],
this.countBackgroundColor[2],
0.5
],
width: 4
}),
padding: [1, 2, 1, 2],
offsetY: s,
textAlign: "center",
justify: "center",
textBaseline: "middle"
});
return [new u({ image: o }), new u({ text: h })];
}
showClusterResult(e) {
this.source.clear(), e.forEach((t) => {
if (t.id !== -1 && t.center && t.symbolSize) {
const o = new r({
geometry: new i([t.center.x, t.center.y]),
type: "cluster-cluster",
count: t.count,
clusterSymbolSize: t.symbolSize
});
this.source.addFeature(o);
} else
t.items.forEach((o) => {
const s = new r({
...o.properties,
geometry: new i([o.x, o.y]),
type: "cluster-point",
symbol: o.symbol
});
this.source.addFeature(s);
});
}), this.clusterLayer.changed();
}
calculateCluster() {
const e = this.clusterCalculator.calculate(this.locations), t = this.clusterCalculator.calculateSymbolSizes(e);
this.showClusterResult(t);
}
}
export {
L as default
};