@mapgis/webclient-leaflet-plugin
Version:
362 lines (317 loc) • 18.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> document/theme/ThemeStyle.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/theme/ThemeStyle.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>import { Zondy } from '@mapgis/webclient-common'
// eslint-disable-next-line import/no-extraneous-dependencies
import { extend } from '@mapgis/webclient-graphic-render'
/**
* @class Zondy.ThemeLayer.ThemeStyle
* @classdesc 客户端专题图风格类。
* @param {Object} options - 可选参数。
* @param {boolean} [options.fill=true] - 是否填充，不需要填充则设置为 false。如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染图层。
* @param {string} [options.fillColor='#000000'] - 十六进制填充颜色。
* @param {number} [options.fillOpacity=1] - 填充不透明度。取值范围[0, 1]。
* @param {boolean} [options.stroke=false] - 是否描边，不需要描边则设置为false。如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染图层。
* @param {string} [options.strokeColor='#000000'] - 十六进制描边颜色。
* @param {number} [options.strokeOpacity=1] - 描边的不透明度。取值范围[0, 1]。
* @param {number} [options.strokeWidth=1] - 线宽度/描边宽度。
* @param {string} [options.strokeLinecap='butt'] - 线帽样式。strokeLinecap 有三种类型 “butt", "round", "square"。
* @param {string} [options.strokeLineJoin='iter'] - 线段连接样式。strokeLineJoin 有三种类型 “miter", "round", "bevel"。
* @param {string} [options.strokeDashstyle='solid'] - 虚线类型。strokeDashstyle 有八种类型 “dot",“dash",“dashdot",“longdash",“longdashdot",“solid", "dashed", "dotted"。solid 表示实线。
* @param {number} [options.pointRadius=6] - 点半径,单位为像素。
* @param {number} [options.shadowBlur=0] - 阴影模糊度，（大于 0 有效;）。注：请将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。
* @param {string} [options.shadowColor='#000000'] - 阴影颜色。注：请将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。
* @param {number} [options.shadowOffsetX=0] - 阴影 X 方向偏移值。
* @param {number} [options.shadowOffsetY=0] - 阴影 Y 方向偏移值。
* @param {string} options.label - 专题要素附加文本标签内容。
* @param {string} [options.fontColor] - 附加文本字体颜色。
* @param {number} [options.fontSize=12] - 附加文本字体大小,单位是像素。
* @param {string} [options.fontStyle='normal'] - 附加文本字体样式。可设值："normal", "italic", "oblique"。
* @param {string} [options.fontVariant='normal'] - 附加文本字体变体。可设值："normal", "small-caps"。
* @param {string} [options.fontWeight='normal'] - 附加文本字体粗细。可设值："normal", "bold", "bolder", "lighter"。
* @param {string} [options.fontFamily='arial,sans-serif'] - 附加文本字体系列。fontFamily 值是字体族名称或/及类族名称的一个优先表，每个值逗号分割，
* 浏览器会使用它可识别的第一个可以使用具体的字体名称（"times"、"courier"、"arial"）或字体系列名称
* （"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"）。
* @param {string} [options.labelPosition='top'] - 附加文本位置, 可以是 'inside', 'left', 'right', 'top', 'bottom'。
* @param {string} [options.labelAlign='center'] - 附加文本水平对齐。可以是 'left', 'right', 'center'。
* @param {string} [options.labelBaseline='middle'] - 附加文本垂直对齐。 可以是 'top', 'bottom', 'middle' 。
* @param {number} [options.labelXOffset=0] - 附加文本在x轴方向的偏移量。
* @param {number} [options.labelYOffset=0] - 附加文本在y轴方向的偏移量。
*/
class ThemeStyle {
constructor(options) {
options = options || {}
/**
* @member {boolean} [Zondy.ThemeLayer.ThemeStyle.prototype.fill=true]
* @description 是否填充，不需要填充则设置为 false。如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染图层。
*/
this.fill = true
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.fillColor="#000000"]
* @description 十六进制填充颜色。
*/
this.fillColor = '#000000'
/**
* @member {number} [Zondy.ThemeLayer.ThemeStyle.prototype.fillOpacity=1]
* @description 填充不透明度。取值范围[0, 1]。
*/
this.fillOpacity = 1
/**
* @member {boolean} [Zondy.ThemeLayer.ThemeStyle.prototype.stroke=false]
* @description 是否描边，不需要描边则设置为false。如果 fill 与 stroke 同时为 false，将按 fill 与 stroke 的默认值渲染图层。
*/
this.stroke = false
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.strokeColor="#000000"]
* @description 十六进制描边颜色。
*/
this.strokeColor = '#000000'
/**
* @member {number} [Zondy.ThemeLayer.ThemeStyle.prototype.strokeOpacity=1]
* @description 描边的不透明度。取值范围[0, 1]。
*/
this.strokeOpacity = 1
/**
* @member {number} [Zondy.ThemeLayer.ThemeStyle.prototype.strokeWidth=1]
* @description 线宽度/描边宽度。
*/
this.strokeWidth = 1
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.strokeLinecap="butt"]
* @description 线帽样式；strokeLinecap 有三种类型 “butt", "round", "square" 。
*/
this.strokeLinecap = 'butt'
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.strokeLineJoin="miter"]
* @description 线段连接样式；strokeLineJoin 有三种类型 “miter", "round", "bevel"。
*/
this.strokeLineJoin = 'miter'
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.strokeDashstyle="solid"]
* @description 虚线类型； strokeDashstyle 有八种类型 “dot",“dash",“dashdot",“longdash",“longdashdot",“solid", "dashed", "dotted";
* solid 表示实线。
*/
this.strokeDashstyle = 'solid'
/**
* @member {number} [Zondy.ThemeLayer.ThemeStyle.prototype.pointRadius=6]
* @description 点半径。单位为像素。
*/
this.pointRadius = 6
/**
* @member {number} [Zondy.ThemeLayer.ThemeStyle.prototype.shadowBlur=0]
* @description 阴影模糊度，（大于 0 有效）。注：请将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。
*/
this.shadowBlur = 0
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.shadowColor='#000000']
* @description 阴影颜色。注：请将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。
*/
this.shadowColor = '#000000'
/**
* @member {number} [Zondy.ThemeLayer.ThemeStyle.prototype.shadowOffsetX=0]
* @description 阴影 X 方向偏移值。
*/
this.shadowOffsetX = 0
/**
* @member {number} Zondy.ThemeLayer.ThemeStyle.prototype.shadowOffsetY
* @description Y 方向偏移值。
*/
this.shadowOffsetY = 0
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.label]
* @description 专题要素附加文本标签内容。
*/
this.label = ''
/**
* @member {boolean} [Zondy.ThemeLayer.ThemeStyle.prototype.labelRect=false]
* @description 是否显示文本标签矩形背景。
*/
this.labelRect = false
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.fontColor]
* @description 附加文本字体颜色。
*/
this.fontColor = ''
/**
* @member {number} [Zondy.ThemeLayer.ThemeStyle.prototype.fontSize=12]
* @description 附加文本字体大小,单位是像素。
*/
this.fontSize = 12
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.fontStyle="normal"]
* @description 附加文本字体样式。可设值："normal", "italic", "oblique"。
*/
this.fontStyle = 'normal'
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.fontVariant="normal"]
* @description 附加文本字体变体。可设值："normal", "small-caps"。
*/
this.fontVariant = 'normal'
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.fontWeight="normal"]
* @description 附加文本字体粗细。可设值："normal", "bold", "bolder", "lighter"。
*/
this.fontWeight = 'normal'
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.fontFamily="arial,sans-serif"]
* @description 附加文本字体系列。fontFamily 值是字体族名称或/及类族名称的一个优先表，每个值逗号分割，浏览器会使用它可识别的第一个
* 可以使用具体的字体名称（"times"、"courier"、"arial"）或字体系列名称（"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"）。
*/
this.fontFamily = 'arial,sans-serif'
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.labelPosition='top']
* @description 附加文本位置, 可以是 'inside', 'left', 'right', 'top', 'bottom'。
*/
this.labelPosition = 'top'
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.labelAlign='center']
* @description 附加文本水平对齐。可以是 'left', 'right', 'center'。
*/
this.labelAlign = 'center'
/**
* @member {string} [Zondy.ThemeLayer.ThemeStyle.prototype.labelBaseline='middle']
* @description 附加文本垂直对齐。 可以是 'top', 'bottom', 'middle'。
*/
this.labelBaseline = 'middle'
/**
* @member {number} [Zondy.ThemeLayer.ThemeStyle.prototype.labelXOffset=0]
* @description 附加文本在 X 轴方向的偏移量。
*/
this.labelXOffset = 0
/**
* @member {number} [Zondy.ThemeLayer.ThemeStyle.prototype.labelYOffset=0]
* @description 附加文本在 Y 轴方向的偏移量。
*/
this.labelYOffset = 0
extend(this, options)
}
}
Zondy.ThemeLayer.ThemeStyle = ThemeStyle
export default ThemeStyle</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>