my-openlayer 2.4.12 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (171) hide show
  1. package/CHANGELOG.md +251 -251
  2. package/LICENSE +21 -21
  3. package/MyOl.d.ts +9 -9
  4. package/MyOl.js +17 -14
  5. package/README.md +174 -148
  6. package/core/line/Line.d.ts +40 -0
  7. package/core/line/Line.js +144 -0
  8. package/core/line/LineFeatureFactory.d.ts +17 -0
  9. package/core/line/LineFeatureFactory.js +75 -0
  10. package/core/line/LineFlowAnimator.d.ts +53 -0
  11. package/core/line/LineFlowAnimator.js +297 -0
  12. package/core/line/LineStyleFactory.d.ts +43 -0
  13. package/core/line/LineStyleFactory.js +135 -0
  14. package/core/{RiverLayerManager.d.ts → line/RiverLayerManager.d.ts} +2 -2
  15. package/core/{RiverLayerManager.js → line/RiverLayerManager.js} +3 -5
  16. package/core/line/index.d.ts +6 -0
  17. package/core/line/index.js +5 -0
  18. package/core/{ConfigManager.d.ts → map/ConfigManager.d.ts} +25 -1
  19. package/core/{ConfigManager.js → map/ConfigManager.js} +22 -1
  20. package/core/{EventManager.d.ts → map/EventManager.d.ts} +1 -1
  21. package/core/{EventManager.js → map/EventManager.js} +2 -2
  22. package/core/{MapBaseLayers.d.ts → map/MapBaseLayers.d.ts} +1 -1
  23. package/core/{MapBaseLayers.js → map/MapBaseLayers.js} +3 -3
  24. package/core/{MapTools.d.ts → map/MapTools.d.ts} +5 -2
  25. package/core/{MapTools.js → map/MapTools.js} +11 -5
  26. package/core/{MeasureHandler.d.ts → map/MeasureHandler.d.ts} +1 -1
  27. package/core/{MeasureHandler.js → map/MeasureHandler.js} +41 -41
  28. package/core/map/index.d.ts +5 -0
  29. package/core/map/index.js +5 -0
  30. package/core/{Point.d.ts → point/Point.d.ts} +6 -14
  31. package/core/point/Point.js +272 -0
  32. package/core/point/PointClusterLayer.d.ts +10 -0
  33. package/core/point/PointClusterLayer.js +52 -0
  34. package/core/point/PointOverlay.d.ts +13 -0
  35. package/core/point/PointOverlay.js +57 -0
  36. package/core/point/PointPulseLayer.d.ts +13 -0
  37. package/core/point/PointPulseLayer.js +207 -0
  38. package/core/point/index.d.ts +4 -0
  39. package/core/point/index.js +4 -0
  40. package/core/{Polygon.d.ts → polygon/Polygon.d.ts} +4 -50
  41. package/core/polygon/Polygon.js +248 -0
  42. package/core/polygon/PolygonHeatmapLayer.d.ts +11 -0
  43. package/core/polygon/PolygonHeatmapLayer.js +40 -0
  44. package/core/polygon/PolygonImageLayer.d.ts +9 -0
  45. package/core/polygon/PolygonImageLayer.js +61 -0
  46. package/core/polygon/PolygonMaskLayer.d.ts +20 -0
  47. package/core/polygon/PolygonMaskLayer.js +107 -0
  48. package/core/polygon/PolygonStyleFactory.d.ts +12 -0
  49. package/core/polygon/PolygonStyleFactory.js +100 -0
  50. package/core/polygon/index.d.ts +5 -0
  51. package/core/polygon/index.js +5 -0
  52. package/core/{SelectHandler.d.ts → select/SelectHandler.d.ts} +2 -3
  53. package/core/{SelectHandler.js → select/SelectHandler.js} +4 -4
  54. package/core/select/index.d.ts +1 -0
  55. package/core/select/index.js +1 -0
  56. package/core/{VueTemplatePoint.d.ts → vue-template-point/VueTemplatePoint.d.ts} +1 -1
  57. package/core/{VueTemplatePoint.js → vue-template-point/VueTemplatePoint.js} +4 -4
  58. package/core/vue-template-point/index.d.ts +1 -0
  59. package/core/vue-template-point/index.js +1 -0
  60. package/docs/.vitepress/config.mts +57 -57
  61. package/docs/ConfigManager.md +71 -71
  62. package/docs/ErrorHandler.md +106 -106
  63. package/docs/EventManager.md +142 -142
  64. package/docs/Line.md +215 -187
  65. package/docs/MapBaseLayers.md +198 -198
  66. package/docs/MapTools.md +172 -172
  67. package/docs/MeasureHandler.md +87 -87
  68. package/docs/MyOl.md +247 -247
  69. package/docs/Point.md +136 -136
  70. package/docs/Polygon.md +241 -241
  71. package/docs/RiverLayerManager.md +187 -187
  72. package/docs/SelectHandler.md +147 -147
  73. package/docs/ValidationUtils.md +83 -83
  74. package/docs/VueTemplatePoint.md +214 -214
  75. package/docs/index.md +73 -73
  76. package/index.d.ts +10 -15
  77. package/index.js +7 -13
  78. package/package.json +11 -1
  79. package/types/base.d.ts +47 -0
  80. package/types/base.js +1 -0
  81. package/types/common.d.ts +59 -0
  82. package/types/common.js +1 -0
  83. package/types/index.d.ts +9 -0
  84. package/types/index.js +1 -0
  85. package/types/line.d.ts +41 -0
  86. package/types/line.js +1 -0
  87. package/types/map.d.ts +77 -0
  88. package/types/map.js +1 -0
  89. package/types/point.d.ts +54 -0
  90. package/types/point.js +1 -0
  91. package/types/polygon.d.ts +8 -0
  92. package/types/polygon.js +1 -0
  93. package/types/select.d.ts +25 -0
  94. package/types/select.js +1 -0
  95. package/types/vue-template-point.d.ts +54 -0
  96. package/{types.js → types/vue-template-point.js} +0 -3
  97. package/utils/ProjectionUtils.d.ts +28 -0
  98. package/utils/ProjectionUtils.js +34 -0
  99. package/utils/ValidationUtils.d.ts +33 -86
  100. package/utils/ValidationUtils.js +60 -165
  101. package/core/Line.d.ts +0 -49
  102. package/core/Line.js +0 -114
  103. package/core/Point.js +0 -560
  104. package/core/Polygon.js +0 -646
  105. package/docs/.vitepress/dist/404.html +0 -22
  106. package/docs/.vitepress/dist/ConfigManager.html +0 -46
  107. package/docs/.vitepress/dist/ErrorHandler.html +0 -52
  108. package/docs/.vitepress/dist/EventManager.html +0 -58
  109. package/docs/.vitepress/dist/Line.html +0 -92
  110. package/docs/.vitepress/dist/MapBaseLayers.html +0 -52
  111. package/docs/.vitepress/dist/MapTools.html +0 -81
  112. package/docs/.vitepress/dist/MeasureHandler.html +0 -32
  113. package/docs/.vitepress/dist/MyOl.html +0 -62
  114. package/docs/.vitepress/dist/Point.html +0 -81
  115. package/docs/.vitepress/dist/Polygon.html +0 -102
  116. package/docs/.vitepress/dist/RiverLayerManager.html +0 -66
  117. package/docs/.vitepress/dist/SelectHandler.html +0 -46
  118. package/docs/.vitepress/dist/ValidationUtils.html +0 -47
  119. package/docs/.vitepress/dist/VueTemplatePoint.html +0 -112
  120. package/docs/.vitepress/dist/assets/ConfigManager.md.BOMdGTaa.js +0 -22
  121. package/docs/.vitepress/dist/assets/ConfigManager.md.BOMdGTaa.lean.js +0 -1
  122. package/docs/.vitepress/dist/assets/ErrorHandler.md.yUiuJ9w9.js +0 -28
  123. package/docs/.vitepress/dist/assets/ErrorHandler.md.yUiuJ9w9.lean.js +0 -1
  124. package/docs/.vitepress/dist/assets/EventManager.md.BhCUVy1f.js +0 -34
  125. package/docs/.vitepress/dist/assets/EventManager.md.BhCUVy1f.lean.js +0 -1
  126. package/docs/.vitepress/dist/assets/Line.md.BAQOzmSt.js +0 -68
  127. package/docs/.vitepress/dist/assets/Line.md.BAQOzmSt.lean.js +0 -1
  128. package/docs/.vitepress/dist/assets/MapBaseLayers.md.Bw0L_m0b.js +0 -28
  129. package/docs/.vitepress/dist/assets/MapBaseLayers.md.Bw0L_m0b.lean.js +0 -1
  130. package/docs/.vitepress/dist/assets/MapTools.md.DaYgiDPe.js +0 -57
  131. package/docs/.vitepress/dist/assets/MapTools.md.DaYgiDPe.lean.js +0 -1
  132. package/docs/.vitepress/dist/assets/MeasureHandler.md.7Sf4ymRv.js +0 -8
  133. package/docs/.vitepress/dist/assets/MeasureHandler.md.7Sf4ymRv.lean.js +0 -1
  134. package/docs/.vitepress/dist/assets/MyOl.md.D-14Gzjy.js +0 -38
  135. package/docs/.vitepress/dist/assets/MyOl.md.D-14Gzjy.lean.js +0 -1
  136. package/docs/.vitepress/dist/assets/Point.md.Bi9juuuv.js +0 -57
  137. package/docs/.vitepress/dist/assets/Point.md.Bi9juuuv.lean.js +0 -1
  138. package/docs/.vitepress/dist/assets/Polygon.md.-JIqEvzD.js +0 -78
  139. package/docs/.vitepress/dist/assets/Polygon.md.-JIqEvzD.lean.js +0 -1
  140. package/docs/.vitepress/dist/assets/RiverLayerManager.md.CfUu2RxH.js +0 -42
  141. package/docs/.vitepress/dist/assets/RiverLayerManager.md.CfUu2RxH.lean.js +0 -1
  142. package/docs/.vitepress/dist/assets/SelectHandler.md.COR4ez_p.js +0 -22
  143. package/docs/.vitepress/dist/assets/SelectHandler.md.COR4ez_p.lean.js +0 -1
  144. package/docs/.vitepress/dist/assets/ValidationUtils.md.ReTVWa73.js +0 -23
  145. package/docs/.vitepress/dist/assets/ValidationUtils.md.ReTVWa73.lean.js +0 -1
  146. package/docs/.vitepress/dist/assets/VueTemplatePoint.md.CtxSb5Pm.js +0 -88
  147. package/docs/.vitepress/dist/assets/VueTemplatePoint.md.CtxSb5Pm.lean.js +0 -1
  148. package/docs/.vitepress/dist/assets/app.YvjVuxaB.js +0 -1
  149. package/docs/.vitepress/dist/assets/chunks/framework.C_W0ODpn.js +0 -18
  150. package/docs/.vitepress/dist/assets/chunks/theme.Bf87fILP.js +0 -1
  151. package/docs/.vitepress/dist/assets/index.md.BJz6tHSr.js +0 -26
  152. package/docs/.vitepress/dist/assets/index.md.BJz6tHSr.lean.js +0 -1
  153. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  154. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  155. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  156. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  157. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  158. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  159. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  160. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  161. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  162. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  163. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  164. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  165. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  166. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  167. package/docs/.vitepress/dist/assets/style.C2pAQzDq.css +0 -1
  168. package/docs/.vitepress/dist/hashmap.json +0 -1
  169. package/docs/.vitepress/dist/index.html +0 -50
  170. package/docs/.vitepress/dist/vp-icons.css +0 -1
  171. package/types.d.ts +0 -431
@@ -1,68 +0,0 @@
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 &quot;Line 线要素类&quot;">​</a></h1><p><code>Line</code> 类用于在地图上绘制线要素,支持 GeoJSON 数据加载、自定义样式和图层管理。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 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 &quot;接口定义&quot;">​</a></h2><h3 id="lineoptions" tabindex="-1">LineOptions <a class="header-anchor" href="#lineoptions" aria-label="Permalink to &quot;LineOptions&quot;">​</a></h3><p>配置线图层的样式、属性和行为。继承自 <code>BaseOptions</code>, <code>StyleOptions</code>, <code>TextOptions</code>。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>基础配置</strong></td><td style="text-align:left;"></td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;"><code>layerName</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">图层名称,用于唯一标识和管理图层</td></tr><tr><td style="text-align:left;"><code>zIndex</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">图层层级,默认自动处理</td></tr><tr><td style="text-align:left;"><code>visible</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">图层是否可见,默认 <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>&#39;#ff0000&#39;</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) =&gt; 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>&#39;12px sans-serif&#39;</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 &quot;MapJSONData (GeoJSON)&quot;">​</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;">// 通常为 &quot;FeatureCollection&quot;</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;">// &quot;Feature&quot;</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;"> &quot;LineString&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;MultiLineString&quot;</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 &quot;方法&quot;">​</a></h2><h3 id="addline" tabindex="-1">addLine <a class="header-anchor" href="#addline" aria-label="Permalink to &quot;addLine&quot;">​</a></h3><p>添加线要素图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">参数</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>data</code></td><td style="text-align:left;"><code>MapJSONData</code></td><td style="text-align:left;">GeoJSON 格式的线数据</td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>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 &quot;addLineByUrl&quot;">​</a></h3><p>从 URL 加载并添加线要素图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">VectorSource</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">参数</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>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 &quot;removeLineLayer&quot;">​</a></h3><p>根据图层名称移除线图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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 &quot;使用示例&quot;">​</a></h2><h3 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 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;">&#39;FeatureCollection&#39;</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;">&#39;Feature&#39;</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;">&#39;LineString&#39;</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;">&#39;线路1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;active&#39;</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;">&#39;base-line&#39;</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;">&#39;#ff0000&#39;</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 &quot;虚线与标注&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">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;">&#39;dash-line&#39;</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;">&#39;#0000ff&#39;</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;">&#39;#000&#39;</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;">&#39;#fff&#39;</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;">=&gt;</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;">&#39;name&#39;</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 &quot;自定义样式函数&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Style, Stroke } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ol/style&#39;</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;">&#39;custom-style-line&#39;</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;">=&gt;</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;">&#39;properties&#39;</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;"> &#39;active&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;green&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;gray&#39;</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 &quot;从接口加载&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">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;">&#39;/api/lines/all.json&#39;</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;">&#39;api-lines&#39;</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;">&#39;orange&#39;</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};
@@ -1 +0,0 @@
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};
@@ -1,28 +0,0 @@
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 &quot;MapBaseLayers 底图管理类&quot;">​</a></h1><p><code>MapBaseLayers</code> 用于管理地图底图(如天地图、自定义切片)和注记图层,支持图层切换、WMS 图层加载和图层状态管理。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#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 &quot;接口定义&quot;">​</a></h2><h3 id="maplayersoptions" tabindex="-1">MapLayersOptions <a class="header-anchor" href="#maplayersoptions" aria-label="Permalink to &quot;MapLayersOptions&quot;">​</a></h3><p>初始化时的图层配置。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>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 &quot;AnnotationLayerOptions&quot;">​</a></h3><p>注记图层配置。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>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 &quot;GeoServerLayerOptions&quot;">​</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>&#39;1.1.1&#39; | &#39;1.3.0&#39;</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>&#39;geoserver&#39;</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>&#39;anonymous&#39;</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 &quot;方法&quot;">​</a></h2><h3 id="底图操作" tabindex="-1">底图操作 <a class="header-anchor" href="#底图操作" aria-label="Permalink to &quot;底图操作&quot;">​</a></h3><h4 id="switchbaselayer" tabindex="-1">switchBaseLayer <a class="header-anchor" href="#switchbaselayer" aria-label="Permalink to &quot;switchBaseLayer&quot;">​</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 &quot;getCurrentBaseLayerType&quot;">​</a></h4><p>获取当前底图类型。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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 &quot;removeLayersByType&quot;">​</a></h4><p>移除指定类型的图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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 &quot;clearAllLayers&quot;">​</a></h4><p>清除所有底图和注记图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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 &quot;注记操作&quot;">​</a></h3><h4 id="addannotationlayer" tabindex="-1">addAnnotationLayer <a class="header-anchor" href="#addannotationlayer" aria-label="Permalink to &quot;addAnnotationLayer&quot;">​</a></h4><p>添加注记图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addAnnotationLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options: Omit</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">AnnotationLayerOptions, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;token&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): TileLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">XYZ</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><h4 id="switchannotationlayer" tabindex="-1">switchAnnotationLayer <a class="header-anchor" href="#switchannotationlayer" aria-label="Permalink to &quot;switchAnnotationLayer&quot;">​</a></h4><p>切换注记类型。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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 &quot;setAnnotationVisible&quot;">​</a></h4><p>设置注记图层可见性。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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 &quot;isAnnotationVisible&quot;">​</a></h4><p>检查注记图层是否可见。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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 &quot;高级图层&quot;">​</a></h3><h4 id="addgeoserverlayer" tabindex="-1">addGeoServerLayer <a class="header-anchor" href="#addgeoserverlayer" aria-label="Permalink to &quot;addGeoServerLayer&quot;">​</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;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">TileWMS</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">参数</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>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 &quot;getLayerStats&quot;">​</a></h4><p>获取图层数量统计。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">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;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">string, number&gt; }</span></span></code></pre></div><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;">​</a></h2><h3 id="切换天地图底图" tabindex="-1">切换天地图底图 <a class="header-anchor" href="#切换天地图底图" aria-label="Permalink to &quot;切换天地图底图&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 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;">&#39;img_c&#39;</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;">&#39;vec_c&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="管理注记图层" tabindex="-1">管理注记图层 <a class="header-anchor" href="#管理注记图层" aria-label="Permalink to &quot;管理注记图层&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 隐藏注记</span></span>
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;">&#39;cia_c&#39;</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 &quot;加载 GeoServer WMS 图层&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 添加一个 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;"> &#39;http://localhost:8080/geoserver/wms&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
18
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;myworkspace:mylayer&#39;</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;"> &#39;CQL_FILTER&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;status = &#39;active&#39;&quot;</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 &quot;图层统计&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 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;">&#39;各类型图层数:&#39;</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};
@@ -1 +0,0 @@
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};
@@ -1,57 +0,0 @@
1
- import{_ as i,c as a,ae as t,o as e}from"./chunks/framework.C_W0ODpn.js";const o=JSON.parse('{"title":"MapTools 地图工具类","description":"","frontmatter":{},"headers":[],"relativePath":"MapTools.md","filePath":"MapTools.md"}'),n={name:"MapTools.md"};function l(h,s,p,k,d,r){return e(),a("div",null,s[0]||(s[0]=[t(`<h1 id="maptools-地图工具类" tabindex="-1">MapTools 地图工具类 <a class="header-anchor" href="#maptools-地图工具类" aria-label="Permalink to &quot;MapTools 地图工具类&quot;">​</a></h1><p><code>MapTools</code> 提供通用的地图操作工具,包括图层查找、移除、显隐控制、地图裁剪和视图自适应等功能。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tools</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;"> MapTools</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map);</span></span></code></pre></div><ul><li><strong>map</strong>: OpenLayers 地图实例。</li></ul><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to &quot;方法&quot;">​</a></h2><h3 id="图层管理" tabindex="-1">图层管理 <a class="header-anchor" href="#图层管理" aria-label="Permalink to &quot;图层管理&quot;">​</a></h3><h4 id="getlayerbylayername" tabindex="-1">getLayerByLayerName <a class="header-anchor" href="#getlayerbylayername" aria-label="Permalink to &quot;getLayerByLayerName&quot;">​</a></h4><p>根据名称获取图层对象(支持模糊匹配)。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getLayerByLayerName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(layerName: string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string[]): Layer[]</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> | <code>string[]</code></td><td style="text-align:left;">图层名称或名称数组</td></tr></tbody></table><h4 id="removelayer" tabindex="-1">removeLayer <a class="header-anchor" href="#removelayer" aria-label="Permalink to &quot;removeLayer&quot;">​</a></h4><p>移除指定名称的图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">removeLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(layerName: string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string[]): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><h4 id="setlayervisible" tabindex="-1">setLayerVisible <a class="header-anchor" href="#setlayervisible" aria-label="Permalink to &quot;setLayerVisible&quot;">​</a></h4><p>设置图层可见性。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setLayerVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(layerName: string, visible: boolean): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><h3 id="视图操作" tabindex="-1">视图操作 <a class="header-anchor" href="#视图操作" aria-label="Permalink to &quot;视图操作&quot;">​</a></h3><h4 id="locationaction" tabindex="-1">locationAction <a class="header-anchor" href="#locationaction" aria-label="Permalink to &quot;locationAction&quot;">​</a></h4><p>视图定位动画。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">locationAction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(lgtd: number, lttd: number, zoom </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, duration </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): boolean</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>lgtd</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>lttd</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>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>duration</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">动画持续时间(毫秒)</td></tr></tbody></table><h4 id="fittolayers" tabindex="-1">fitToLayers <a class="header-anchor" href="#fittolayers" aria-label="Permalink to &quot;fitToLayers&quot;">​</a></h4><p>缩放地图以适应指定图层的范围。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fitToLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
2
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layerNameOrLayers: string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> string[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Layer[], </span></span>
3
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fitOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
4
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> padding?: [number, number, number, number];</span></span>
5
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxZoom</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> number;</span></span>
6
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> duration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> number;</span></span>
7
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
8
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): boolean</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>layerNameOrLayers</code></td><td style="text-align:left;"><code>string</code> | <code>Layer[]</code></td><td style="text-align:left;">图层名称或图层对象数组</td></tr><tr><td style="text-align:left;"><code>fitOptions</code></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">缩放配置:padding (边距), maxZoom, duration</td></tr></tbody></table><h4 id="fitbydata" tabindex="-1">fitByData <a class="header-anchor" href="#fitbydata" aria-label="Permalink to &quot;fitByData&quot;">​</a></h4><p>缩放地图以适应 GeoJSON 数据的范围。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fitByData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
9
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> jsonData: MapJSONData, </span></span>
10
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fitOptions</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:#24292E;--shiki-dark:#E1E4E8;"> padding?: [number, number, number, number];</span></span>
12
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxZoom</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> number;</span></span>
13
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> duration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> number;</span></span>
14
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
15
- <span class="line"><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 &quot;高级功能&quot;">​</a></h3><h4 id="setmapclip" tabindex="-1">setMapClip <a class="header-anchor" href="#setmapclip" aria-label="Permalink to &quot;setMapClip&quot;">​</a></h4><p>设置地图裁剪区域(基于 Canvas 的裁剪)。</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:#24292E;--shiki-dark:#E1E4E8;">static </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setMapClip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(baseLayer: Layer, data: MapJSONData): Layer</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>baseLayer</code></td><td style="text-align:left;"><code>Layer</code></td><td style="text-align:left;">需要被裁剪的图层</td></tr><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></tbody></table><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;">​</a></h2><h3 id="图层查找与控制" tabindex="-1">图层查找与控制 <a class="header-anchor" href="#图层查找与控制" aria-label="Permalink to &quot;图层查找与控制&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tools</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;">getTools</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
16
- <span class="line"></span>
17
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. 获取图层</span></span>
18
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> layers</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tools.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getLayerByLayerName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;my-layer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
19
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (layers.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
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;">&#39;找到图层:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, layers[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><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>
23
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2. 移除图层</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">tools.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">removeLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;temp-layer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
25
- <span class="line"></span>
26
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 3. 设置可见性</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">tools.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setLayerVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;background-layer&#39;</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></code></pre></div><h3 id="视图定位与缩放" tabindex="-1">视图定位与缩放 <a class="header-anchor" href="#视图定位与缩放" aria-label="Permalink to &quot;视图定位与缩放&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定位到指定坐标</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">tools.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">locationAction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120.123</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30.456</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
29
- <span class="line"></span>
30
- <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;">tools.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fitToLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;target-layer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> padding: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 上右下左边距</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> duration: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
35
- <span class="line"></span>
36
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 缩放以包含 GeoJSON 数据范围</span></span>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">tools.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fitByData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(geoJsonData, {</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxZoom: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="地图裁剪" tabindex="-1">地图裁剪 <a class="header-anchor" href="#地图裁剪" aria-label="Permalink to &quot;地图裁剪&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 创建底图图层</span></span>
40
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> baseLayer</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;"> TileLayer</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>
41
- <span class="line"></span>
42
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义裁剪区域(例如一个多边形)</span></span>
43
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> clipPolygon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FeatureCollection&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
45
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> features: [{</span></span>
46
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Feature&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
47
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> geometry: {</span></span>
48
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Polygon&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
49
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> coordinates: [[</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]]</span></span>
50
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
51
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span></span>
52
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
53
- <span class="line"></span>
54
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 应用裁剪</span></span>
55
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 注意:这会修改 baseLayer 的渲染行为,使其只在 clipPolygon 范围内显示</span></span>
56
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">MapTools.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setMapClip</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(baseLayer, clipPolygon);</span></span>
57
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">map.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(baseLayer);</span></span></code></pre></div>`,41)]))}const y=i(n,[["render",l]]);export{o as __pageData,y as default};
@@ -1 +0,0 @@
1
- import{_ as i,c as a,ae as t,o as e}from"./chunks/framework.C_W0ODpn.js";const o=JSON.parse('{"title":"MapTools 地图工具类","description":"","frontmatter":{},"headers":[],"relativePath":"MapTools.md","filePath":"MapTools.md"}'),n={name:"MapTools.md"};function l(h,s,p,k,d,r){return e(),a("div",null,s[0]||(s[0]=[t("",41)]))}const y=i(n,[["render",l]]);export{o as __pageData,y as default};
@@ -1,8 +0,0 @@
1
- import{_ as a,c as i,ae as e,o as t}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"MeasureHandler 类","description":"","frontmatter":{},"headers":[],"relativePath":"MeasureHandler.md","filePath":"MeasureHandler.md"}'),n={name:"MeasureHandler.md"};function l(p,s,h,r,d,o){return t(),i("div",null,s[0]||(s[0]=[e(`<h1 id="measurehandler-类" tabindex="-1">MeasureHandler 类 <a class="header-anchor" href="#measurehandler-类" aria-label="Permalink to &quot;MeasureHandler 类&quot;">​</a></h1><p><code>MeasureHandler</code> 类提供地图上的距离和面积测量功能。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map)</span></span></code></pre></div><ul><li><strong>map</strong>: OpenLayers 地图实例。</li></ul><h2 id="类型定义" tabindex="-1">类型定义 <a class="header-anchor" href="#类型定义" aria-label="Permalink to &quot;类型定义&quot;">​</a></h2><h3 id="measurehandlertype" tabindex="-1">MeasureHandlerType <a class="header-anchor" href="#measurehandlertype" aria-label="Permalink to &quot;MeasureHandlerType&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MeasureHandlerType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;LineString&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;Polygon&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to &quot;方法&quot;">​</a></h2><h3 id="start" tabindex="-1">start <a class="header-anchor" href="#start" aria-label="Permalink to &quot;start&quot;">​</a></h3><p>开始测量。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(type: MeasureHandlerType): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><ul><li><strong>type</strong>: 测量类型,<code>&#39;LineString&#39;</code> (测距) 或 <code>&#39;Polygon&#39;</code> (测面)。</li><li><strong>说明</strong>: 调用此方法后,鼠标在地图上点击开始绘制,双击结束绘制。绘制过程中会显示测量结果的 tooltip。</li></ul><h3 id="end" tabindex="-1">end <a class="header-anchor" href="#end" aria-label="Permalink to &quot;end&quot;">​</a></h3><p>结束测量绘制交互,但保留测量结果。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><h3 id="clean" tabindex="-1">clean <a class="header-anchor" href="#clean" aria-label="Permalink to &quot;clean&quot;">​</a></h3><p>清除所有测量结果和交互。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><ul><li><strong>说明</strong>: 移除地图上的所有测量绘制、结果标签和 tooltip。</li></ul><h3 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to &quot;destroy&quot;">​</a></h3><p>销毁实例。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destory</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><ul><li><strong>说明</strong>: 彻底清理资源,同 <code>clean</code>。</li></ul><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;">​</a></h2><h3 id="测距" tabindex="-1">测距 <a class="header-anchor" href="#测距" aria-label="Permalink to &quot;测距&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MeasureHandler } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayers&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
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;"> measureTool</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;"> MeasureHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map);</span></span>
4
- <span class="line"></span>
5
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 开始测距</span></span>
6
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">measureTool.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;LineString&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="测面" tabindex="-1">测面 <a class="header-anchor" href="#测面" aria-label="Permalink to &quot;测面&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 开始测面</span></span>
7
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">measureTool.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Polygon&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="清除测量" tabindex="-1">清除测量 <a class="header-anchor" href="#清除测量" aria-label="Permalink to &quot;清除测量&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 清除所有测量结果</span></span>
8
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">measureTool.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div>`,31)]))}const g=a(n,[["render",l]]);export{c as __pageData,g as default};
@@ -1 +0,0 @@
1
- import{_ as a,c as i,ae as e,o as t}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"MeasureHandler 类","description":"","frontmatter":{},"headers":[],"relativePath":"MeasureHandler.md","filePath":"MeasureHandler.md"}'),n={name:"MeasureHandler.md"};function l(p,s,h,r,d,o){return t(),i("div",null,s[0]||(s[0]=[e("",31)]))}const g=a(n,[["render",l]]);export{c as __pageData,g as default};
@@ -1,38 +0,0 @@
1
- import{_ as s,c as i,ae as a,o as e}from"./chunks/framework.C_W0ODpn.js";const c=JSON.parse('{"title":"MyOl 类","description":"","frontmatter":{},"headers":[],"relativePath":"MyOl.md","filePath":"MyOl.md"}'),l={name:"MyOl.md"};function n(h,t,p,d,o,r){return e(),i("div",null,t[0]||(t[0]=[a(`<h1 id="myol-类" tabindex="-1">MyOl 类 <a class="header-anchor" href="#myol-类" aria-label="Permalink to &quot;MyOl 类&quot;">​</a></h1><p><code>MyOl</code> 是地图的核心类,作为整个库的入口点,负责地图的初始化、配置管理、模块加载以及基础的地图操作(如定位、重置)。它采用了模块化设计,按需加载各个功能模块(如点、线、面要素管理)。</p><h2 id="导入" tabindex="-1">导入 <a class="header-anchor" href="#导入" aria-label="Permalink to &quot;导入&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MyOl } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
2
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 或者</span></span>
3
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MyOl </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to &quot;构造函数&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id: string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Partial</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">MapInitType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>初始化一个新的地图实例。</p><h3 id="参数说明" tabindex="-1">参数说明 <a class="header-anchor" href="#参数说明" aria-label="Permalink to &quot;参数说明&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">必填</th><th style="text-align:left;">默认值</th><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> | <code>HTMLElement</code></td><td style="text-align:left;">是</td><td style="text-align:left;">-</td><td style="text-align:left;">地图容器的 DOM ID 字符串或 HTMLElement 对象。</td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>Partial&lt;MapInitType&gt;</code></td><td style="text-align:left;">否</td><td style="text-align:left;"><code>{}</code></td><td style="text-align:left;">地图初始化配置选项,详见下表。</td></tr></tbody></table><h3 id="mapinittype-配置选项" tabindex="-1">MapInitType 配置选项 <a class="header-anchor" href="#mapinittype-配置选项" aria-label="Permalink to &quot;MapInitType 配置选项&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">属性名</th><th style="text-align:left;">类型</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>center</code></td><td style="text-align:left;"><code>number[]</code></td><td style="text-align:left;">地图初始中心点坐标 <code>[经度, 纬度]</code>,默认为 <code>[0, 0]</code>。</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;">地图初始缩放级别,默认为 <code>2</code>。</td></tr><tr><td style="text-align:left;"><code>minZoom</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>maxZoom</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>token</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">天地图 API 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;">是否显示注记图层(如地名标注),默认为 <code>false</code>。</td></tr><tr><td style="text-align:left;"><code>layers</code></td><td style="text-align:left;"><code>LayerItem[]</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;">地图裁剪数据(GeoJSON 格式),用于仅显示特定区域。</td></tr><tr><td style="text-align:left;"><code>enableLog</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否启用内部日志输出,默认为 <code>false</code>。</td></tr><tr><td style="text-align:left;"><code>logLevel</code></td><td style="text-align:left;"><code>&#39;debug&#39; | &#39;info&#39; | &#39;warn&#39; | &#39;error&#39;</code></td><td style="text-align:left;">日志级别,默认为 <code>&#39;error&#39;</code>。</td></tr><tr><td style="text-align:left;"><code>projection</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>projection.code</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">投影代码,如 <code>&#39;EPSG:4549&#39;</code>。</td></tr><tr><td style="text-align:left;"><code>projection.def</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">proj4 定义字符串。</td></tr><tr><td style="text-align:left;"><code>projection.extent</code></td><td style="text-align:left;"><code>number[]</code></td><td style="text-align:left;">投影范围。</td></tr></tbody></table><h2 id="静态方法" tabindex="-1">静态方法 <a class="header-anchor" href="#静态方法" aria-label="Permalink to &quot;静态方法&quot;">​</a></h2><h3 id="createview" tabindex="-1">createView <a class="header-anchor" href="#createview" aria-label="Permalink to &quot;createView&quot;">​</a></h3><p>创建 OpenLayers 的 <code>View</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:#24292E;--shiki-dark:#E1E4E8;">static </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options: MapInitType): View</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>options</code></td><td style="text-align:left;"><code>MapInitType</code></td><td style="text-align:left;">地图配置选项,主要使用其中的 <code>center</code>, <code>zoom</code>, <code>projection</code> 等属性。</td></tr></tbody></table><h2 id="实例方法" tabindex="-1">实例方法 <a class="header-anchor" href="#实例方法" aria-label="Permalink to &quot;实例方法&quot;">​</a></h2><h3 id="模块获取" tabindex="-1">模块获取 <a class="header-anchor" href="#模块获取" aria-label="Permalink to &quot;模块获取&quot;">​</a></h3><p><code>MyOl</code> 提供了懒加载的模块获取方法,只有在首次调用时才会初始化对应模块。</p><h4 id="getpoint" tabindex="-1">getPoint <a class="header-anchor" href="#getpoint" aria-label="Permalink to &quot;getPoint&quot;">​</a></h4><p>获取点要素操作模块。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getPoint</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): Point</span></span></code></pre></div><p><strong>返回值</strong>: <code>Point</code> 实例,用于添加、删除、管理点要素。</p><h4 id="getline" tabindex="-1">getLine <a class="header-anchor" href="#getline" aria-label="Permalink to &quot;getLine&quot;">​</a></h4><p>获取线要素操作模块。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getLine</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): Line</span></span></code></pre></div><p><strong>返回值</strong>: <code>Line</code> 实例,用于绘制线条。</p><h4 id="getpolygon" tabindex="-1">getPolygon <a class="header-anchor" href="#getpolygon" aria-label="Permalink to &quot;getPolygon&quot;">​</a></h4><p>获取面要素操作模块。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getPolygon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): Polygon</span></span></code></pre></div><p><strong>返回值</strong>: <code>Polygon</code> 实例,用于绘制多边形。</p><h4 id="getmapbaselayers" tabindex="-1">getMapBaseLayers <a class="header-anchor" href="#getmapbaselayers" aria-label="Permalink to &quot;getMapBaseLayers&quot;">​</a></h4><p>获取底图管理模块。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getMapBaseLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): MapBaseLayers</span></span></code></pre></div><p><strong>返回值</strong>: <code>MapBaseLayers</code> 实例,用于切换底图类型(矢量、影像、地形)。</p><h4 id="gettools" tabindex="-1">getTools <a class="header-anchor" href="#gettools" aria-label="Permalink to &quot;getTools&quot;">​</a></h4><p>获取地图工具模块。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getTools</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): MapTools</span></span></code></pre></div><p><strong>返回值</strong>: <code>MapTools</code> 实例,包含地图截图、裁剪等工具。</p><h4 id="getselecthandler" tabindex="-1">getSelectHandler <a class="header-anchor" href="#getselecthandler" aria-label="Permalink to &quot;getSelectHandler&quot;">​</a></h4><p>获取要素选择处理器模块。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getSelectHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): SelectHandler</span></span></code></pre></div><p><strong>返回值</strong>: <code>SelectHandler</code> 实例,用于处理地图要素的点击、悬停选择交互。</p><h3 id="地图操作" tabindex="-1">地图操作 <a class="header-anchor" href="#地图操作" aria-label="Permalink to &quot;地图操作&quot;">​</a></h3><h4 id="locationaction" tabindex="-1">locationAction <a class="header-anchor" href="#locationaction" aria-label="Permalink to &quot;locationAction&quot;">​</a></h4><p>定位到指定坐标,支持动画过渡。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">locationAction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(longitude: number, latitude: number, zoom: number </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, duration: number </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>longitude</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">-</td><td style="text-align:left;">目标经度。</td></tr><tr><td style="text-align:left;"><code>latitude</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">-</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;"><code>20</code></td><td style="text-align:left;">目标缩放级别。</td></tr><tr><td style="text-align:left;"><code>duration</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;"><code>3000</code></td><td style="text-align:left;">动画持续时间(毫秒)。</td></tr></tbody></table><h4 id="resetposition" tabindex="-1">resetPosition <a class="header-anchor" href="#resetposition" aria-label="Permalink to &quot;resetPosition&quot;">​</a></h4><p>重置地图位置到初始化时设置的中心点。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resetPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(duration: number </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><code>duration</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;"><code>3000</code></td><td style="text-align:left;">动画持续时间(毫秒)。</td></tr></tbody></table><h3 id="管理器访问" tabindex="-1">管理器访问 <a class="header-anchor" href="#管理器访问" aria-label="Permalink to &quot;管理器访问&quot;">​</a></h3><h4 id="geteventmanager" tabindex="-1">getEventManager <a class="header-anchor" href="#geteventmanager" aria-label="Permalink to &quot;getEventManager&quot;">​</a></h4><p>获取事件管理器,用于监听地图事件。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getEventManager</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): EventManager</span></span></code></pre></div><h4 id="geterrorhandler" tabindex="-1">getErrorHandler <a class="header-anchor" href="#geterrorhandler" aria-label="Permalink to &quot;getErrorHandler&quot;">​</a></h4><p>获取错误处理器,用于自定义错误处理逻辑。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getErrorHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): ErrorHandler</span></span></code></pre></div><h4 id="getconfigmanager" tabindex="-1">getConfigManager <a class="header-anchor" href="#getconfigmanager" aria-label="Permalink to &quot;getConfigManager&quot;">​</a></h4><p>获取配置管理器。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getConfigManager</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): ConfigManager</span></span></code></pre></div><h4 id="getmapoptions" tabindex="-1">getMapOptions <a class="header-anchor" href="#getmapoptions" aria-label="Permalink to &quot;getMapOptions&quot;">​</a></h4><p>获取当前地图的只读配置副本。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getMapOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): Readonly</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">MapInitType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><h3 id="销毁" tabindex="-1">销毁 <a class="header-anchor" href="#销毁" aria-label="Permalink to &quot;销毁&quot;">​</a></h3><h4 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to &quot;destroy&quot;">​</a></h4><p>销毁地图实例,清理所有事件监听和资源。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span></span></code></pre></div><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;">​</a></h2><h3 id="完整初始化" tabindex="-1">完整初始化 <a class="header-anchor" href="#完整初始化" aria-label="Permalink to &quot;完整初始化&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MyOl } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
4
- <span class="line"></span>
5
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义配置</span></span>
6
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><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;"> center: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120.15507</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30.274085</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
9
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> zoom: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
10
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minZoom: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
11
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxZoom: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
12
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
13
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 天地图 Token</span></span>
14
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> token: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;YOUR_TIANDITU_TOKEN&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
15
- <span class="line"><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:#24292E;--shiki-dark:#E1E4E8;"> annotation: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
18
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
19
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 开启调试日志</span></span>
20
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> enableLog: </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;"> logLevel: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;debug&#39;</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
23
- <span class="line"></span>
24
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 初始化地图</span></span>
25
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> map</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyOl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;map-container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, options);</span></span>
26
- <span class="line"></span>
27
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 监听加载完成</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">map.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getEventManager</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rendercomplete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
29
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Map loaded!&#39;</span><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="使用自定义投影" tabindex="-1">使用自定义投影 <a class="header-anchor" href="#使用自定义投影" aria-label="Permalink to &quot;使用自定义投影&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MyOl } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-openlayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
31
- <span class="line"></span>
32
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> map</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyOl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;map&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> projection: {</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> code: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;EPSG:4549&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// CGCS2000 3度带</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> def: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> extent: [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 可选</span></span>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div>`,74)]))}const g=s(l,[["render",n]]);export{c as __pageData,g as default};