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/Polygon.html ADDED Viewed

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="zh-CN" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Polygon 面要素类 | 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/Polygon.md.-JIqEvzD.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_Polygon" data-v-39a288b8><div><h1 id="polygon-面要素类" tabindex="-1">Polygon 面要素类 <a class="header-anchor" href="#polygon-面要素类" aria-label="Permalink to &quot;Polygon 面要素类&quot;"></a></h1><p><code>Polygon</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;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> polygon</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;"> Polygon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map);</span></span></code></pre></div><ul><li><strong>map</strong>: OpenLayers 地图实例。</li></ul><h2 id="接口定义" tabindex="-1">接口定义 <a class="header-anchor" href="#接口定义" aria-label="Permalink to &quot;接口定义&quot;"></a></h2><h3 id="polygonoptions" tabindex="-1">PolygonOptions <a class="header-anchor" href="#polygonoptions" aria-label="Permalink to &quot;PolygonOptions&quot;"></a></h3><p>面图层配置项，继承自 <code>BaseOptions</code>, <code>StyleOptions</code>, <code>TextOptions</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;"><strong>基础配置</strong></td><td style="text-align:left;"></td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;"><code>layerName</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>zIndex</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>visible</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>opacity</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">透明度 (0-1)</td></tr><tr><td style="text-align:left;"><code>fitView</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否自动缩放视图</td></tr><tr><td style="text-align:left;"><strong>样式配置</strong></td><td style="text-align:left;"></td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;"><code>fillColor</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>fillColorCallBack</code></td><td style="text-align:left;"><code>(feature) =&gt; string</code></td><td style="text-align:left;">动态填充颜色回调</td></tr><tr><td style="text-align:left;"><code>strokeColor</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>strokeWidth</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>lineDash</code></td><td style="text-align:left;"><code>number[]</code></td><td style="text-align:left;">边框虚线样式</td></tr><tr><td style="text-align:left;"><strong>文本标注</strong></td><td style="text-align:left;"></td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;"><code>textVisible</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>textKey</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>textCallBack</code></td><td style="text-align:left;"><code>(feature) =&gt; string</code></td><td style="text-align:left;">文本回调函数（优先级高于 textKey）</td></tr><tr><td style="text-align:left;"><code>textFont</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>textFillColor</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>textStrokeColor</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">文本描边颜色</td></tr><tr><td style="text-align:left;"><strong>其他</strong></td><td style="text-align:left;"></td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;"><code>mask</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否作为蒙版（配合 <code>setOutLayer</code> 使用）</td></tr></tbody></table><h3 id="heatmapoptions" tabindex="-1">HeatMapOptions <a class="header-anchor" href="#heatmapoptions" aria-label="Permalink to &quot;HeatMapOptions&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>layerName</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>radius</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">热点半径，默认 8</td></tr><tr><td style="text-align:left;"><code>blur</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">模糊度，默认 15</td></tr><tr><td style="text-align:left;"><code>gradient</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>opacity</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>valueKey</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">权重字段名，默认 &#39;value&#39;</td></tr></tbody></table><h3 id="imagelayerdata" tabindex="-1">ImageLayerData <a class="header-anchor" href="#imagelayerdata" aria-label="Permalink to &quot;ImageLayerData&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>img</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">图片 URL</td></tr><tr><td style="text-align:left;"><code>extent</code></td><td style="text-align:left;"><code>number[]</code></td><td style="text-align:left;">图片覆盖范围 <code>[minX, minY, maxX, maxY]</code></td></tr></tbody></table><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to &quot;方法&quot;"></a></h2><h3 id="addpolygon" tabindex="-1">addPolygon <a class="header-anchor" href="#addpolygon" aria-label="Permalink to &quot;addPolygon&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;">addPolygon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data: MapJSONData, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> PolygonOptions): VectorLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</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>data</code></td><td style="text-align:left;"><code>MapJSONData</code></td><td style="text-align:left;">GeoJSON 数据</td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>PolygonOptions</code></td><td style="text-align:left;">配置项</td></tr></tbody></table><h3 id="addpolygonbyurl" tabindex="-1">addPolygonByUrl <a class="header-anchor" href="#addpolygonbyurl" aria-label="Permalink to &quot;addPolygonByUrl&quot;"></a></h3><p>从 URL 加载多边形图层。</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;">addPolygonByUrl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(url: string, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> PolygonOptions): VectorLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><h3 id="addborderpolygon" tabindex="-1">addBorderPolygon <a class="header-anchor" href="#addborderpolygon" aria-label="Permalink to &quot;addBorderPolygon&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;">addBorderPolygon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data: MapJSONData, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> PolygonOptions): VectorLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><h3 id="updatefeaturecolor" tabindex="-1">updateFeatureColor <a class="header-anchor" href="#updatefeaturecolor" aria-label="Permalink to &quot;updateFeatureColor&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;">updateFeatureColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  layerName: string, </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  colorObj</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { [propName: string]: string }, </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;"> FeatureColorUpdateOptions</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</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>layerName</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>colorObj</code></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">颜色映射对象 <code>{ &#39;区域名&#39;: &#39;颜色值&#39; }</code></td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>FeatureColorUpdateOptions</code></td><td style="text-align:left;">包含 textKey 等配置以匹配要素</td></tr></tbody></table><h3 id="addimagelayer" tabindex="-1">addImageLayer <a class="header-anchor" href="#addimagelayer" aria-label="Permalink to &quot;addImageLayer&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;">addImageLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(imageData: ImageLayerData, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> PolygonOptions): ImageLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">any</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><h3 id="addheatmap" tabindex="-1">addHeatmap <a class="header-anchor" href="#addheatmap" aria-label="Permalink to &quot;addHeatmap&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;">addHeatmap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(pointData: PointData[], options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HeatMapOptions): Heatmap</span></span></code></pre></div><h3 id="setoutlayer" tabindex="-1">setOutLayer <a class="header-anchor" href="#setoutlayer" aria-label="Permalink to &quot;setOutLayer&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;">setOutLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data: MapJSONData, 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;">  layerName?: string,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  extent?: any,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  fillColor?: string,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  strokeWidth?: number,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  strokeColor?: string,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  zIndex?: number</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}): VectorLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><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;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> polygonModule</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;">getPolygon</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;">// GeoJSON 数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> polygonData</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;">  type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FeatureCollection&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  features: [</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;">      type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Feature&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      geometry: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Polygon&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        coordinates: [[[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">121</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">121</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">31</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">31</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</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;">      properties: { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;区域A&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</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:#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;">polygonModule.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addPolygon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(polygonData, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;area-layer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  fillColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 0, 255, 0.1)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;blue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  strokeWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  textKey: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 显示名称</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  textFillColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#fff&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  textStrokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;blue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  textStrokeWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  fitView: </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></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;">// 假设 &#39;area-layer&#39; 中的要素有 &#39;name&#39; 属性</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 我们将 &#39;区域A&#39; 设为红色，其他区域保持默认或设为其他颜色</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">polygonModule.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">updateFeatureColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  &#39;area-layer&#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:#032F62;--shiki-dark:#9ECBFF;">    &#39;区域A&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(255, 0, 0, 0.5)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;区域B&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 255, 0, 0.5)&#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>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    textKey: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;name&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 匹配 colorObj 的键</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#666&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 统一更新边框颜色</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    strokeWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</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;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> heatPoints</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;">119.8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, lttd: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">29.9</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</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;">119.9</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, lttd: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30.0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</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;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">polygonModule.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addHeatmap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(heatPoints, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;heatmap-layer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  radius: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,       </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 热点半径</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  blur: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,         </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 边缘模糊</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  valueKey: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;value&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 权重字段</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  gradient: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#00f&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#0ff&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#0f0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#f00&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><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:#6A737D;--shiki-dark:#6A737D;">// 将图片叠加到指定经纬度范围</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">polygonModule.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addImageLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  img: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://example.com/plan.png&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  extent: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120.0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30.0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120.1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30.1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// [minX, minY, maxX, maxY]</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;">  layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;image-overlay&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  opacity: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.8</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;">// 添加遮罩，除了 polygonData 覆盖的区域外，其他区域都会被遮挡</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">polygonModule.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setOutLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(polygonData, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;mask-layer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  fillColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 0, 0, 0.5)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 黑色半透明遮罩</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#fff&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  strokeWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</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/Line.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Line 线要素</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/my-openlayer/VueTemplatePoint.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>VueTemplatePoint Vue点位</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/RiverLayerManager.html ADDED Viewed

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="zh-CN" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>RiverLayerManager 河流图层管理类 | 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/RiverLayerManager.md.CfUu2RxH.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_RiverLayerManager" data-v-39a288b8><div><h1 id="riverlayermanager-河流图层管理类" tabindex="-1">RiverLayerManager 河流图层管理类 <a class="header-anchor" href="#riverlayermanager-河流图层管理类" aria-label="Permalink to &quot;RiverLayerManager 河流图层管理类&quot;"></a></h1><p><code>RiverLayerManager</code> 专门用于处理河流数据的分级显示和样式管理。它支持基于地图缩放级别（Zoom-based）的动态分级显示，以及基于河流属性等级（Level-based）的固定线宽渲染。</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, eventManager</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> EventManager)</span></span></code></pre></div><ul><li><strong>参数</strong>: <ul><li><code>map</code> (Map): OpenLayers 地图实例。</li><li><code>eventManager</code> (EventManager): 可选。事件管理器实例，如果未提供则内部创建。</li></ul></li></ul><h2 id="接口定义" tabindex="-1">接口定义 <a class="header-anchor" href="#接口定义" aria-label="Permalink to &quot;接口定义&quot;"></a></h2><h3 id="riverlayeroptions" tabindex="-1">RiverLayerOptions <a class="header-anchor" href="#riverlayeroptions" aria-label="Permalink to &quot;RiverLayerOptions&quot;"></a></h3><p>河流图层配置选项，继承自 <code>LineOptions</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><th style="text-align:left;">默认值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;">levelCount</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">否</td><td style="text-align:left;"><code>5</code></td><td style="text-align:left;">河流等级总数。用于分级显示循环加载。</td></tr><tr><td style="text-align:left;">zoomOffset</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">否</td><td style="text-align:left;"><code>8</code></td><td style="text-align:left;">缩放级别偏移量。控制何时显示哪一级河流 (Zoom &gt; Level + Offset)。</td></tr><tr><td style="text-align:left;">levelWidthMap</td><td style="text-align:left;"><code>RiverLevelWidthMap</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;">removeExisting</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;">layerName</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;">图层名称，用于标识和清理。</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><tr><td style="text-align:left;">strokeColor</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;">线条颜色。</td></tr><tr><td style="text-align:left;">strokeWidth</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;">基础线宽（如果未使用 levelWidthMap）。</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;">图层 Z-Index。</td></tr><tr><td style="text-align:left;">projectionOptOptions</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;">GeoJSON 读取时的投影选项。</td></tr></tbody></table><h3 id="riverlevelwidthmap" tabindex="-1">RiverLevelWidthMap <a class="header-anchor" href="#riverlevelwidthmap" aria-label="Permalink to &quot;RiverLevelWidthMap&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:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RiverLevelWidthMap</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:#E36209;--shiki-dark:#FFAB70;">level</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:#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:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>默认映射 (<code>ConfigManager.DEFAULT_RIVER_LEVEL_WIDTH_MAP</code>) 通常为 <code>{1: 5, 2: 4, 3: 3, 4: 2, 5: 1}</code> 等类似结构。</p><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to &quot;方法&quot;"></a></h2><h3 id="分级显示-zoom-based" tabindex="-1">分级显示 (Zoom-based) <a class="header-anchor" href="#分级显示-zoom-based" aria-label="Permalink to &quot;分级显示 (Zoom-based)&quot;"></a></h3><p>根据地图缩放级别自动显示不同等级的河流。通常用于实现“缩放越大约详细”的效果。</p><h4 id="addriverlayersbyzoom" tabindex="-1">addRiverLayersByZoom <a class="header-anchor" href="#addriverlayersbyzoom" aria-label="Permalink to &quot;addRiverLayersByZoom&quot;"></a></h4><p>直接传递 GeoJSON 数据添加分级河流图层。</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;">addRiverLayersByZoom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(fyRiverJson: MapJSONData, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> RiverLayerOptions): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><ul><li><strong>参数</strong>: <ul><li><code>fyRiverJson</code>: 河流 GeoJSON 数据对象。</li><li><code>options</code>: 配置选项。</li></ul></li></ul><h4 id="addriverlayersbyzoombyurl" tabindex="-1">addRiverLayersByZoomByUrl <a class="header-anchor" href="#addriverlayersbyzoombyurl" aria-label="Permalink to &quot;addRiverLayersByZoomByUrl&quot;"></a></h4><p>通过 URL 加载 GeoJSON 数据并添加分级河流图层。</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;">addRiverLayersByZoomByUrl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(url: string, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> RiverLayerOptions): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><h4 id="showriverlayer" tabindex="-1">showRiverLayer <a class="header-anchor" href="#showriverlayer" aria-label="Permalink to &quot;showRiverLayer&quot;"></a></h4><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;">showRiverLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(show: boolean): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><h4 id="showriverlayerbyzoom" tabindex="-1">showRiverLayerByZoom <a class="header-anchor" href="#showriverlayerbyzoom" aria-label="Permalink to &quot;showRiverLayerByZoom&quot;"></a></h4><p>手动触发根据当前缩放级别更新图层可见性（通常不需要手动调用，已绑定 <code>moveend</code> 事件）。</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;">showRiverLayerByZoom</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="宽度分级-level-based-width" tabindex="-1">宽度分级 (Level-based Width) <a class="header-anchor" href="#宽度分级-level-based-width" aria-label="Permalink to &quot;宽度分级 (Level-based Width)&quot;"></a></h3><p>根据河流数据中的 <code>level</code> 属性渲染不同宽度的线条，通常用于静态展示不同等级河流的粗细差异。</p><h4 id="addriverwidthbylevel" tabindex="-1">addRiverWidthByLevel <a class="header-anchor" href="#addriverwidthbylevel" aria-label="Permalink to &quot;addRiverWidthByLevel&quot;"></a></h4><p>直接传递 GeoJSON 数据添加按等级设定宽度的河流。</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;">addRiverWidthByLevel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data: MapJSONData, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> RiverLayerOptions): VectorLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><ul><li><strong>返回值</strong>: 创建的矢量图层。</li></ul><h4 id="addriverwidthbylevelbyurl" tabindex="-1">addRiverWidthByLevelByUrl <a class="header-anchor" href="#addriverwidthbylevelbyurl" aria-label="Permalink to &quot;addRiverWidthByLevelByUrl&quot;"></a></h4><p>通过 URL 加载 GeoJSON 数据并添加按等级设定宽度的河流。</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;">addRiverWidthByLevelByUrl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(url: string, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> RiverLayerOptions): VectorLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><h3 id="管理与清理" tabindex="-1">管理与清理 <a class="header-anchor" href="#管理与清理" aria-label="Permalink to &quot;管理与清理&quot;"></a></h3><h4 id="clearriverlayers" tabindex="-1">clearRiverLayers <a class="header-anchor" href="#clearriverlayers" aria-label="Permalink to &quot;clearRiverLayers&quot;"></a></h4><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;">clearRiverLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><h4 id="getriverlayervisibility" tabindex="-1">getRiverLayerVisibility <a class="header-anchor" href="#getriverlayervisibility" aria-label="Permalink to &quot;getRiverLayerVisibility&quot;"></a></h4><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;">getRiverLayerVisibility</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): boolean</span></span></code></pre></div><h4 id="getriverlayers" tabindex="-1">getRiverLayers <a class="header-anchor" href="#getriverlayers" aria-label="Permalink to &quot;getRiverLayers&quot;"></a></h4><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;">getRiverLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): VectorLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]</span></span></code></pre></div><h4 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to &quot;destroy&quot;"></a></h4><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;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</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, RiverLayerManager } </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;"> 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;"> riverManager</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;"> RiverLayerManager</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;">// 假设 riverGeoJSON 数据中每个 feature 都有 properties.level (1-5)</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:#6A737D;--shiki-dark:#6A737D;">// Level 1 在 Zoom &gt; 9 (1+8) 显示</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Level 2 在 Zoom &gt; 10 (2+8) 显示</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;">riverManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addRiverLayersByZoom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(riverGeoJSON, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dynamic-river&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  levelCount: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  zoomOffset: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#0071FF&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  strokeWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  removeExisting: </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>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 控制分级河流的总开关</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">riverManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showRiverLayer</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 全部隐藏</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">riverManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showRiverLayer</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 恢复并根据当前 Zoom 显示对应级别</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;">riverManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addRiverWidthByLevel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(riverGeoJSON, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;static-river&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#0071FF&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  levelWidthMap: {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1级河流宽 6px</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</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;">  zIndex: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</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:#6A737D;--shiki-dark:#6A737D;">// riverManager.destroy();</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/VueTemplatePoint.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>VueTemplatePoint Vue点位</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/my-openlayer/SelectHandler.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>SelectHandler 要素选择</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>