my-openlayer 2.4.9 → 2.4.12

package/docs/.vitepress/dist/assets/Polygon.md.-JIqEvzD.js

@@ -0,0 +1,78 @@
+import{_ as i,c as t,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const o=JSON.parse('{"title":"Polygon 面要素类","description":"","frontmatter":{},"headers":[],"relativePath":"Polygon.md","filePath":"Polygon.md"}'),l={name:"Polygon.md"};function n(h,s,p,d,k,r){return e(),t("div",null,s[0]||(s[0]=[a(`<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>`,50)]))}const g=i(l,[["render",n]]);export{o as __pageData,g as default};

package/docs/.vitepress/dist/assets/Polygon.md.-JIqEvzD.lean.js

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

package/docs/.vitepress/dist/assets/RiverLayerManager.md.CfUu2RxH.js

@@ -0,0 +1,42 @@
+import{_ as i,c as a,ae as e,o as t}from"./chunks/framework.C_W0ODpn.js";const y=JSON.parse('{"title":"RiverLayerManager 河流图层管理类","description":"","frontmatter":{},"headers":[],"relativePath":"RiverLayerManager.md","filePath":"RiverLayerManager.md"}'),l={name:"RiverLayerManager.md"};function n(h,s,p,r,d,k){return t(),a("div",null,s[0]||(s[0]=[e(`<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>`,53)]))}const g=i(l,[["render",n]]);export{y as __pageData,g as default};

package/docs/.vitepress/dist/assets/RiverLayerManager.md.CfUu2RxH.lean.js

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

package/docs/.vitepress/dist/assets/SelectHandler.md.COR4ez_p.js

@@ -0,0 +1,22 @@
+import{_ as t,c as i,ae as e,o as a}from"./chunks/framework.C_W0ODpn.js";const o=JSON.parse('{"title":"SelectHandler 类","description":"","frontmatter":{},"headers":[],"relativePath":"SelectHandler.md","filePath":"SelectHandler.md"}'),l={name:"SelectHandler.md"};function n(h,s,p,d,r,k){return a(),i("div",null,s[0]||(s[0]=[e(`<h1 id="selecthandler-类" tabindex="-1">SelectHandler 类 <a class="header-anchor" href="#selecthandler-类" aria-label="Permalink to &quot;SelectHandler 类&quot;">​</a></h1><p><code>SelectHandler</code> 类用于处理地图上的要素选择交互，支持点击、悬停、Ctrl+点击等多种模式，并支持编程式选择。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map)</span></span></code></pre></div><ul><li><strong>map</strong>: OpenLayers 地图实例。</li></ul><h2 id="接口定义" tabindex="-1">接口定义 <a class="header-anchor" href="#接口定义" aria-label="Permalink to &quot;接口定义&quot;">​</a></h2><h3 id="selectoptions" tabindex="-1">SelectOptions <a class="header-anchor" href="#selectoptions" aria-label="Permalink to &quot;SelectOptions&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">multi</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否支持多选，默认 <code>false</code></td></tr><tr><td style="text-align:left;">layerFilter</td><td style="text-align:left;"><code>string[]</code></td><td style="text-align:left;">图层过滤器，指定可选择的图层名称列表</td></tr><tr><td style="text-align:left;">featureFilter</td><td style="text-align:left;"><code>(feature: FeatureLike) =&gt; boolean</code></td><td style="text-align:left;">要素过滤器函数</td></tr><tr><td style="text-align:left;">hitTolerance</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">点击容差（像素），默认为 0</td></tr><tr><td style="text-align:left;">selectStyle</td><td style="text-align:left;"><code>Style | Style[] | ((feature: FeatureLike) =&gt; Style | Style[])</code></td><td style="text-align:left;">选中要素的样式</td></tr><tr><td style="text-align:left;">onSelect</td><td style="text-align:left;"><code>(event: SelectCallbackEvent) =&gt; void</code></td><td style="text-align:left;">选中要素时的回调函数</td></tr><tr><td style="text-align:left;">onDeselect</td><td style="text-align:left;"><code>(event: SelectCallbackEvent) =&gt; void</code></td><td style="text-align:left;">取消选中要素时的回调函数</td></tr></tbody></table><h3 id="programmaticselectoptions" tabindex="-1">ProgrammaticSelectOptions <a class="header-anchor" href="#programmaticselectoptions" aria-label="Permalink to &quot;ProgrammaticSelectOptions&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">layerName</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">图层名称，指定在哪个图层中选择要素</td></tr><tr><td style="text-align:left;">selectStyle</td><td style="text-align:left;"><code>Style | Style[] | ((feature: FeatureLike) =&gt; Style | Style[])</code></td><td style="text-align:left;">自定义选中样式（仅作用于此次选择）</td></tr><tr><td style="text-align:left;">fitView</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否定位至选中要素，默认 <code>false</code></td></tr><tr><td style="text-align:left;">fitDuration</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">定位动画持续时间（毫秒），默认 500</td></tr><tr><td style="text-align:left;">fitPadding</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">定位时的边距（像素），默认 100</td></tr></tbody></table><h3 id="selectmode" tabindex="-1">SelectMode <a class="header-anchor" href="#selectmode" aria-label="Permalink to &quot;SelectMode&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;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SelectMode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;click&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;hover&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ctrl&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to &quot;方法&quot;">​</a></h2><h3 id="enableselect" tabindex="-1">enableSelect <a class="header-anchor" href="#enableselect" aria-label="Permalink to &quot;enableSelect&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;">enableSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(mode: SelectMode </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;click&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> SelectOptions): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><ul><li><strong>mode</strong>: 选择模式。</li><li><strong>options</strong>: 配置选项。</li><li><strong>返回值</strong>: <code>SelectHandler</code> 实例，支持链式调用。</li></ul><h3 id="disableselect" tabindex="-1">disableSelect <a class="header-anchor" href="#disableselect" aria-label="Permalink to &quot;disableSelect&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;">disableSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><ul><li><strong>返回值</strong>: <code>SelectHandler</code> 实例。</li></ul><h3 id="clearselection" tabindex="-1">clearSelection <a class="header-anchor" href="#clearselection" aria-label="Permalink to &quot;clearSelection&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;">clearSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><ul><li><strong>返回值</strong>: <code>SelectHandler</code> 实例。</li></ul><h3 id="selectbyids" tabindex="-1">selectByIds <a class="header-anchor" href="#selectbyids" aria-label="Permalink to &quot;selectByIds&quot;">​</a></h3><p>通过要素 ID 编程式选择要素。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">selectByIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(featureIds: string[], options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ProgrammaticSelectOptions): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><ul><li><strong>featureIds</strong>: 要素 ID 数组。</li><li><strong>options</strong>: 编程式选择选项。</li><li><strong>返回值</strong>: <code>SelectHandler</code> 实例。</li></ul><h3 id="selectbyproperty" tabindex="-1">selectByProperty <a class="header-anchor" href="#selectbyproperty" aria-label="Permalink to &quot;selectByProperty&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;">selectByProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(propertyName: string, propertyValue: any, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ProgrammaticSelectOptions): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><ul><li><strong>propertyName</strong>: 属性名。</li><li><strong>propertyValue</strong>: 属性值。</li><li><strong>options</strong>: 编程式选择选项。</li><li><strong>返回值</strong>: <code>SelectHandler</code> 实例。</li></ul><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;">​</a></h2><h3 id="启用点击选择" tabindex="-1">启用点击选择 <a class="header-anchor" href="#启用点击选择" aria-label="Permalink to &quot;启用点击选择&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { SelectHandler } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayers&#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;"> selectHandler</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;"> SelectHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 启用点击选择，仅针对 &#39;cities&#39; 图层</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">selectHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">enableSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;click&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  layerFilter: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;cities&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Selected:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event.selected);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onDeselect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Deselected:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event.deselected);</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:#24292E;--shiki-dark:#E1E4E8;">selectHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">enableSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;hover&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  selectStyle: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    stroke: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Stroke</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;yellow&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, width: </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:#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:#6A737D;--shiki-dark:#6A737D;">// 选择 ID 为 &#39;beijing&#39; 的要素并自动定位</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">selectHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">selectByIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;beijing&#39;</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  fitPadding: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</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:#24292E;--shiki-dark:#E1E4E8;">selectHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clearSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div>`,42)]))}const g=t(l,[["render",n]]);export{o as __pageData,g as default};

package/docs/.vitepress/dist/assets/SelectHandler.md.COR4ez_p.lean.js

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

package/docs/.vitepress/dist/assets/ValidationUtils.md.ReTVWa73.js

@@ -0,0 +1,23 @@
+import{_ as i,c as a,ae as s,o as e}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"ValidationUtils 验证工具","description":"","frontmatter":{},"headers":[],"relativePath":"ValidationUtils.md","filePath":"ValidationUtils.md"}'),l={name:"ValidationUtils.md"};function n(d,t,h,p,o,k){return e(),a("div",null,t[0]||(t[0]=[s(`<h1 id="validationutils-验证工具" tabindex="-1">ValidationUtils 验证工具 <a class="header-anchor" href="#validationutils-验证工具" aria-label="Permalink to &quot;ValidationUtils 验证工具&quot;">​</a></h1><p><code>ValidationUtils</code> 提供了一系列静态方法，用于验证地图操作中的各种参数和数据，确保数据的完整性和类型正确性。</p><h2 id="导入" tabindex="-1">导入 <a class="header-anchor" href="#导入" aria-label="Permalink to &quot;导入&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ValidationUtils } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="静态方法" tabindex="-1">静态方法 <a class="header-anchor" href="#静态方法" aria-label="Permalink to &quot;静态方法&quot;">​</a></h2><h3 id="坐标验证" tabindex="-1">坐标验证 <a class="header-anchor" href="#坐标验证" aria-label="Permalink to &quot;坐标验证&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">参数</th><th style="text-align:left;">返回值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>isValidCoordinate(longitude, latitude)</code></td><td style="text-align:left;"><code>longitude: number</code><br><code>latitude: number</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">验证经纬度坐标是否有效（数字且在合法范围内）</td></tr><tr><td style="text-align:left;"><code>validateCoordinate(longitude, latitude)</code></td><td style="text-align:left;"><code>longitude: number</code><br><code>latitude: number</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证经纬度，无效时抛出异常</td></tr></tbody></table><h3 id="数据验证" tabindex="-1">数据验证 <a class="header-anchor" href="#数据验证" aria-label="Permalink to &quot;数据验证&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">参数</th><th style="text-align:left;">返回值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>validatePointData(pointData)</code></td><td style="text-align:left;"><code>pointData: any[]</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>validateOptions(options)</code></td><td style="text-align:left;"><code>options: any</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>validateMaskData(data)</code></td><td style="text-align:left;"><code>data: any</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证遮罩数据，无效时抛出异常</td></tr></tbody></table><h3 id="对象-实例验证" tabindex="-1">对象/实例验证 <a class="header-anchor" href="#对象-实例验证" aria-label="Permalink to &quot;对象/实例验证&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">参数</th><th style="text-align:left;">返回值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>validateMapInstance(map)</code></td><td style="text-align:left;"><code>map: any</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证 OpenLayers 地图实例是否存在</td></tr><tr><td style="text-align:left;"><code>validateElementId(id)</code></td><td style="text-align:left;"><code>id: string</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">验证 DOM 元素 ID 是否存在</td></tr><tr><td style="text-align:left;"><code>validateVueParams(pointInfoList, template, Vue)</code></td><td style="text-align:left;"><code>pointInfoList: any[]</code><br><code>template: any</code><br><code>Vue: any</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">验证 Vue 组件相关参数</td></tr></tbody></table><h3 id="通用验证" tabindex="-1">通用验证 <a class="header-anchor" href="#通用验证" aria-label="Permalink to &quot;通用验证&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">参数</th><th style="text-align:left;">返回值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>validateRequired(value, message)</code></td><td style="text-align:left;"><code>value: any</code><br><code>message: string</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证值是否存在，否则抛出带消息的异常</td></tr><tr><td style="text-align:left;"><code>validateType(value, expectedType, message)</code></td><td style="text-align:left;"><code>value: any</code><br><code>expectedType: string</code><br><code>message: string</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证值类型，否则抛出带消息的异常</td></tr></tbody></table><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;">​</a></h2><h3 id="验证坐标" tabindex="-1">验证坐标 <a class="header-anchor" href="#验证坐标" aria-label="Permalink to &quot;验证坐标&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ValidationUtils } </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;"> lng</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 120.5</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;"> lat</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30.5</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;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (ValidationUtils.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isValidCoordinate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(lng, lat)) {</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;">  map.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setCenter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([lng, lat]);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Invalid coordinates&#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></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;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> initLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  try</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ValidationUtils.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">validateMapInstance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ValidationUtils.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">validateRequired</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Options are required&#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:#6A737D;--shiki-dark:#6A737D;">    // 初始化图层</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (error) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Initialization failed:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, error.message);</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="验证-vue-组件参数" tabindex="-1">验证 Vue 组件参数 <a class="header-anchor" href="#验证-vue-组件参数" aria-label="Permalink to &quot;验证 Vue 组件参数&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;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (ValidationUtils.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">validateVueParams</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(points, MyComponent, Vue)) {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 创建 Vue 覆盖物</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> VueTemplatePoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addVueTemplatePoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(points, MyComponent);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,20)]))}const y=i(l,[["render",n]]);export{c as __pageData,y as default};

package/docs/.vitepress/dist/assets/ValidationUtils.md.ReTVWa73.lean.js

@@ -0,0 +1 @@
+import{_ as i,c as a,ae as s,o as e}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"ValidationUtils 验证工具","description":"","frontmatter":{},"headers":[],"relativePath":"ValidationUtils.md","filePath":"ValidationUtils.md"}'),l={name:"ValidationUtils.md"};function n(d,t,h,p,o,k){return e(),a("div",null,t[0]||(t[0]=[s("",20)]))}const y=i(l,[["render",n]]);export{c as __pageData,y as default};