@mapgis/webclient-leaflet-plugin
Version:
349 lines (293 loc) • 12.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> document/support/mapbox/mapboxCustomUtil.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/mapbox/mapboxCustomUtil.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>function mapboxCustomCRS(mapboxgl, proj4) {
class MapboxglCustomProjection extends mapboxgl.Projection {
constructor(code, options) {
super()
const opts = options || {}
const def = opts.def
if (!def) {
throw new Error('自定义参考系必须指定参数系信息def')
}
this._def = def
// 验证proj4库是否存在
if (!proj4) {
throw new Error('proj4对象不存在，自定义投影必须引入proj4对象')
}
const isP4 = this._isProj4Obj(code)
this._proj = isP4 ? code : this._projFromCodeDef(code, def)
}
/**
* @description: 正投
* @param {*} lnglat
* @return {*}
*/
project(lnglat) {
let lng
let lat
if (Array.isArray(lnglat)) {
lng = lnglat[0]
lat = lnglat[1]
} else {
lng = lnglat.lng
lat = lnglat.lat
}
return this._proj.forward([lng, lat])
}
/**
* @description: 反投
* @param {*} point
* @return {*}
*/
unproject(point) {
let x
let y
if (Array.isArray(point)) {
x = point[0]
y = point[1]
} else {
x = point.x
y = point.y
}
return this._proj.inverse([x, y])
}
/**
* @description: 定义proj4
* @param {*} code
* @param {*} def
* @return {*}
*/
_projFromCodeDef(code, def) {
if (def) {
proj4.defs(code, def)
} else if (proj4.defs[code] === undefined) {
const urn = code.split(':')
if (urn.length > 3) {
code = `${urn[urn.length - 3]}:${urn[urn.length - 1]}`
}
if (proj4.defs[code] === undefined) {
throw `No projection definition for code ${code}`
}
}
return proj4(code)
}
// 判断是否为proj4对象
_isProj4Obj(a) {
return (
typeof a.inverse !== 'undefined' && typeof a.forward !== 'undefined'
)
}
}
class MapboxglCustomCRS extends mapboxgl.CRS {
_parseParams(args) {
// proj4 type
this._crsType = 'proj4'
// epsg编号
this.epsgCode = args[0]
// def
this.def = args[1]
// 解析options
const opts = args[2] || {}
// 解析传入的参数
this._parseOptions(opts)
}
/**
* @description: 解析options
* @param {*} opts
* @return {*}
*/
_parseOptions(opts) {
super._parseOptions(opts)
// 分辨率
this._resolutions = opts.resolutions
if (Array.isArray(this._resolutions)) {
const resolutions = {}
this._resolutions.forEach((v, i) => {
resolutions[i] = v
})
this._resolutions = resolutions
} else {
this._resolutions = {}
}
if (!this._resolutions[0]) {
throw new Error('自定义坐标系时，未设置分辨率数组')
}
if (!this.origin) {
// 若原点不存在,设置bounds左上角为原点
if (this.extent) {
this.origin = [this.extent[0], this.extent[3]]
} else {
throw new Error('自定义坐标系时，未设置原点')
}
}
// 解析第一张瓦片tileSize
this.tileSize = opts.tileSize || 256
}
/**
* @description: 获取投影系范围，如果投影系不满足长宽一致，会在这一步被处理成长宽一致
* @return {*}
*/
getExtent() {
// 设置为正方形区域
if (!this._rectifyExtent) {
// 自定义坐标系时，重新设置范围
const scale =
this._resolutions[0 + this.getZoomOffset()] * this.tileSize
const extent = [
this.origin[0],
this.origin[1] - scale,
this.origin[0] + scale,
this.origin[1]
]
this._rectifyExtent = extent
}
return this._rectifyExtent
}
/**
* @description: 设置投影对象
* @return {*}
*/
_setProjection() {
this.projection = new MapboxglCustomProjection(this.getEpsgCode(), {
origin: this.origin,
def: this.def
})
}
}
if (!mapboxgl.Proj) {
mapboxgl.Proj = {}
}
mapboxgl.Proj.CRS = MapboxglCustomCRS
mapboxgl.Proj.Projection = MapboxglCustomProjection
return MapboxglCustomCRS
}
export { mapboxCustomCRS }
</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>