gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
452 lines (451 loc) • 13.9 kB
JavaScript
import M from "@arcgis/core/Basemap";
import L from "@arcgis/core/config";
import * as k from "@arcgis/core/core/reactiveUtils";
import { Multipoint as I, Polygon as T, Polyline as G, Point as C } from "@arcgis/core/geometry";
import * as v from "@arcgis/core/geometry/support/webMercatorUtils";
import { webMercatorToGeographic as x } from "@arcgis/core/geometry/support/webMercatorUtils";
import P from "@arcgis/core/Graphic";
import S from "@arcgis/core/layers/FeatureLayer";
import W from "@arcgis/core/layers/GeoJSONLayer";
import H from "@arcgis/core/layers/GroupLayer";
import B from "@arcgis/core/layers/IntegratedMesh3DTilesLayer";
import O from "@arcgis/core/layers/MapImageLayer";
import R from "@arcgis/core/layers/TileLayer";
import E from "@arcgis/core/layers/WebTileLayer";
import N from "@arcgis/core/layers/WMSLayer";
import A from "@arcgis/core/Map";
import j from "@arcgis/core/views/MapView";
import U from "@arcgis/core/views/SceneView";
import V from "@turf/destination";
import * as D from "@turf/helpers";
import J from "@arcgis/core/layers/GraphicsLayer";
import K from "./custom-layer/custom-wmts-layer.mjs";
class pe {
constructor() {
this.mapConfig = {}, this.watchHandleMap = /* @__PURE__ */ new Map(), this.handleIndex = 0, this.zoomWatchHandle = null, this.detachmentLayerLoaded = !1;
}
processUrl(e) {
return e && (e.startsWith("http://") || e.startsWith("https://") ? e : e.startsWith("{{") ? e.replace("{{geoServer}}", this.mapConfig.geoServer) : this.mapConfig.assetsRoot + e);
}
/**
* 初始化地图
* @param params 容器
* @returns view
*/
async initialize(e) {
var p, u, g, f, y;
this.mapConfig = e.mapConfig;
const { container: i, markerClickCallback: s, mapClickCallback: a } = e;
L.assetsPath = `${this.mapConfig.assetsRoot}/ArcgisAssets`, L.fontsUrl = `${this.mapConfig.assetsRoot}/fonts`, L.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
const o = new A();
((u = (p = this.mapConfig) == null ? void 0 : p.mapOptions.mode) == null ? void 0 : u.toLowerCase()) !== "3d" ? (this.view = new j({
map: o,
container: i,
...this.mapConfig.mapOptions
}), this.view.on("drag", (t) => {
t.button === 2 && t.stopPropagation();
})) : this.view = new U({
map: o,
container: i,
environment: {
atmosphereEnabled: !0,
lighting: {
type: "virtual"
}
},
...(g = this.mapConfig) == null ? void 0 : g.mapOptions
}), this.view.popup.visibleElements = {
closeButton: !0,
collapseButton: !1,
actionBar: !1,
featureNavigation: !0
}, this.view.popup.dockOptions = {
buttonEnabled: !1,
breakpoint: !1
}, this.view.on("click", async (t) => {
var h, b;
if (a) {
let n = t.mapPoint;
n.spatialReference.isWebMercator && (n = v.webMercatorToGeographic(
n
)), a(
[n.x, n.y],
[t.screenPoint.x, t.screenPoint.y],
t
);
}
if (this.view.type === "3d") {
const n = this.view.camera;
if (this.view.spatialReference.isWebMercator) {
const w = v.webMercatorToGeographic(
n.position
), d = {
heading: n.heading,
tilt: n.tilt,
position: w.toJSON()
};
console.log(d), (h = navigator.clipboard) == null || h.writeText(JSON.stringify(d));
} else
console.log(n.toJSON());
console.log(this.view.zoom, this.view.scale);
} else {
let n = this.view.center;
this.view.spatialReference.isWebMercator && (n = v.webMercatorToGeographic(
n
)), console.log({
center: n.toJSON(),
zoom: this.view.zoom,
scale: this.view.scale
});
}
const c = (b = (await this.view.hitTest(t)).results) == null ? void 0 : b.filter(
(n) => n.type === "graphic"
);
c.length > 0 && c.forEach((n) => {
var d;
const w = n.graphic;
(d = w.attributes) != null && d.type && s && s(
w.attributes.type,
w.attributes.id,
w.attributes,
t
);
});
});
{
let t = 0, r = !1;
this.view.on("pointer-move", async (c) => {
var b;
const h = performance.now();
if (!(r || h - t < 100)) {
t = h, r = !0;
try {
const w = (b = (await this.view.hitTest(c)).results) == null ? void 0 : b.some(
(z) => z.type === "graphic"
), d = this.view.container;
d && (d.style.cursor = w ? "pointer" : "default");
} finally {
r = !1;
}
}
});
}
if (this.view.on("pointer-leave", () => {
const t = this.view.container;
t && (t.style.cursor = "default");
}), (f = this.mapConfig) != null && f.baseLayers ? this.mapConfig.baseLayers.forEach((t) => {
const r = this.processUrl(t.url);
let c = null;
switch (t.type.toLowerCase()) {
case "webTile".toLowerCase(): {
c = new E({
urlTemplate: r,
...t.options
});
break;
}
case "tile": {
c = new R({
url: r,
...t.options
});
break;
}
case "customWMTS".toLowerCase(): {
c = new K({
urlTemplate: r,
...t.options
});
break;
}
case "mapImage".toLowerCase(): {
c = new O({
url: r,
...t.options
});
break;
}
case "arcgis": {
const h = new M(t.options);
o.basemap = h;
break;
}
case "feature": {
c = new S({ url: r, ...t.options });
break;
}
case "3dtiles": {
c = new B({
url: r,
...t.options
});
break;
}
case "wms": {
c = new N({
url: r,
...t.options
});
break;
}
case "geojson": {
c = new W({
url: r,
...t.options
});
break;
}
}
if (c)
if (t.group) {
let h = o.findLayerById(t.group);
h && h.type === "group" ? h.add(c) : (h = new H({
id: t.group,
title: t.groupTitle,
visibilityMode: "inherited",
layers: [c],
visible: t.groupVisible !== !1
}), o.add(h));
} else
o.add(c);
}) : o.basemap = new M({
style: {
id: "arcgis/light-gray",
language: "zh-CN"
}
}), (y = this.mapConfig) != null && y.hdLayers) {
const t = this.mapConfig.hdLayers.map(
(r) => (
// 图层文件为GeoJson格式, renderer和symbol使用autocast配置
new W({
url: this.processUrl(r.url),
...r.options,
title: r.options.id
})
)
);
o.addMany(t);
}
this.view.ui.remove("attribution"), await this.view.when();
const l = this.mapConfig.camera;
let m;
if (this.view.type === "2d") {
let t = this.view.center;
this.view.spatialReference.isWebMercator && (t = v.webMercatorToGeographic(
t
)), m = { center: [t.x, t.y], zoom: this.view.zoom };
} else {
let t = this.view.camera.position;
this.view.spatialReference.isWebMercator && (t = v.webMercatorToGeographic(
t
)), m = {
position: t,
heading: this.view.camera.heading,
tilt: this.view.camera.tilt
};
}
return l ? l.home = m : this.mapConfig.camera = { home: m }, this.view;
}
async setLayerVisibility(e) {
const { id: i, visible: s } = e;
if (i === "shanghai_district")
return !this.detachmentLayerLoaded && e.visible ? await this.loadDetachmentLayer() : this.detachmentLayer && (this.detachmentLayer.visible = s), { status: 0, message: "ok" };
{
const a = this.view.map.findLayerById(i);
return a ? (a.visible = s, { status: 0, message: "ok" }) : { status: -1, message: "未找到图层" };
}
}
/**
* 设置地图中心点
* @param params
* @returns
*/
async setMapCenter(e) {
var i;
if (!this.view)
return { status: -1, message: "未初始化" };
if (e.center || e.target) {
switch ((i = e.target) == null ? void 0 : i.type.toLowerCase()) {
case "point":
e.target = new C(e.target);
break;
case "polyline":
e.target = new G(e.target);
break;
case "polygon":
e.target = new T(e.target);
break;
case "multipoint":
e.target = new I(e.target);
break;
}
await this.view.goTo(e, { duration: (e.duration || 0) * 1e3 });
}
return { status: 0, message: "成功" };
}
setMapZoom(e) {
return this.view ? (this.view.zoom = e.zoom, { status: 0, message: "成功" }) : { status: -1, message: "未初始化" };
}
/**
* 在一定的高度，以一定的角度去观察某个坐标
* */
async lookAt(e) {
if (this.view.type === "2d")
return;
const i = e.tilt || 0, s = e.heading || 0;
if (i === 0)
await this.view.goTo(
{
position: {
x: e.center[0],
y: e.center[1],
z: e.height
},
heading: s,
tilt: 0
},
{ duration: (e.duration || 2) * 1e3 }
);
else {
const a = Math.tan(i * Math.PI / 180) * e.height, o = V(
D.point(e.center),
a,
s + 180,
{
units: "meters"
}
);
await this.view.goTo(
{
position: {
x: o.geometry.coordinates[0],
y: o.geometry.coordinates[1],
z: e.height
},
heading: s,
tilt: i
},
{ duration: (e.duration || 2) * 1e3 }
);
}
}
async setMapCamera(e) {
if (!this.view)
return { status: -1, message: "未初始化" };
const { name: i, duration: s = 0 } = e, { camera: a } = this.mapConfig;
if (!a)
return { status: -1, message: "未配置camera" };
const o = a[i];
return o ? (await this.view.goTo(o, { duration: s * 1e3 }), { status: 0, message: "成功" }) : { status: -1, message: "未配置camera" };
}
/**
* 经纬度转像素坐标，在地图移动时回调
* */
requestCoordinateTransform(e, i) {
let s = 0;
const o = 1e3 / 30, l = k.watch(
() => this.view.center,
() => {
const m = this.transformPoints(e), p = Date.now();
p - s > o && (i(m), s = p);
}
);
return this.handleIndex++, this.watchHandleMap.set(this.handleIndex, l), { handle: this.handleIndex, points: this.transformPoints(e) };
}
transformPoints(e) {
return e.map((i) => {
const s = new C({
x: i[0],
y: i[1]
}), a = this.view.toScreen(s);
return [a.x, a.y];
});
}
/**
* 停止坐标转换回调
* */
cancelCoordinateTransform(e) {
const i = this.watchHandleMap.get(e);
i && (i.remove(), this.watchHandleMap.delete(e));
}
/**
* 设置地图zoom范围
* */
setMapZoomRange(e) {
const { min: i, max: s } = e;
!i && !s || (this.zoomWatchHandle && this.zoomWatchHandle.remove(), this.zoomWatchHandle = k.watch(
() => this.view.zoom,
(a) => {
i && a <= i && (this.view.zoom = i), s && a >= s && (this.view.zoom = s);
}
));
}
/**
* 加载支队图层
* 现场环境用url创建FeatureLayer有各种问题，
* 改为图层导出为json，用json创建Graphic，再将Graphic添加到FeatureLayer
*/
async loadDetachmentLayer() {
this.detachmentLayer = new J({
id: "detachmentLayer",
title: "支队图层",
effect: void 0
}), this.view.map.add(this.detachmentLayer);
const e = this.mapConfig.baseLayers;
if (!e)
return;
const i = e.find(
(s) => s.options.id === "shanghai_district"
);
if (i)
try {
const a = await (await fetch(
"/GisViewerAssets/ShangHai/Layers/district.json"
)).json(), o = [], { renderer: l, labelingInfo: m } = i.options;
a.features.forEach((p) => {
const u = p.attributes.ZD_NAME;
if (u !== "高架支队") {
let g = new T({
rings: p.geometry.rings
});
g = x(g);
const f = new P({
geometry: g,
attributes: p.attributes
});
if (l) {
if (l.type === "simple")
f.symbol = l.symbol;
else if (l.type === "unique-value") {
const y = f.getAttribute("OBJECTID"), t = l.uniqueValueInfos.find(
(r) => r.value == y
);
f.symbol = t ? t.symbol : l.defaultSymbol;
}
} else
f.symbol = {
type: "simple-fill",
color: [227, 237, 255, 0.4],
outline: {
color: [255, 195, 153],
width: 2
}
};
if (o.push(f), m && u !== "边防港航支队" && u !== "机场支队") {
const y = new P({
geometry: g.centroid,
symbol: { ...m.symbol, text: u }
});
o.push(y);
}
}
}), this.detachmentLayer.addMany(o), this.detachmentLayerLoaded = !0;
} catch (s) {
console.error("加载支队图层失败:", s);
return;
}
}
}
export {
pe as default
};