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

my-openlayer 2.4.9 → 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 (93) hide show

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

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="zh-CN" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>My OpenLayers | 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/index.md.BJz6tHSr.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 active" 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" 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_" data-v-39a288b8><div><h1 id="my-openlayers" tabindex="-1">My OpenLayers <a class="header-anchor" href="#my-openlayers" aria-label="Permalink to &quot;My OpenLayers&quot;"></a></h1><p>My OpenLayers 是一个基于 OpenLayers 的轻量级地图封装库，旨在简化地图开发流程，提供开箱即用的常用功能。它集成了点、线、面绘制，测量工具，选择交互，Vue 组件覆盖物等功能，特别优化了 Vue 项目的集成体验。</p><h2 id="特性" tabindex="-1">特性 <a class="header-anchor" href="#特性" aria-label="Permalink to &quot;特性&quot;"></a></h2><ul><li><strong>开箱即用</strong>: 封装了常用的地图功能，减少样板代码。</li><li><strong>Vue 集成</strong>: 支持使用 Vue 组件作为地图覆盖物，轻松创建复杂的交互式标记。</li><li><strong>TypeScript</strong>: 完全使用 TypeScript 编写，提供完整的类型定义。</li><li><strong>工具丰富</strong>: 内置测量、选择、裁剪、遮罩等实用工具。</li><li><strong>高性能闪烁点</strong>: 基于 <code>VectorLayer</code> 和单个 <code>requestAnimationFrame</code> 渲染大量预警点位，避免 DOM 动画卡顿。</li><li><strong>扩展性强</strong>: 提供基础类和接口，方便二次封装和扩展。</li></ul><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;"></a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-openlayer</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 或者</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-openlayer</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 或者</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-openlayer</span></span></code></pre></div><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;"> { 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:#032F62;--shiki-dark:#9ECBFF;"> &#39;ol/ol.css&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 引入 OpenLayers 样式</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;"> 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:#24292E;--shiki-dark:#E1E4E8;">  center: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30.3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  zoom: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  projection: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;EPSG:4326&#39;</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;">// 获取原生 Map 实例</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> olMap</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> map.map;</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;"> point</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">point.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addPoint</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;">,</span></span>
+<span class="line"><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;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  style: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;path/to/icon.png&#39;</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><h2 id="核心模块" tabindex="-1">核心模块 <a class="header-anchor" href="#核心模块" aria-label="Permalink to &quot;核心模块&quot;"></a></h2><ul><li><strong><a href="./MyOl.html">MyOl</a></strong>: 核心入口类，负责地图初始化和模块管理。</li><li><strong><a href="./Point.html">Point</a></strong>: 点位管理，支持图标、文本、聚合、高性能闪烁点等。</li><li><strong><a href="./Line.html">Line</a></strong>: 线条绘制，支持不同样式和动画。</li><li><strong><a href="./Polygon.html">Polygon</a></strong>: 多边形绘制，支持遮罩、热力图等。</li><li><strong><a href="./VueTemplatePoint.html">VueTemplatePoint</a></strong>: 使用 Vue 组件作为地图点位覆盖物。</li></ul><h2 id="工具模块" tabindex="-1">工具模块 <a class="header-anchor" href="#工具模块" aria-label="Permalink to &quot;工具模块&quot;"></a></h2><ul><li><strong><a href="./MapTools.html">MapTools</a></strong>: 通用地图工具，如裁剪、定位、导出图片等。</li><li><strong><a href="./MeasureHandler.html">MeasureHandler</a></strong>: 距离和面积测量工具。</li><li><strong><a href="./SelectHandler.html">SelectHandler</a></strong>: 要素选择交互工具。</li><li><strong><a href="./MapBaseLayers.html">MapBaseLayers</a></strong>: 底图切换和管理。</li></ul><h2 id="基础设施" tabindex="-1">基础设施 <a class="header-anchor" href="#基础设施" aria-label="Permalink to &quot;基础设施&quot;"></a></h2><ul><li><strong><a href="./ConfigManager.html">ConfigManager</a></strong>: 全局配置管理。</li><li><strong><a href="./EventManager.html">EventManager</a></strong>: 统一事件管理系统。</li><li><strong><a href="./ErrorHandler.html">ErrorHandler</a></strong>: 错误处理和日志系统。</li><li><strong><a href="./ValidationUtils.html">ValidationUtils</a></strong>: 参数验证工具。</li></ul><h2 id="贡献" tabindex="-1">贡献 <a class="header-anchor" href="#贡献" aria-label="Permalink to &quot;贡献&quot;"></a></h2><p>欢迎提交 Issue 和 Pull Request！</p><h2 id="许可证" tabindex="-1">许可证 <a class="header-anchor" href="#许可证" aria-label="Permalink to &quot;许可证&quot;"></a></h2><p>MIT License</p></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><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/my-openlayer/MyOl.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>MyOl 地图入口</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/vp-icons.css ADDED Viewed

@@ -0,0 +1 @@

+ .vpi-social-github{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}

package/docs/Point.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Point 类
-`Point` 类用于在地图上添加和管理点要素，支持普通点、聚合点、DOM 点和 Vue 组件点。
+`Point` 类用于在地图上添加和管理点要素，支持普通点、聚合点、DOM 点、高性能闪烁点和 Vue 组件点。
 ## 构造函数
@@ -27,18 +27,46 @@ constructor(map: Map)
 | visible | `boolean` | 是否可见 |
 | style | `Style \| Style[] \| ((feature: FeatureLike) => Style \| Style[])` | 自定义样式函数 |
-### ClusterOptions
-继承自 `PointOptions`。
+### ClusterOptions
+继承自 `PointOptions`。
 | 属性名 | 类型 | 说明 |
 | :--- | :--- | :--- |
-| distance | `number` | 聚合距离（像素），默认为 20 |
-| minDistance | `number` | 最小聚合距离 |
-### PointData
-| 属性名 | 类型 | 说明 |
+| distance | `number` | 聚合距离（像素），默认为 20 |
+| minDistance | `number` | 最小聚合距离 |
+### PulsePointOptions
+继承自 `PointOptions`，因此与 `addPoint` 一致支持 `img`、`scale`、`iconColor`、`textKey`、`textVisible` 等参数。
+| 属性名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| levelKey | `string` | 点位等级字段，默认 `lev` |
+| icon | `PulsePointIconOptions` | 不使用 `img` 时的矢量圆点兜底配置 |
+| pulse.enabled | `boolean` | 是否启用闪烁圈，默认 `true` |
+| pulse.duration | `number` | 单轮动画时长，默认 `2400ms` |
+| pulse.radius | `[number, number]` | 闪烁圈半径范围，默认 `[8, 26]` |
+| pulse.colorMap | `Record<string \| number, string>` | 按等级配置闪烁圈填充色 |
+| pulse.strokeColorMap | `Record<string \| number, string>` | 按等级配置闪烁圈描边色 |
+| pulse.strokeWidth | `number` | 闪烁圈描边宽度，默认 `0` |
+| pulse.frameCount | `number` | 动画分帧缓存数量，默认 `24` |
+### PulsePointLayerHandle
+| 属性名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| layer | `VectorLayer<VectorSource>` | 创建的闪烁点图层 |
+| source | `VectorSource` | 图层数据源 |
+| start | `() => void` | 开始闪烁动画 |
+| stop | `() => void` | 停止闪烁动画 |
+| setVisible | `(visible: boolean) => void` | 控制图层显隐 |
+| updateData | `(data: PointData[]) => void` | 更新点位数据 |
+| remove | `() => void` | 停止动画并移除图层 |
+### PointData
+| 属性名 | 类型 | 说明 |
 | :--- | :--- | :--- |
 | lgtd | `number` | 经度 |
 | lttd | `number` | 纬度 |
@@ -85,9 +113,9 @@ addClusterPoint(pointData: PointData[], options: ClusterOptions): VectorLayer<Ve
 - **options**: 聚合配置选项。
 - **返回值**: 创建的聚合图层。
-### addDomPoint
-添加 DOM 元素点（Overlay）。
+### addDomPoint
+添加 DOM 元素点（Overlay）。
 ```typescript
 addDomPoint(twinkleList: TwinkleItem[], callback?: Function): {
@@ -98,12 +126,24 @@ addDomPoint(twinkleList: TwinkleItem[], callback?: Function): {
 ```
 - **twinkleList**: 包含经纬度和类名的数据列表。
-- **callback**: 点击回调函数。
-- **返回值**: 控制对象，包含 `remove` 和 `setVisible` 方法。
-### addVueTemplatePoint
-添加 Vue 组件作为点位。
+- **callback**: 点击回调函数。
+- **返回值**: 控制对象，包含 `remove` 和 `setVisible` 方法。
+### addPulsePointLayer
+添加高性能闪烁点图层。
+```typescript
+addPulsePointLayer(pointData: PointData[], options: PulsePointOptions): PulsePointLayerHandle | null
+```
+- **pointData**: 点位数据数组。
+- **options**: 闪烁点配置选项，复用 `addPoint` 的图标、文本和图层参数习惯。
+- **返回值**: 控制对象，包含动画启停、显隐、数据更新和移除方法；如果数据无效返回 `null`。
+### addVueTemplatePoint
+添加 Vue 组件作为点位。
 ```typescript
 addVueTemplatePoint(pointDataList: PointData[], template: any, options?: VueTemplatePointOptions): {
@@ -143,16 +183,44 @@ point.addPoint(data, {
 ### 添加聚合点
 ```typescript
-point.addClusterPoint(data, {
-  layerName: 'clusters',
-  distance: 40,
-  img: 'path/to/cluster-icon.png'
-});
-```
-### 添加 Vue 组件点
-```typescript
+point.addClusterPoint(data, {
+  layerName: 'clusters',
+  distance: 40,
+  img: 'path/to/cluster-icon.png'
+});
+```
+### 添加高性能闪烁点
+```typescript
+const pulseCtrl = point.addPulsePointLayer(data, {
+  layerName: 'village-warning-pulse',
+  levelKey: 'lev',
+  textKey: 'name',
+  img: '/icons/village.svg',
+  scale: 0.8,
+  textVisible: true,
+  pulse: {
+    duration: 2400,
+    radius: [8, 28],
+    colorMap: {
+      0: 'rgba(255, 48, 54, 0.48)',
+      1: 'rgba(255, 136, 0, 0.45)',
+      2: 'rgba(253, 216, 46, 0.4)',
+      3: 'rgba(6, 183, 253, 0.32)'
+    }
+  }
+});
+pulseCtrl?.stop();
+pulseCtrl?.start();
+pulseCtrl?.updateData(data);
+pulseCtrl?.remove();
+```
+### 添加 Vue 组件点
+```typescript
 import MyComponent from './MyComponent.vue';
 const ctrl = point.addVueTemplatePoint(data, MyComponent, {

package/docs/index.md CHANGED Viewed

@@ -5,10 +5,11 @@ My OpenLayers 是一个基于 OpenLayers 的轻量级地图封装库，旨在简
 ## 特性
 - **开箱即用**: 封装了常用的地图功能，减少样板代码。
-- **Vue 集成**: 支持使用 Vue 组件作为地图覆盖物，轻松创建复杂的交互式标记。
-- **TypeScript**: 完全使用 TypeScript 编写，提供完整的类型定义。
-- **工具丰富**: 内置测量、选择、裁剪、遮罩等实用工具。
-- **扩展性强**: 提供基础类和接口，方便二次封装和扩展。
+- **Vue 集成**: 支持使用 Vue 组件作为地图覆盖物，轻松创建复杂的交互式标记。
+- **TypeScript**: 完全使用 TypeScript 编写，提供完整的类型定义。
+- **工具丰富**: 内置测量、选择、裁剪、遮罩等实用工具。
+- **高性能闪烁点**: 基于 `VectorLayer` 和单个 `requestAnimationFrame` 渲染大量预警点位，避免 DOM 动画卡顿。
+- **扩展性强**: 提供基础类和接口，方便二次封装和扩展。
 ## 安装
@@ -50,7 +51,7 @@ point.addPoint([{
 ## 核心模块
 - **[MyOl](./MyOl.md)**: 核心入口类，负责地图初始化和模块管理。
-- **[Point](./Point.md)**: 点位管理，支持图标、文本、聚合等。
+- **[Point](./Point.md)**: 点位管理，支持图标、文本、聚合、高性能闪烁点等。
 - **[Line](./Line.md)**: 线条绘制，支持不同样式和动画。
 - **[Polygon](./Polygon.md)**: 多边形绘制，支持遮罩、热力图等。
 - **[VueTemplatePoint](./VueTemplatePoint.md)**: 使用 Vue 组件作为地图点位覆盖物。

package/index.d.ts CHANGED Viewed

@@ -16,6 +16,6 @@ export type { MapEventType, EventCallback, MapEventData } from './core/EventMana
 export { ErrorHandler, MyOpenLayersError, ErrorType } from './utils/ErrorHandler';
 export { ValidationUtils } from './utils/ValidationUtils';
 export type { BaseOptions, StyleOptions, TextOptions } from './types';
-export type { PointOptions, LineOptions, PolygonOptions } from './types';
+export type { PointOptions, LineOptions, PolygonOptions, PulsePointOptions, PulsePointLayerHandle } from './types';
 export type { OptionsType } from './types';
-export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, FeatureColorUpdateOptions, PointData, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions, SelectOptions, SelectMode, SelectCallbackEvent, ProgrammaticSelectOptions } from './types';
+export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, FeatureColorUpdateOptions, PointData, PulsePointIconOptions, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions, SelectOptions, SelectMode, SelectCallbackEvent, ProgrammaticSelectOptions } from './types';

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "2.4.9",
+  "version": "2.4.12",
   "type": "module",
   "license": "MIT",
   "main": "index.js",

package/types.d.ts CHANGED Viewed

@@ -4,6 +4,8 @@ import { WMTS } from "ol/source";
 import View from "ol/View";
 import Feature, { FeatureLike } from "ol/Feature";
 import { Style } from "ol/style";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
 import MapBrowserEvent from "ol/MapBrowserEvent";
 import { Units } from "ol/proj/Units";
 export interface FeatureData {
@@ -231,6 +233,63 @@ export interface ClusterOptions extends PointOptions {
     /** 最小聚合距离 */
     minDistance?: number;
 }
+/**
+ * 高性能闪烁点图层图标配置。
+ */
+export interface PulsePointIconOptions {
+    /** 图标地址 */
+    src?: string;
+    /** 图标缩放比例 */
+    scale?: number;
+    /** 图标染色 */
+    color?: string;
+    /** 未使用图片时的矢量圆点半径，默认 5 */
+    radius?: number;
+    /** 未使用图片时的矢量圆点填充色，默认 #06b7fd */
+    fillColor?: string;
+    /** 未使用图片时的矢量圆点描边色，默认 #ffffff */
+    strokeColor?: string;
+    /** 未使用图片时的矢量圆点描边宽度，默认 2 */
+    strokeWidth?: number;
+}
+/**
+ * 高性能闪烁点图层配置。
+ */
+export interface PulsePointOptions extends PointOptions {
+    /** 点位等级字段，默认 lev */
+    levelKey?: string;
+    /** 点位中心图标。优先使用与 addPoint 一致的 img/scale/iconColor；该字段用于高级兜底配置 */
+    icon?: PulsePointIconOptions;
+    /** 闪烁圈配置 */
+    pulse?: {
+        /** 是否启用闪烁圈，默认 true */
+        enabled?: boolean;
+        /** 单轮动画时长，单位 ms，默认 2400 */
+        duration?: number;
+        /** 闪烁圈最小/最大半径，默认 [8, 26] */
+        radius?: [number, number];
+        /** 等级颜色映射 */
+        colorMap?: Record<string | number, string>;
+        /** 描边颜色映射 */
+        strokeColorMap?: Record<string | number, string>;
+        /** 描边宽度，默认 0 */
+        strokeWidth?: number;
+        /** 动画分帧缓存数量，默认 24 */
+        frameCount?: number;
+    };
+}
+/**
+ * 高性能闪烁点图层句柄。
+ */
+export interface PulsePointLayerHandle {
+    layer: VectorLayer<VectorSource>;
+    source: VectorSource;
+    start: () => void;
+    stop: () => void;
+    setVisible: (visible: boolean) => void;
+    updateData: (data: PointData[]) => void;
+    remove: () => void;
+}
 /**
  * 闪烁点数据接口
  */

package/core/DomPoint.d.ts DELETED Viewed

@@ -1,21 +0,0 @@
-import Map from "ol/Map";
-interface Options {
-    Vue: any;
-    Template: any;
-    lgtd: number;
-    lttd: number;
-    props?: any;
-    type?: string;
-    sttp?: string;
-    zIndex?: number;
-}
-export default class DomPoint {
-    private map;
-    private app;
-    private anchor;
-    private dom;
-    constructor(map: Map, options: Options);
-    setVisible(visible: boolean): void;
-    remove(): void;
-}
-export {};

package/core/DomPoint.js DELETED Viewed

@@ -1,36 +0,0 @@
-// import { createApp } from "vue";
-import Overlay from "ol/Overlay";
-export default class DomPoint {
-    constructor(map, options) {
-        this.map = map;
-        const { Vue, Template, lgtd, lttd, props, } = options;
-        this.dom = document.createElement('div');
-        this.map.getViewport().appendChild(this.dom);
-        if (Vue.version.startsWith('3')) {
-            this.app = Vue.createApp(Object.assign(Template, {
-                props: { ...props }
-            }));
-            this.app.mount(this.dom);
-        }
-        else {
-            this.app = new Vue({
-                el: this.dom,
-                render: (h) => h(Template, { props })
-            });
-        }
-        this.anchor = new Overlay({
-            element: this.dom,
-            positioning: 'center-center',
-            stopEvent: false
-        });
-        this.anchor.setPosition([lgtd, lttd]);
-        this.map.addOverlay(this.anchor);
-    }
-    setVisible(visible) {
-        this.dom.style.visibility = visible ? 'visible' : 'hidden';
-    }
-    remove() {
-        this.app.unmount();
-        this.map.removeOverlay(this.anchor);
-    }
-}