my-openlayer 2.4.9 → 2.4.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -53
- package/LICENSE +21 -21
- package/README.md +43 -8
- package/core/MapBaseLayers.js +7 -9
- package/core/Point.d.ts +18 -1
- package/core/Point.js +201 -1
- package/docs/.vitepress/dist/404.html +22 -0
- package/docs/.vitepress/dist/ConfigManager.html +46 -0
- package/docs/.vitepress/dist/ErrorHandler.html +52 -0
- package/docs/.vitepress/dist/EventManager.html +58 -0
- package/docs/.vitepress/dist/Line.html +92 -0
- package/docs/.vitepress/dist/MapBaseLayers.html +52 -0
- package/docs/.vitepress/dist/MapTools.html +81 -0
- package/docs/.vitepress/dist/MeasureHandler.html +32 -0
- package/docs/.vitepress/dist/MyOl.html +62 -0
- package/docs/.vitepress/dist/Point.html +81 -0
- package/docs/.vitepress/dist/Polygon.html +102 -0
- package/docs/.vitepress/dist/RiverLayerManager.html +66 -0
- package/docs/.vitepress/dist/SelectHandler.html +46 -0
- package/docs/.vitepress/dist/ValidationUtils.html +47 -0
- package/docs/.vitepress/dist/VueTemplatePoint.html +112 -0
- package/docs/.vitepress/dist/assets/ConfigManager.md.BOMdGTaa.js +22 -0
- package/docs/.vitepress/dist/assets/ConfigManager.md.BOMdGTaa.lean.js +1 -0
- package/docs/.vitepress/dist/assets/ErrorHandler.md.yUiuJ9w9.js +28 -0
- package/docs/.vitepress/dist/assets/ErrorHandler.md.yUiuJ9w9.lean.js +1 -0
- package/docs/.vitepress/dist/assets/EventManager.md.BhCUVy1f.js +34 -0
- package/docs/.vitepress/dist/assets/EventManager.md.BhCUVy1f.lean.js +1 -0
- package/docs/.vitepress/dist/assets/Line.md.BAQOzmSt.js +68 -0
- package/docs/.vitepress/dist/assets/Line.md.BAQOzmSt.lean.js +1 -0
- package/docs/.vitepress/dist/assets/MapBaseLayers.md.Bw0L_m0b.js +28 -0
- package/docs/.vitepress/dist/assets/MapBaseLayers.md.Bw0L_m0b.lean.js +1 -0
- package/docs/.vitepress/dist/assets/MapTools.md.DaYgiDPe.js +57 -0
- package/docs/.vitepress/dist/assets/MapTools.md.DaYgiDPe.lean.js +1 -0
- package/docs/.vitepress/dist/assets/MeasureHandler.md.7Sf4ymRv.js +8 -0
- package/docs/.vitepress/dist/assets/MeasureHandler.md.7Sf4ymRv.lean.js +1 -0
- package/docs/.vitepress/dist/assets/MyOl.md.D-14Gzjy.js +38 -0
- package/docs/.vitepress/dist/assets/MyOl.md.D-14Gzjy.lean.js +1 -0
- package/docs/.vitepress/dist/assets/Point.md.Bi9juuuv.js +57 -0
- package/docs/.vitepress/dist/assets/Point.md.Bi9juuuv.lean.js +1 -0
- package/docs/.vitepress/dist/assets/Polygon.md.-JIqEvzD.js +78 -0
- package/docs/.vitepress/dist/assets/Polygon.md.-JIqEvzD.lean.js +1 -0
- package/docs/.vitepress/dist/assets/RiverLayerManager.md.CfUu2RxH.js +42 -0
- package/docs/.vitepress/dist/assets/RiverLayerManager.md.CfUu2RxH.lean.js +1 -0
- package/docs/.vitepress/dist/assets/SelectHandler.md.COR4ez_p.js +22 -0
- package/docs/.vitepress/dist/assets/SelectHandler.md.COR4ez_p.lean.js +1 -0
- package/docs/.vitepress/dist/assets/ValidationUtils.md.ReTVWa73.js +23 -0
- package/docs/.vitepress/dist/assets/ValidationUtils.md.ReTVWa73.lean.js +1 -0
- package/docs/.vitepress/dist/assets/VueTemplatePoint.md.CtxSb5Pm.js +88 -0
- package/docs/.vitepress/dist/assets/VueTemplatePoint.md.CtxSb5Pm.lean.js +1 -0
- package/docs/.vitepress/dist/assets/app.YvjVuxaB.js +1 -0
- package/docs/.vitepress/dist/assets/chunks/framework.C_W0ODpn.js +18 -0
- package/docs/.vitepress/dist/assets/chunks/theme.Bf87fILP.js +1 -0
- package/docs/.vitepress/dist/assets/index.md.BJz6tHSr.js +26 -0
- package/docs/.vitepress/dist/assets/index.md.BJz6tHSr.lean.js +1 -0
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
- package/docs/.vitepress/dist/assets/style.C2pAQzDq.css +1 -0
- package/docs/.vitepress/dist/hashmap.json +1 -0
- package/docs/.vitepress/dist/index.html +50 -0
- package/docs/.vitepress/dist/vp-icons.css +1 -0
- package/docs/Point.md +97 -29
- package/docs/index.md +6 -5
- package/index.d.ts +2 -2
- package/package.json +1 -1
- package/types.d.ts +59 -0
- package/core/DomPoint.d.ts +0 -21
- package/core/DomPoint.js +0 -36
- package/docs/.vitepress/cache/deps/@theme_index.js +0 -275
- package/docs/.vitepress/cache/deps/@theme_index.js.map +0 -7
- package/docs/.vitepress/cache/deps/_metadata.json +0 -40
- package/docs/.vitepress/cache/deps/chunk-LW4I4DCF.js +0 -12542
- package/docs/.vitepress/cache/deps/chunk-LW4I4DCF.js.map +0 -7
- package/docs/.vitepress/cache/deps/chunk-Z5QSWKN2.js +0 -9719
- package/docs/.vitepress/cache/deps/chunk-Z5QSWKN2.js.map +0 -7
- package/docs/.vitepress/cache/deps/package.json +0 -3
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -583
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
- package/docs/.vitepress/cache/deps/vue.js +0 -343
- package/docs/.vitepress/cache/deps/vue.js.map +0 -7
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import{_ as s,c as i,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const g=JSON.parse('{"title":"ConfigManager 配置管理","description":"","frontmatter":{},"headers":[],"relativePath":"ConfigManager.md","filePath":"ConfigManager.md"}'),n={name:"ConfigManager.md"};function l(h,t,d,p,o,r){return e(),i("div",null,t[0]||(t[0]=[a(`<h1 id="configmanager-配置管理" tabindex="-1">ConfigManager 配置管理 <a class="header-anchor" href="#configmanager-配置管理" aria-label="Permalink to "ConfigManager 配置管理""></a></h1><p><code>ConfigManager</code> 类用于统一管理地图组件的默认配置和常量。它提供了一系列静态只读属性,确保整个应用中使用一致的配置默认值。</p><h2 id="导入" tabindex="-1">导入 <a class="header-anchor" href="#导入" aria-label="Permalink to "导入""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ConfigManager } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayer'</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 "静态属性""></a></h2><p><code>ConfigManager</code> 包含以下类别的默认配置:</p><h3 id="点位配置-point-options" tabindex="-1">点位配置 (Point Options) <a class="header-anchor" href="#点位配置-point-options" aria-label="Permalink to "点位配置 (Point Options)""></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th><th style="text-align:left;">默认值</th></tr></thead><tbody><tr><td style="text-align:left;"><code>DEFAULT_POINT_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认点位基础配置</td><td style="text-align:left;"><code>{ visible: true, zIndex: 21 }</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_POINT_TEXT_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认点位文本配置</td><td style="text-align:left;"><code>{ textFont: '12px Calibri,sans-serif', textFillColor: '#FFF', textStrokeColor: '#000', textStrokeWidth: 3, textOffsetY: 20 }</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_POINT_ICON_SCALE</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">默认图标缩放比例</td><td style="text-align:left;"><code>1</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_CLUSTER_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认聚合配置</td><td style="text-align:left;"><code>{ distance: 40, minDistance: 0, zIndex: 21 }</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_DOM_POINT_OVERLAY_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认 DOM 点覆盖物配置</td><td style="text-align:left;"><code>{ positioning: 'center-center', stopEvent: false }</code></td></tr></tbody></table><h3 id="线配置-line-options" tabindex="-1">线配置 (Line Options) <a class="header-anchor" href="#线配置-line-options" aria-label="Permalink to "线配置 (Line Options)""></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th><th style="text-align:left;">默认值</th></tr></thead><tbody><tr><td style="text-align:left;"><code>DEFAULT_LINE_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认线样式配置</td><td style="text-align:left;"><code>{ type: 'line', strokeColor: 'rgba(3, 122, 255, 1)', strokeWidth: 2, visible: true, layerName: 'lineLayer', zIndex: 15 }</code></td></tr></tbody></table><h3 id="面配置-polygon-options" tabindex="-1">面配置 (Polygon Options) <a class="header-anchor" href="#面配置-polygon-options" aria-label="Permalink to "面配置 (Polygon Options)""></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th><th style="text-align:left;">默认值</th></tr></thead><tbody><tr><td style="text-align:left;"><code>DEFAULT_POLYGON_OPTIONS</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认面样式配置</td><td style="text-align:left;"><code>{ zIndex: 11, visible: true, textFont: '14px Calibri,sans-serif', textFillColor: '#FFF', textStrokeColor: '#409EFF', textStrokeWidth: 2 }</code></td></tr><tr><td style="text-align:left;"><code>DEFAULT_POLYGON_COLOR_MAP</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">默认面颜色映射 (用于分级渲染)</td><td style="text-align:left;"><code>{ '0': 'rgba(255, 0, 0, 0.6)', '1': 'rgba(245, 154, 35, 0.6)', ... }</code></td></tr></tbody></table><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to "使用示例""></a></h2><h3 id="获取默认配置" tabindex="-1">获取默认配置 <a class="header-anchor" href="#获取默认配置" aria-label="Permalink to "获取默认配置""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ConfigManager } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
+
<span class="line"></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取默认点位配置</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pointOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ConfigManager.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DEFAULT_POINT_OPTIONS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ConfigManager.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DEFAULT_POINT_TEXT_OPTIONS</span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
|
8
|
+
<span class="line"></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取默认线配置</span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> lineOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ConfigManager.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DEFAULT_LINE_OPTIONS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="在自定义组件中使用" tabindex="-1">在自定义组件中使用 <a class="header-anchor" href="#在自定义组件中使用" aria-label="Permalink to "在自定义组件中使用""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ConfigManager } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
11
|
+
<span class="line"></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> private</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
14
|
+
<span class="line"></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 合并用户配置和默认配置</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">ConfigManager.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DEFAULT_POINT_OPTIONS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,17)]))}const c=s(n,[["render",l]]);export{g as __pageData,c as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as s,c as i,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const g=JSON.parse('{"title":"ConfigManager 配置管理","description":"","frontmatter":{},"headers":[],"relativePath":"ConfigManager.md","filePath":"ConfigManager.md"}'),n={name:"ConfigManager.md"};function l(h,t,d,p,o,r){return e(),i("div",null,t[0]||(t[0]=[a("",17)]))}const c=s(n,[["render",l]]);export{g as __pageData,c as default};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import{_ as e,c as s,ae as a,o as i}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"ErrorHandler 错误处理","description":"","frontmatter":{},"headers":[],"relativePath":"ErrorHandler.md","filePath":"ErrorHandler.md"}'),l={name:"ErrorHandler.md"};function n(d,t,r,h,o,p){return i(),s("div",null,t[0]||(t[0]=[a(`<h1 id="errorhandler-错误处理" tabindex="-1">ErrorHandler 错误处理 <a class="header-anchor" href="#errorhandler-错误处理" aria-label="Permalink to "ErrorHandler 错误处理""></a></h1><p><code>ErrorHandler</code> 类是一个单例工具类,用于统一管理和分发应用程序中的错误。它支持不同的日志级别,并允许注册自定义错误回调。</p><h2 id="导入" tabindex="-1">导入 <a class="header-anchor" href="#导入" aria-label="Permalink to "导入""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ErrorHandler, ErrorType, MyOpenLayersError } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayer'</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 "枚举与类定义""></a></h2><h3 id="errortype-枚举" tabindex="-1">ErrorType 枚举 <a class="header-anchor" href="#errortype-枚举" aria-label="Permalink to "ErrorType 枚举""></a></h3><p>定义了系统中可能的错误类型:</p><table tabindex="0"><thead><tr><th style="text-align:left;">成员</th><th style="text-align:left;">值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>VALIDATION_ERROR</code></td><td style="text-align:left;"><code>'VALIDATION_ERROR'</code></td><td style="text-align:left;">参数验证错误</td></tr><tr><td style="text-align:left;"><code>MAP_ERROR</code></td><td style="text-align:left;"><code>'MAP_ERROR'</code></td><td style="text-align:left;">地图相关错误</td></tr><tr><td style="text-align:left;"><code>LAYER_ERROR</code></td><td style="text-align:left;"><code>'LAYER_ERROR'</code></td><td style="text-align:left;">图层相关错误</td></tr><tr><td style="text-align:left;"><code>COORDINATE_ERROR</code></td><td style="text-align:left;"><code>'COORDINATE_ERROR'</code></td><td style="text-align:left;">坐标无效错误</td></tr><tr><td style="text-align:left;"><code>DATA_ERROR</code></td><td style="text-align:left;"><code>'DATA_ERROR'</code></td><td style="text-align:left;">数据格式错误</td></tr><tr><td style="text-align:left;"><code>COMPONENT_ERROR</code></td><td style="text-align:left;"><code>'COMPONENT_ERROR'</code></td><td style="text-align:left;">组件内部错误</td></tr></tbody></table><h3 id="myopenlayerserror-类" tabindex="-1">MyOpenLayersError 类 <a class="header-anchor" href="#myopenlayerserror-类" aria-label="Permalink to "MyOpenLayersError 类""></a></h3><p>自定义错误类,继承自 <code>Error</code>。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>message</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">错误消息</td></tr><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>ErrorType</code></td><td style="text-align:left;">错误类型</td></tr><tr><td style="text-align:left;"><code>timestamp</code></td><td style="text-align:left;"><code>Date</code></td><td style="text-align:left;">错误发生的时间戳</td></tr><tr><td style="text-align:left;"><code>context</code></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">错误相关的上下文数据</td></tr></tbody></table><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to "方法""></a></h2><h3 id="静态方法" tabindex="-1">静态方法 <a class="header-anchor" href="#静态方法" aria-label="Permalink to "静态方法""></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">参数</th><th style="text-align:left;">返回值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>getInstance()</code></td><td style="text-align:left;">-</td><td style="text-align:left;"><code>ErrorHandler</code></td><td style="text-align:left;">获取 <code>ErrorHandler</code> 的单例实例</td></tr><tr><td style="text-align:left;"><code>validate(condition, message, context?)</code></td><td style="text-align:left;"><code>condition: boolean</code><br><code>message: string</code><br><code>context?: any</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证条件,如果为 <code>false</code> 则抛出 <code>VALIDATION_ERROR</code></td></tr><tr><td style="text-align:left;"><code>validateMap(map)</code></td><td style="text-align:left;"><code>map: any</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证地图实例是否存在</td></tr><tr><td style="text-align:left;"><code>validateCoordinates(longitude, latitude)</code></td><td style="text-align:left;"><code>longitude: number</code><br><code>latitude: number</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证经纬度坐标是否有效</td></tr><tr><td style="text-align:left;"><code>validateLayerName(layerName)</code></td><td style="text-align:left;"><code>layerName: string</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证图层名称是否有效</td></tr><tr><td style="text-align:left;"><code>validateData(data, dataType)</code></td><td style="text-align:left;"><code>data: any</code><br><code>dataType: string</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">验证数据是否存在</td></tr><tr><td style="text-align:left;"><code>safeExecute<T>(fn, errorMessage, errorType?, context?)</code></td><td style="text-align:left;"><code>fn: () => T</code><br><code>errorMessage: string</code><br><code>errorType?: ErrorType</code><br><code>context?: any</code></td><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">安全执行函数,捕获并处理异常</td></tr></tbody></table><h3 id="实例方法" tabindex="-1">实例方法 <a class="header-anchor" href="#实例方法" aria-label="Permalink to "实例方法""></a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">参数</th><th style="text-align:left;">返回值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>setLogLevel(level)</code></td><td style="text-align:left;"><code>level: 'debug' | 'info' | 'warn' | 'error'</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">设置日志级别</td></tr><tr><td style="text-align:left;"><code>debug(...args)</code></td><td style="text-align:left;"><code>...args: any[]</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">输出调试日志</td></tr><tr><td style="text-align:left;"><code>info(...args)</code></td><td style="text-align:left;"><code>...args: any[]</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">输出信息日志</td></tr><tr><td style="text-align:left;"><code>warn(...args)</code></td><td style="text-align:left;"><code>...args: any[]</code></td><td style="text-align:left;"><code>void</code></td><td style="text-align:left;">输出警告日志</td></tr><tr><td style="text-align:left;"><code>createAndHandleError(message, type, context?)</code></td><td style="text-align:left;"><code>message: string</code><br><code>type: ErrorType</code><br><code>context?: any</code></td><td style="text-align:left;"><code>MyOpenLayersError</code></td><td style="text-align:left;">创建并处理错误,通知监听器</td></tr></tbody></table><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to "使用示例""></a></h2><h3 id="基本验证" tabindex="-1">基本验证 <a class="header-anchor" href="#基本验证" aria-label="Permalink to "基本验证""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ErrorHandler } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
+
<span class="line"></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setCenter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">longitude</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">latitude</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 验证坐标,如果不合法会自动抛出异常</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ErrorHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">validateCoordinates</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(longitude, latitude);</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...设置中心点逻辑</span></span>
|
|
8
|
+
<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 "捕获和处理错误""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ErrorHandler, ErrorType } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
9
|
+
<span class="line"></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">try</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 可能出错的代码</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> throw</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Something went wrong'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
13
|
+
<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>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ErrorHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getInstance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createAndHandleError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Operation failed'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ErrorType.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">COMPONENT_ERROR</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { originalError: error }</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
19
|
+
<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 "安全执行函数""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ErrorHandler } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
20
|
+
<span class="line"></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> result</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ErrorHandler.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">safeExecute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 危险操作</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> JSON</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">parse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(someJsonString);</span></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
26
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Failed to parse JSON'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ErrorType.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DATA_ERROR</span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div>`,23)]))}const y=e(l,[["render",n]]);export{c as __pageData,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as e,c as s,ae as a,o as i}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"ErrorHandler 错误处理","description":"","frontmatter":{},"headers":[],"relativePath":"ErrorHandler.md","filePath":"ErrorHandler.md"}'),l={name:"ErrorHandler.md"};function n(d,t,r,h,o,p){return i(),s("div",null,t[0]||(t[0]=[a("",23)]))}const y=e(l,[["render",n]]);export{c as __pageData,y as default};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import{_ as i,c as t,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const o=JSON.parse('{"title":"EventManager 事件管理","description":"","frontmatter":{},"headers":[],"relativePath":"EventManager.md","filePath":"EventManager.md"}'),n={name:"EventManager.md"};function l(h,s,p,k,d,r){return e(),t("div",null,s[0]||(s[0]=[a(`<h1 id="eventmanager-事件管理" tabindex="-1">EventManager 事件管理 <a class="header-anchor" href="#eventmanager-事件管理" aria-label="Permalink to "EventManager 事件管理""></a></h1><p><code>EventManager</code> 类用于统一管理地图事件,提供简单的 API 来监听、移除和触发地图事件。它对 OpenLayers 的原生事件系统进行了封装,提供了类型安全的事件处理。</p><h2 id="导入" tabindex="-1">导入 <a class="header-anchor" href="#导入" aria-label="Permalink to "导入""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { EventManager, MapEventData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayer'</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 "接口定义""></a></h2><h3 id="mapeventdata-接口" tabindex="-1">MapEventData 接口 <a class="header-anchor" href="#mapeventdata-接口" aria-label="Permalink to "MapEventData 接口""></a></h3><p>统一的事件数据结构,回调函数会接收此类型的参数。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>MapEventType</code></td><td style="text-align:left;">事件类型</td></tr><tr><td style="text-align:left;"><code>originalEvent</code></td><td style="text-align:left;"><code>Event</code></td><td style="text-align:left;">原始 DOM 事件对象 (可选)</td></tr><tr><td style="text-align:left;"><code>coordinate</code></td><td style="text-align:left;"><code>number[]</code></td><td style="text-align:left;">发生事件的地理坐标 (可选)</td></tr><tr><td style="text-align:left;"><code>pixel</code></td><td style="text-align:left;"><code>Pixel</code></td><td style="text-align:left;">发生事件的屏幕像素坐标 (可选)</td></tr><tr><td style="text-align:left;"><code>features</code></td><td style="text-align:left;"><code>FeatureLike[]</code></td><td style="text-align:left;">事件位置处的要素列表 (可选)</td></tr><tr><td style="text-align:left;"><code>feature</code></td><td style="text-align:left;"><code>FeatureLike</code></td><td style="text-align:left;">事件位置处的第一个要素 (可选)</td></tr><tr><td style="text-align:left;"><code>zoom</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">当前地图缩放级别 (可选)</td></tr><tr><td style="text-align:left;"><code>[key: string]</code></td><td style="text-align:left;"><code>any</code></td><td style="text-align:left;">其他自定义属性</td></tr></tbody></table><h3 id="mapeventtype-类型" tabindex="-1">MapEventType 类型 <a class="header-anchor" href="#mapeventtype-类型" aria-label="Permalink to "MapEventType 类型""></a></h3><p>支持的事件类型字符串: <code>'click'</code> | <code>'dblclick'</code> | <code>'hover'</code> | <code>'moveend'</code> | <code>'zoomend'</code> | <code>'pointermove'</code> | <code>'rendercomplete'</code> | <code>'error'</code></p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to "构造函数""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map)</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>map</code></td><td style="text-align:left;"><code>Map</code></td><td style="text-align:left;">OpenLayers 地图实例</td></tr></tbody></table><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to "方法""></a></h2><h3 id="监听事件" tabindex="-1">监听事件 <a class="header-anchor" href="#监听事件" aria-label="Permalink to "监听事件""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(type: MapEventType, callback: EventCallback, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { once?: boolean; filter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapEventData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> boolean; }): string</span></span></code></pre></div><p>注册事件监听器。</p><table tabindex="0"><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>MapEventType</code></td><td style="text-align:left;">事件类型</td></tr><tr><td style="text-align:left;"><code>callback</code></td><td style="text-align:left;"><code>EventCallback</code></td><td style="text-align:left;">事件回调函数</td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">监听选项 (可选)</td></tr><tr><td style="text-align:left;"><code>options.once</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否只触发一次</td></tr><tr><td style="text-align:left;"><code>options.filter</code></td><td style="text-align:left;"><code>function</code></td><td style="text-align:left;">事件过滤器,返回 false 则不触发回调</td></tr></tbody></table><p><strong>返回值</strong>: <code>string</code> - 监听器 ID,用于取消监听。</p><h3 id="移除监听" tabindex="-1">移除监听 <a class="header-anchor" href="#移除监听" aria-label="Permalink to "移除监听""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">off</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id: string): boolean</span></span></code></pre></div><p>根据监听器 ID 移除事件监听。</p><table tabindex="0"><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>id</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">监听器 ID</td></tr></tbody></table><p><strong>返回值</strong>: <code>boolean</code> - 是否成功移除。</p><h3 id="移除所有监听" tabindex="-1">移除所有监听 <a class="header-anchor" href="#移除所有监听" aria-label="Permalink to "移除所有监听""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><p>移除所有已注册的事件监听器。</p><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to "使用示例""></a></h2><h3 id="基础事件监听" tabindex="-1">基础事件监听 <a class="header-anchor" href="#基础事件监听" aria-label="Permalink to "基础事件监听""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MyOl } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
2
|
+
<span class="line"></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myOl</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyOl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'map-container'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> eventManager</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> myOl.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getEventManager</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
5
|
+
<span class="line"></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 监听点击事件</span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> clickId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'click'</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;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
8
|
+
<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;">'Clicked at:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event.coordinate);</span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (event.feature) {</span></span>
|
|
11
|
+
<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;">'Clicked feature:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event.feature);</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
|
14
|
+
<span class="line"></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 监听缩放结束</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'zoomend'</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;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
17
|
+
<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;">'Current zoom:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, event.zoom);</span></span>
|
|
18
|
+
<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 "一次性监听""></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>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'click'</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;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
20
|
+
<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;">'First click only'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, { once: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span></code></pre></div><h3 id="带过滤条件的监听" tabindex="-1">带过滤条件的监听 <a class="header-anchor" href="#带过滤条件的监听" aria-label="Permalink to "带过滤条件的监听""></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>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'click'</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;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
23
|
+
<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;">'Clicked special feature'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, {</span></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
26
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.feature) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> event.feature.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getProperties</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> props.type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'special'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
30
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="移除监听-1" tabindex="-1">移除监听 <a class="header-anchor" href="#移除监听-1" aria-label="Permalink to "移除监听""></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>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">off</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(clickId);</span></span>
|
|
32
|
+
<span class="line"></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 或清除所有</span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">eventManager.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div>`,36)]))}const g=i(n,[["render",l]]);export{o as __pageData,g as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as t,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const o=JSON.parse('{"title":"EventManager 事件管理","description":"","frontmatter":{},"headers":[],"relativePath":"EventManager.md","filePath":"EventManager.md"}'),n={name:"EventManager.md"};function l(h,s,p,k,d,r){return e(),t("div",null,s[0]||(s[0]=[a("",36)]))}const g=i(n,[["render",l]]);export{o as __pageData,g as default};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import{_ as i,c as t,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const g=JSON.parse('{"title":"Line 线要素类","description":"","frontmatter":{},"headers":[],"relativePath":"Line.md","filePath":"Line.md"}'),l={name:"Line.md"};function n(h,s,p,k,d,r){return e(),t("div",null,s[0]||(s[0]=[a(`<h1 id="line-线要素类" tabindex="-1">Line 线要素类 <a class="header-anchor" href="#line-线要素类" aria-label="Permalink to "Line 线要素类""></a></h1><p><code>Line</code> 类用于在地图上绘制线要素,支持 GeoJSON 数据加载、自定义样式和图层管理。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to "构造函数""></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;"> line</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;"> Line</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 "接口定义""></a></h2><h3 id="lineoptions" tabindex="-1">LineOptions <a class="header-anchor" href="#lineoptions" aria-label="Permalink to "LineOptions""></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;">图层是否可见,默认 <code>true</code></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>strokeColor</code></td><td style="text-align:left;"><code>string</code> | <code>number[]</code></td><td style="text-align:left;">线条颜色,如 <code>'#ff0000'</code> 或 <code>[255, 0, 0, 1]</code></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;">虚线模式,如 <code>[10, 10]</code> 表示 10px 实线 10px 间隔</td></tr><tr><td style="text-align:left;"><code>lineDashOffset</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>style</code></td><td style="text-align:left;"><code>Style</code> | <code>Function</code></td><td style="text-align:left;">自定义 OpenLayers 样式或样式函数</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>textCallBack</code></td><td style="text-align:left;"><code>(feature) => string</code></td><td style="text-align:left;">获取文本内容的回调函数</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;">字体样式,默认 <code>'12px sans-serif'</code></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;"><code>textStrokeWidth</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>textOffsetY</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">文本 Y 轴偏移量</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>type</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">线条类型标识,会写入 Feature 的属性中</td></tr></tbody></table><h3 id="mapjsondata-geojson" tabindex="-1">MapJSONData (GeoJSON) <a class="header-anchor" href="#mapjsondata-geojson" aria-label="Permalink to "MapJSONData (GeoJSON)""></a></h3><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:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapJSONData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 通常为 "FeatureCollection"</span></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 数据集名称</span></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> features</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FeatureData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 要素数组</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
6
|
+
<span class="line"></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FeatureData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// "Feature"</span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> properties</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 属性对象</span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> geometry</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "LineString"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "MultiLineString"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> coordinates</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>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to "方法""></a></h2><h3 id="addline" tabindex="-1">addLine <a class="header-anchor" href="#addline" aria-label="Permalink to "addLine""></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;">addLine</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;"> LineOptions): VectorLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></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>LineOptions</code></td><td style="text-align:left;">图层配置项</td></tr></tbody></table><p><strong>返回</strong>: 创建的 <code>VectorLayer</code> 实例。</p><h3 id="addlinebyurl" tabindex="-1">addLineByUrl <a class="header-anchor" href="#addlinebyurl" aria-label="Permalink to "addLineByUrl""></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;">addLineByUrl</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;"> LineOptions): VectorLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></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>url</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">GeoJSON 数据的 URL 地址</td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>LineOptions</code></td><td style="text-align:left;">图层配置项</td></tr></tbody></table><p><strong>返回</strong>: 创建的 <code>VectorLayer</code> 实例。</p><h3 id="removelinelayer" tabindex="-1">removeLineLayer <a class="header-anchor" href="#removelinelayer" aria-label="Permalink to "removeLineLayer""></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;">removeLineLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(layerName: string): </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></tbody></table><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to "使用示例""></a></h2><h3 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to "基础用法""></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;"> lineModule</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;">getLine</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
15
|
+
<span class="line"></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// GeoJSON 数据</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> lineData</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'FeatureCollection'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> features: [</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Feature'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> geometry: {</span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'LineString'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> coordinates: [[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">119.8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">29.9</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">119.9</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>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
26
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> properties: { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'线路1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'active'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
|
30
|
+
<span class="line"></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 添加红色实线</span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">lineModule.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addLine</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(lineData, {</span></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'base-line'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ff0000'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
35
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> strokeWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
36
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fitView: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
|
|
37
|
+
<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 "虚线与标注""></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;">lineModule.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addLine</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(lineData, {</span></span>
|
|
38
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'dash-line'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
39
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#0000ff'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
40
|
+
<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>
|
|
41
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> lineDash: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 10px实线,5px间隔</span></span>
|
|
42
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> textVisible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
43
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> textFillColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#000'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
44
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> textStrokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#fff'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
45
|
+
<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>
|
|
46
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 动态获取显示的文本</span></span>
|
|
47
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> textCallBack</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">feature</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> feature.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'name'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
48
|
+
<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 "自定义样式函数""></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;"> { Style, Stroke } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'ol/style'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
49
|
+
<span class="line"></span>
|
|
50
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">lineModule.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addLine</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(lineData, {</span></span>
|
|
51
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'custom-style-line'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
52
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 根据属性动态设置颜色</span></span>
|
|
53
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">feature</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
54
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> status</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> feature.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'properties'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).status;</span></span>
|
|
55
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> status </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'active'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'green'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'gray'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
56
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
57
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</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>
|
|
58
|
+
<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;">({</span></span>
|
|
59
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: color,</span></span>
|
|
60
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span></span>
|
|
61
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
62
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
63
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
64
|
+
<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 "从接口加载""></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;">lineModule.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addLineByUrl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/api/lines/all.json'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
|
|
65
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layerName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'api-lines'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
66
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'orange'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
67
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> strokeWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span></span>
|
|
68
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div>`,36)]))}const y=i(l,[["render",n]]);export{g as __pageData,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as t,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const g=JSON.parse('{"title":"Line 线要素类","description":"","frontmatter":{},"headers":[],"relativePath":"Line.md","filePath":"Line.md"}'),l={name:"Line.md"};function n(h,s,p,k,d,r){return e(),t("div",null,s[0]||(s[0]=[a("",36)]))}const y=i(l,[["render",n]]);export{g as __pageData,y as default};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import{_ as t,c as a,ae as i,o as e}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"MapBaseLayers 底图管理类","description":"","frontmatter":{},"headers":[],"relativePath":"MapBaseLayers.md","filePath":"MapBaseLayers.md"}'),l={name:"MapBaseLayers.md"};function n(h,s,p,d,r,o){return e(),a("div",null,s[0]||(s[0]=[i(`<h1 id="mapbaselayers-底图管理类" tabindex="-1">MapBaseLayers 底图管理类 <a class="header-anchor" href="#mapbaselayers-底图管理类" aria-label="Permalink to "MapBaseLayers 底图管理类""></a></h1><p><code>MapBaseLayers</code> 用于管理地图底图(如天地图、自定义切片)和注记图层,支持图层切换、WMS 图层加载和图层状态管理。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to "构造函数""></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:#6A737D;--shiki-dark:#6A737D;">// 通常通过 MyOl 实例内部初始化,或者手动创建</span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> baseLayers</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;"> MapBaseLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map, options: MapLayersOptions);</span></span></code></pre></div><ul><li><strong>map</strong>: OpenLayers 地图实例。</li><li><strong>options</strong>: 图层配置选项。</li></ul><h2 id="接口定义" tabindex="-1">接口定义 <a class="header-anchor" href="#接口定义" aria-label="Permalink to "接口定义""></a></h2><h3 id="maplayersoptions" tabindex="-1">MapLayersOptions <a class="header-anchor" href="#maplayersoptions" aria-label="Permalink to "MapLayersOptions""></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>layers</code></td><td style="text-align:left;"><code>Layer[]</code> | <code>Object</code></td><td style="text-align:left;">底图配置。如果是数组,视为自定义底图;如果是对象,键为类型,值为图层数组。</td></tr><tr><td style="text-align:left;"><code>token</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">天地图 Token(如果使用内置天地图逻辑)</td></tr><tr><td style="text-align:left;"><code>annotation</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>zIndex</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">基础层级,默认 0</td></tr><tr><td style="text-align:left;"><code>mapClip</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>mapClipData</code></td><td style="text-align:left;"><code>MapJSONData</code></td><td style="text-align:left;">裁剪数据</td></tr></tbody></table><h3 id="annotationlayeroptions" tabindex="-1">AnnotationLayerOptions <a class="header-anchor" href="#annotationlayeroptions" aria-label="Permalink to "AnnotationLayerOptions""></a></h3><p>注记图层配置。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">注记类型:<code>cva_c</code> (矢量注记), <code>cia_c</code> (影像注记), <code>cta_c</code> (地形注记)</td></tr><tr><td style="text-align:left;"><code>token</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">天地图 Token</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></tbody></table><h3 id="geoserverlayeroptions" tabindex="-1">GeoServerLayerOptions <a class="header-anchor" href="#geoserverlayeroptions" aria-label="Permalink to "GeoServerLayerOptions""></a></h3><p>GeoServer WMS 图层配置。</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>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>version</code></td><td style="text-align:left;"><code>'1.1.1' | '1.3.0'</code></td><td style="text-align:left;">WMS 版本</td></tr><tr><td style="text-align:left;"><code>serverType</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">服务器类型,如 <code>'geoserver'</code></td></tr><tr><td style="text-align:left;"><code>crossOrigin</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">跨域设置,默认 <code>'anonymous'</code></td></tr><tr><td style="text-align:left;"><code>params</code></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">额外的 WMS 参数</td></tr></tbody></table><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to "方法""></a></h2><h3 id="底图操作" tabindex="-1">底图操作 <a class="header-anchor" href="#底图操作" aria-label="Permalink to "底图操作""></a></h3><h4 id="switchbaselayer" tabindex="-1">switchBaseLayer <a class="header-anchor" href="#switchbaselayer" aria-label="Permalink to "switchBaseLayer""></a></h4><p>切换底图类型(如 <code>vec_c</code>, <code>img_c</code>, <code>ter_c</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;">switchBaseLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(type: string): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h4 id="getcurrentbaselayertype" tabindex="-1">getCurrentBaseLayerType <a class="header-anchor" href="#getcurrentbaselayertype" aria-label="Permalink to "getCurrentBaseLayerType""></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;">getCurrentBaseLayerType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span></span></code></pre></div><h4 id="removelayersbytype" tabindex="-1">removeLayersByType <a class="header-anchor" href="#removelayersbytype" aria-label="Permalink to "removeLayersByType""></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;">removeLayersByType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(type: string): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h4 id="clearalllayers" tabindex="-1">clearAllLayers <a class="header-anchor" href="#clearalllayers" aria-label="Permalink to "clearAllLayers""></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;">clearAllLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h3 id="注记操作" tabindex="-1">注记操作 <a class="header-anchor" href="#注记操作" aria-label="Permalink to "注记操作""></a></h3><h4 id="addannotationlayer" tabindex="-1">addAnnotationLayer <a class="header-anchor" href="#addannotationlayer" aria-label="Permalink to "addAnnotationLayer""></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;">addAnnotationLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options: Omit</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">AnnotationLayerOptions, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'token'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): TileLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">XYZ</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></div><h4 id="switchannotationlayer" tabindex="-1">switchAnnotationLayer <a class="header-anchor" href="#switchannotationlayer" aria-label="Permalink to "switchAnnotationLayer""></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;">switchAnnotationLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(annotationType: AnnotationType): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h4 id="setannotationvisible" tabindex="-1">setAnnotationVisible <a class="header-anchor" href="#setannotationvisible" aria-label="Permalink to "setAnnotationVisible""></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;">setAnnotationVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(visible: boolean): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h4 id="isannotationvisible" tabindex="-1">isAnnotationVisible <a class="header-anchor" href="#isannotationvisible" aria-label="Permalink to "isAnnotationVisible""></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;">isAnnotationVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): boolean</span></span></code></pre></div><h3 id="高级图层" tabindex="-1">高级图层 <a class="header-anchor" href="#高级图层" aria-label="Permalink to "高级图层""></a></h3><h4 id="addgeoserverlayer" tabindex="-1">addGeoServerLayer <a class="header-anchor" href="#addgeoserverlayer" aria-label="Permalink to "addGeoServerLayer""></a></h4><p>添加 GeoServer WMS 图层。</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;">addGeoServerLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(url: string, layerName: string, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> GeoServerLayerOptions): TileLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">TileWMS</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></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>url</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">WMS 服务地址</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;">WMS 图层名称</td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>GeoServerLayerOptions</code></td><td style="text-align:left;">配置项</td></tr></tbody></table><h4 id="getlayerstats" tabindex="-1">getLayerStats <a class="header-anchor" href="#getlayerstats" aria-label="Permalink to "getLayerStats""></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;">getLayerStats</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): { totalTypes: number; totalLayers: number; layersByType: Record</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">string, number> }</span></span></code></pre></div><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to "使用示例""></a></h2><h3 id="切换天地图底图" tabindex="-1">切换天地图底图 <a class="header-anchor" href="#切换天地图底图" aria-label="Permalink to "切换天地图底图""></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;"> baseLayers</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;">getMapBaseLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
3
|
+
<span class="line"></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 切换到影像底图 (img_c)</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchBaseLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'img_c'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
6
|
+
<span class="line"></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 切换回矢量底图 (vec_c)</span></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchBaseLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'vec_c'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="管理注记图层" tabindex="-1">管理注记图层 <a class="header-anchor" href="#管理注记图层" aria-label="Permalink to "管理注记图层""></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>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setAnnotationVisible</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>
|
|
10
|
+
<span class="line"></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 切换为影像注记 (cia_c)</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchAnnotationLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'cia_c'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
13
|
+
<span class="line"></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 显示注记</span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setAnnotationVisible</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></code></pre></div><h3 id="加载-geoserver-wms-图层" tabindex="-1">加载 GeoServer WMS 图层 <a class="header-anchor" href="#加载-geoserver-wms-图层" aria-label="Permalink to "加载 GeoServer WMS 图层""></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;">// 添加一个 WMS 图层</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> wmsLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addGeoServerLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'http://localhost:8080/geoserver/wms'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'myworkspace:mylayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> zIndex: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> params: {</span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'CQL_FILTER'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"status = 'active'"</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 可选:传递自定义参数</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
26
|
+
<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 "图层统计""></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;"> stats</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getLayerStats</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
27
|
+
<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;">\`总图层数: \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">stats</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">totalLayers</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
28
|
+
<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;">'各类型图层数:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, stats.layersByType);</span></span></code></pre></div>`,59)]))}const y=t(l,[["render",n]]);export{c as __pageData,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as t,c as a,ae as i,o as e}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"MapBaseLayers 底图管理类","description":"","frontmatter":{},"headers":[],"relativePath":"MapBaseLayers.md","filePath":"MapBaseLayers.md"}'),l={name:"MapBaseLayers.md"};function n(h,s,p,d,r,o){return e(),a("div",null,s[0]||(s[0]=[i("",59)]))}const y=t(l,[["render",n]]);export{c as __pageData,y as default};
|