gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
341 lines (340 loc) • 10.2 kB
JavaScript
import k from "@arcgis/core/Basemap";
import u from "@arcgis/core/config";
import * as T from "@arcgis/core/core/reactiveUtils";
import { Multipoint as P, Polygon as W, Polyline as z, Point as C } from "@arcgis/core/geometry";
import * as g from "@arcgis/core/geometry/support/webMercatorUtils";
import x from "@arcgis/core/layers/FeatureLayer";
import I from "@arcgis/core/layers/GeoJSONLayer";
import R from "@arcgis/core/layers/GroupLayer";
import G from "@arcgis/core/layers/IntegratedMesh3DTilesLayer";
import H from "@arcgis/core/layers/MapImageLayer";
import B from "@arcgis/core/layers/TileLayer";
import O from "@arcgis/core/layers/WebTileLayer";
import S from "@arcgis/core/Map";
import N from "@arcgis/core/views/MapView";
import E from "@arcgis/core/views/SceneView";
import A from "@turf/destination";
import * as J from "@turf/helpers";
import K from "./custom-layer/custom-wmts-layer.mjs";
function L(l, e) {
return l && (l.startsWith("http://") || l.startsWith("https://") ? l : e + l);
}
class oe {
constructor() {
this.mapConfig = {}, this.watchHandleMap = /* @__PURE__ */ new Map(), this.handleIndex = 0, this.zoomWatchHandle = null;
}
/**
* 初始化地图
* @param params 容器
* @returns view
*/
async initialize(e) {
var f, b, v, y;
this.mapConfig = e.mapConfig;
const { container: i, markerClickCallback: o, mapClickCallback: a } = e;
u.assetsPath = `${this.mapConfig.assetsRoot}/ArcgisAssets`, u.fontsUrl = `${this.mapConfig.assetsRoot}/fonts`, u.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
const r = new S();
if (((f = this.mapConfig) == null ? void 0 : f.mapOptions.mode.toLowerCase()) === "2d" ? (this.view = new N({
map: r,
container: i,
...this.mapConfig.mapOptions
}), this.view.on("drag", (t) => {
t.button === 2 && t.stopPropagation();
})) : this.view = new E({
map: r,
container: i,
environment: {
atmosphereEnabled: !0,
lighting: {
type: "virtual"
}
},
...(b = this.mapConfig) == null ? void 0 : b.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, M;
if (a) {
let s = t.mapPoint;
s.spatialReference.isWebMercator && (s = g.webMercatorToGeographic(
s
)), a(
[s.x, s.y],
[t.screenPoint.x, t.screenPoint.y],
t
);
}
if (this.view.type === "3d") {
const s = this.view.camera;
if (this.view.spatialReference.isWebMercator) {
const m = g.webMercatorToGeographic(
s.position
), w = {
heading: s.heading,
tilt: s.tilt,
position: m.toJSON()
};
console.log(w), (h = navigator.clipboard) == null || h.writeText(JSON.stringify(w));
} else
console.log(s.toJSON());
console.log(this.view.zoom, this.view.scale);
} else {
let s = this.view.center;
this.view.spatialReference.isWebMercator && (s = g.webMercatorToGeographic(
s
)), console.log({
center: s.toJSON(),
zoom: this.view.zoom,
scale: this.view.scale
});
}
const n = (M = (await this.view.hitTest(t)).results) == null ? void 0 : M.filter(
(s) => s.type === "graphic"
);
n.length > 0 && n.forEach((s) => {
var w;
const m = s.graphic;
(w = m.attributes) != null && w.type && o && o(
m.attributes.type,
m.attributes.id,
m.attributes,
t
);
});
}), (v = this.mapConfig) != null && v.baseLayers ? this.mapConfig.baseLayers.forEach((t) => {
const c = L(t.url, this.mapConfig.assetsRoot);
let n = null;
switch (t.type.toLowerCase()) {
case "webTile".toLowerCase(): {
n = new O({
urlTemplate: c,
...t.options
});
break;
}
case "tile": {
n = new B({
url: c,
...t.options
});
break;
}
case "customWMTS".toLowerCase(): {
n = new K({
urlTemplate: c,
...t.options
});
break;
}
case "mapImage".toLowerCase(): {
n = new H({
url: c,
...t.options
});
break;
}
case "arcgis": {
const h = new k(t.options);
r.basemap = h;
break;
}
case "feature": {
n = new x({ url: c, ...t.options });
break;
}
case "3dtiles": {
n = new G({
url: c,
...t.options
});
break;
}
default:
console.warn(`不支持的图层类型: ${t.type}`);
break;
}
if (n)
if (t.group) {
let h = r.findLayerById(t.group);
console.log(h), h && h.type === "group" ? h.add(n) : (h = new R({
id: t.group,
title: t.groupTitle,
visibilityMode: "inherited",
layers: [n]
}), r.add(h));
} else
r.add(n);
}) : r.basemap = new k({
style: {
id: "arcgis/light-gray",
language: "zh-CN"
}
}), (y = this.mapConfig) != null && y.hdLayers) {
const t = this.mapConfig.hdLayers.map(
(c) => (
// 图层文件为GeoJson格式, renderer和symbol使用autocast配置
new I({
url: L(c.url, this.mapConfig.assetsRoot),
...c.options,
title: c.options.id
})
)
);
r.addMany(t);
}
this.view.ui.remove("attribution"), await this.view.when();
const d = this.mapConfig.camera;
let p;
if (this.view.type === "2d") {
let t = this.view.center;
this.view.spatialReference.isWebMercator && (t = g.webMercatorToGeographic(
t
)), p = { center: [t.x, t.y], zoom: this.view.zoom };
} else {
let t = this.view.camera.position;
this.view.spatialReference.isWebMercator && (t = g.webMercatorToGeographic(
t
)), p = {
position: t,
heading: this.view.camera.heading,
tilt: this.view.camera.tilt
};
}
return d ? d.home = p : this.mapConfig.camera = { home: p }, this.view;
}
setLayerVisibility(e) {
const { id: i, visible: o } = e, a = this.view.map.findLayerById(i);
return a ? (a.visible = o, { 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 z(e.target);
break;
case "polygon":
e.target = new W(e.target);
break;
case "multipoint":
e.target = new P(e.target);
break;
}
await this.view.goTo(e, { duration: (e.duration || 0) * 1e3 });
}
return { status: 0, message: "成功" };
}
/**
* 在一定的高度，以一定的角度去观察某个坐标
* */
async lookAt(e) {
if (this.view.type === "2d")
return;
const i = e.tilt || 0, o = e.heading || 0;
if (i === 0)
await this.view.goTo(
{
position: {
x: e.center[0],
y: e.center[1],
z: e.height
},
heading: o,
tilt: 0
},
{ duration: (e.duration || 2) * 1e3 }
);
else {
const a = Math.tan(i * Math.PI / 180) * e.height, r = A(
J.point(e.center),
a,
o + 180,
{
units: "meters"
}
);
await this.view.goTo(
{
position: {
x: r.geometry.coordinates[0],
y: r.geometry.coordinates[1],
z: e.height
},
heading: o,
tilt: i
},
{ duration: (e.duration || 2) * 1e3 }
);
}
}
async setMapCamera(e) {
if (!this.view)
return { status: -1, message: "未初始化" };
const { name: i, duration: o = 0 } = e, { camera: a } = this.mapConfig;
if (!a)
return { status: -1, message: "未配置camera" };
const r = a[i];
return r ? (await this.view.goTo(r, { duration: o * 1e3 }), { status: 0, message: "成功" }) : { status: -1, message: "未配置camera" };
}
/**
* 经纬度转像素坐标，在地图移动时回调
* */
requestCoordinateTransform(e, i) {
let o = 0;
const r = 1e3 / 30, d = T.watch(
() => this.view.center,
() => {
const p = this.transformPoints(e), f = Date.now();
f - o > r && (i(p), o = f);
}
);
return this.handleIndex++, this.watchHandleMap.set(this.handleIndex, d), { handle: this.handleIndex, points: this.transformPoints(e) };
}
transformPoints(e) {
return e.map((i) => {
const o = new C({
x: i[0],
y: i[1]
}), a = this.view.toScreen(o);
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: o } = e;
!i && !o || (this.zoomWatchHandle && this.zoomWatchHandle.remove(), this.zoomWatchHandle = T.watch(
() => this.view.zoom,
(a) => {
i && a <= i && (this.view.zoom = i), o && a >= o && (this.view.zoom = o);
}
));
}
}
export {
oe as default
};