@ywbgn/bgl-package 1.0.0

package/README.md

@@ -0,0 +1,67 @@
+# @ywbgn/bgl-package
+
+基于 Vue 3 与 `@arcgis/core` 的地图组件库：地图初始化、底图切换（含自定义矢量示例）、工具栏（缩放、复位、测距、测面、绘图、清绘）。
+
+## 安装依赖
+
+```bash
+npm install @ywbgn/bgl-package vue @arcgis/core
+```
+
+## 引入依赖与注册
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import VueArcgisMap from '@ywbgn/bgl-package'
+import '@arcgis/core/assets/esri/themes/light/main.css'
+
+const app = createApp(App)
+app.use(VueArcgisMap)
+app.mount('#app')
+```
+
+## 使用示例
+
+```vue
+<template>
+  <div style="position: relative">
+    <ArcgisMap ref="mapRef" width="100%" height="600px" @ready="onReady" />
+    <template v-if="view && sketchLayer">
+      <BasemapSwitch :view="view" />
+      <MapToolbar :view="view" :sketch-layer="sketchLayer" />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, shallowRef } from 'vue'
+
+const mapRef = ref(null)
+const view = shallowRef(null)
+const sketchLayer = shallowRef(null)
+
+const onReady = ({ view: v, sketchLayer: layer }) => {
+  view.value = v
+  sketchLayer.value = layer
+}
+</script>
+```
+
+`ArcgisMap` 支持以下尺寸参数：
+
+- `width`：默认 `100%`，支持 `String | Number`（`Number` 按 `px` 处理）
+- `height`：默认 `70vh`，支持 `String | Number`（`Number` 按 `px` 处理）
+
+### 按需引入（不全局注册）
+
+```js
+import { ArcgisMap, BasemapSwitch, MapToolbar } from '@ywbgn/bgl-package'
+```
+
+## 说明
+
+- **MapView、Layer 等 ArcGIS 对象不要用 `ref()` 做深度响应式**，请用 `shallowRef`（或 `markRaw`），否则会出现 `__accessor__` 与 Vue Proxy 冲突。本库子组件内部已对 props 做了 `toRaw` 处理，但业务侧仍建议用 `shallowRef` 保存 `view`。
+- 地图与测量能力依赖 Esri 服务与许可策略，部署与密钥请按官方文档配置。
+- 本包依赖 `@arcgis/core`，使用时需遵守 Esri 官方许可条款。
+- 若使用 UMD 产物，请注意 Rollup 对 `default` + 具名导出同时存在时的用法；推荐 ESM 方式引用。

package/dist/vue-arcgis-map.css

@@ -0,0 +1 @@
+.map-container[data-v-38c725b2]{position:relative}.basemap-box[data-v-98d50ba6]{position:absolute;top:15px;right:15px;background:#fff;padding:6px 10px;border-radius:6px;z-index:99;box-shadow:0 1px 4px #00000026}button[data-v-98d50ba6]{margin:0 4px;padding:4px 8px;cursor:pointer}.toolbar-box[data-v-37cacb1d]{position:absolute;top:70px;right:15px;background:#fff;padding:6px 10px;border-radius:6px;z-index:99;max-width:220px;box-shadow:0 1px 4px #00000026}button[data-v-37cacb1d]{margin:4px;padding:4px 8px;cursor:pointer}

package/dist/vue-arcgis-map.js

@@ -0,0 +1,192 @@
+import { ref as C, shallowRef as d, computed as x, onMounted as S, onBeforeUnmount as k, openBlock as y, createElementBlock as f, normalizeStyle as $, createElementVNode as c, toRaw as w } from "vue";
+import B from "@arcgis/core/Map.js";
+import z from "@arcgis/core/views/MapView.js";
+import L from "@arcgis/core/layers/GraphicsLayer.js";
+import A from "@arcgis/core/Basemap.js";
+import T from "@arcgis/core/layers/VectorTileLayer.js";
+import V from "@arcgis/core/widgets/AreaMeasurement2D.js";
+import D from "@arcgis/core/widgets/DistanceMeasurement2D.js";
+import O from "@arcgis/core/widgets/Sketch.js";
+const h = (a, p) => {
+  const n = a.__vccOpts || a;
+  for (const [i, r] of p)
+    n[i] = r;
+  return n;
+}, I = {
+  __name: "ArcgisMap",
+  props: {
+    width: {
+      type: [String, Number],
+      default: "100%"
+    },
+    height: {
+      type: [String, Number],
+      default: "70vh"
+    }
+  },
+  emits: ["ready"],
+  setup(a, { expose: p, emit: n }) {
+    const i = n, r = a, s = C(null), e = d(null), u = d(null), b = x(() => ({
+      width: typeof r.width == "number" ? `${r.width}px` : r.width,
+      height: typeof r.height == "number" ? `${r.height}px` : r.height
+    })), v = new L({ title: "绘制图层", listMode: "hide" });
+    return S(() => {
+      const l = new B({
+        basemap: "streets-vector",
+        layers: [v]
+      }), m = new z({
+        container: s.value,
+        map: l,
+        zoom: 12,
+        center: [116.3972, 39.9075]
+      });
+      e.value = l, u.value = m, m.when(() => {
+        i("ready", { map: l, view: m, sketchLayer: v });
+      });
+    }), k(() => {
+      var l;
+      (l = u.value) == null || l.destroy(), u.value = null, e.value = null;
+    }), p({ map: e, view: u, sketchLayer: v }), (l, m) => (y(), f("div", {
+      ref_key: "mapRef",
+      ref: s,
+      class: "map-container",
+      style: $(b.value)
+    }, null, 4));
+  }
+}, R = /* @__PURE__ */ h(I, [["__scopeId", "data-v-38c725b2"]]), W = { class: "basemap-box" }, j = {
+  __name: "BasemapSwitch",
+  props: {
+    /** MapView 实例 */
+    view: { type: Object, required: !0 }
+  },
+  setup(a) {
+    const p = a, n = () => w(p.view), i = (s) => {
+      const e = n();
+      e != null && e.map && (e.map.basemap = s);
+    }, r = () => {
+      const s = n();
+      if (!(s != null && s.map)) return;
+      const e = new T({
+        url: "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer"
+      });
+      s.map.basemap = new A({
+        baseLayers: [e],
+        title: "自定义矢量",
+        id: "custom-vt"
+      });
+    };
+    return (s, e) => (y(), f("div", W, [
+      c("button", {
+        type: "button",
+        onClick: e[0] || (e[0] = (u) => i("streets-vector"))
+      }, "矢量"),
+      c("button", {
+        type: "button",
+        onClick: e[1] || (e[1] = (u) => i("satellite"))
+      }, "影像"),
+      c("button", {
+        type: "button",
+        onClick: e[2] || (e[2] = (u) => i("terrain"))
+      }, "地形"),
+      c("button", {
+        type: "button",
+        onClick: e[3] || (e[3] = (u) => i("topo-vector"))
+      }, "地形图"),
+      c("button", {
+        type: "button",
+        onClick: r
+      }, "自定义")
+    ]));
+  }
+}, q = /* @__PURE__ */ h(j, [["__scopeId", "data-v-98d50ba6"]]), N = { class: "toolbar-box" }, E = {
+  __name: "MapToolbar",
+  props: {
+    /** MapView 实例 */
+    view: { type: Object, required: !0 },
+    /** 绘图使用的 GraphicsLayer，由 ArcgisMap 注入 */
+    sketchLayer: { type: Object, required: !0 }
+  },
+  setup(a) {
+    const p = a, n = () => w(p.view), i = () => w(p.sketchLayer), r = d(null), s = d(null), e = () => {
+      const t = r.value, o = n();
+      t && o && (o.ui.remove(t), t.destroy()), r.value = null;
+    }, u = () => {
+      const t = n();
+      t && (t.zoom += 1);
+    }, b = () => {
+      const t = n();
+      t && (t.zoom -= 1);
+    }, v = () => {
+      const t = n();
+      t && t.goTo({ center: [116.3972, 39.9075], zoom: 12 });
+    }, l = () => {
+      const t = n();
+      if (!t) return;
+      e();
+      const o = new D({ view: t });
+      r.value = o, t.ui.add(o, "top-right"), o.viewModel.start();
+    }, m = () => {
+      const t = n();
+      if (!t) return;
+      e();
+      const o = new V({ view: t });
+      r.value = o, t.ui.add(o, "top-right"), o.viewModel.start();
+    }, g = () => {
+      const t = n(), o = i();
+      if (!(!t || !o) && (e(), !s.value)) {
+        const _ = new O({
+          view: t,
+          layer: o
+        });
+        s.value = _, t.ui.add(_, "bottom-right");
+      }
+    }, M = () => {
+      var t;
+      (t = i()) == null || t.removeAll();
+    };
+    return k(() => {
+      e();
+      const t = s.value, o = n();
+      t && o && (o.ui.remove(t), t.destroy()), s.value = null;
+    }), (t, o) => (y(), f("div", N, [
+      c("button", {
+        type: "button",
+        onClick: u
+      }, "放大"),
+      c("button", {
+        type: "button",
+        onClick: b
+      }, "缩小"),
+      c("button", {
+        type: "button",
+        onClick: v
+      }, "复位"),
+      c("button", {
+        type: "button",
+        onClick: l
+      }, "测距"),
+      c("button", {
+        type: "button",
+        onClick: m
+      }, "测面"),
+      c("button", {
+        type: "button",
+        onClick: g
+      }, "绘图"),
+      c("button", {
+        type: "button",
+        onClick: M
+      }, "清绘")
+    ]));
+  }
+}, G = /* @__PURE__ */ h(E, [["__scopeId", "data-v-37cacb1d"]]), Z = {
+  install(a) {
+    a.component("ArcgisMap", R), a.component("BasemapSwitch", q), a.component("MapToolbar", G);
+  }
+};
+export {
+  R as ArcgisMap,
+  q as BasemapSwitch,
+  G as MapToolbar,
+  Z as default
+};

package/dist/vue-arcgis-map.umd.cjs

@@ -0,0 +1 @@
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@arcgis/core/Map.js"),require("@arcgis/core/views/MapView.js"),require("@arcgis/core/layers/GraphicsLayer.js"),require("@arcgis/core/Basemap.js"),require("@arcgis/core/layers/VectorTileLayer.js"),require("@arcgis/core/widgets/AreaMeasurement2D.js"),require("@arcgis/core/widgets/DistanceMeasurement2D.js"),require("@arcgis/core/widgets/Sketch.js")):typeof define=="function"&&define.amd?define(["exports","vue","@arcgis/core/Map.js","@arcgis/core/views/MapView.js","@arcgis/core/layers/GraphicsLayer.js","@arcgis/core/Basemap.js","@arcgis/core/layers/VectorTileLayer.js","@arcgis/core/widgets/AreaMeasurement2D.js","@arcgis/core/widgets/DistanceMeasurement2D.js","@arcgis/core/widgets/Sketch.js"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.VueArcgisMap={},r.Vue,r.arcgis,r.arcgis,r.arcgis,r.arcgis,r.arcgis,r.arcgis,r.arcgis,r.arcgis))})(this,(function(r,e,v,k,M,j,V,B,E,S){"use strict";const y=(i,m)=>{const n=i.__vccOpts||i;for(const[l,c]of m)n[l]=c;return n},g=y({__name:"ArcgisMap",props:{width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:"70vh"}},emits:["ready"],setup(i,{expose:m,emit:n}){const l=n,c=i,a=e.ref(null),o=e.shallowRef(null),u=e.shallowRef(null),f=e.computed(()=>({width:typeof c.width=="number"?`${c.width}px`:c.width,height:typeof c.height=="number"?`${c.height}px`:c.height})),w=new M({title:"绘制图层",listMode:"hide"});return e.onMounted(()=>{const p=new v({basemap:"streets-vector",layers:[w]}),d=new k({container:a.value,map:p,zoom:12,center:[116.3972,39.9075]});o.value=p,u.value=d,d.when(()=>{l("ready",{map:p,view:d,sketchLayer:w})})}),e.onBeforeUnmount(()=>{var p;(p=u.value)==null||p.destroy(),u.value=null,o.value=null}),m({map:o,view:u,sketchLayer:w}),(p,d)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"mapRef",ref:a,class:"map-container",style:e.normalizeStyle(f.value)},null,4))}},[["__scopeId","data-v-38c725b2"]]),N={class:"basemap-box"},b=y({__name:"BasemapSwitch",props:{view:{type:Object,required:!0}},setup(i){const m=i,n=()=>e.toRaw(m.view),l=a=>{const o=n();o!=null&&o.map&&(o.map.basemap=a)},c=()=>{const a=n();if(!(a!=null&&a.map))return;const o=new V({url:"https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer"});a.map.basemap=new j({baseLayers:[o],title:"自定义矢量",id:"custom-vt"})};return(a,o)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("button",{type:"button",onClick:o[0]||(o[0]=u=>l("streets-vector"))},"矢量"),e.createElementVNode("button",{type:"button",onClick:o[1]||(o[1]=u=>l("satellite"))},"影像"),e.createElementVNode("button",{type:"button",onClick:o[2]||(o[2]=u=>l("terrain"))},"地形"),e.createElementVNode("button",{type:"button",onClick:o[3]||(o[3]=u=>l("topo-vector"))},"地形图"),e.createElementVNode("button",{type:"button",onClick:c},"自定义")]))}},[["__scopeId","data-v-98d50ba6"]]),C={class:"toolbar-box"},h=y({__name:"MapToolbar",props:{view:{type:Object,required:!0},sketchLayer:{type:Object,required:!0}},setup(i){const m=i,n=()=>e.toRaw(m.view),l=()=>e.toRaw(m.sketchLayer),c=e.shallowRef(null),a=e.shallowRef(null),o=()=>{const t=c.value,s=n();t&&s&&(s.ui.remove(t),t.destroy()),c.value=null},u=()=>{const t=n();t&&(t.zoom+=1)},f=()=>{const t=n();t&&(t.zoom-=1)},w=()=>{const t=n();t&&t.goTo({center:[116.3972,39.9075],zoom:12})},p=()=>{const t=n();if(!t)return;o();const s=new E({view:t});c.value=s,t.ui.add(s,"top-right"),s.viewModel.start()},d=()=>{const t=n();if(!t)return;o();const s=new B({view:t});c.value=s,t.ui.add(s,"top-right"),s.viewModel.start()},T=()=>{const t=n(),s=l();if(!(!t||!s)&&(o(),!a.value)){const _=new S({view:t,layer:s});a.value=_,t.ui.add(_,"bottom-right")}},$=()=>{var t;(t=l())==null||t.removeAll()};return e.onBeforeUnmount(()=>{o();const t=a.value,s=n();t&&s&&(s.ui.remove(t),t.destroy()),a.value=null}),(t,s)=>(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("button",{type:"button",onClick:u},"放大"),e.createElementVNode("button",{type:"button",onClick:f},"缩小"),e.createElementVNode("button",{type:"button",onClick:w},"复位"),e.createElementVNode("button",{type:"button",onClick:p},"测距"),e.createElementVNode("button",{type:"button",onClick:d},"测面"),e.createElementVNode("button",{type:"button",onClick:T},"绘图"),e.createElementVNode("button",{type:"button",onClick:$},"清绘")]))}},[["__scopeId","data-v-37cacb1d"]]),q={install(i){i.component("ArcgisMap",g),i.component("BasemapSwitch",b),i.component("MapToolbar",h)}};r.ArcgisMap=g,r.BasemapSwitch=b,r.MapToolbar=h,r.default=q,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@ywbgn/bgl-package",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/vue-arcgis-map.umd.cjs",
+  "module": "dist/vue-arcgis-map.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-arcgis-map.js",
+      "require": "./dist/vue-arcgis-map.umd.cjs"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "@arcgis/core": "4.34.8",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@arcgis/core": "4.34.8",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.1",
+    "vue": "^3.5.13"
+  }
+}