mapbox 实现点线面的绘制

<template>
	<view>
		<view class="map-wrap" style="position: relative;">
			
			<view id="map-box">view>
			
			<nav id="listing-group" class="listing-group">
				<label for="scrollZoom" class="green" @click="getRTP()">
					<uni-icons custom-prefix="iconfont" type="icon-dingwei" size="22" color="#eee">
					uni-icons>
					<view>定位view>

				label>
				<label for="boxZoom" class="green" @click="initMap(1)">
					<uni-icons custom-prefix="iconfont" type="icon-qiye" size="22" color="#eee">
					uni-icons>
					<view>企业view>
				label>

				<label for="dragRotate" class="green" @click="initMap(2)">
					<uni-icons custom-prefix="iconfont" type="icon-zerenqu" size="22" color="#eee">
					uni-icons>
					<view>责任区view>
				label>

				<label for="dragPan" class="green" @click="initMap(3)">
					<uni-icons custom-prefix="iconfont" type="icon-xunchadian1" size="22" color="#eee">
					uni-icons>
					<view>巡查点view>
				label>
				<label for="search" class="green" @click="open">
					<uni-icons custom-prefix="iconfont" type="icon-xunchadian1" size="22" color="#eee">
					uni-icons>
					<view>搜索view>
				label>
			nav>
		

			
			<nav class="listing-groupss">
				<label for="scrollZoom" class="green" style="width: 61px;">
					<view style="padding: 15px;">当前所选凤县全部企业事故总数为<span style="color: red;">3span>起，今年事故总数为
						<span style="color: red;">2span>起
					view>
				label>

			nav>

			<u-popup :show="show" @close="close">
				<view>
					<text>
						<u-search shape="square" style="padding: 15px;">u-search>
						
						<view class="cu-list grid solids-bottom col-4 no-border">
							<view class="cu-item" @click="initMap(4)">
								<view
									style="background-color: #225EA4;  border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
									<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
										size="18" style="line-height: 24px;">
									uni-icons>
								view>
								<text class="txtfont">隐患分布text>
							view>

							<view class="cu-item" @click="initMap(5)">
								<view
									style="background-color: #225EA4;  border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
									<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
										size="18" style="line-height: 24px;">
									uni-icons>
								view>
								<text class="txtfont">事故分布text>
							view>

							<view class="cu-item" @click="initMap(6)">
								<view
									style="background-color: #225EA4;  border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
									<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
										size="18" style="line-height: 24px;">
									uni-icons>
								view>
								<text class="txtfont">监控设备text>
							view>

							<view class="cu-item" @click="initMap(7)">
								<view
									style="background-color: #225EA4;  border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
									<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
										size="18" style="line-height: 24px;">
									uni-icons>
								view>
								<text class="txtfont">监测设备text>
							view>
						view>
					text>
				view>
			u-popup>

			
			<u-popup :show="show2" @open="open2"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close2">
				<view class="ksorder">
					<view @click="close2" class="close">×view>
					<div class="hover-popup">
						<div style="font-size:14px; color:#333">
							<div style="margin-top:5px"><span
									style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">{{minePointdetails.name}}span>
							div>
							<div
								style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;display: inline-block;width: 100px;text-align: center;padding:5px 0;margin-right: 10px;">
								<span v-if='minePointdetails.status == 1'>生产span>
								<span v-if='minePointdetails.status == 2'>停产span>
							div>
							<div
								style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;display: inline-block;width: 100px;text-align: center; padding:5px 0;">
								<span v-if='minePointdetails.riskLevel == 1'>低风险span>
								<span v-if='minePointdetails.riskLevel == 2'>一般风险span>
								<span v-if='minePointdetails.riskLevel == 3'>较大风险span>
								<span v-if='minePointdetails.riskLevel == 4'>重大风险span>
							div>
							<div style="margin-top:5px"><span
									style="color: #595959;">地址：span><span>{{minePointdetails.address}}span>div>
							<div style="margin-top:5px"><span
									style="color: #595959;">负责人：span><span>{{minePointdetails.directorName}}span>
							div>
							<div style="margin-top:5px"><span
									style="color: #595959;">联系方式：span><span>{{minePointdetails.directorPhone}}span>
							div>
						div>
					div>
				view>
			u-popup>

			
			<u-popup :show="show1" @open="open1"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close1">
				<view class="order cu-from-group-wei">
					<view @click="close1" class="close">×view>
					<view style="height: 370px; background-color: rgb(255 255 255);">
						
						<view class="styone">
							<view>事故统计view>
							<view style="font-size: 14px;">{{ this.getLocalTime(accidentsdetails.accidentTime) }}view>
							<view>事故等级:{{accidentsdetails.type}}view>
							<view>矿山企业:{{accidentsdetails.enterpriseInfoName}}view>
						
						view>

			
						<view class="cu-form-group">
							<view class="title fontsize-P">
								事故原因view>
							<input name="input" disabled="disabled" placeholder-class="cl"
								:placeholder="accidentsdetails.name">input>
						view>
						<view class="cu-form-group">
							<view class="title fontsize-P">
								事故地址view>
							<input name="input" disabled="disabled" placeholder-class="cl"
								:placeholder="accidentsdetails.address">input>
						view>
						<view class="cu-form-group">
							<view class="title fontsize-P">
								事故描述view>
							<textarea disabled="disabled" placeholder-class="cl" :placeholder="accidentsdetails.remark"
								style="margin: 0 0 0 0;font-size: 15px;padding-top: 26px;">textarea>
						view>
					view>
				view>
			u-popup>

			
			<u-popup :show="show3" @open="open3"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close3">
				<view class="order cu-from-group-wei">
					<view @click="close3" class="close">×view>
					<view style="height: 580px; background-color: rgb(255 255 255);">
						
						<view class="yhyone">
							<view>隐患事件view>
							<view style="font-size: 14px;">
								{{ this.getLocalTime(hiddenPointPositiondetails.dangerCreateTime) }}
							view>
							<view>隐患等级:{{hiddenPointPositiondetails.dangerLevelText}}view>
							<view>矿山企业:{{hiddenPointPositiondetails.mineInfoName}}view>
							<view>
								<image v-if="hiddenPointPositiondetails.dangerStatus==0" src="/static/map/map_dcl.png"
									class="u-image-error">
									<image v-if="hiddenPointPositiondetails.dangerStatus==1"
										src="/static/map/map_yxf.png" class="u-image-error">
										<image v-if="hiddenPointPositiondetails.dangerStatus==2"
											src="/static/map/map_dsh.png" class="u-image-error">
											<image v-if="hiddenPointPositiondetails.dangerStatus==3"
												src="/static/map/map_ycl.png" class="u-image-error">
												<image v-if="hiddenPointPositiondetails.dangerStatus==4"
													src="/static/map/map_wjj.png" class="u-image-error">
													<image v-if="hiddenPointPositiondetails.dangerStatus==5"
														src="/static/map/map_yqx.png" class="u-image-error">
							view>		
						view>

						<view class="cu-form-group">
							<view class="title fontsize-P">上报人员view>
							<input :placeholder="hiddenPointPositiondetails.report" name="input" disabled="disabled"
								placeholder-class="cl">input>
						view>

						<view class="cu-form-group">
							<view class="title fontsize-P">隐患类型view>
							<input name="input" disabled="disabled" placeholder-class="cl"
								:placeholder="hiddenPointPositiondetails.dangerTypeText">
						view>
						<view class="cu-form-group">
							<view class="title fontsize-P">
								隐患来源view>
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==1" placeholder="矿区及周边环境条件">
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==2" placeholder="矿区平面布局">
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==3" placeholder="建筑物">
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==4" placeholder="生产工艺场所">
							<input name="input" disabled="disabled" placeholder-class="cl"
								v-if="hiddenPointPositiondetails.dangerSources==5" placeholder="生产设备装置">
						view>
						<view class="cu-form-group">
							<view class="title fontsize-P">
								隐患原因view>
							<textarea disabled="disabled" placeholder-class="cl"
								:placeholder="hiddenPointPositiondetails.dangerCause"
								style="margin: 0 0 0 0;font-size: 15px;padding-top: 26px;">textarea>
						view>

						<view class="cu-form-group" v-for="(item, index) in hiddenPointPositiondetails.imgPathList"
							:key="index">
							<image src="appConfig.baseUrl+item" style="height: 85px; width: 85px; float: right;">
						view>
						<view>
							<u-button text="查看详情" type="primary" color="linear-gradient(to right, #D36554, #E37757)"
								style="width: 650rpx; margin: 20PX auto;" shape="circle"
								@click="gajin(hiddenPointPositiondetails.id)">
							u-button>
						view>
					view>
				view>
			u-popup>


			
			<u-popup :show="show4" @open="open4"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close4">
				<view class="ksorder">
					<view @click="close4" class="close">×view>
					<div class="hover-popup">
						<div style="font-size:14px; color:#333">
							<div>
								<span>
									<image src="/static/jksbtb.png"
										style="width: 32px;height: 32px;vertical-align: middle; ">image>
								span>
								<p style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 55px;
							  display: inline-block; margin-left: 10px;">{{watchdetails.deviceName}}p>
							div>
							<div
								style="font-size: 14px; color: #333; background-color: #e1eefd; padding: 10px; border-radius: 21px;overflow: hidden;">
								<button v-for="(item, index) in watchdetails.data"
									style="margin:5px 5px 5px 0;background:  #E1EEFD; color:#225EA4; border: none!important; border-right: 1px solid #5383bb;float: left;line-height: 35px;">{{item.label}}:<span
										style="font-weight: 900; font-style: italic;">{{item.field}}{{item.unit}}span>button>
							div>
						div>
					div>
				view>
			u-popup>

			
			<u-popup :show="show5" @open="open5"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close5">
				<view class="ksorder">
					<view @click="close5" class="close">×view>
					<div class="hover-popup">
						<div style="font-size:14px; color:#333">
							<div>
								<span>
									<image src="/static/jksbtb.png"
										style="width: 32px;height: 32px;vertical-align: middle; ">image>
								span>
								<p style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 55px;
							  display: inline-block; margin-left: 10px;">{{monitoringDetails.deviceName}}p>
							div>
							<div style="width: 95%;margin: 5px auto;">
								<video style="width: 100%;margin: 5px auto;"
									src="https://www.runoob.com/try/demo_source/movie.mp4">video>
							div>
						div>
					div>
				view>
			u-popup>

			
			<u-popup :show="show6" @open="open6"
				style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close6">
				<view class="ksorder">
					<view @click="close6" class="close">×view>
					<div class="hover-popup">
						<div style="font-size:14px; color:#333">
							<div>
								<span style="font-size: 15px;">{{inspectionPointDetails.patrolPointName}}span>
								<p
									style="margin-left:10px;background-color: rgb(225, 238, 253); color: rgb(34, 94, 164); border: none; border-radius: 50px; line-height: 15px; display: inline-block; width: 100px; text-align: center; padding: 5px 0px; margin-right: 10px;">
									{{inspectionPointDetails.statusText}}
								p>
							div>
							<div style="font-size: 15px; margin-top: 10px;">
								巡检矿区：{{inspectionPointDetails.zoneName}}
							div>
						div>
					div>
				view>
			u-popup>
		view>
	view>

<script module="mapboxde">
	import {
		accidentsList,
		minePoint,
		hiddenPointPosition,
		monitoringEquipment,
		watchsEquipment,
		areaResponsibility,
		minePointdetails,
		accidentDetails,
		hiddendetails,
		monitoringDetails,
		watchsDetails,
		inspectionPointDetails,
		inspectionPoint,
	} from "@/api/mapbox/accidents.js";
	export default {

		data() {
			return {
				show: false,
				show1: false, // 地图弹出框， 在安卓端必须写在script 而非 script module="mapbox" lang="renderjs"里面
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false,
				keyword: '遥看瀑布挂前川', //搜索框
				mineInfoId: '', //事故点位列表请求参数
				accListmarker: [], // 事故点位数据
				accidentId: 1, // 事故分布id，
				accidentTime: "", // 事故分布时间
				minepoint: [],
				minePointdetails: {},
				accidentsdetails: {},
				hiddenPointPositiondetails: {},
				watchdetails: {},
				monitoringDetails: {},
				inspectionPointDetails: {},
			}
		},
		mounted() {
			this.iocnOne()
			this.initMap(1)
		},

		methods: {
			open() {
				// console.log('open');
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			open1() {
				// console.log('open');
				this.show1 = true
			},
			close1() {
				this.show1 = false
				// console.log('close');
			},
			open2() {
				// console.log('open');
				this.show2 = true
			},
			close2() {
				this.show2 = false
				// console.log('close');
			},
			open3() {
				// console.log('open');
				this.show3 = true
			},
			close3() {
				this.show3 = false
				// console.log('close');
			},
			open4() {
				// console.log('open');
				this.show4 = true
			},
			close4() {
				this.show4 = false
				// console.log('close');
			},
			open5() {
				// console.log('open');
				this.show5 = true
			},
			close5() {
				this.show5 = false
				// console.log('close');
			},
			open6() {
				// console.log('open');
				this.show6 = true
			},
			close6() {
				this.show6 = false
				// console.log('close');
			},
			iocnOne() {
				this.show = true
			},
			iocnTWO() {
				this.show1 = true
			},
			/* 事故跳转详情 */
			// goaccidentsdetails(){
			// 	this.warnId = item;
			// 	this.$tab.navigateTo(
			// 	  `/pages/work/dangereventetails/index?id=${this.warnId}`
			// 	);
			// },
			/* 隐患跳转详情 */
			gajin(item) {
				this.warnId = item;
				this.$tab.navigateTo(
					`/pages/work/dangereventetails/index?id=${this.warnId}`
				);
			},
			getLocalTime(nS) {
				// 日期转换
				var date = new Date(nS); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + "年";
				var M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "月";
				var D =
					(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "日 ";
				var h = date.getHours() + ":";
				var m = date.getMinutes() + ":";
				var s = date.getSeconds();
				// console.log(s);
				return Y + M + D + h + m + s
			},
			getMapClick(item) {
				item
				console.log(item)
			},
			// 获取事故点位列表
			getAccidentsList() {
				accidentsList(this.mineInfoId).then(res => {
						console.log("获取事故点位列表", res);
						// this.accListmarker = res.data，
						console.log("@@@@8", res.data)
						res.data.list.forEach(item => {
							const el7 = document.createElement('div');
							// el5.style.backgroundColor = '#000'
							el7.style.backgroundImage = "url('/static/spsg.png')"
							//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
							el7.style.width = 40 + "px"
							el7.style.height = 40 + "px"
							el7.id = 'marker';
							this.marke7 = new mapboxgl.Marker(el7)
								.setLngLat([item.longitude, item.latitude])
								// sets a popup on this marker
								.addTo(this.map);
							// 事故事件
							this.marke7.getElement().addEventListener('click', (e) => {
								accidentDetails(item.id).then(res => {
									console.log(res)
									this.show1 = true
									this.accidentsdetails = res.data

								})
							});

						})

					})
					.catch((err) => {
						console.log(err);
					});
			},

			// 监测设备点位列表
			getWatchEquipment() {
				watchsEquipment().then(res => {
					console.log("监测设备", res)
					res.data.forEach((item) => {
						console.log(item)
						const el6 = document.createElement('div');
						// el5.style.backgroundColor = '#000'
						el6.style.backgroundImage = "url('/static/spjc.png')"
						//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
						el6.style.width = 40 + "px"
						el6.style.height = 30 + "px"
						el6.id = 'marker';
						// create the marker
						this.marke6 = new mapboxgl.Marker(el6)
							.setLngLat([item.longitude, item.latitude])
							// .setPopup(popup7) // sets a popup on this marker
							.addTo(this.map);
						//监测设备
						this.marke6.getElement().addEventListener('click', (e) => {
							watchsDetails(item.id).then(res => {
								console.log(res)
								this.show4 = true
								this.watchdetails = res.data
								console.log(this.watchdetails)

							})
						});


					})

				})
			},





			// 矿山点位列表
			getMinePoint() {
				minePoint().then((res) => {
					this.minepoint = res.data
					const newArreyData = res.data
					newArreyData.forEach((item) => {
						// 创建 矿山企业
						this.marke2 = new mapboxgl.Marker({
								color: '#EF9E6A',
								top: '500',
								// color it red
							}).setLngLat([item.longitude, item.latitude]).setPopup(this.popup2)
							.addTo(this.map);
						this.marke2.getElement().addEventListener('click', (e) => {
							minePointdetails(item.id).then(res => {
								this.show2 = true
								this.minePointdetails = res.data
								console.log(this.minePointdetails)
							})
						});

					})
				})
			},

			// 隐患点位列表
			getHiddenPointPosition() {
				hiddenPointPosition().then((res) => {
					console.log("患点位列表", res)
					res.data.list.forEach((item) => {
						// create DOM element for the marker
						const el10 = document.createElement('div');
						// el5.style.backgroundColor = '#000'
						el10.style.backgroundImage = "url('/static/sp4.png')"
						//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
						el10.style.width = 42 + "px"
						el10.style.height = 42 + "px"
						el10.id = 'marker';
						// create the marker
						this.marke8 = new mapboxgl.Marker(el10)
							.setLngLat([item.longitude, item.latitude])
							// sets a popup on this marker
							.addTo(this.map);
						this.marke8.getElement().addEventListener('click', (e) => {
							hiddendetails(item.id).then(res => {
								console.log(res)
								this.show3 = true
								this.hiddenPointPositiondetails = res.data

							})
						});



					})

				})
			},
			//巡查点列表
			getInspectionPoint() {
				inspectionPoint().then(res => {
					console.log(res)
					res.data.forEach((item) => {
						//create DOM element for the marker
						const el11 = document.createElement('div');
						// el5.style.backgroundColor = '#000'
						el11.style.backgroundImage = "url('/static/sp4.png')"
						//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
						el11.style.width = 42 + "px"
						el11.style.height = 42 + "px"
						el11.id = 'marker';
						//create the marker
						this.marke10 = new mapboxgl.Marker()
							.setLngLat([item.longitude, item.latitude])
							// sets a popup on this marker
							.addTo(this.map);
						this.marke10.getElement().addEventListener('click', (e) => {
							inspectionPointDetails(item.id).then(res => {
								console.log(res)
								this.show6 = true
								this.inspectionPointDetails = res.data

							})
						});
					})
				})
			},





			// 监控设备点位列表
			getMonitoringEquipment() {
				monitoringEquipment().then((res) => {
					console.log("监控设备", res)
					res.data.forEach((item) => {
						//监控设备
						// create DOM element for the marker
						const el12 = document.createElement('div');
						// el5.style.backgroundColor = '#000'
						el12.style.backgroundImage = "url('/static/spjk.png')"
						//el.style.backgroundRepeat = "no-repeat" //设置背景图片不重复
						el12.style.width = 52 + "px"
						el12.style.height = 52 + "px"
						el12.id = 'marker';
						// create the marker
						this.marke12 = new mapboxgl.Marker(el12)
							.setLngLat([item.longitude, item.latitude])
							// .setPopup(popup7) // sets a popup on this marker
							.addTo(this.map);
						this.marke12.getElement().addEventListener('click', (e) => {
							monitoringDetails(item.id).then(res => {
								console.log(res)
								this.show5 = true
								this.monitoringDetails = res.data

							})
						});


					})

				})


			},

			// 责任区点位列表
			getAreaResponsibility() {
				areaResponsibility().then((res) => {
					var arr = []
					console.log("责任区点位列表", res)
					res.data.forEach((item) => {
						//多边形区域
						arr.push(JSON.parse(item.areaCoordinates))
						console.log(item.areaCoordinates)

					})
					this.map.on('load', () => {
						console.log(arr)
						// this.map.setCenter([109.81052390215689, 34.49296681752897])
						// this.map.setZoom(16)
						this.map.addSource('maine', {
							'type': 'geojson',
							'data': {
								'type': 'Feature',
								'geometry': {
									'type': 'Polygon',
									// These coordinates outline Maine.
									'coordinates': arr


								}
							}
						})
						//添加一个新图层可视化多边形
						this.map.addLayer({
							'id': 'maine',
							'type': 'fill', //图层类型 面图层
							// "source-layer": "water", //加载矢量切片
							'source': 'maine', // 引用数据源
							'layout': {
								// 'visiblity': 'visible' //绘制区域显示不显示 visible显示 none不显示
							},
							'paint': {
								'fill-color': '#FFFFFF', // 蓝色填充
								'fill-opacity': 0.5,

							},
							// minZoom: 1, // 当图层的的最小缩放级别
							// maxZoom: 2 // 当图层的的最大缩放级别
						})
						// 在多边形周围添加一个黑色的轮廓
						this.map.addLayer({
							'id': 'outline',
							'type': 'line',
							'source': 'maine',
							'layout': {
								// 'visiblity': 'none'
								'line-join': 'round' //线条圆角
							},
							'paint': {
								'line-color': '#eeeeee',
								'line-width': 2
							}
						})

					})

				})
			},

			// 获取当前位置的经纬度
			getRTP() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			}




		}
	}
</script>
<script module="mapbox" lang="renderjs">
	import appConfig from "config";
	//import mapboxgl from "mapbox-gl"; // 引包方式二
	// import 'mapbox-gl/dist/mapbox-gl.css';
	// const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
	// import MapboxLanguage from '@mapbox/mapbox-gl-language'
	// import 'static/mapbox-gl-cgcs2000.css'
	// import mapboxgl from 'static/mapbox-gl-cgcs2000.js'
	export default {
		data() {
			return {
				// zt: "",
				map: null, //地图实例
				popup: null,
				popup2: null,
				popup6: null,
				el: null,
				marker: null,
				marker1: null,
				marker2: null,
				marke6: null,
				marke7: null,

			}
		},
		// computed: {
		// 	...mapState({
		// 		hazard_source: state => state.sjzd.sjzdList.hazard_source,
		// 		danger_level: state => state.sjzd.sjzdList.danger_level,


		// 	})
		// },
		mounted() {
			if (typeof window.mapboxgl === 'function') {
				this.$nextTick(() => {
					this.initMap(1)
				})
			} else {
				const script = document.createElement('script')
				script.src = 'http://1.85.55.225:8085/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.js';
				script.onload = this.initMap.bind(this);
				document.head.appendChild(script)
			}
			this.iocnOne()

		},

		methods: {
			// 场景地图初始化
			initMap(type) {
				mapboxgl.accessToken =
					'pk.eyJ1IjoiZmxvd2Vyd2VpIiwiYSI6ImNsYXo3NnN3MDE3ZTUzcGxpNzNncGxxdWYifQ.AWmbnSDKRxSygXxsAkMF9Q';
				// 创建地图
				// 英文标注转换为中文   
				// mapboxgl.setRTLTextPlugin(
				// 	"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
				// );

				this.map = new mapboxgl.Map({
					container: 'map-box', // container ID
					// style: 'mapbox://styles/mapbox/satellite-v9', // style加载地图的样式
					style: 'http://1.85.55.225:8085/YouMapServer/rest/service/sxwwCGCS2000/VectorTileServer/styles/YXSL-225.json', // style加载地图的样式
					// style: '/static/YXSL-225.json',
					//style: 'mapbox://styles/mapbox/dark-v5',
					center: [109, 35.655], // 设置地图的中心点
					projection: 'globe', // 把地图设置为球体
					zoom: 6, // starting zoom
					pitch: 5,
					minZoom: 5,
					maxZoom: 17,
					// minZoom: 5, // 图层的最小缩放级别
					// maxZoom: 17 // 图层的最大缩放级别
				})

				// 设置语言
				// var language = new MapboxLanguage({
				// 	defaultLanguage: "zh-Hans"
				// });
				// this.map.addControl(language);
				this.map.on("load", () => {
					// 视频监控画面
					// 创建视频div
					console.log(type)
					if (type == 1) {
						this.getMinePoint()
					} else if (type == 2) {
						this.getAreaResponsibility()
					} else if (type == 3) {
						this.getInspectionPoint()
					} else if (type == 4) {
						this.show = false
						this.getHiddenPointPosition()
					} else if (type == 5) {
						this.show = false
						this.getAccidentsList();
					} else if (type == 6) {
						this.show = false
						this.getMonitoringEquipment()
					} else if (type == 7) {
						this.show = false
						this.getWatchEquipment()
					}


					// this.getHiddenPointPosition()
					// this.getInspectionPoint()
					// this.getMonitoringEquipment()
					// this.getAreaResponsibility()
					// this.getWatchEquipment()
				});
			},



		}
	}
</script>