npm - my-openlayer - Versions diffs - 2.4.10 → 2.4.12 - Mend

my-openlayer 2.4.10 → 2.4.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/docs/.vitepress/dist/VueTemplatePoint.html ADDED Viewed

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="zh-CN" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>VueTemplatePoint Vue 组件点位类 | MyOpenLayer</title>
+    <meta name="description" content="基于 OpenLayers 的现代地图组件库">
+    <meta name="generator" content="VitePress v1.6.4">
+    <link rel="preload stylesheet" href="/my-openlayer/assets/style.C2pAQzDq.css" as="style">
+    <link rel="preload stylesheet" href="/my-openlayer/vp-icons.css" as="style">
+    <script type="module" src="/my-openlayer/assets/app.YvjVuxaB.js"></script>
+    <link rel="preload" href="/my-openlayer/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/my-openlayer/assets/chunks/theme.Bf87fILP.js">
+    <link rel="modulepreload" href="/my-openlayer/assets/chunks/framework.C_W0ODpn.js">
+    <link rel="modulepreload" href="/my-openlayer/assets/VueTemplatePoint.md.CtxSb5Pm.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/my-openlayer/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>MyOpenLayer</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/MyOl.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/MyOl.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>API</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/cuteyuchen/my-openlayer" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>GitHub</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/cuteyuchen/my-openlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/cuteyuchen/my-openlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>核心类库</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MyOl.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MyOl 地图入口</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MapBaseLayers.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MapBaseLayers 底图管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ConfigManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ConfigManager 配置管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/EventManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>EventManager 事件管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ErrorHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ErrorHandler 错误处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>要素操作</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Point.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Point 点要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Line.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Line 线要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Polygon.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Polygon 面要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/VueTemplatePoint.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>VueTemplatePoint Vue点位</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/RiverLayerManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>RiverLayerManager 河流图层</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>交互与工具</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/SelectHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>SelectHandler 要素选择</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MeasureHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MeasureHandler 测量工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MapTools.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MapTools 地图工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ValidationUtils.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ValidationUtils 验证工具</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _my-openlayer_VueTemplatePoint" data-v-39a288b8><div><h1 id="vuetemplatepoint-vue-组件点位类" tabindex="-1">VueTemplatePoint Vue 组件点位类 <a class="header-anchor" href="#vuetemplatepoint-vue-组件点位类" aria-label="Permalink to &quot;VueTemplatePoint Vue 组件点位类&quot;"></a></h1><p><code>VueTemplatePoint</code> 允许将 Vue 组件直接渲染为地图上的点位覆盖物（Overlay），支持 Vue 2 和 Vue 3。它通过创建 Overlay 并将 Vue 组件挂载到 Overlay 的 DOM 元素中来实现。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map)</span></span></code></pre></div><ul><li><strong>参数</strong>: <ul><li><code>map</code> (Map): OpenLayers 地图实例。</li></ul></li></ul><h2 id="接口定义" tabindex="-1">接口定义 <a class="header-anchor" href="#接口定义" aria-label="Permalink to &quot;接口定义&quot;"></a></h2><h3 id="vuetemplatepointoptions" tabindex="-1">VueTemplatePointOptions <a class="header-anchor" href="#vuetemplatepointoptions" aria-label="Permalink to &quot;VueTemplatePointOptions&quot;"></a></h3><p>配置 Vue 模版点位的选项接口。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">必填</th><th style="text-align:left;">默认值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;">Template</td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">是</td><td style="text-align:left;">-</td><td style="text-align:left;">Vue 组件模版对象。</td></tr><tr><td style="text-align:left;">lgtd</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">是</td><td style="text-align:left;">-</td><td style="text-align:left;">经度。</td></tr><tr><td style="text-align:left;">lttd</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">是</td><td style="text-align:left;">-</td><td style="text-align:left;">纬度。</td></tr><tr><td style="text-align:left;">props</td><td style="text-align:left;"><code>Record&lt;string, any&gt;</code></td><td style="text-align:left;">否</td><td style="text-align:left;">-</td><td style="text-align:left;">传递给组件的 props。</td></tr><tr><td style="text-align:left;">positioning</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">否</td><td style="text-align:left;"><code>&#39;center-center&#39;</code></td><td style="text-align:left;">覆盖物相对于位置的锚点。可选值见 OpenLayers Overlay positioning。</td></tr><tr><td style="text-align:left;">stopEvent</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">否</td><td style="text-align:left;"><code>false</code></td><td style="text-align:left;">是否阻止地图事件冒泡。</td></tr><tr><td style="text-align:left;">zIndex</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">否</td><td style="text-align:left;">-</td><td style="text-align:left;">DOM 元素的 z-index。</td></tr><tr><td style="text-align:left;">className</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">否</td><td style="text-align:left;">-</td><td style="text-align:left;">DOM 元素的 CSS 类名。</td></tr><tr><td style="text-align:left;">visible</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">否</td><td style="text-align:left;"><code>true</code></td><td style="text-align:left;">初始可见性。</td></tr></tbody></table><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to &quot;方法&quot;"></a></h2><h3 id="addvuetemplatepoint" tabindex="-1">addVueTemplatePoint <a class="header-anchor" href="#addvuetemplatepoint" aria-label="Permalink to &quot;addVueTemplatePoint&quot;"></a></h3><p>添加一组 Vue 组件点位。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addVueTemplatePoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  pointDataList: any[], </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  template: any, </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    positioning?: string,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    stopEvent?: boolean</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): VueTemplatePointController</span></span></code></pre></div><ul><li><p><strong>参数</strong>:</p><ul><li><code>pointDataList</code> (any[]): 点位数据列表。列表中的每个对象都必须包含 <code>lgtd</code> (经度) 和 <code>lttd</code> (纬度) 属性。</li><li><code>template</code> (any): Vue 组件对象。</li><li><code>options</code> (Object): 可选配置。 <ul><li><code>positioning</code>: 覆盖物定位点（如 <code>&#39;center-center&#39;</code>, <code>&#39;bottom-center&#39;</code> 等）。</li><li><code>stopEvent</code>: 是否阻止事件冒泡（默认 <code>false</code>）。</li></ul></li></ul></li><li><p><strong>返回值</strong>: 返回一个控制对象 <code>VueTemplatePointController</code>，用于批量管理这组点位。</p></li></ul><h3 id="vuetemplatepointcontroller-接口" tabindex="-1">VueTemplatePointController 接口 <a class="header-anchor" href="#vuetemplatepointcontroller-接口" aria-label="Permalink to &quot;VueTemplatePointController 接口&quot;"></a></h3><p><code>addVueTemplatePoint</code> 返回的对象包含以下方法：</p><table tabindex="0"><thead><tr><th style="text-align:left;">方法</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>setVisible(visible: boolean): void</code></td><td style="text-align:left;">设置该组所有点位的可见性。</td></tr><tr><td style="text-align:left;"><code>setOneVisibleByProp(propName: string, propValue: any, visible: boolean): void</code></td><td style="text-align:left;">根据点位数据中的属性值控制特定点位的可见性。</td></tr><tr><td style="text-align:left;"><code>remove(): void</code></td><td style="text-align:left;">移除该组所有点位并销毁组件实例。</td></tr><tr><td style="text-align:left;"><code>getPoints(): VueTemplatePointInstance[]</code></td><td style="text-align:left;">获取该组创建的所有底层点位实例列表。</td></tr></tbody></table><h3 id="getpointbyid" tabindex="-1">getPointById <a class="header-anchor" href="#getpointbyid" aria-label="Permalink to &quot;getPointById&quot;"></a></h3><p>根据 ID 获取单个点位实例。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getPointById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id: string): VueTemplatePointInstance </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span></span></code></pre></div><h3 id="getallpoints" tabindex="-1">getAllPoints <a class="header-anchor" href="#getallpoints" aria-label="Permalink to &quot;getAllPoints&quot;"></a></h3><p>获取所有管理的点位实例。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getAllPoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): VueTemplatePointInstance[]</span></span></code></pre></div><h3 id="removeallpoints" tabindex="-1">removeAllPoints <a class="header-anchor" href="#removeallpoints" aria-label="Permalink to &quot;removeAllPoints&quot;"></a></h3><p>移除并销毁所有点位。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">removeAllPoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><h3 id="getpointcount" tabindex="-1">getPointCount <a class="header-anchor" href="#getpointcount" aria-label="Permalink to &quot;getPointCount&quot;"></a></h3><p>获取当前管理的点位数量。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getPointCount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): number</span></span></code></pre></div><h2 id="vuetemplatepointinstance-实例方法" tabindex="-1">VueTemplatePointInstance 实例方法 <a class="header-anchor" href="#vuetemplatepointinstance-实例方法" aria-label="Permalink to &quot;VueTemplatePointInstance 实例方法&quot;"></a></h2><p>单个点位实例 (<code>VueTemplatePointInstance</code>) 提供的操作方法：</p><table tabindex="0"><thead><tr><th style="text-align:left;">方法</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>setVisible(visible: boolean): void</code></td><td style="text-align:left;">设置当前点位可见性。</td></tr><tr><td style="text-align:left;"><code>isVisible(): boolean</code></td><td style="text-align:left;">获取当前可见性状态。</td></tr><tr><td style="text-align:left;"><code>updatePosition(lgtd: number, lttd: number): void</code></td><td style="text-align:left;">更新点位经纬度位置。</td></tr><tr><td style="text-align:left;"><code>getPosition(): number[]</code></td><td style="text-align:left;">获取当前位置 <code>[lgtd, lttd]</code>。</td></tr><tr><td style="text-align:left;"><code>updateProps(newProps: Record&lt;string, any&gt;): void</code></td><td style="text-align:left;">更新传递给组件的 props。</td></tr><tr><td style="text-align:left;"><code>setStyle(styles: Partial&lt;CSSStyleDeclaration&gt;): void</code></td><td style="text-align:left;">设置 DOM 元素的 CSS 样式。</td></tr><tr><td style="text-align:left;"><code>addClass(className: string): void</code></td><td style="text-align:left;">添加 CSS 类名。</td></tr><tr><td style="text-align:left;"><code>removeClass(className: string): void</code></td><td style="text-align:left;">移除 CSS 类名。</td></tr><tr><td style="text-align:left;"><code>remove(): void</code></td><td style="text-align:left;">移除并销毁当前点位。</td></tr><tr><td style="text-align:left;"><code>getId(): string</code></td><td style="text-align:left;">获取点位唯一 ID。</td></tr><tr><td style="text-align:left;"><code>getDomElement(): HTMLElement</code></td><td style="text-align:left;">获取点位对应的 DOM 元素。</td></tr></tbody></table><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;"></a></h2><h3 id="vue-3-示例" tabindex="-1">Vue 3 示例 <a class="header-anchor" href="#vue-3-示例" aria-label="Permalink to &quot;Vue 3 示例&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MyOl } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MyPopup </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./MyPopup.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 你的 Vue 组件</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> map</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyOl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;map-container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> vuePointManager</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> map.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getPoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pointData</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { lgtd: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120.1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, lttd: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;位置1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;normal&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { lgtd: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, lttd: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30.3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;位置2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. 添加组件点位</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pointsController</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> vuePointManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addVueTemplatePoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  pointData,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  MyPopup,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    positioning: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bottom-center&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    stopEvent: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 允许点击组件交互，阻止地图点击事件</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2. 批量控制显示隐藏</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">pointsController.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 3. 根据属性控制特定点位</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">pointsController.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setOneVisibleByProp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;status&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 4. 获取单个实例进行精细控制</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> instances</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pointsController.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getPoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (instances.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> firstPoint</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> instances[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 更新位置</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  firstPoint.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">updatePosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120.15</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30.25</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 更新 Props</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  firstPoint.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">updateProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    pointData: { </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">pointData[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;更新后的标题&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 添加样式类</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  firstPoint.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addClass</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;highlight-point&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 5. 移除这组点位</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// pointsController.remove();</span></span></code></pre></div><h3 id="vue-组件编写规范-mypopup-vue" tabindex="-1">Vue 组件编写规范 (MyPopup.vue) <a class="header-anchor" href="#vue-组件编写规范-mypopup-vue" aria-label="Permalink to &quot;Vue 组件编写规范 (MyPopup.vue)&quot;"></a></h3><p>组件会接收 <code>pointData</code> 作为 props，内容为传入 <code>pointDataList</code> 中的对应数据项。</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;popup&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">pointData.status</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ pointData.title }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;状态: {{ pointData.status }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">handleClick</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;详情&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineProps } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  pointData: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    type: Object,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    required: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Clicked point:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, props.pointData.title);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.popup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  box-shadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> rgba</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">150</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">translate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 配合 bottom-center 定位 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.popup.warning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> orange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/my-openlayer/Polygon.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Polygon 面要素</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/my-openlayer/RiverLayerManager.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>RiverLayerManager 河流图层</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2024-present</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"configmanager.md\":\"BOMdGTaa\",\"errorhandler.md\":\"yUiuJ9w9\",\"eventmanager.md\":\"BhCUVy1f\",\"index.md\":\"BJz6tHSr\",\"line.md\":\"BAQOzmSt\",\"mapbaselayers.md\":\"Bw0L_m0b\",\"maptools.md\":\"DaYgiDPe\",\"measurehandler.md\":\"7Sf4ymRv\",\"myol.md\":\"D-14Gzjy\",\"point.md\":\"Bi9juuuv\",\"polygon.md\":\"-JIqEvzD\",\"riverlayermanager.md\":\"CfUu2RxH\",\"selecthandler.md\":\"COR4ez_p\",\"validationutils.md\":\"ReTVWa73\",\"vuetemplatepoint.md\":\"CtxSb5Pm\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"MyOpenLayer\",\"description\":\"基于 OpenLayers 的现代地图组件库\",\"base\":\"/my-openlayer/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/MyOl\"},{\"text\":\"API\",\"link\":\"/MyOl\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/cuteyuchen/my-openlayer\"}],\"sidebar\":[{\"text\":\"核心类库\",\"items\":[{\"text\":\"MyOl 地图入口\",\"link\":\"/MyOl\"},{\"text\":\"MapBaseLayers 底图管理\",\"link\":\"/MapBaseLayers\"},{\"text\":\"ConfigManager 配置管理\",\"link\":\"/ConfigManager\"},{\"text\":\"EventManager 事件管理\",\"link\":\"/EventManager\"},{\"text\":\"ErrorHandler 错误处理\",\"link\":\"/ErrorHandler\"}]},{\"text\":\"要素操作\",\"items\":[{\"text\":\"Point 点要素\",\"link\":\"/Point\"},{\"text\":\"Line 线要素\",\"link\":\"/Line\"},{\"text\":\"Polygon 面要素\",\"link\":\"/Polygon\"},{\"text\":\"VueTemplatePoint Vue点位\",\"link\":\"/VueTemplatePoint\"},{\"text\":\"RiverLayerManager 河流图层\",\"link\":\"/RiverLayerManager\"}]},{\"text\":\"交互与工具\",\"items\":[{\"text\":\"SelectHandler 要素选择\",\"link\":\"/SelectHandler\"},{\"text\":\"MeasureHandler 测量工具\",\"link\":\"/MeasureHandler\"},{\"text\":\"MapTools 地图工具\",\"link\":\"/MapTools\"},{\"text\":\"ValidationUtils 验证工具\",\"link\":\"/ValidationUtils\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/cuteyuchen/my-openlayer\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+  </body>
+</html>

package/docs/.vitepress/dist/assets/ConfigManager.md.BOMdGTaa.js ADDED Viewed

@@ -0,0 +1,22 @@
+import{_ as s,c as i,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const g=JSON.parse('{"title":"ConfigManager 配置管理","description":"","frontmatter":{},"headers":[],"relativePath":"ConfigManager.md","filePath":"ConfigManager.md"}'),n={name:"ConfigManager.md"};function l(h,t,d,p,o,r){return e(),i("div",null,t[0]||(t[0]=[a(`<h1 id="configmanager-配置管理" tabindex="-1">ConfigManager 配置管理 <a class="header-anchor" href="#configmanager-配置管理" aria-label="Permalink to &quot;ConfigManager 配置管理&quot;"></a></h1><p><code>ConfigManager</code> 类用于统一管理地图组件的默认配置和常量。它提供了一系列静态只读属性，确保整个应用中使用一致的配置默认值。</p><h2 id="导入" tabindex="-1">导入 <a class="header-anchor" href="#导入" aria-label="Permalink to &quot;导入&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ConfigManager } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-label="Permalink to &quot;静态属性&quot;"></a></h2><p><code>ConfigManager</code> 包含以下类别的默认配置：</p><h3 id="点位配置-point-options" tabindex="-1">点位配置 (Point Options) <a class="header-anchor" href="#点位配置-point-options" aria-label="Permalink to &quot;点位配置 (Point Options)&quot;"></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th><th style="text-align:left;">默认值</th></tr></thead><tbody><tr><td style="text-align:left;"><code>DEFAULT_POINT_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认点位基础配置</td><td style="text-align:left;"><code>{ visible: true, zIndex: 21 }</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_POINT_TEXT_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认点位文本配置</td><td style="text-align:left;"><code>{ textFont: &#39;12px Calibri,sans-serif&#39;, textFillColor: &#39;#FFF&#39;, textStrokeColor: &#39;#000&#39;, textStrokeWidth: 3, textOffsetY: 20 }</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_POINT_ICON_SCALE</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">默认图标缩放比例</td><td style="text-align:left;"><code>1</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_CLUSTER_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认聚合配置</td><td style="text-align:left;"><code>{ distance: 40, minDistance: 0, zIndex: 21 }</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_DOM_POINT_OVERLAY_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认 DOM 点覆盖物配置</td><td style="text-align:left;"><code>{ positioning: &#39;center-center&#39;, stopEvent: false }</code></td></tr></tbody></table><h3 id="线配置-line-options" tabindex="-1">线配置 (Line Options) <a class="header-anchor" href="#线配置-line-options" aria-label="Permalink to &quot;线配置 (Line Options)&quot;"></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th><th style="text-align:left;">默认值</th></tr></thead><tbody><tr><td style="text-align:left;"><code>DEFAULT_LINE_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认线样式配置</td><td style="text-align:left;"><code>{ type: &#39;line&#39;, strokeColor: &#39;rgba(3, 122, 255, 1)&#39;, strokeWidth: 2, visible: true, layerName: &#39;lineLayer&#39;, zIndex: 15 }</code></td></tr></tbody></table><h3 id="面配置-polygon-options" tabindex="-1">面配置 (Polygon Options) <a class="header-anchor" href="#面配置-polygon-options" aria-label="Permalink to &quot;面配置 (Polygon Options)&quot;"></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th><th style="text-align:left;">默认值</th></tr></thead><tbody><tr><td style="text-align:left;"><code>DEFAULT_POLYGON_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认面样式配置</td><td style="text-align:left;"><code>{ zIndex: 11, visible: true, textFont: &#39;14px Calibri,sans-serif&#39;, textFillColor: &#39;#FFF&#39;, textStrokeColor: &#39;#409EFF&#39;, textStrokeWidth: 2 }</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_POLYGON_COLOR_MAP</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认面颜色映射 (用于分级渲染)</td><td style="text-align:left;"><code>{ &#39;0&#39;: &#39;rgba(255, 0, 0, 0.6)&#39;, &#39;1&#39;: &#39;rgba(245, 154, 35, 0.6)&#39;, ... }</code></td></tr></tbody></table><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;"></a></h2><h3 id="获取默认配置" tabindex="-1">获取默认配置 <a class="header-anchor" href="#获取默认配置" aria-label="Permalink to &quot;获取默认配置&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ConfigManager } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取默认点位配置</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pointOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ConfigManager.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DEFAULT_POINT_OPTIONS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ConfigManager.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DEFAULT_POINT_TEXT_OPTIONS</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取默认线配置</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> lineOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ConfigManager.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DEFAULT_LINE_OPTIONS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="在自定义组件中使用" tabindex="-1">在自定义组件中使用 <a class="header-anchor" href="#在自定义组件中使用" aria-label="Permalink to &quot;在自定义组件中使用&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ConfigManager } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  private</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 合并用户配置和默认配置</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ConfigManager.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DEFAULT_POINT_OPTIONS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    };</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,17)]))}const c=s(n,[["render",l]]);export{g as __pageData,c as default};

package/docs/.vitepress/dist/assets/ConfigManager.md.BOMdGTaa.lean.js ADDED Viewed

@@ -0,0 +1 @@

+ import{_ as s,c as i,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const g=JSON.parse('{"title":"ConfigManager 配置管理","description":"","frontmatter":{},"headers":[],"relativePath":"ConfigManager.md","filePath":"ConfigManager.md"}'),n={name:"ConfigManager.md"};function l(h,t,d,p,o,r){return e(),i("div",null,t[0]||(t[0]=[a("",17)]))}const c=s(n,[["render",l]]);export{g as __pageData,c as default};

package/docs/.vitepress/dist/assets/ErrorHandler.md.yUiuJ9w9.js ADDED Viewed

@@ -0,0 +1,28 @@
+import{_ as e,c as s,ae as a,o as i}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"ErrorHandler 错误处理","description":"","frontmatter":{},"headers":[],"relativePath":"ErrorHandler.md","filePath":"ErrorHandler.md"}'),l={name:"ErrorHandler.md"};function n(d,t,r,h,o,p){return i(),s("div",null,t[0]||(t[0]=[a(`<h1 id="errorhandler-错误处理" tabindex="-1">ErrorHandler 错误处理 <a class="header-anchor" href="#errorhandler-错误处理" aria-label="Permalink to &quot;ErrorHandler 错误处理&quot;"></a></h1><p><code>ErrorHandler</code> 类是一个单例工具类，用于统一管理和分发应用程序中的错误。它支持不同的日志级别，并允许注册自定义错误回调。</p><h2 id="导入" tabindex="-1">导入 <a class="header-anchor" href="#导入" aria-label="Permalink to &quot;导入&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ErrorHandler, ErrorType, MyOpenLayersError } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="枚举与类定义" tabindex="-1">枚举与类定义 <a class="header-anchor" href="#枚举与类定义" aria-label="Permalink to &quot;枚举与类定义&quot;"></a></h2><h3 id="errortype-枚举" tabindex="-1">ErrorType 枚举 <a class="header-anchor" href="#errortype-枚举" aria-label="Permalink to &quot;ErrorType 枚举&quot;"></a></h3><p>定义了系统中可能的错误类型：</p><table tabindex="0"><thead><tr><th style="text-align:left;">成员</th><th style="text-align:left;">值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>VALIDATION_ERROR</code></td><td style="text-align:left;"><code>&#39;VALIDATION_ERROR&#39;</code></td><td style="text-align:left;">参数验证错误</td></tr><tr><td style="text-align:left;"><code>MAP_ERROR</code></td><td style="text-align:left;"><code>&#39;MAP_ERROR&#39;</code></td><td style="text-align:left;">地图相关错误</td></tr><tr><td style="text-align:left;"><code>LAYER_ERROR</code></td><td style="text-align:left;"><code>&#39;LAYER_ERROR&#39;</code></td><td style="text-align:left;">图层相关错误</td></tr><tr><td style="text-align:left;"><code>COORDINATE_ERROR</code></td><td style="text-align:left;"><code>&#39;COORDINATE_ERROR&#39;</code></td><td style="text-align:left;">坐标无效错误</td></tr><tr><td style="text-align:left;"><code>DATA_ERROR</code></td><td style="text-align:left;"><code>&#39;DATA_ERROR&#39;</code></td><td style="text-align:left;">数据格式错误</td></tr><tr><td style="text-align:left;"><code>COMPONENT_ERROR</code></td><td style="text-align:left;"><code>&#39;COMPONENT_ERROR&#39;</code></td><td style="text-align:left;">组件内部错误</td></tr></tbody></table><h3 id="myopenlayerserror-类" tabindex="-1">MyOpenLayersError 类 <a class="header-anchor" href="#myopenlayerserror-类" aria-label="Permalink to &quot;MyOpenLayersError 类&quot;"></a></h3><p>自定义错误类，继承自 <code>Error</code>。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>message</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">错误消息</td></tr><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>ErrorType</code></td><td style="text-align:left;">错误类型</td></tr><tr><td style="text-align:left;"><code>timestamp</code></td><td style="text-align:left;"><code>Date</code></td><td style="text-align:left;">错误发生的时间戳</td></tr><tr><td style="text-align:left;"><code>context</code></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">错误相关的上下文数据</td></tr></tbody></table><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to &quot;方法&quot;"></a></h2><h3 id="静态方法" tabindex="-1">静态方法 <a class="header-anchor" href="#静态方法" aria-label="Permalink to &quot;静态方法&quot;"></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">参数</th><th style="text-align:left;">返回值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>getInstance()</code></td><td style="text-align:left;">-</td><td style="text-align:left;"><code>ErrorHandler</code></td><td style="text-align:left;">获取 <code>ErrorHandler</code> 的单例实例</td></tr><tr><td style="text-align:left;"><code>validate(condition, message, context?)</code></td><td style="text-align:left;"><code>condition: boolean</code><br><code>message: string</code><br><code>context?: any</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证条件，如果为 <code>false</code> 则抛出 <code>VALIDATION_ERROR</code></td></tr><tr><td style="text-align:left;"><code>validateMap(map)</code></td><td style="text-align:left;"><code>map: any</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证地图实例是否存在</td></tr><tr><td style="text-align:left;"><code>validateCoordinates(longitude, latitude)</code></td><td style="text-align:left;"><code>longitude: number</code><br><code>latitude: number</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证经纬度坐标是否有效</td></tr><tr><td style="text-align:left;"><code>validateLayerName(layerName)</code></td><td style="text-align:left;"><code>layerName: string</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证图层名称是否有效</td></tr><tr><td style="text-align:left;"><code>validateData(data, dataType)</code></td><td style="text-align:left;"><code>data: any</code><br><code>dataType: string</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证数据是否存在</td></tr><tr><td style="text-align:left;"><code>safeExecute&lt;T&gt;(fn, errorMessage, errorType?, context?)</code></td><td style="text-align:left;"><code>fn: () =&gt; T</code><br><code>errorMessage: string</code><br><code>errorType?: ErrorType</code><br><code>context?: any</code></td><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">安全执行函数，捕获并处理异常</td></tr></tbody></table><h3 id="实例方法" tabindex="-1">实例方法 <a class="header-anchor" href="#实例方法" aria-label="Permalink to &quot;实例方法&quot;"></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">参数</th><th style="text-align:left;">返回值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>setLogLevel(level)</code></td><td style="text-align:left;"><code>level: &#39;debug&#39; | &#39;info&#39; | &#39;warn&#39; | &#39;error&#39;</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">设置日志级别</td></tr><tr><td style="text-align:left;"><code>debug(...args)</code></td><td style="text-align:left;"><code>...args: any[]</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">输出调试日志</td></tr><tr><td style="text-align:left;"><code>info(...args)</code></td><td style="text-align:left;"><code>...args: any[]</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">输出信息日志</td></tr><tr><td style="text-align:left;"><code>warn(...args)</code></td><td style="text-align:left;"><code>...args: any[]</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">输出警告日志</td></tr><tr><td style="text-align:left;"><code>createAndHandleError(message, type, context?)</code></td><td style="text-align:left;"><code>message: string</code><br><code>type: ErrorType</code><br><code>context?: any</code></td><td style="text-align:left;"><code>MyOpenLayersError</code></td><td style="text-align:left;">创建并处理错误，通知监听器</td></tr></tbody></table><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;"></a></h2><h3 id="基本验证" tabindex="-1">基本验证 <a class="header-anchor" href="#基本验证" aria-label="Permalink to &quot;基本验证&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ErrorHandler } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setCenter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">longitude</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">latitude</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 验证坐标，如果不合法会自动抛出异常</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ErrorHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">validateCoordinates</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(longitude, latitude);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // ...设置中心点逻辑</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="捕获和处理错误" tabindex="-1">捕获和处理错误 <a class="header-anchor" href="#捕获和处理错误" aria-label="Permalink to &quot;捕获和处理错误&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ErrorHandler, ErrorType } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">try</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 可能出错的代码</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  throw</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Something went wrong&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (error) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ErrorHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getInstance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createAndHandleError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;Operation failed&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ErrorType.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">COMPONENT_ERROR</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { originalError: error }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  );</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="安全执行函数" tabindex="-1">安全执行函数 <a class="header-anchor" href="#安全执行函数" aria-label="Permalink to &quot;安全执行函数&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ErrorHandler } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> result</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ErrorHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">safeExecute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 危险操作</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> JSON</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">parse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(someJsonString);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  &#39;Failed to parse JSON&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ErrorType.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DATA_ERROR</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div>`,23)]))}const y=e(l,[["render",n]]);export{c as __pageData,y as default};

package/docs/.vitepress/dist/assets/ErrorHandler.md.yUiuJ9w9.lean.js ADDED Viewed

@@ -0,0 +1 @@

+ import{_ as e,c as s,ae as a,o as i}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"ErrorHandler 错误处理","description":"","frontmatter":{},"headers":[],"relativePath":"ErrorHandler.md","filePath":"ErrorHandler.md"}'),l={name:"ErrorHandler.md"};function n(d,t,r,h,o,p){return i(),s("div",null,t[0]||(t[0]=[a("",23)]))}const y=e(l,[["render",n]]);export{c as __pageData,y as default};

package/docs/.vitepress/dist/assets/EventManager.md.BhCUVy1f.js ADDED Viewed

@@ -0,0 +1,34 @@
+import{_ as i,c as t,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const o=JSON.parse('{"title":"EventManager 事件管理","description":"","frontmatter":{},"headers":[],"relativePath":"EventManager.md","filePath":"EventManager.md"}'),n={name:"EventManager.md"};function l(h,s,p,k,d,r){return e(),t("div",null,s[0]||(s[0]=[a(`<h1 id="eventmanager-事件管理" tabindex="-1">EventManager 事件管理 <a class="header-anchor" href="#eventmanager-事件管理" aria-label="Permalink to &quot;EventManager 事件管理&quot;"></a></h1><p><code>EventManager</code> 类用于统一管理地图事件，提供简单的 API 来监听、移除和触发地图事件。它对 OpenLayers 的原生事件系统进行了封装，提供了类型安全的事件处理。</p><h2 id="导入" tabindex="-1">导入 <a class="header-anchor" href="#导入" aria-label="Permalink to &quot;导入&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { EventManager, MapEventData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="接口定义" tabindex="-1">接口定义 <a class="header-anchor" href="#接口定义" aria-label="Permalink to &quot;接口定义&quot;"></a></h2><h3 id="mapeventdata-接口" tabindex="-1">MapEventData 接口 <a class="header-anchor" href="#mapeventdata-接口" aria-label="Permalink to &quot;MapEventData 接口&quot;"></a></h3><p>统一的事件数据结构，回调函数会接收此类型的参数。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>MapEventType</code></td><td style="text-align:left;">事件类型</td></tr><tr><td style="text-align:left;"><code>originalEvent</code></td><td style="text-align:left;"><code>Event</code></td><td style="text-align:left;">原始 DOM 事件对象 (可选)</td></tr><tr><td style="text-align:left;"><code>coordinate</code></td><td style="text-align:left;"><code>number[]</code></td><td style="text-align:left;">发生事件的地理坐标 (可选)</td></tr><tr><td style="text-align:left;"><code>pixel</code></td><td style="text-align:left;"><code>Pixel</code></td><td style="text-align:left;">发生事件的屏幕像素坐标 (可选)</td></tr><tr><td style="text-align:left;"><code>features</code></td><td style="text-align:left;"><code>FeatureLike[]</code></td><td style="text-align:left;">事件位置处的要素列表 (可选)</td></tr><tr><td style="text-align:left;"><code>feature</code></td><td style="text-align:left;"><code>FeatureLike</code></td><td style="text-align:left;">事件位置处的第一个要素 (可选)</td></tr><tr><td style="text-align:left;"><code>zoom</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">当前地图缩放级别 (可选)</td></tr><tr><td style="text-align:left;"><code>[key: string]</code></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">其他自定义属性</td></tr></tbody></table><h3 id="mapeventtype-类型" tabindex="-1">MapEventType 类型 <a class="header-anchor" href="#mapeventtype-类型" aria-label="Permalink to &quot;MapEventType 类型&quot;"></a></h3><p>支持的事件类型字符串： <code>&#39;click&#39;</code> | <code>&#39;dblclick&#39;</code> | <code>&#39;hover&#39;</code> | <code>&#39;moveend&#39;</code> | <code>&#39;zoomend&#39;</code> | <code>&#39;pointermove&#39;</code> | <code>&#39;rendercomplete&#39;</code> | <code>&#39;error&#39;</code></p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map)</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>map</code></td><td style="text-align:left;"><code>Map</code></td><td style="text-align:left;">OpenLayers 地图实例</td></tr></tbody></table><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to &quot;方法&quot;"></a></h2><h3 id="监听事件" tabindex="-1">监听事件 <a class="header-anchor" href="#监听事件" aria-label="Permalink to &quot;监听事件&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(type: MapEventType, callback: EventCallback, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { once?: boolean; filter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapEventData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> boolean; }): string</span></span></code></pre></div><p>注册事件监听器。</p><table tabindex="0"><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>MapEventType</code></td><td style="text-align:left;">事件类型</td></tr><tr><td style="text-align:left;"><code>callback</code></td><td style="text-align:left;"><code>EventCallback</code></td><td style="text-align:left;">事件回调函数</td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">监听选项 (可选)</td></tr><tr><td style="text-align:left;"><code>options.once</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否只触发一次</td></tr><tr><td style="text-align:left;"><code>options.filter</code></td><td style="text-align:left;"><code>function</code></td><td style="text-align:left;">事件过滤器，返回 false 则不触发回调</td></tr></tbody></table><p><strong>返回值</strong>: <code>string</code> - 监听器 ID，用于取消监听。</p><h3 id="移除监听" tabindex="-1">移除监听 <a class="header-anchor" href="#移除监听" aria-label="Permalink to &quot;移除监听&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">off</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id: string): boolean</span></span></code></pre></div><p>根据监听器 ID 移除事件监听。</p><table tabindex="0"><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>id</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">监听器 ID</td></tr></tbody></table><p><strong>返回值</strong>: <code>boolean</code> - 是否成功移除。</p><h3 id="移除所有监听" tabindex="-1">移除所有监听 <a class="header-anchor" href="#移除所有监听" aria-label="Permalink to &quot;移除所有监听&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><p>移除所有已注册的事件监听器。</p><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;"></a></h2><h3 id="基础事件监听" tabindex="-1">基础事件监听 <a class="header-anchor" href="#基础事件监听" aria-label="Permalink to &quot;基础事件监听&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MyOl } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myOl</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyOl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;map-container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> eventManager</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> myOl.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getEventManager</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 监听点击事件</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> clickId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;click&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Clicked at:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event.coordinate);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  </span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (event.feature) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Clicked feature:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event.feature);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 监听缩放结束</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;zoomend&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Current zoom:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event.zoom);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="一次性监听" tabindex="-1">一次性监听 <a class="header-anchor" href="#一次性监听" aria-label="Permalink to &quot;一次性监听&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 只监听一次点击</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;click&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;First click only&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, { once: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span></code></pre></div><h3 id="带过滤条件的监听" tabindex="-1">带过滤条件的监听 <a class="header-anchor" href="#带过滤条件的监听" aria-label="Permalink to &quot;带过滤条件的监听&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 只监听包含特定属性要素的点击</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;click&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Clicked special feature&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.feature) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> event.feature.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getProperties</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> props.type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;special&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="移除监听-1" tabindex="-1">移除监听 <a class="header-anchor" href="#移除监听-1" aria-label="Permalink to &quot;移除监听&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 停止监听</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">off</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(clickId);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 或清除所有</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div>`,36)]))}const g=i(n,[["render",l]]);export{o as __pageData,g as default};

package/docs/.vitepress/dist/assets/EventManager.md.BhCUVy1f.lean.js ADDED Viewed

@@ -0,0 +1 @@

+ import{_ as i,c as t,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const o=JSON.parse('{"title":"EventManager 事件管理","description":"","frontmatter":{},"headers":[],"relativePath":"EventManager.md","filePath":"EventManager.md"}'),n={name:"EventManager.md"};function l(h,s,p,k,d,r){return e(),t("div",null,s[0]||(s[0]=[a("",36)]))}const g=i(n,[["render",l]]);export{o as __pageData,g as default};