"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", div: "div", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {R2Image} = _components; if (!R2Image) _missingMdxReference("R2Image", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "前言基础", children: ["前言基础", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#前言基础", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://openlayers.org", rel: "nofollow", target: "_blank", children: "openLayer" }), "是webgis开发的基础，也是二维地理开发的必备js库，与其类似的还有", _jsx(_components.a, { href: "https://leafletjs.cn/", rel: "nofollow", target: "_blank", children: "leaflet" }), "、", _jsx(_components.a, { href: "https://www.mapbox.com/", rel: "nofollow", target: "_blank", children: "mapBox" }), "、", _jsx(_components.a, { href: "https://cesium.com", rel: "nofollow", target: "_blank", children: "Cesium" }), "等。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "leaflet" }), "：轻量级gis库，大小仅仅42kb，入门较快，非常方便于轻量级的webgis开发。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "openLayer" }), "：全功能gis库，2d ", _jsx(_components.strong, { children: "gis" }), "开发的首选，基于 canvas/WebGL开发，大小300kb左右，易于对接", _jsx(_components.strong, { children: "WMS" }), "/", _jsx(_components.strong, { children: "WFS" }), "。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "mapBox" }), "：高颜值gis库，可惜token不免费，追求颜值可以选择。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "cesium" }), "： 3D gis开发的首选，性能极好，就是包有点大，加载完整3D地球模型，可以配合threejs做数字孪生。"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "坐标系", children: ["坐标系", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#坐标系", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["由于地球是一个椭圆的球面，它是三维的，而电脑屏幕是二维的。所以要把地球画在屏幕上，必须先做", _jsx(_components.strong, { children: "投影" }), "，把球面展成平面。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["WGS84坐标系：使用椭圆体近似地球形状，并在椭球面上定位经纬度，OpenLayers 中用 ", _jsx(_components.code, { children: "EPSG:4326" }), " 表示，适合", _jsx(_components.strong, { children: "存储原始 GPS 数据" }), "，但", _jsx(_components.strong, { children: "不适合直接显示在屏幕上" })] }), "\n", _jsxs(_components.li, { children: ["Web墨卡托：把 WGS84 投影到平面上，映射成一个正方形，便于屏幕显示，OpenLayers 里用 ", _jsx(_components.code, { children: "EPSG:3857" }), " 表示，适合显示到屏幕上，一般后端存储", _jsx(_components.strong, { children: "WGS84" }), "坐标信息，发给前端使用 ", _jsx(_components.code, { children: "fromLonLat/toLonLat" }), "转换成墨卡托坐标。"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "wmswfs", children: ["WMS/WFS", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wmswfs", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "WMS(Web Map Service), 每次请求按参数（范围、图层、样式)实时生成一张图片,一般用于显示矢量图层。" }), "\n", _jsx(_components.li, { children: "WFS（Web Feature Service），返回矢量数据（一般是GeoJSON），可以做增删改查，一般用于显示瓦片图层。" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "turfjs", children: ["turfjs", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#turfjs", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["webgis的工具库，类似于web界的", _jsx(_components.strong, { children: "lodash" }), "，纯前端的", _jsx(_components.strong, { children: "空间分析" }), "库"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "计算距离、面积" }), "\n", _jsxs(_components.li, { children: ["判断点是否在多边形内（", _jsx(_components.code, { children: "booleanPointInPolygon" }), "）"] }), "\n", _jsxs(_components.li, { children: ["生成缓冲区（", _jsx(_components.code, { children: "buffer" }), "）"] }), "\n", _jsxs(_components.li, { children: ["合并、相交、裁剪（", _jsx(_components.code, { children: "union" }), "、", _jsx(_components.code, { children: "intersect" }), "、", _jsx(_components.code, { children: "difference" }), "）"] }), "\n", _jsxs(_components.li, { children: ["简化线（", _jsx(_components.code, { children: "simplify" }), "）"] }), "\n", _jsxs(_components.li, { children: ["样条插值（", _jsx(_components.code, { children: "bezierSpline" }), "）\n例如判断点是否在多边形内："] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " point ", _jsx(_components.span, { className: "token operator", children: "=" }), " turf", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "point" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "116.39" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "39.90" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " polygon ", _jsx(_components.span, { className: "token operator", children: "=" }), " turf", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "polygon" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "116.38" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "39.89" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "116.41" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "39.89" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "116.41" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "39.91" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "116.38" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "39.91" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "116.38" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "39.89" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "var" }), " isInside ", _jsx(_components.span, { className: "token operator", children: "=" }), " turf", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "booleanPointInPolygon" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "point", _jsx(_components.span, { className: "token punctuation", children: "," }), " polygon", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h2, { id: "图层加载", children: ["图层加载", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#图层加载", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.h3, { id: "前置准备", children: ["前置准备", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#前置准备", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["依赖的安装非常简单， ", _jsx(_components.code, { children: "pnpm add ol" }), "即可，之后需要获取某个地图的api，这里使用", _jsx(_components.a, { href: "https://www.tianditu.gov.cn", rel: "nofollow", target: "_blank", children: "天地图" }), "。\n首先需要加载map，代码如下，一共有", _jsx(_components.strong, { children: "target" }), "、", _jsx(_components.strong, { children: "view" }), "、", _jsx(_components.strong, { children: "layer" }), "和", _jsx(_components.strong, { children: "control" }), "。其中target和dom元素的id进行绑定。"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "script setup lang", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"ts\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " Map ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"ol/Map\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "onBeforeUnmount", _jsx(_components.span, { className: "token punctuation", children: "," }), " onMounted", _jsx(_components.span, { className: "token punctuation", children: "," }), " ref", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"vue\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "HE_FEI" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "117.1274" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "31.8935" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token comment", children: "// 合肥" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "let" }), " map", _jsx(_components.span, { className: "token operator", children: ":" }), " Map ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " view ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "View" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 合肥为中心 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" center", _jsx(_components.span, { className: "token operator", children: ":" }), " hefeiMercator", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" zoom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" projection", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"EPSG:4326\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "onMounted" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" map ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" target", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"map\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" view", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" layers", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" controls", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "onBeforeUnmount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: "=>" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "map", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" map", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "dispose" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" map ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "script", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "template", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div id", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"map\"" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"map\"" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "template", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "style scoped", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "map ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" width", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token operator", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" height", _jsx(_components.span, { className: "token operator", children: ":" }), " 100vh", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "瓦片图层加载", children: ["瓦片图层加载", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#瓦片图层加载", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["瓦片图层是根据请求参数生成的一张一张的图片，瓦片图层为", _jsx(_components.strong, { children: "TileLayer" }), "，里面通过source加载 ", _jsx(_components.strong, { children: "XYZ" }), "格式的url来加载图层api，如下："] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "SKY_MAP_URL" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "tKey", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " skyDelayer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "TileLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" source", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: _jsx(_components.span, { className: "token constant", children: "XYZ" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "SKY_MAP_URL" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "并且把map里面的图层加上" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "onMounted" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" map ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" target", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"map\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" view", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" layers", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "skyDelayer", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" controls", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "效果如下：" }), "\n", _jsx(R2Image, { r2Key: "blog/openlayer-notes/1.png", alt: "1", className: "", caption: "" }), "\n", _jsxs(_components.h3, { id: "瓦片图层切换", children: ["瓦片图层切换", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#瓦片图层切换", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "有时候需要加载卫星地图来做切换，即一键切换卫星地图和普通地图，需要加载两个东西，一个是卫星地图url，一个是标记url" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "SATE_LITE_URL" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "tKey", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "MARKER_URL" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "http://t0.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "tKey", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 卫星图层 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " satelliteLayer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "TileLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" source", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: _jsx(_components.span, { className: "token constant", children: "XYZ" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "SATE_LITE_URL" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 标记图层 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " markerLayer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "TileLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" source", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: _jsx(_components.span, { className: "token constant", children: "XYZ" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "MARKER_URL" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "onMounted" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" map ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" target", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"map\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" view", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" layers", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "skyDelayer", _jsx(_components.span, { className: "token punctuation", children: "," }), " satelliteLayer", _jsx(_components.span, { className: "token punctuation", children: "," }), " markerLayer", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" controls", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: ["接下来需要图层进行切换，本质上就是把图层的层级添加和减少罢了，以及使用", _jsx(_components.code, { children: "setVisible" }), "来确定需要显示的图层。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "添加切换图层的按钮" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"btn-group\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "click" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"changeLayer\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "切换图层", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), "btn", _jsx(_components.span, { className: "token operator", children: "-" }), "group ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" display", _jsx(_components.span, { className: "token operator", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" align", _jsx(_components.span, { className: "token operator", children: "-" }), "items", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" justify", _jsx(_components.span, { className: "token operator", children: "-" }), "content", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" gap", _jsx(_components.span, { className: "token operator", children: ":" }), " 10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" position", _jsx(_components.span, { className: "token operator", children: ":" }), " absolute", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" top", _jsx(_components.span, { className: "token operator", children: ":" }), " 10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" left", _jsx(_components.span, { className: "token operator", children: ":" }), " 10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" z", _jsx(_components.span, { className: "token operator", children: "-" }), "index", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "编写方法" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " layerFlag ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "ref" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "boolean" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeLayer" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "layerFlag", _jsx(_components.span, { className: "token punctuation", children: "." }), "value", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setMarkerLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" layerFlag", _jsx(_components.span, { className: "token punctuation", children: "." }), "value ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setGaoDelayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" layerFlag", _jsx(_components.span, { className: "token punctuation", children: "." }), "value ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "setGaoDelayer" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" skyDelayer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setVisible" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "satelliteLayer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "isVisible" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" satelliteLayer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setVisible" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "setMarkerLayer" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "skyDelayer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "isVisible" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" skyDelayer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setVisible" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" satelliteLayer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setVisible" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "最后在onMount里面添加**setGaoDelayer()**方法:" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "onMounted" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" map ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" target", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"map\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" view", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" layers", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "skyDelayer", _jsx(_components.span, { className: "token punctuation", children: "," }), " satelliteLayer", _jsx(_components.span, { className: "token punctuation", children: "," }), " markerLayer", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" controls", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" markerLayer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setZIndex" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setGaoDelayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/openlayer-notes/2.png", alt: "2", className: "", caption: "" }), "\n", _jsxs(_components.h3, { id: "矢量图层加载geojson", children: ["矢量图层加载GeoJSON", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#矢量图层加载geojson", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["矢量图层是在于瓦片图层之上的一种标记，而geoJSON是矢量图层可以认识的标识，以", _jsx(_components.a, { href: "https://datav.aliyun.com/portal/school/atlas/area_selector", rel: "nofollow", target: "_blank", children: "datav" }), "为例子，加载对应的geojson"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " vectorSource ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "VectorSource" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"/hefei.json\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" format", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "GeoJSON" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 矢量图层 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " vectorLayer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "VectorLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" source", _jsx(_components.span, { className: "token operator", children: ":" }), " vectorSource", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// onMount里面加载" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["map", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "vectorLayer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/openlayer-notes/3.png", alt: "3", className: "", caption: "" }), "\n", _jsxs(_components.h3, { id: "加载点线面", children: ["加载点线面", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#加载点线面", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "点线面本质上还是矢量图层" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " lineLayer", _jsx(_components.span, { className: "token operator", children: ":" }), " VectorLayer", _jsx(_components.span, { className: "token operator", children: "<" }), "VectorSource", _jsx(_components.span, { className: "token operator", children: "<" }), "Feature", _jsx(_components.span, { className: "token operator", children: ">>" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "VectorLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\tsource", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "VectorSource" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t features", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Feature" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t geometry", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "LineString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), "hefeiMercator", _jsx(_components.span, { className: "token punctuation", children: "," }), " zhengzhouMercator", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t ", _jsx(_components.span, { className: "token punctuation", children: "]" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" style", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Style" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" stroke", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Stroke" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"rgba(255, 0, 0, 1)\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" width", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " iconSource ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["VectorSource", _jsx(_components.span, { className: "token operator", children: "<" }), "Feature", _jsx(_components.span, { className: "token operator", children: "<" }), "Point", _jsx(_components.span, { className: "token operator", children: ">>" })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " iconLayer ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "VectorLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" source", _jsx(_components.span, { className: "token operator", children: ":" }), " iconSource", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// onMount里面加载" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["iconFeature", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setStyle" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Style" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" image", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Icon" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" src", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"/location.png\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" scale", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.15" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" anchor", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0.5" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.5" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" displacement", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " currentDisplacementY", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" text", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Text" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" text", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"起飞\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" font", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"25px sans-serif\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" fill", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Fill" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"black\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" offsetX", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "40" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["map", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "iconLayer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["map", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addLayer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "lineLayer", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/openlayer-notes/4.png", alt: "4", className: "", caption: "" }), "\n", _jsxs(_components.h2, { id: "交互interaction", children: ["交互Interaction", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#交互interaction", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.h3, { id: "view交互", children: ["view交互", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#view交互", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "view可以控制缩放层级以及中心点，比较简单,可以结合view.animate去做更加流畅，如下：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "template", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div id", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"map\"" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"map\"" }), _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"btn-group\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "click" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"changeCenter\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "切换到郑州", _jsx(_components.span, { className: "token operator", children: "/" }), "合肥", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "click" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"changeZoom\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "切换缩放比例", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "click" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"changeLayer\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "切换图层", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "template", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeCenter" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " center ", _jsx(_components.span, { className: "token operator", children: "=" }), " view", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getCenter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token function", children: "isEqual" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "center", _jsx(_components.span, { className: "token punctuation", children: "," }), " hefeiMercator", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" view", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "animate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" center", _jsx(_components.span, { className: "token operator", children: ":" }), " zhengzhouMercator", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" duration", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2000" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" view", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "animate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" center", _jsx(_components.span, { className: "token operator", children: ":" }), " hefeiMercator", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" duration", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2000" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " zoom ", _jsx(_components.span, { className: "token operator", children: "=" }), " view", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getZoom" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "zoom ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" view", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "animate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" zoom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "14" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" duration", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1200" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" view", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "animate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" zoom", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" duration", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1200" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "map交互", children: ["map交互", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#map交互", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "map交互一般可以作为监听，监听点击时间或者监听鼠标移动较多" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// onMount里面加入" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["map", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "on" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"click\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleClick", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// onBeforeMount里面加入清空" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["map", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "un" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"click\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleClick", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleClick" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token operator", children: ":" }), " MapBrowserEvent", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " coordinate ", _jsx(_components.span, { className: "token operator", children: "=" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), "coordinate", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " iconFeature ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Feature" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" geometry", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Point" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "coordinate", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ElMessage", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "info" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "点击位置：" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "coordinate", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " features", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "Array" }), _jsx(_components.span, { className: "token operator", children: "<" }), "Feature", _jsx(_components.span, { className: "token operator", children: "<" }), "Point", _jsx(_components.span, { className: "token operator", children: ">>" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " iconSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getFeatures" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" iconSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "removeFeatures" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "features", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" iconSource", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addFeature" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "iconFeature", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "startFloating" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "iconFeature", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "startFloating" }), "为动画效果"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 更新图层样式（同时保留浮动位移） " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "Fill", _jsx(_components.span, { className: "token punctuation", children: "," }), " Icon", _jsx(_components.span, { className: "token punctuation", children: "," }), " Style", _jsx(_components.span, { className: "token punctuation", children: "," }), " Text", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"ol/style\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "Feature", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"ol\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "isNil", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'lodash'" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "let" }), " currentDisplacementY ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 用于动画中同步 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "updateIconStyle" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "iconFeature", _jsx(_components.span, { className: "token operator", children: ":" }), " Feature", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" iconFeature", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setStyle" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Style" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" image", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Icon" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" src", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"/location.png\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" scale", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.15" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" anchor", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0.5" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0.5" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" displacement", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " currentDisplacementY", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" text", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Text" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" text", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"起飞\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" font", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"25px sans-serif\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" fill", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Fill" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"black\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" offsetX", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "40" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// ----- 上下浮动动画（独立于颜色）----- " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "let" }), " animFrameId", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "let" }), " startTime", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " amplitude ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 浮动距离（像素） " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " period ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "2000" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 周期（毫秒） " }), "\n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "startFloating" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "iconFeature", _jsx(_components.span, { className: "token operator", children: ":" }), " Feature", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "stopFloating" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "animate" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "timestamp", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), "startTime", _jsx(_components.span, { className: "token punctuation", children: ")" }), " startTime ", _jsx(_components.span, { className: "token operator", children: "=" }), " timestamp", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " elapsed ", _jsx(_components.span, { className: "token operator", children: "=" }), " timestamp ", _jsx(_components.span, { className: "token operator", children: "-" }), " startTime", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " t ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "elapsed ", _jsx(_components.span, { className: "token operator", children: "%" }), " period", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " period", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " offsetY ", _jsx(_components.span, { className: "token operator", children: "=" }), " Math", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "sin" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "t ", _jsx(_components.span, { className: "token operator", children: "*" }), " Math", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token constant", children: "PI" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "*" }), " amplitude", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" currentDisplacementY ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), "offsetY", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 存储当前偏移 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token function", children: "isNil" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "iconFeature", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " ", _jsx(_components.span, { className: "token function", children: "updateIconStyle" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "iconFeature", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 刷新样式 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" animFrameId ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "requestAnimationFrame" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "animate", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" animFrameId ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "requestAnimationFrame" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "animate", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "stopFloating" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "animFrameId", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token function", children: "cancelAnimationFrame" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "animFrameId", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" animFrameId ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" startTime ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "interaction交互", children: ["interaction交互", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#interaction交互", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "interaction交互实际上也可以使用map的监听来处理，但是interaction写起来会比较容易，以select和draw划线为例子：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"btn-group\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "click" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"changeCenter\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "切换到郑州", _jsx(_components.span, { className: "token operator", children: "/" }), "合肥", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "click" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"changeZoom\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "切换缩放比例", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "click" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"changeLayer\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "切换图层", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "click" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"handleDraw\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "点击划线", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"primary\"" }), " ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "click" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"closeDraw\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "关闭划线", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleDraw" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" map", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "addInteraction" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "draw", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "closeDraw" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" map", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "removeInteraction" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "draw", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// onMount里面" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["map", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addInteraction" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "select", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["select", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "on" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"select\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleSelectMove", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// onBeforeMounted里面" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["select", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "un" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"select\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " handleSelectMove", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["handleSelectMove", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "cancel" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "handleSelectMove" }), "方法，加入节流操作，来高亮hover的区域,需要先创建select"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " select", _jsx(_components.span, { className: "token operator", children: ":" }), " Select ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Select" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" condition", _jsx(_components.span, { className: "token operator", children: ":" }), " pointerMove \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " handleSelectMove ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "throttle" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token operator", children: ":" }), " SelectEvent", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: "=>" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " feature ", _jsx(_components.span, { className: "token operator", children: "=" }), " e", _jsx(_components.span, { className: "token punctuation", children: "." }), "selected", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token function", children: "isNil" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "feature", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "&&" }), " feature", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "setStyle" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Style" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" fill", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Fill" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"rgba(255, 0, 0, 0.3)\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" stroke", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Stroke" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"rgba(0, 0, 210, 0.8)\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" width", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), _jsx(_components.span, { className: "token number", children: "112" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "draw方法：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " draw", _jsx(_components.span, { className: "token operator", children: ":" }), " Draw ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Draw" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'LineString'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" source", _jsx(_components.span, { className: "token operator", children: ":" }), " lineLayer", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getSource" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "as" }), " VectorSource", _jsx(_components.span, { className: "token operator", children: "<" }), "Feature", _jsx(_components.span, { className: "token operator", children: "<" }), "LineString", _jsx(_components.span, { className: "token operator", children: ">>" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsx(R2Image, { r2Key: "blog/openlayer-notes/5.png", alt: "5", className: "", caption: "" }), "\n", _jsxs(_components.h2, { id: "控件", children: ["控件", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#控件", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "ol原生中也有很多控件如：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["map ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" target", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"map\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" view", _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" layers", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "skyDelayer", _jsx(_components.span, { className: "token punctuation", children: "," }), " satelliteLayer", _jsx(_components.span, { className: "token punctuation", children: "," }), " markerLayer", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" controls", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "ScaleLine" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 比例尺 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "FullScreen" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 全屏 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "ZoomSlider" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 缩放 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "MousePosition" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token comment", children: "// 鼠标位置 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }