92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
import { Scene, RasterLayer, MarkerLayer, Marker } from '@antv/l7'
|
||
import { Map } from '@antv/l7-maps'
|
||
/**
|
||
* 初始化创建地图
|
||
* @param { string } id
|
||
* @param { config } object
|
||
*/
|
||
export function initMap(id, config) {
|
||
return new Promise((resolve, reject) => {
|
||
const scene = new Scene({
|
||
id,
|
||
logoVisible: false,
|
||
map: new Map({
|
||
...config
|
||
})
|
||
})
|
||
window.scene = scene
|
||
resolve(scene)
|
||
})
|
||
}
|
||
/**
|
||
* 添加底图
|
||
* 根据数组index值控制图层显示层级
|
||
* @param { array } arr
|
||
*/
|
||
export function initLayer(arr) {
|
||
arr.map((item, index) => {
|
||
const layer = new RasterLayer({
|
||
zIndex: index,
|
||
name: item.name
|
||
}).source(item.url, {
|
||
parser: {
|
||
type: 'rasterTile',
|
||
tileSize: 256
|
||
}
|
||
})
|
||
window.scene.addLayer(layer)
|
||
})
|
||
}
|
||
/**
|
||
* 添加自定义点图层
|
||
* 数据对象 [{longitude: '', latitude: ''}, {longitude: '', latitude: ''}]
|
||
* @param { array } arr
|
||
* 图层配置: { zIndex: 100, name: ''}
|
||
* @param { object } layerAttr
|
||
* 自定义模板样式: {widht: '', height：'', ......}
|
||
* @param { object } style
|
||
* 事件名称: ['click', 'mouseover']
|
||
* @param { array } eventArr
|
||
*/
|
||
export function createMarker(arr, config) {
|
||
const markerLayer = new MarkerLayer(config.layerAttr)
|
||
arr.map((item) => {
|
||
// 创建marker
|
||
if (item.longitude && item.latitude) {
|
||
const marker = new Marker({
|
||
element: createMakerElement(item, config.layerAttr, config.style),
|
||
extData: item
|
||
}).setLnglat([item.longitude, item.latitude])
|
||
// 绑定鼠标事件
|
||
// config.eventArr.map((event) => {
|
||
// marker.on(event, (e) => {
|
||
// eventHub.emit(config.layerAttr.name + '-' + event, e)
|
||
// })
|
||
// })
|
||
markerLayer.addMarker(marker)
|
||
}
|
||
})
|
||
window.scene.addMarkerLayer(markerLayer)
|
||
return markerLayer
|
||
}
|
||
/**
|
||
* 创建模板
|
||
* makre的数据源
|
||
* @param { object } item
|
||
* 图层属性：根据图层名称 使用不同的自定义模板
|
||
* @param { layerAttr } object
|
||
* 自定义模板样式和图标名称
|
||
* @param { object } style
|
||
*/
|
||
export function createMakerElement(item, layerAttr, style) {
|
||
// 防火分区
|
||
if (layerAttr.name === 'accident') {
|
||
const el = document.createElement('div')
|
||
el.innerHTML = `<div style="height: ${style.height};width:${style.width};"><img src="/image/icon/${item.image}.png" style="width:100%;height:100%;"></div>`
|
||
return el
|
||
}
|
||
}
|
||
export function destoryScene() {
|
||
window.scene.destroy()
|
||
}
|