my-openlayer 2.4.9 → 2.4.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -53
- package/LICENSE +21 -21
- package/README.md +43 -8
- package/core/MapBaseLayers.js +7 -9
- package/core/Point.d.ts +18 -1
- package/core/Point.js +201 -1
- package/docs/.vitepress/dist/404.html +22 -0
- package/docs/.vitepress/dist/ConfigManager.html +46 -0
- package/docs/.vitepress/dist/ErrorHandler.html +52 -0
- package/docs/.vitepress/dist/EventManager.html +58 -0
- package/docs/.vitepress/dist/Line.html +92 -0
- package/docs/.vitepress/dist/MapBaseLayers.html +52 -0
- package/docs/.vitepress/dist/MapTools.html +81 -0
- package/docs/.vitepress/dist/MeasureHandler.html +32 -0
- package/docs/.vitepress/dist/MyOl.html +62 -0
- package/docs/.vitepress/dist/Point.html +81 -0
- package/docs/.vitepress/dist/Polygon.html +102 -0
- package/docs/.vitepress/dist/RiverLayerManager.html +66 -0
- package/docs/.vitepress/dist/SelectHandler.html +46 -0
- package/docs/.vitepress/dist/ValidationUtils.html +47 -0
- package/docs/.vitepress/dist/VueTemplatePoint.html +112 -0
- package/docs/.vitepress/dist/assets/ConfigManager.md.BOMdGTaa.js +22 -0
- package/docs/.vitepress/dist/assets/ConfigManager.md.BOMdGTaa.lean.js +1 -0
- package/docs/.vitepress/dist/assets/ErrorHandler.md.yUiuJ9w9.js +28 -0
- package/docs/.vitepress/dist/assets/ErrorHandler.md.yUiuJ9w9.lean.js +1 -0
- package/docs/.vitepress/dist/assets/EventManager.md.BhCUVy1f.js +34 -0
- package/docs/.vitepress/dist/assets/EventManager.md.BhCUVy1f.lean.js +1 -0
- package/docs/.vitepress/dist/assets/Line.md.BAQOzmSt.js +68 -0
- package/docs/.vitepress/dist/assets/Line.md.BAQOzmSt.lean.js +1 -0
- package/docs/.vitepress/dist/assets/MapBaseLayers.md.Bw0L_m0b.js +28 -0
- package/docs/.vitepress/dist/assets/MapBaseLayers.md.Bw0L_m0b.lean.js +1 -0
- package/docs/.vitepress/dist/assets/MapTools.md.DaYgiDPe.js +57 -0
- package/docs/.vitepress/dist/assets/MapTools.md.DaYgiDPe.lean.js +1 -0
- package/docs/.vitepress/dist/assets/MeasureHandler.md.7Sf4ymRv.js +8 -0
- package/docs/.vitepress/dist/assets/MeasureHandler.md.7Sf4ymRv.lean.js +1 -0
- package/docs/.vitepress/dist/assets/MyOl.md.D-14Gzjy.js +38 -0
- package/docs/.vitepress/dist/assets/MyOl.md.D-14Gzjy.lean.js +1 -0
- package/docs/.vitepress/dist/assets/Point.md.Bi9juuuv.js +57 -0
- package/docs/.vitepress/dist/assets/Point.md.Bi9juuuv.lean.js +1 -0
- package/docs/.vitepress/dist/assets/Polygon.md.-JIqEvzD.js +78 -0
- package/docs/.vitepress/dist/assets/Polygon.md.-JIqEvzD.lean.js +1 -0
- package/docs/.vitepress/dist/assets/RiverLayerManager.md.CfUu2RxH.js +42 -0
- package/docs/.vitepress/dist/assets/RiverLayerManager.md.CfUu2RxH.lean.js +1 -0
- package/docs/.vitepress/dist/assets/SelectHandler.md.COR4ez_p.js +22 -0
- package/docs/.vitepress/dist/assets/SelectHandler.md.COR4ez_p.lean.js +1 -0
- package/docs/.vitepress/dist/assets/ValidationUtils.md.ReTVWa73.js +23 -0
- package/docs/.vitepress/dist/assets/ValidationUtils.md.ReTVWa73.lean.js +1 -0
- package/docs/.vitepress/dist/assets/VueTemplatePoint.md.CtxSb5Pm.js +88 -0
- package/docs/.vitepress/dist/assets/VueTemplatePoint.md.CtxSb5Pm.lean.js +1 -0
- package/docs/.vitepress/dist/assets/app.YvjVuxaB.js +1 -0
- package/docs/.vitepress/dist/assets/chunks/framework.C_W0ODpn.js +18 -0
- package/docs/.vitepress/dist/assets/chunks/theme.Bf87fILP.js +1 -0
- package/docs/.vitepress/dist/assets/index.md.BJz6tHSr.js +26 -0
- package/docs/.vitepress/dist/assets/index.md.BJz6tHSr.lean.js +1 -0
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
- package/docs/.vitepress/dist/assets/style.C2pAQzDq.css +1 -0
- package/docs/.vitepress/dist/hashmap.json +1 -0
- package/docs/.vitepress/dist/index.html +50 -0
- package/docs/.vitepress/dist/vp-icons.css +1 -0
- package/docs/Point.md +97 -29
- package/docs/index.md +6 -5
- package/index.d.ts +2 -2
- package/package.json +1 -1
- package/types.d.ts +59 -0
- package/core/DomPoint.d.ts +0 -21
- package/core/DomPoint.js +0 -36
- package/docs/.vitepress/cache/deps/@theme_index.js +0 -275
- package/docs/.vitepress/cache/deps/@theme_index.js.map +0 -7
- package/docs/.vitepress/cache/deps/_metadata.json +0 -40
- package/docs/.vitepress/cache/deps/chunk-LW4I4DCF.js +0 -12542
- package/docs/.vitepress/cache/deps/chunk-LW4I4DCF.js.map +0 -7
- package/docs/.vitepress/cache/deps/chunk-Z5QSWKN2.js +0 -9719
- package/docs/.vitepress/cache/deps/chunk-Z5QSWKN2.js.map +0 -7
- package/docs/.vitepress/cache/deps/package.json +0 -3
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -583
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
- package/docs/.vitepress/cache/deps/vue.js +0 -343
- package/docs/.vitepress/cache/deps/vue.js.map +0 -7
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
+
<title>MapBaseLayers 底图管理类 | MyOpenLayer</title>
|
|
7
|
+
<meta name="description" content="基于 OpenLayers 的现代地图组件库">
|
|
8
|
+
<meta name="generator" content="VitePress v1.6.4">
|
|
9
|
+
<link rel="preload stylesheet" href="/my-openlayer/assets/style.C2pAQzDq.css" as="style">
|
|
10
|
+
<link rel="preload stylesheet" href="/my-openlayer/vp-icons.css" as="style">
|
|
11
|
+
|
|
12
|
+
<script type="module" src="/my-openlayer/assets/app.YvjVuxaB.js"></script>
|
|
13
|
+
<link rel="preload" href="/my-openlayer/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
14
|
+
<link rel="modulepreload" href="/my-openlayer/assets/chunks/theme.Bf87fILP.js">
|
|
15
|
+
<link rel="modulepreload" href="/my-openlayer/assets/chunks/framework.C_W0ODpn.js">
|
|
16
|
+
<link rel="modulepreload" href="/my-openlayer/assets/MapBaseLayers.md.Bw0L_m0b.lean.js">
|
|
17
|
+
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
18
|
+
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/my-openlayer/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>MyOpenLayer</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/MyOl.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/MyOl.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>API</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/cuteyuchen/my-openlayer" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>GitHub</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/cuteyuchen/my-openlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/cuteyuchen/my-openlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>核心类库</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MyOl.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MyOl 地图入口</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MapBaseLayers.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MapBaseLayers 底图管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ConfigManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ConfigManager 配置管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/EventManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>EventManager 事件管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ErrorHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ErrorHandler 错误处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>要素操作</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Point.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Point 点要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Line.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Line 线要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Polygon.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Polygon 面要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/VueTemplatePoint.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>VueTemplatePoint Vue点位</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/RiverLayerManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>RiverLayerManager 河流图层</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>交互与工具</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/SelectHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>SelectHandler 要素选择</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MeasureHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MeasureHandler 测量工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MapTools.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MapTools 地图工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ValidationUtils.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ValidationUtils 验证工具</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _my-openlayer_MapBaseLayers" data-v-39a288b8><div><h1 id="mapbaselayers-底图管理类" tabindex="-1">MapBaseLayers 底图管理类 <a class="header-anchor" href="#mapbaselayers-底图管理类" aria-label="Permalink to "MapBaseLayers 底图管理类""></a></h1><p><code>MapBaseLayers</code> 用于管理地图底图(如天地图、自定义切片)和注记图层,支持图层切换、WMS 图层加载和图层状态管理。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to "构造函数""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 通常通过 MyOl 实例内部初始化,或者手动创建</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> baseLayers</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapBaseLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map, options: MapLayersOptions);</span></span></code></pre></div><ul><li><strong>map</strong>: OpenLayers 地图实例。</li><li><strong>options</strong>: 图层配置选项。</li></ul><h2 id="接口定义" tabindex="-1">接口定义 <a class="header-anchor" href="#接口定义" aria-label="Permalink to "接口定义""></a></h2><h3 id="maplayersoptions" tabindex="-1">MapLayersOptions <a class="header-anchor" href="#maplayersoptions" aria-label="Permalink to "MapLayersOptions""></a></h3><p>初始化时的图层配置。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>layers</code></td><td style="text-align:left;"><code>Layer[]</code> | <code>Object</code></td><td style="text-align:left;">底图配置。如果是数组,视为自定义底图;如果是对象,键为类型,值为图层数组。</td></tr><tr><td style="text-align:left;"><code>token</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">天地图 Token(如果使用内置天地图逻辑)</td></tr><tr><td style="text-align:left;"><code>annotation</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否初始化注记图层</td></tr><tr><td style="text-align:left;"><code>zIndex</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">基础层级,默认 0</td></tr><tr><td style="text-align:left;"><code>mapClip</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否启用地图裁剪</td></tr><tr><td style="text-align:left;"><code>mapClipData</code></td><td style="text-align:left;"><code>MapJSONData</code></td><td style="text-align:left;">裁剪数据</td></tr></tbody></table><h3 id="annotationlayeroptions" tabindex="-1">AnnotationLayerOptions <a class="header-anchor" href="#annotationlayeroptions" aria-label="Permalink to "AnnotationLayerOptions""></a></h3><p>注记图层配置。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">注记类型:<code>cva_c</code> (矢量注记), <code>cia_c</code> (影像注记), <code>cta_c</code> (地形注记)</td></tr><tr><td style="text-align:left;"><code>token</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">天地图 Token</td></tr><tr><td style="text-align:left;"><code>zIndex</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">图层层级</td></tr><tr><td style="text-align:left;"><code>visible</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否可见</td></tr></tbody></table><h3 id="geoserverlayeroptions" tabindex="-1">GeoServerLayerOptions <a class="header-anchor" href="#geoserverlayeroptions" aria-label="Permalink to "GeoServerLayerOptions""></a></h3><p>GeoServer WMS 图层配置。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>zIndex</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">图层层级</td></tr><tr><td style="text-align:left;"><code>visible</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">是否可见</td></tr><tr><td style="text-align:left;"><code>version</code></td><td style="text-align:left;"><code>'1.1.1' | '1.3.0'</code></td><td style="text-align:left;">WMS 版本</td></tr><tr><td style="text-align:left;"><code>serverType</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">服务器类型,如 <code>'geoserver'</code></td></tr><tr><td style="text-align:left;"><code>crossOrigin</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">跨域设置,默认 <code>'anonymous'</code></td></tr><tr><td style="text-align:left;"><code>params</code></td><td style="text-align:left;"><code>Object</code></td><td style="text-align:left;">额外的 WMS 参数</td></tr></tbody></table><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to "方法""></a></h2><h3 id="底图操作" tabindex="-1">底图操作 <a class="header-anchor" href="#底图操作" aria-label="Permalink to "底图操作""></a></h3><h4 id="switchbaselayer" tabindex="-1">switchBaseLayer <a class="header-anchor" href="#switchbaselayer" aria-label="Permalink to "switchBaseLayer""></a></h4><p>切换底图类型(如 <code>vec_c</code>, <code>img_c</code>, <code>ter_c</code>)。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchBaseLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(type: string): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h4 id="getcurrentbaselayertype" tabindex="-1">getCurrentBaseLayerType <a class="header-anchor" href="#getcurrentbaselayertype" aria-label="Permalink to "getCurrentBaseLayerType""></a></h4><p>获取当前底图类型。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getCurrentBaseLayerType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span></span></code></pre></div><h4 id="removelayersbytype" tabindex="-1">removeLayersByType <a class="header-anchor" href="#removelayersbytype" aria-label="Permalink to "removeLayersByType""></a></h4><p>移除指定类型的图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">removeLayersByType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(type: string): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h4 id="clearalllayers" tabindex="-1">clearAllLayers <a class="header-anchor" href="#clearalllayers" aria-label="Permalink to "clearAllLayers""></a></h4><p>清除所有底图和注记图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clearAllLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h3 id="注记操作" tabindex="-1">注记操作 <a class="header-anchor" href="#注记操作" aria-label="Permalink to "注记操作""></a></h3><h4 id="addannotationlayer" tabindex="-1">addAnnotationLayer <a class="header-anchor" href="#addannotationlayer" aria-label="Permalink to "addAnnotationLayer""></a></h4><p>添加注记图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addAnnotationLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options: Omit</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">AnnotationLayerOptions, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'token'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">): TileLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">XYZ</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></div><h4 id="switchannotationlayer" tabindex="-1">switchAnnotationLayer <a class="header-anchor" href="#switchannotationlayer" aria-label="Permalink to "switchAnnotationLayer""></a></h4><p>切换注记类型。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchAnnotationLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(annotationType: AnnotationType): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h4 id="setannotationvisible" tabindex="-1">setAnnotationVisible <a class="header-anchor" href="#setannotationvisible" aria-label="Permalink to "setAnnotationVisible""></a></h4><p>设置注记图层可见性。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setAnnotationVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(visible: boolean): </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span></span></code></pre></div><h4 id="isannotationvisible" tabindex="-1">isAnnotationVisible <a class="header-anchor" href="#isannotationvisible" aria-label="Permalink to "isAnnotationVisible""></a></h4><p>检查注记图层是否可见。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isAnnotationVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): boolean</span></span></code></pre></div><h3 id="高级图层" tabindex="-1">高级图层 <a class="header-anchor" href="#高级图层" aria-label="Permalink to "高级图层""></a></h3><h4 id="addgeoserverlayer" tabindex="-1">addGeoServerLayer <a class="header-anchor" href="#addgeoserverlayer" aria-label="Permalink to "addGeoServerLayer""></a></h4><p>添加 GeoServer WMS 图层。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addGeoServerLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(url: string, layerName: string, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> GeoServerLayerOptions): TileLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">TileWMS</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></div><table tabindex="0"><thead><tr><th style="text-align:left;">参数</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>url</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">WMS 服务地址</td></tr><tr><td style="text-align:left;"><code>layerName</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">WMS 图层名称</td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>GeoServerLayerOptions</code></td><td style="text-align:left;">配置项</td></tr></tbody></table><h4 id="getlayerstats" tabindex="-1">getLayerStats <a class="header-anchor" href="#getlayerstats" aria-label="Permalink to "getLayerStats""></a></h4><p>获取图层数量统计。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getLayerStats</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): { totalTypes: number; totalLayers: number; layersByType: Record</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">string, number> }</span></span></code></pre></div><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to "使用示例""></a></h2><h3 id="切换天地图底图" tabindex="-1">切换天地图底图 <a class="header-anchor" href="#切换天地图底图" aria-label="Permalink to "切换天地图底图""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> baseLayers</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> map.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getMapBaseLayers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
23
|
+
<span class="line"></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 切换到影像底图 (img_c)</span></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchBaseLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'img_c'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
26
|
+
<span class="line"></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 切换回矢量底图 (vec_c)</span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchBaseLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'vec_c'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="管理注记图层" tabindex="-1">管理注记图层 <a class="header-anchor" href="#管理注记图层" aria-label="Permalink to "管理注记图层""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 隐藏注记</span></span>
|
|
29
|
+
<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>
|
|
30
|
+
<span class="line"></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 切换为影像注记 (cia_c)</span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchAnnotationLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'cia_c'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
33
|
+
<span class="line"></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 显示注记</span></span>
|
|
35
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setAnnotationVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="加载-geoserver-wms-图层" tabindex="-1">加载 GeoServer WMS 图层 <a class="header-anchor" href="#加载-geoserver-wms-图层" aria-label="Permalink to "加载 GeoServer WMS 图层""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 添加一个 WMS 图层</span></span>
|
|
36
|
+
<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>
|
|
37
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'http://localhost:8080/geoserver/wms'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
38
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'myworkspace:mylayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
39
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
40
|
+
<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>
|
|
41
|
+
<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>
|
|
42
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> params: {</span></span>
|
|
43
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'CQL_FILTER'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"status = 'active'"</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 可选:传递自定义参数</span></span>
|
|
44
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
45
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
46
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="图层统计" tabindex="-1">图层统计 <a class="header-anchor" href="#图层统计" aria-label="Permalink to "图层统计""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> stats</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> baseLayers.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getLayerStats</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
47
|
+
<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>
|
|
48
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'各类型图层数:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, stats.layersByType);</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/my-openlayer/MyOl.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>MyOl 地图入口</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/my-openlayer/ConfigManager.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>ConfigManager 配置管理</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2024-present</p></div></footer><!--[--><!--]--></div></div>
|
|
49
|
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"configmanager.md\":\"BOMdGTaa\",\"errorhandler.md\":\"yUiuJ9w9\",\"eventmanager.md\":\"BhCUVy1f\",\"index.md\":\"BJz6tHSr\",\"line.md\":\"BAQOzmSt\",\"mapbaselayers.md\":\"Bw0L_m0b\",\"maptools.md\":\"DaYgiDPe\",\"measurehandler.md\":\"7Sf4ymRv\",\"myol.md\":\"D-14Gzjy\",\"point.md\":\"Bi9juuuv\",\"polygon.md\":\"-JIqEvzD\",\"riverlayermanager.md\":\"CfUu2RxH\",\"selecthandler.md\":\"COR4ez_p\",\"validationutils.md\":\"ReTVWa73\",\"vuetemplatepoint.md\":\"CtxSb5Pm\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"MyOpenLayer\",\"description\":\"基于 OpenLayers 的现代地图组件库\",\"base\":\"/my-openlayer/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/MyOl\"},{\"text\":\"API\",\"link\":\"/MyOl\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/cuteyuchen/my-openlayer\"}],\"sidebar\":[{\"text\":\"核心类库\",\"items\":[{\"text\":\"MyOl 地图入口\",\"link\":\"/MyOl\"},{\"text\":\"MapBaseLayers 底图管理\",\"link\":\"/MapBaseLayers\"},{\"text\":\"ConfigManager 配置管理\",\"link\":\"/ConfigManager\"},{\"text\":\"EventManager 事件管理\",\"link\":\"/EventManager\"},{\"text\":\"ErrorHandler 错误处理\",\"link\":\"/ErrorHandler\"}]},{\"text\":\"要素操作\",\"items\":[{\"text\":\"Point 点要素\",\"link\":\"/Point\"},{\"text\":\"Line 线要素\",\"link\":\"/Line\"},{\"text\":\"Polygon 面要素\",\"link\":\"/Polygon\"},{\"text\":\"VueTemplatePoint Vue点位\",\"link\":\"/VueTemplatePoint\"},{\"text\":\"RiverLayerManager 河流图层\",\"link\":\"/RiverLayerManager\"}]},{\"text\":\"交互与工具\",\"items\":[{\"text\":\"SelectHandler 要素选择\",\"link\":\"/SelectHandler\"},{\"text\":\"MeasureHandler 测量工具\",\"link\":\"/MeasureHandler\"},{\"text\":\"MapTools 地图工具\",\"link\":\"/MapTools\"},{\"text\":\"ValidationUtils 验证工具\",\"link\":\"/ValidationUtils\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/cuteyuchen/my-openlayer\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
|
50
|
+
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
+
<title>MapTools 地图工具类 | MyOpenLayer</title>
|
|
7
|
+
<meta name="description" content="基于 OpenLayers 的现代地图组件库">
|
|
8
|
+
<meta name="generator" content="VitePress v1.6.4">
|
|
9
|
+
<link rel="preload stylesheet" href="/my-openlayer/assets/style.C2pAQzDq.css" as="style">
|
|
10
|
+
<link rel="preload stylesheet" href="/my-openlayer/vp-icons.css" as="style">
|
|
11
|
+
|
|
12
|
+
<script type="module" src="/my-openlayer/assets/app.YvjVuxaB.js"></script>
|
|
13
|
+
<link rel="preload" href="/my-openlayer/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
14
|
+
<link rel="modulepreload" href="/my-openlayer/assets/chunks/theme.Bf87fILP.js">
|
|
15
|
+
<link rel="modulepreload" href="/my-openlayer/assets/chunks/framework.C_W0ODpn.js">
|
|
16
|
+
<link rel="modulepreload" href="/my-openlayer/assets/MapTools.md.DaYgiDPe.lean.js">
|
|
17
|
+
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
18
|
+
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/my-openlayer/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>MyOpenLayer</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/MyOl.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/MyOl.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>API</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/cuteyuchen/my-openlayer" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>GitHub</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/cuteyuchen/my-openlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/cuteyuchen/my-openlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>核心类库</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MyOl.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MyOl 地图入口</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MapBaseLayers.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MapBaseLayers 底图管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ConfigManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ConfigManager 配置管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/EventManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>EventManager 事件管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ErrorHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ErrorHandler 错误处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>要素操作</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Point.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Point 点要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Line.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Line 线要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Polygon.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Polygon 面要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/VueTemplatePoint.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>VueTemplatePoint Vue点位</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/RiverLayerManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>RiverLayerManager 河流图层</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>交互与工具</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/SelectHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>SelectHandler 要素选择</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MeasureHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MeasureHandler 测量工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MapTools.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MapTools 地图工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ValidationUtils.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ValidationUtils 验证工具</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _my-openlayer_MapTools" data-v-39a288b8><div><h1 id="maptools-地图工具类" tabindex="-1">MapTools 地图工具类 <a class="header-anchor" href="#maptools-地图工具类" aria-label="Permalink to "MapTools 地图工具类""></a></h1><p><code>MapTools</code> 提供通用的地图操作工具,包括图层查找、移除、显隐控制、地图裁剪和视图自适应等功能。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to "构造函数""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">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 "方法""></a></h2><h3 id="图层管理" tabindex="-1">图层管理 <a class="header-anchor" href="#图层管理" aria-label="Permalink to "图层管理""></a></h3><h4 id="getlayerbylayername" tabindex="-1">getLayerByLayerName <a class="header-anchor" href="#getlayerbylayername" aria-label="Permalink to "getLayerByLayerName""></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 "removeLayer""></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 "setLayerVisible""></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 "视图操作""></a></h3><h4 id="locationaction" tabindex="-1">locationAction <a class="header-anchor" href="#locationaction" aria-label="Permalink to "locationAction""></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 "fitToLayers""></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>
|
|
22
|
+
<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>
|
|
23
|
+
<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>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> padding?: [number, number, number, number];</span></span>
|
|
25
|
+
<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>
|
|
26
|
+
<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>
|
|
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;">): 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 "fitByData""></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>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> jsonData: MapJSONData, </span></span>
|
|
30
|
+
<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>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> padding?: [number, number, number, number];</span></span>
|
|
32
|
+
<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>
|
|
33
|
+
<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>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
35
|
+
<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 "高级功能""></a></h3><h4 id="setmapclip" tabindex="-1">setMapClip <a class="header-anchor" href="#setmapclip" aria-label="Permalink to "setMapClip""></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 "使用示例""></a></h2><h3 id="图层查找与控制" tabindex="-1">图层查找与控制 <a class="header-anchor" href="#图层查找与控制" aria-label="Permalink to "图层查找与控制""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 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>
|
|
36
|
+
<span class="line"></span>
|
|
37
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. 获取图层</span></span>
|
|
38
|
+
<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;">'my-layer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
39
|
+
<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;"> ></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
40
|
+
<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;">, layers[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
|
41
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
42
|
+
<span class="line"></span>
|
|
43
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2. 移除图层</span></span>
|
|
44
|
+
<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;">'temp-layer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
45
|
+
<span class="line"></span>
|
|
46
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 3. 设置可见性</span></span>
|
|
47
|
+
<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;">'background-layer'</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 "视图定位与缩放""></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>
|
|
48
|
+
<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>
|
|
49
|
+
<span class="line"></span>
|
|
50
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 缩放以包含指定图层的所有要素</span></span>
|
|
51
|
+
<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;">'target-layer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
|
|
52
|
+
<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>
|
|
53
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> duration: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span></span>
|
|
54
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
|
55
|
+
<span class="line"></span>
|
|
56
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 缩放以包含 GeoJSON 数据范围</span></span>
|
|
57
|
+
<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>
|
|
58
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxZoom: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span></span>
|
|
59
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="地图裁剪" tabindex="-1">地图裁剪 <a class="header-anchor" href="#地图裁剪" aria-label="Permalink to "地图裁剪""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 创建底图图层</span></span>
|
|
60
|
+
<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>
|
|
61
|
+
<span class="line"></span>
|
|
62
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义裁剪区域(例如一个多边形)</span></span>
|
|
63
|
+
<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>
|
|
64
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'FeatureCollection'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
65
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> features: [{</span></span>
|
|
66
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Feature'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
67
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> geometry: {</span></span>
|
|
68
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Polygon'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
69
|
+
<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>
|
|
70
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
71
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span></span>
|
|
72
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
|
73
|
+
<span class="line"></span>
|
|
74
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 应用裁剪</span></span>
|
|
75
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 注意:这会修改 baseLayer 的渲染行为,使其只在 clipPolygon 范围内显示</span></span>
|
|
76
|
+
<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>
|
|
77
|
+
<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></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/my-openlayer/MeasureHandler.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>MeasureHandler 测量工具</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/my-openlayer/ValidationUtils.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>ValidationUtils 验证工具</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2024-present</p></div></footer><!--[--><!--]--></div></div>
|
|
78
|
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"configmanager.md\":\"BOMdGTaa\",\"errorhandler.md\":\"yUiuJ9w9\",\"eventmanager.md\":\"BhCUVy1f\",\"index.md\":\"BJz6tHSr\",\"line.md\":\"BAQOzmSt\",\"mapbaselayers.md\":\"Bw0L_m0b\",\"maptools.md\":\"DaYgiDPe\",\"measurehandler.md\":\"7Sf4ymRv\",\"myol.md\":\"D-14Gzjy\",\"point.md\":\"Bi9juuuv\",\"polygon.md\":\"-JIqEvzD\",\"riverlayermanager.md\":\"CfUu2RxH\",\"selecthandler.md\":\"COR4ez_p\",\"validationutils.md\":\"ReTVWa73\",\"vuetemplatepoint.md\":\"CtxSb5Pm\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"MyOpenLayer\",\"description\":\"基于 OpenLayers 的现代地图组件库\",\"base\":\"/my-openlayer/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/MyOl\"},{\"text\":\"API\",\"link\":\"/MyOl\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/cuteyuchen/my-openlayer\"}],\"sidebar\":[{\"text\":\"核心类库\",\"items\":[{\"text\":\"MyOl 地图入口\",\"link\":\"/MyOl\"},{\"text\":\"MapBaseLayers 底图管理\",\"link\":\"/MapBaseLayers\"},{\"text\":\"ConfigManager 配置管理\",\"link\":\"/ConfigManager\"},{\"text\":\"EventManager 事件管理\",\"link\":\"/EventManager\"},{\"text\":\"ErrorHandler 错误处理\",\"link\":\"/ErrorHandler\"}]},{\"text\":\"要素操作\",\"items\":[{\"text\":\"Point 点要素\",\"link\":\"/Point\"},{\"text\":\"Line 线要素\",\"link\":\"/Line\"},{\"text\":\"Polygon 面要素\",\"link\":\"/Polygon\"},{\"text\":\"VueTemplatePoint Vue点位\",\"link\":\"/VueTemplatePoint\"},{\"text\":\"RiverLayerManager 河流图层\",\"link\":\"/RiverLayerManager\"}]},{\"text\":\"交互与工具\",\"items\":[{\"text\":\"SelectHandler 要素选择\",\"link\":\"/SelectHandler\"},{\"text\":\"MeasureHandler 测量工具\",\"link\":\"/MeasureHandler\"},{\"text\":\"MapTools 地图工具\",\"link\":\"/MapTools\"},{\"text\":\"ValidationUtils 验证工具\",\"link\":\"/ValidationUtils\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/cuteyuchen/my-openlayer\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
|
79
|
+
|
|
80
|
+
</body>
|
|
81
|
+
</html>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
+
<title>MeasureHandler 类 | MyOpenLayer</title>
|
|
7
|
+
<meta name="description" content="基于 OpenLayers 的现代地图组件库">
|
|
8
|
+
<meta name="generator" content="VitePress v1.6.4">
|
|
9
|
+
<link rel="preload stylesheet" href="/my-openlayer/assets/style.C2pAQzDq.css" as="style">
|
|
10
|
+
<link rel="preload stylesheet" href="/my-openlayer/vp-icons.css" as="style">
|
|
11
|
+
|
|
12
|
+
<script type="module" src="/my-openlayer/assets/app.YvjVuxaB.js"></script>
|
|
13
|
+
<link rel="preload" href="/my-openlayer/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
14
|
+
<link rel="modulepreload" href="/my-openlayer/assets/chunks/theme.Bf87fILP.js">
|
|
15
|
+
<link rel="modulepreload" href="/my-openlayer/assets/chunks/framework.C_W0ODpn.js">
|
|
16
|
+
<link rel="modulepreload" href="/my-openlayer/assets/MeasureHandler.md.7Sf4ymRv.lean.js">
|
|
17
|
+
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
18
|
+
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/my-openlayer/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>MyOpenLayer</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/MyOl.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/my-openlayer/MyOl.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>API</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/cuteyuchen/my-openlayer" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>GitHub</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/cuteyuchen/my-openlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/cuteyuchen/my-openlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>核心类库</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MyOl.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MyOl 地图入口</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MapBaseLayers.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MapBaseLayers 底图管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ConfigManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ConfigManager 配置管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/EventManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>EventManager 事件管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ErrorHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ErrorHandler 错误处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>要素操作</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Point.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Point 点要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Line.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Line 线要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/Polygon.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Polygon 面要素</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/VueTemplatePoint.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>VueTemplatePoint Vue点位</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/RiverLayerManager.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>RiverLayerManager 河流图层</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>交互与工具</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/SelectHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>SelectHandler 要素选择</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MeasureHandler.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MeasureHandler 测量工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/MapTools.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>MapTools 地图工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/my-openlayer/ValidationUtils.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>ValidationUtils 验证工具</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _my-openlayer_MeasureHandler" data-v-39a288b8><div><h1 id="measurehandler-类" tabindex="-1">MeasureHandler 类 <a class="header-anchor" href="#measurehandler-类" aria-label="Permalink to "MeasureHandler 类""></a></h1><p><code>MeasureHandler</code> 类提供地图上的距离和面积测量功能。</p><h2 id="构造函数" tabindex="-1">构造函数 <a class="header-anchor" href="#构造函数" aria-label="Permalink to "构造函数""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(map: Map)</span></span></code></pre></div><ul><li><strong>map</strong>: OpenLayers 地图实例。</li></ul><h2 id="类型定义" tabindex="-1">类型定义 <a class="header-anchor" href="#类型定义" aria-label="Permalink to "类型定义""></a></h2><h3 id="measurehandlertype" tabindex="-1">MeasureHandlerType <a class="header-anchor" href="#measurehandlertype" aria-label="Permalink to "MeasureHandlerType""></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;"> 'LineString'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Polygon'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="方法" tabindex="-1">方法 <a class="header-anchor" href="#方法" aria-label="Permalink to "方法""></a></h2><h3 id="start" tabindex="-1">start <a class="header-anchor" href="#start" aria-label="Permalink to "start""></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>'LineString'</code> (测距) 或 <code>'Polygon'</code> (测面)。</li><li><strong>说明</strong>: 调用此方法后,鼠标在地图上点击开始绘制,双击结束绘制。绘制过程中会显示测量结果的 tooltip。</li></ul><h3 id="end" tabindex="-1">end <a class="header-anchor" href="#end" aria-label="Permalink to "end""></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 "clean""></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 "destroy""></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 "使用示例""></a></h2><h3 id="测距" tabindex="-1">测距 <a class="header-anchor" href="#测距" aria-label="Permalink to "测距""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MeasureHandler } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'my-openlayers'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
22
|
+
<span class="line"></span>
|
|
23
|
+
<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>
|
|
24
|
+
<span class="line"></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 开始测距</span></span>
|
|
26
|
+
<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;">'LineString'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="测面" tabindex="-1">测面 <a class="header-anchor" href="#测面" aria-label="Permalink to "测面""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 开始测面</span></span>
|
|
27
|
+
<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;">'Polygon'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="清除测量" tabindex="-1">清除测量 <a class="header-anchor" href="#清除测量" aria-label="Permalink to "清除测量""></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 清除所有测量结果</span></span>
|
|
28
|
+
<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></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/my-openlayer/SelectHandler.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>SelectHandler 要素选择</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/my-openlayer/MapTools.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>MapTools 地图工具</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2024-present</p></div></footer><!--[--><!--]--></div></div>
|
|
29
|
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"configmanager.md\":\"BOMdGTaa\",\"errorhandler.md\":\"yUiuJ9w9\",\"eventmanager.md\":\"BhCUVy1f\",\"index.md\":\"BJz6tHSr\",\"line.md\":\"BAQOzmSt\",\"mapbaselayers.md\":\"Bw0L_m0b\",\"maptools.md\":\"DaYgiDPe\",\"measurehandler.md\":\"7Sf4ymRv\",\"myol.md\":\"D-14Gzjy\",\"point.md\":\"Bi9juuuv\",\"polygon.md\":\"-JIqEvzD\",\"riverlayermanager.md\":\"CfUu2RxH\",\"selecthandler.md\":\"COR4ez_p\",\"validationutils.md\":\"ReTVWa73\",\"vuetemplatepoint.md\":\"CtxSb5Pm\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"MyOpenLayer\",\"description\":\"基于 OpenLayers 的现代地图组件库\",\"base\":\"/my-openlayer/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/MyOl\"},{\"text\":\"API\",\"link\":\"/MyOl\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/cuteyuchen/my-openlayer\"}],\"sidebar\":[{\"text\":\"核心类库\",\"items\":[{\"text\":\"MyOl 地图入口\",\"link\":\"/MyOl\"},{\"text\":\"MapBaseLayers 底图管理\",\"link\":\"/MapBaseLayers\"},{\"text\":\"ConfigManager 配置管理\",\"link\":\"/ConfigManager\"},{\"text\":\"EventManager 事件管理\",\"link\":\"/EventManager\"},{\"text\":\"ErrorHandler 错误处理\",\"link\":\"/ErrorHandler\"}]},{\"text\":\"要素操作\",\"items\":[{\"text\":\"Point 点要素\",\"link\":\"/Point\"},{\"text\":\"Line 线要素\",\"link\":\"/Line\"},{\"text\":\"Polygon 面要素\",\"link\":\"/Polygon\"},{\"text\":\"VueTemplatePoint Vue点位\",\"link\":\"/VueTemplatePoint\"},{\"text\":\"RiverLayerManager 河流图层\",\"link\":\"/RiverLayerManager\"}]},{\"text\":\"交互与工具\",\"items\":[{\"text\":\"SelectHandler 要素选择\",\"link\":\"/SelectHandler\"},{\"text\":\"MeasureHandler 测量工具\",\"link\":\"/MeasureHandler\"},{\"text\":\"MapTools 地图工具\",\"link\":\"/MapTools\"},{\"text\":\"ValidationUtils 验证工具\",\"link\":\"/ValidationUtils\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/cuteyuchen/my-openlayer\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
|
30
|
+
|
|
31
|
+
</body>
|
|
32
|
+
</html>
|