@mapgis/webclient-leaflet-plugin
Version:
452 lines (399 loc) • 15.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> util/ConvertSymbolUtil.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">util/ConvertSymbolUtil.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>import * as L from '@mapgis/leaflet'
import {
defaultValue,
defined,
SymbolType,
Color,
createSimpleFillSymbolCanvas
} from '@mapgis/webclient-common'
import LeafletPlugin from './LeafletPlugin'
function convertSLS(symbol, style) {
if (!symbol) return style
style['stroke'] = true
style['color'] = LeafletPlugin.convertColorToRgb(
defaultValue(symbol.color, new Color())
)
style['opacity'] = Color.fromColor(
defaultValue(symbol.color, new Color())
).alpha
style['weight'] = defaultValue(symbol.width, 3)
style['lineJoin'] = defaultValue(symbol.join, 'round')
style['lineCap'] = defaultValue(symbol.cap, 'round')
style['dashArray'] = LeafletPlugin.convertLineDash(
symbol.style,
symbol.cap === 'butt'
)
style['marker'] = symbol.marker
}
function convertSFS(symbol, style) {
if (!symbol) return style
if (symbol.style !== 'solid') {
style['fill'] = `url(${createSimpleFillSymbolCanvas(symbol, {
lineWidth: 3
}).toDataURL()})`
} else {
style['fill'] = true
}
style['fillColor'] = LeafletPlugin.convertColorToRgb(
defaultValue(symbol.color, new Color())
)
style['fillOpacity'] = Color.fromColor(
defaultValue(symbol.color, new Color())
).alpha
const outline = symbol.outline
const outlineStyle = {}
convertSLS(outline, outlineStyle)
for (const key in outlineStyle) {
style[key] = outlineStyle[key]
}
}
function convertSMS(symbol, style) {
if (defined(symbol.size)) {
style.radius = defaultValue(parseFloat(symbol.size) / 2, 10)
}
style.xoffset = symbol.xoffset
style.yoffset = symbol.yoffset
style.rotation = symbol.angle
style.shape = symbol.style
style.path = symbol.path
style.fill = true
style.fillColor = LeafletPlugin.convertColorToRgb(
defaultValue(symbol.color, new Color())
)
style.fillOpacity = Color.fromColor(
defaultValue(symbol.color, new Color())
).alpha
const outline = symbol.outline
const outlineStyle = {}
convertSLS(outline, outlineStyle)
for (const key in outlineStyle) {
style[key] = outlineStyle[key]
}
}
function convertPMS(symbol, style) {
/**
* var myIcon = L.icon({
iconUrl: 'my-icon.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowUrl: 'my-icon-shadow.png',
shadowSize: [68, 95],
shadowAnchor: [22, 94],
rotationAngle:0
});
*/
const markerOptions = {}
const size = [10, 10]
if (defined(symbol.width)) {
size[0] = parseFloat(symbol.width)
}
if (defined(symbol.height)) {
size[1] = parseFloat(symbol.height)
}
markerOptions.iconSize = size
if (defined(symbol.url)) {
markerOptions.iconUrl = symbol.url
}
// 图片和几何点中心统一
const anchor = [size[0] / 2, size[1] / 2]
if (defined(symbol.xoffset)) {
anchor[0] = symbol.xoffset + anchor[0]
}
if (defined(symbol.yoffset)) {
anchor[1] = symbol.yoffset + anchor[1]
}
markerOptions.iconAnchor = anchor
const icon = L.icon(markerOptions)
style.icon = icon
style.rotationAngle = symbol.angle
}
function convertPFS(symbol, style) {
if (!symbol) return style
const { width, height, xscale, yscale, xoffset, yoffset, url } = symbol
style['fill'] = `url(${url})`
// 设置填充细则
style.fillDetail = {
width,
height,
xscale,
yscale,
xoffset,
yoffset
}
const outline = symbol.outline
const outlineStyle = {}
convertSLS(outline, outlineStyle)
for (const key in outlineStyle) {
style[key] = outlineStyle[key]
}
}
function convertTS(symbol, style) {
// 计算文本长度
const calcWidth = LeafletPlugin.getTextWidth(
symbol.text,
`${symbol.font.weight} ${symbol.font.size}px ${symbol.font.family}`
)
// 比较行宽和文字宽
let width = calcWidth < symbol.lineWidth ? calcWidth : symbol.lineWidth
let letterSpacing = 'normal'
// 压缩文字至行宽
if (symbol.kerning) {
const text = symbol.text || ''
const charLength = Math.max(0, text.length - 1)
const letterSpacingNum = parseInt(
(symbol.lineWidth - calcWidth) / charLength
)
letterSpacing = `${letterSpacingNum}px`
width = symbol.lineWidth
}
// 文字高度
const height = symbol.font.size
// 设置原点
let aliginX = 0
let aliginY = 0
switch (symbol.horizontalAlignment) {
case 'left': {
aliginX = 0
break
}
case 'right': {
aliginX = width
break
}
case 'center': {
aliginX = width / 2
break
}
default: {
aliginX = 0
}
}
switch (symbol.verticalAlignment) {
case 'baseline': {
// 因处理性能考虑，不解析文字字模基线，处理方式和middle一致
aliginY = height / 2
break
}
case 'top': {
aliginY = 0
break
}
case 'middle': {
aliginY = height / 2
break
}
case 'bottom': {
aliginY = height
break
}
default: {
aliginY = 0
}
}
const iconAnchor = [symbol.xoffset + aliginX, symbol.yoffset + aliginY]
const markerOptions = {
glyph: symbol.text,
iconUrl: null,
iconSize: [width, height],
font: symbol.font,
lineHeight: symbol.lineHeight,
iconAnchor,
horizontalAlignment: symbol.horizontalAlignment,
verticalAlignment: symbol.verticalAlignment,
glyphColor: LeafletPlugin.convertColorToRgb(
defaultValue(symbol.color, new Color())
),
haloSize: symbol.haloSize,
haloColor: symbol.haloColor.toCssRGBAString(),
angle: symbol.angle,
rotated: symbol.rotated,
backgroundColor: symbol.backgroundColor
? symbol.backgroundColor.toCssRGBAString()
: undefined,
borderLineColor: symbol.borderLineColor
? symbol.borderLineColor.toCssRGBAString()
: undefined,
borderLineSize: symbol.borderLineSize,
lineWidth: symbol.lineWidth,
kerning: symbol.kerning,
letterSpacing
}
const icon = L.icon.glyph(markerOptions)
style.icon = icon
}
class ConvertSymbolUtil {
/**
* @description 转换符号为要素样式
* @public
* @param {Symbol} symbol
* @return {Object} 样式结构，参考默认样式
*/
static convertSymboltoLeafletStyle(symbol) {
const style = {}
if (!symbol) return style
switch (symbol.type) {
case SymbolType.simpleMarker: {
convertSMS(symbol, style)
break
}
case SymbolType.pictureMarker: {
convertPMS(symbol, style)
break
}
case SymbolType.simpleLine: {
convertSLS(symbol, style)
break
}
case SymbolType.simpleFill: {
convertSFS(symbol, style)
break
}
case SymbolType.pictureFill: {
convertPFS(symbol, style)
break
}
case SymbolType.text: {
convertTS(symbol, style)
break
}
default: {
convertSFS(symbol, style)
break
}
}
return style
}
}
export default ConvertSymbolUtil
</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>