@mapgis/webclient-leaflet-plugin
Version:
450 lines (393 loc) • 16.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> util/LeafletPlugin.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/LeafletPlugin.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>import {
Log,
Projection,
SpatialReference,
Point,
GeometryType,
Color
} from '@mapgis/webclient-common'
import * as L from '@mapgis/leaflet'
class LeafletPlugin {
/**
* @description 颜色转换
* @private
* @param {Color|String} color
* @return {String}
*/
static convertColorToRgb(color) {
if (color instanceof Color) {
return color.toCssRGBAString()
}
return color
}
/**
* @description: 转换为经纬度坐标系下几何
* @param {*} geometry
* @return {*}
*/
static convertLngLatGeometry(geometry) {
if (!geometry || !geometry.spatialReference) return geometry
if (String(geometry.spatialReference.wkid) !== '4326') {
return Projection.project(geometry, new SpatialReference('EPSG:4326'))
}
return geometry
}
/**
* @description: 转换裁剪区域
* @param {Polygon|Extent|Circle|null} clippingArea
* @return {Number[][][]|null}
*/
static convertClippingArea(clippingArea) {
if (!clippingArea) return clippingArea
let clippingAreaCoords = null
switch (clippingArea.type) {
case GeometryType.polygon:
clippingAreaCoords =
LeafletPlugin.convertLngLatGeometry(clippingArea).coordinates
break
case GeometryType.circle: {
const circle = LeafletPlugin.convertLngLatGeometry(clippingArea)
clippingAreaCoords = circle.toPolygon().coordinates
break
}
case GeometryType.extent: {
const extent = LeafletPlugin.convertLngLatGeometry(clippingArea)
const { xmin, xmax, ymin, ymax } = extent
clippingAreaCoords = [
[
[xmin, ymax],
[xmax, ymax],
[xmax, ymin],
[xmin, ymin],
[xmin, ymax]
]
]
break
}
default:
break
}
return clippingAreaCoords
}
/**
* @description 转换线样式
* @private
* @param {String} lineStyle
* @param {String} isButt
* @return {String}
*/
static convertLineDash(lineStyle, isButt) {
switch (lineStyle) {
case 'dash':
return isButt ? [4, 3] : [3, 4]
case 'dash-dot':
return isButt ? [4, 3, 1, 3] : [3, 4, 0, 4]
case 'dot':
return isButt ? [1, 3] : [0, 4]
case 'long-dash':
return isButt ? [8, 3] : [7, 4]
case 'long-dash-dot':
return isButt ? [8, 3, 1, 3] : [7, 4, 0, 4]
case 'long-dash-dot-dot':
return isButt ? [8, 3, 1, 3, 1, 3] : [7, 4, 0, 4, 0, 4]
case 'short-dash':
return isButt ? [4, 1] : [3, 2]
case 'short-dash-dot':
return isButt ? [4, 1, 1, 1] : [3, 2, 0, 2]
case 'short-dash-dot-dot':
return isButt ? [4, 1, 1, 1, 1, 1] : [3, 2, 0, 2, 0, 2]
case 'short-dot':
return isButt ? [1, 1] : [0, 2]
case 'solid':
case 'none':
return undefined
default:
return undefined
}
}
static calcLineMarkerDetail(coords) {
if (!coords || (Array.isArray(coords) && coords.length <= 1)) {
Log.error('计算线样式首尾marker错误,传入几何数组不合法')
}
// 此处计算角度可能在不同坐标系下会发生偏移
const p1 = coords[0]
const p2 = coords[1]
const p3 = coords[coords.length - 2]
const p4 = coords[coords.length - 1]
const angle1 =
360 -
((((Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180) / Math.PI + 180) %
360) -
90)
const angle2 =
360 -
((((Math.atan2(p3[1] - p4[1], p3[0] - p4[0]) * 180) / Math.PI + 180) %
360) -
90)
const _latlng1 = Projection.project(
new Point({
coordinates: p1
}),
new SpatialReference('EPSG:4326')
).coordinates
const _latlng2 = Projection.project(
new Point({
coordinates: p4
}),
new SpatialReference('EPSG:4326')
).coordinates
const latlng1 = L.latLng(_latlng1[1], _latlng1[0])
const latlng2 = L.latLng(_latlng2[1], _latlng2[0])
return {
latlng1,
latlng2,
angle1,
angle2
}
}
/**
* 使用canvas画布。测量文本以计算并返回给定字体的给定文本的宽度(以像素为单位)。
* Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
* 要呈现的文本
* @private
* @param {String} text The text to be rendered.
* 用于呈现文本的css字体描述符
* @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
* @param {Object} styleObject 样式对象
*/
static getTextWidth(text, font) {
// 重用canvas对象以获得更好的性能
// re-use canvas object for better performance
const canvas =
LeafletPlugin.getTextWidth.canvas ||
(LeafletPlugin.getTextWidth.canvas = document.createElement('canvas'))
const context = canvas.getContext('2d')
context.font = font
const metrics = context.measureText(text)
return metrics.width
}
/**
* @description: 获取几何区域中心
* @param {*} geometry
* @return {*}
*/
static getAreaCenter(geometry) {
let p
switch (geometry.type) {
case GeometryType.point: {
p = geometry.clone()
break
}
case GeometryType.multiPoint:
case GeometryType.lineString:
case GeometryType.multiLineString:
case GeometryType.multiPolygon: {
p = geometry.extent.center
break
}
case GeometryType.polygon: {
p = geometry.centroid
break
}
case GeometryType.extent: {
p = geometry.center
break
}
case GeometryType.circle: {
p = geometry.center
break
}
default: {
p = geometry.extent.center
}
}
const _latlng = LeafletPlugin.convertLngLatGeometry(p).coordinates
const latlng = L.latLng(_latlng[1], _latlng[0])
return latlng
}
/**
* @description: 设置innerLayer透明度
* @param {*} innerLayer
* @param {*} opacity
* @param {*} visible
* @return {*}
*/
static setVisibleOpacity(innerLayer, opacity, visible) {
if (!innerLayer) return
// 设置图层透明度
innerLayer.layerOpacity = opacity
// 设置图层显示或隐藏
innerLayer.layerVisible = visible
LeafletPlugin.setGraphicVisibleOpacity(innerLayer, opacity, visible)
}
/**
* @description: 设置几何图元透明度
* @param {*} graphic
* @param {*} opacity
* @param {*} visible
* @return {*}
*/
static setGraphicVisibleOpacity(graphic, opacity, visible) {
if (graphic.setStyle) {
graphic.setStyle({
opacity: visible ? opacity : 0,
fillOpacity: visible ? opacity : 0
})
}
if (graphic instanceof L.Marker) {
graphic.setOpacity(visible ? opacity : 0)
}
if (graphic.eachLayer) {
graphic.eachLayer(function (subGraphic) {
LeafletPlugin.setGraphicVisibleOpacity(subGraphic, opacity, visible)
})
}
// 解决聚类专题图聚合点无法设置透明度问题
if (graphic._nonPointGroup) {
LeafletPlugin.setGraphicVisibleOpacity(
graphic._nonPointGroup,
opacity,
visible
)
}
if (graphic._featureGroup) {
LeafletPlugin.setGraphicVisibleOpacity(
graphic._featureGroup,
opacity,
visible
)
}
}
}
export default LeafletPlugin
</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>