@mapgis/webclient-leaflet-plugin
Version:
424 lines (366 loc) • 16.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> document/support/ThemeRenderUtil.js</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/app.min.css">
<link type="text/css" rel="stylesheet" href="styles/iframe.css">
<link type="text/css" rel="stylesheet" href="">
</head>
<body class="layout small-header">
<div id="stickyNavbarOverlay"></div>
<div class="top-nav">
<div class="inner">
<a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="logo">
<h1> MapGIS Client for JavaScript API</h1>
</div>
<div class="menu">
<div class="navigation">
<a
class="link user-link "
href="/docs/cesium/index.html"
>
Cesium
</a>
<a
class="link user-link "
href="/docs/mapboxgl/index.html"
>
MapboxGL
</a>
<a
class="link user-link "
href="/docs/leaflet/index.html"
>
Leaflet
</a>
<a
class="link user-link "
href="/docs/openlayers/index.html"
>
OpenLayers
</a>
</div>
</div>
</div>
</div>
<div id="main">
<div
class="sidebar "
id="sidebarNav"
>
<div>
<span class="mapgis-api-document-span"><a href="index.html">API文档</a></span>
</div>
<div class="search-wrapper">
<input id="search" type="text" placeholder="搜索文档..." class="input">
</div>
<nav>
<div class="category"><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">视图模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="DrawControl.html">DrawControl</a><span style="display: none;"><p>绘制工具</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MapView.html">MapView</a><span style="display: none;"><p>二维场景视图(leaflet引擎)，对地图引擎进行管理，如果要对地图图层进行管理请参考[Map]{@link Map}，<br/>
参考示例：
<a href='#MapView'>[初始化二维场景视图]</a>
<br>[ES5引入方式]：<br/>
Zondy.MapView() <br/>
[ES6引入方式]：<br/>
import { MapView } from '@mapgis/webclient-leaflet-plugin' <br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Popup.html">Popup</a><span style="display: none;"><p>二维场景信息弹窗(leaflet引擎)
参考示例：
<a href='#MapView'>[初始化二维场景视图]</a>
[ES6引入方式]：<br/>
import { Popup } from '@mapgis/webclient-leaflet-plugin' <br/>
自定义样式说明：<br/>
zondy-popup__content 弹窗容器样式<br/>
zondy-popup__tip 弹窗对话框箭头样式<br/>
zondy-popup__header 弹窗头部样式<br/>
zondy-popup__content 弹窗主体样式<br/>
zondy-popup__footer 弹窗底部样式<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Screenshot.html">Screenshot</a><span style="display: none;"><p>屏幕打印工具</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">草图编辑模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditorLeaflet.html">SketchEditorLeaflet</a><span style="display: none;"><p>二维场景草图编辑类<br/>
<br>[ES5引入方式]：<br/>
const { SketchEditorLeaflet } = Zondy <br/>
[ES6引入方式]：<br/>
import { SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/></p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">渲染器模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Zondy.ThemeLayer.GraphThemeLayer.html">GraphThemeLayer</a><span style="display: none;"><p>统计专题图通过为每个要素绘制统计图表来反映其对应的专题值的大小。它可同时表示多个字段属性信息，在区域本身与各区域之间形成横向和纵向的对比。<br>统计专题图多用于具有相关数量特征的地图上，比如表示不同地区多年的粮食产量、GDP、人口等，不同时段客运量、地铁流量等。目前提供的统计图类型有：柱状图（Bar），折线图（Line），饼图（Pie），三维柱状图（Bar3D），点状图（Point），环状图（Ring）。</p></span></li></ul></div>
</nav>
</div>
<div class="core" id="main-content-wrapper">
<div class="content">
<header id="page-title" class="page-title">
<span class="page-title-main">类名</span>
<span class="page-title-sub">document/support/ThemeRenderUtil.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>import * as L from '@mapgis/leaflet'
import {
inputCss,
isNumber,
SymbolType,
defined
} from '@mapgis/webclient-common'
import LeafletPlugin from '../../util/LeafletPlugin'
import ConvertSymbolUtil from '../../util/ConvertSymbolUtil'
function convertClusterSymbol(symbol, textSymbol, text) {
const dom = document.createElement('div')
const parentDom = document.createElement('div')
let bgSize = [10, 10]
let bgBorderWidth = 0
let bgColor = 'none'
// 解析符号为PictureMarker 和 SimpleMarker
if (SymbolType.pictureMarker === symbol.type) {
if (defined(symbol.width)) {
dom.style.width = `${parseFloat(symbol.width)}px`
bgSize[0] = parseFloat(symbol.width)
}
if (defined(symbol.height)) {
dom.style.height = `${parseFloat(symbol.height)}px`
bgSize[1] = parseFloat(symbol.height)
}
// 图片和几何点中心统一
if (defined(symbol.xoffset)) {
dom.style.marginLeft = symbol.xoffset
}
if (defined(symbol.yoffset)) {
dom.style.marginTop = symbol.yoffset
}
if (defined(symbol.angle)) {
dom.style.transform = `rotate(${symbol.angle}deg)`
}
if (defined(symbol.url)) {
dom.style.backgroundImage = `url(${symbol.url})`
dom.style.backgroundSize = `cover`
}
} else {
const {
size = 20,
outline = null,
style = 'circle',
path = '',
angle = 0,
xoffset = 0,
yoffset = 0,
color
} = symbol
// 不支持path 和 style
if (defined(outline)) {
const { width, color } = outline
if (style === 'circle') {
dom.style.borderRadius = `${size}px`
dom.style.backgroundClip = 'padding-box'
}
bgBorderWidth = width
bgColor = LeafletPlugin.convertColorToRgb(color)
}
if (defined(color)) {
dom.style.backgroundColor = LeafletPlugin.convertColorToRgb(color)
dom.style.backgroundSize = `cover`
}
if (defined(size)) {
bgSize = [size, size]
dom.style.width = `${size}px`
dom.style.height = `${size}px`
}
if (defined(xoffset)) {
dom.style.marginLeft = `${xoffset}px`
}
if (defined(yoffset)) {
dom.style.marginTop = `${yoffset}px`
}
if (defined(angle)) {
dom.style.transform = `rotate(${angle}deg)`
}
// 不支持path
}
const span = document.createElement('span')
// 设置文字居中
dom.style.textAlign = 'center'
span.style.lineHeight = `${bgSize[1]}px`
if (textSymbol) {
const {
color = '#000000',
angle = 0,
backgroundColor,
borderLineColor,
borderLineSize,
font,
haloColor,
haloSize,
xoffset,
yoffset
} = textSymbol
span.style.color = LeafletPlugin.convertColorToRgb(color)
span.style.transform = `rotate(${angle}deg)`
if (defined(backgroundColor)) {
span.style.backgroundColor =
LeafletPlugin.convertColorToRgb(backgroundColor)
}
if (defined(borderLineColor) && defined(borderLineSize)) {
span.style.border = `${borderLineSize}px solid ${LeafletPlugin.convertColorToRgb(
borderLineColor
)}`
}
if (defined(font)) {
const { family = 'Helvetica Neue', size, style, weight } = font
span.style.fontFamily = family
span.style.fontSize = `${size}px`
span.style.fontStyle = style
span.style.fontWeight = weight
}
if (defined(haloColor) && defined(haloSize)) {
span.style[
'-webkit-text-stroke'
] = `${haloSize}px ${LeafletPlugin.convertColorToRgb(borderLineColor)}`
}
// 不支持xoffset yoffset
}
const parentDomWidth = bgSize[0] + bgBorderWidth * 2
const parentDomHeight = bgSize[1] + bgBorderWidth * 2
parentDom.style = `border:none;background-color:${bgColor};border-radius:${
symbol.style === 'circle' ? `${parentDomWidth}px` : 'none'
};padding:${bgBorderWidth}px;`
span.innerText = text
dom.appendChild(span)
parentDom.appendChild(dom)
// divIcon
const divIcon = new L.DivIcon({
html: parentDom,
iconSize: new L.Point(parentDomWidth, parentDomHeight),
className: ``
})
return divIcon
}
// 部分专题图强依赖plugin层，因此需要对这些专题图特殊处理
class ThemeRenderUtil {
/**
* @description: 渲染聚类图
* @param {*} innerLayer
* @param {*} layer
* @param {*} innerView
* @param {*} features
* @return {*}
*/
static renderCluster(innerLayer, layer, innerView, features) {
// 添加聚类样式
inputCss(`
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg {
/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}
`)
// 初始化配置
ThemeRenderUtil.updateCluster(innerLayer, layer, innerView)
features = features || []
features.forEach((feature) => {
const marker = L.marker(LeafletPlugin.getAreaCenter(feature.geometry))
innerLayer.addLayer(marker)
})
}
static updateCluster(innerLayer, layer, innerView) {
const options = innerLayer.options
const renderer = layer.renderer
const {
defaultSymbol,
radius,
clusterBoundSymbol,
maxScale,
isExpandOnClick,
isHoverShowBound
} = renderer
let clusterInfos = renderer.clusterInfos || []
// 设置聚类最大zoom
let zoom = 20
if (innerView) {
const resolution = (maxScale / 96) * 0.0254
const latlng1 = innerView.unproject(L.point(0, 0), 0)
const latlng2 = innerView.unproject(L.point(0, 1), 0)
let dis = innerView.distance(latlng1, latlng2)
let calcZoom = 0
while (calcZoom <= 20 && dis > resolution) {
calcZoom += 1
dis /= 2
}
zoom = Math.max(calcZoom - 1, 0)
}
options.disableClusteringAtZoom = zoom
options.singleMarkerMode = true
options.maxClusterRadius = radius
options.polygonOptions =
ConvertSymbolUtil.convertSymboltoLeafletStyle(clusterBoundSymbol)
options.zoomToBoundsOnClick = isExpandOnClick
options.showCoverageOnHover = isHoverShowBound
// 过滤不合法的聚类
clusterInfos = clusterInfos.filter(
(v) =>
v &&
isNumber(v.minValue) &&
isNumber(v.maxValue) &&
v.maxValue > v.minValue
)
options.iconCreateFunction = (cluster) => {
const childCount = cluster.getChildCount()
let infoSymbol = defaultSymbol
let infoTextSymbol
for (let i = 0; i < clusterInfos.length; i++) {
const { symbol, labelSymbol, minValue, maxValue } = clusterInfos[i]
if (childCount >= minValue && childCount < maxValue) {
infoSymbol = symbol
infoTextSymbol = labelSymbol
break
}
}
return convertClusterSymbol(
infoSymbol,
infoTextSymbol,
String(childCount)
)
}
}
}
export default ThemeRenderUtil
</code></pre>
</article>
</section>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
<p class="sidebar-created-by">
<a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
<a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
</p>
</div>
</footer>
</div>
<div id="side-nav" class="side-nav">
<div style="margin-bottom: 10px;">
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
</div>
<div style="margin-bottom: 10px;">
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
</div>
<div style="margin-bottom: 10px;">
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
</div>
<div>
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
</div>
</div>
</div>
<script src="scripts/linenumber.js"> </script>
<script src="scripts/search.js"> </script>
</body>
</html>