# new MapVLayer(map, mapVData, mapVOptions, leafletOptions)
MapV图层(Leaflet)
参数:
名称 | 类型 | 描述 |
---|---|---|
map |
L.map | leaflet的地图视图对象 |
mapVData |
Object | MapV需要的数据集 |
mapVOptions |
Object | MapV初始化参数 |
leafletOptions |
Object | Leaflet初始化参数 |
示例
// ES5引入方式
const { WebTileLayer } = zondy.Layer
const { WebTileLayer, MapVLayer, leaflet } = zondy
// ES6引入方式
import { WebTileLayer } from "@mapgis/webclient-common"
import { WebTileLayer, MapVLayer } from "@mapgis/webclient-leaflet-plugin"
import * as leaflet from '@mapgis/leaflet'
// 请先确保引入了MapV库
<script src="http://{ip}:{port}/mapv.min.js"></script>
// 构造一个WebTileLayer图层对象作为底图
const layer = new WebTileLayer({
// 服务基地址
url: 'http://t1.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}'
});
// 加载图层元数据
layer.load().then(function () {
// 构造地图视图的初始化参数
const crs = initializeCRS(layer)
const mapViewOptions = {
// 地图视图参考系
crs: crs,
// 初始化中心点
center: [31.147781205532336,112.21905099757561],
// 初始化级数
zoom: 6
}
// 构造Leaflet地图视图对象
const map = L.map('地图视图容器ID', mapViewOptions)
// 构造图层的初始化参数
const layerOptions = initializeOptions(layer)
// 添加图层到地图视图中
const leafletLayer = new WebTileLayer(layer.url + '&tk=天地图token', layerOptions).addTo(map)
// 构造MapV数据和初始化参数
const mapVDate = {}
const mapVOptions = {}
// 创建并添加MapV图层
new MapVLayer(map, mapVDate, mapVOptions).addTo(
map
);
})