try {
this.map && this.map.clearOverLays()
this.map = null
this.isOk = true
var zoom = 8
//初始化地图对象
this.map = new T.Map('myMap')
//设置显示地图的中心点和级别
this.map.centerAndZoom(new T.LngLat(116.2977, 39.959893), zoom)
//允许鼠标滚轮缩放地图
this.map.enableScrollWheelZoom()
this.map.enableAutoResize()
// this.setMapArea() //绘制区域边界
this.setBoZhouArea() //绘制亳州区域
this.getEnterForMap()
} catch (e) {
this.isOk = false
}
描绘边界区域（bozhouData 是引入你想描绘边界的js 文件（里面是你用生成器生成的经纬度））
setBoZhouArea() {
let pointsArr = []
let polygon = points => {
let regionLngLats = []
for (let i = 0; i < points.length; i++) {
let lnglat = new T.LngLat(points[i][0], points[i][1])
regionLngLats.push(lnglat)
pointsArr.push(lnglat)
}
let polygon = new T.Polygon(regionLngLats, { color: '#6C8FD7', weight: 2, opacity: 1, fillColor: '#71B3ff', fillOpacity: 0.2 })
//向地图上添加行政区划面
this.map.addOverLay(polygon)
}
if (bozhouData && bozhouData.coordinates) {
polygon(bozhouData.coordinates)
for (let i = 0; i < bozhouData.child.length; i++) {
polygon(bozhouData.child[i].coordinates)
}
//显示最佳比例尺
this.map.setViewport(pointsArr)
}
},
getEnterForMap() {
this.mapMarker.forEach(item => {
this.map.removeOverLay(item)
})
this.mapMarker = []
let defaultData = {
AIR: [
{
lng: '115.78217',
name: '标准站1#',
id: '16d960f43f02412e920e7e5ca2742b2a',
gasTotal: null,
water: null,
lat: '33.5734',
status: '1',
type: 'AIR'
},
{
lng: '115.513',
name: '标准站2#',
id: '78921077c392441b983449ba403bcd23',
gasTotal: null,
water: null,
lat: '33.71073',
status: '2',
type: 'AIR'
},
{
lng: '115.72174',
name: '标准站3#',
id: 'b9487990ddb44e08b09668d3fdd18597',
gasTotal: null,
water: null,
lat: '34.15019',
status: '3',
type: 'AIR'
},
{
lng: '116.24359',
name: '标准站4#',
id: '2f2edb7e627c4ca48ee17410c243c41a',
gasTotal: null,
water: null,
lat: '33.44157',
status: '4',
type: 'AIR'
},
{
lng: '116.55121',
name: '标准站5#',
id: '165fe151331b431e975850c7d4bf9203',
gasTotal: null,
water: null,
lat: '33.43058',
status: '5',
type: 'AIR'
},
{
lng: '115.8728',
name: '标准站6#',
id: '26939eedb37449c69f1e88491fca8415',
gasTotal: null,
water: null,
lat: '33.67503',
status: '6',
type: 'AIR'
}
],
town: [
{
lng: '116.23535',
name: '乡镇站1#',
id: '16d960f43f02412e920e7e5ca2742b2a',
gasTotal: null,
water: null,
lat: '33.0013',
status: '3',
type: 'town'
},
{
lng: '116.40839',
name: '乡镇站2#',
id: '78921077c392441b983449ba403bcd23',
gasTotal: null,
water: null,
lat: '33.26579',
status: '1',
type: 'town'
},
{
lng: '116.48529',
name: '乡镇站3#',
id: 'b9487990ddb44e08b09668d3fdd18597',
gasTotal: null,
water: null,
lat: '33.05979',
status: '4',
type: 'town'
},
{
lng: '116.6748',
name: '乡镇站4#',
id: '2f2edb7e627c4ca48ee17410c243c41a',
gasTotal: null,
water: null,
lat: '33.21909',
status: '2',
type: 'town'
},
{
lng: '116.22437',
name: '乡镇站5#',
id: '165fe151331b431e975850c7d4bf9203',
gasTotal: null,
water: null,
lat: '33.56791',
status: '5',
type: 'town'
},
{
lng: '116.19965',
name: '乡镇站6#',
id: '26939eedb37449c69f1e88491fca8415',
gasTotal: null,
water: null,
lat: '33.35368',
status: '1',
type: 'town'
}
],
monitor: [
{
lng: '116.03485',
name: '城建1#监测点',
id: '368f2a0720cf4be983db2a9296d610b7',
gasTotal: null,
water: null,
lat: '33.83708',
status: '3',
type: 'monitor'
},
{
lng: '116.26007',
name: '城建2#监测点',
id: '88b655db239b4fb5bcdd631b0ad7a35a',
gasTotal: null,
water: null,
lat: '33.12022',
status: '2',
type: 'monitor'
},
{
lng: '116.54572',
name: '城建3#监测点',
id: '971f67ed542540d9abb1429b89c81cbb',
gasTotal: null,
water: null,
lat: '33.27952',
status: '1',
type: 'monitor'
},
{
lng: '116.01013',
name: '城建4#监测点',
id: '8d8974d3c63040af9b620f03e6b234d8',
gasTotal: null,
water: null,
lat: '33.5377',
status: '4',
type: 'monitor'
},
{
lng: '115.66132',
name: '城建5#监测点',
id: 'c03d7d9e35114a758d1839a9b806eb1f',
gasTotal: null,
water: null,
lat: '33.54319',
status: '2',
type: 'monitor'
},
{
lng: '116.38367',
name: '城建6#监测点',
id: '6f63f23f10644e159f132ce75c7395f9',
gasTotal: null,
water: null,
lat: '33.04331',
status: '5',
type: 'monitor'
}
],
wind: [
{
lng: '116.05957',
name: '1#风场',
id: '368f2a0720cf4be983db2a9296d610b7',
gasTotal: null,
water: null,
lat: '33.32346',
status: '3',
type: 'wind'
},
{
lng: '116.16943',
name: '2#风场',
id: '88b655db239b4fb5bcdd631b0ad7a35a',
gasTotal: null,
water: null,
lat: '33.27128',
status: '2',
type: 'wind'
},
{
lng: '116.00189',
name: '3#风场',
id: '971f67ed542540d9abb1429b89c81cbb',
gasTotal: null,
water: null,
lat: '33.56791',
status: '4',
type: 'wind'
},
{
lng: '115.92224',
name: '4#风场',
id: '8d8974d3c63040af9b620f03e6b234d8',
gasTotal: null,
water: null,
lat: '33.38389',
status: '1',
type: 'wind'
},
{
lng: '116.08429',
name: '5#风场',
id: 'c03d7d9e35114a758d1839a9b806eb1f',
gasTotal: null,
water: null,
lat: '33.20536',
status: '2',
type: 'wind'
},
{
lng: '115.92224',
name: '6#风场',
id: '6f63f23f10644e159f132ce75c7395f9',
gasTotal: null,
water: null,
lat: '33.95243',
status: '6',
type: 'wind'
}
]
}
let data = []
this.stationCheckList.forEach(item => {
data = [...data, ...defaultData[item]]
})
this.stationMapList = data
// 向地图添加标注
this.stationMapList.forEach(item => {
let point = new T.LngLat(item.lng, item.lat)
this.setMark(point, item)
})
},
//创建标注点
setMark(point, item) {
let icon = new T.Icon({
iconUrl: `/img/map/${item.type}_${item.status}.png`,
iconSize: item.type === 'town' ? new T.Point(36, 40) : new T.Point(30, 28),
iconAnchor: new T.Point(10, 30)
}) //自定义图标
//向地图上添加自定义标注
let marker = new T.Marker(point, { icon: icon })
this.mapMarker.push(marker)
this.map.addOverLay(marker)
//移除标注的点击事件，防止多次注册
this.removeMarkerClick(marker)
//注册标注的点击事件
marker.addEventListener('click', e => {
this.handleMarkerClick(e, item)
})
},
补存一点就是在html必须先引入 ，自己生成一个key 值
参考文章
您阅读本篇文章共花了：
发表评论