TSYWXT-CLOUD-APP/pages/yjxt/dangerarea/dangerareamap.vue

<!--
 * @Title: 
 * @Description: 危险区地图
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :style="mapStyles" :latitude="latitude" :longitude="longitude" :markers="markets"
					enable-zoom="true" :polygons="polygons" :scale="scale">
				</map>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		gcoord
	} from '@/static/js/gcoord.global.prod.js'
	import http from '@/http/api.js';
	import {
		devUrl,
		prodUrl
	} from '@/common/setting';

	export default {
		components: {

		},
		onLoad(options) {
			this.mapStyles.height = (uni.getWindowInfo().windowHeight - 50) + "px";
			this.id = options.id;
			this.baseURL = process.env.NODE_ENV === 'development' ? devUrl : prodUrl;
			let that = this;
			let postData = {};
			postData['id'] = this.id;
			http.request({
				url: '/galaxy-business/map/dangerarea/detail',
				method: 'GET',
				data: postData
			}).then(res => {
				console.log(res)
				if (res.data != null) {
					let p = {};
					let ps = res.data.points.map(item => {
						let l = gcoord.transform(
							[item.pointLng, item.pointLat],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						return {
							latitude: l[1],
							longitude: l[0],
						}
					})
					p['points'] = ps;
					let dashArray = [];
					dashArray.push(4);
					dashArray.push(10);
					p['dashArray'] = dashArray;
					if (res.data.dangerStatus == '1') {
						p['strokeColor'] = '#FF0000';
						p['fillColor'] = '#F72C5B7D';
					} else {
						p['strokeColor'] = '#FC8452';
						p['fillColor'] = '#FAC8587D';
					}
					that.polygons.push(p);
					let c = gcoord.transform(
						[res.data.centerPointLng, res.data.centerPointLat],
						gcoord.WGS84,
						gcoord.GCJ02
					);
					console.log(c)
					that.latitude = c[1];
					that.longitude = c[0];

					// let marketPoints = res.data.rtus.map(item => {
					// 	console.log(JSON.stringify(item))
					// 	let rtu = {};
					// 	rtu['iconPath'] = '/static/images/icon_warning.png';
					// 	rtu['id'] = parseInt(item.id);
					// 	let r = gcoord.transform(
					// 		[parseFloat(item.lng), parseFloat(item.lat)],
					// 		gcoord.WGS84,
					// 		gcoord.GCJ02
					// 	);

					// 	rtu['latitude'] = r[1];
					// 	rtu['longitude'] = r[0];
					// 	rtu['width'] = 20;
					// 	rtu['height'] = 20;
					// 	let label = {};
					// 	label['content'] = item.rtuName;
					// 	label['color'] = '#ff0000';
					// 	label['bgColor'] = '#ffffff';
					// 	label['anchorY'] = -40;
					// 	rtu['label'] = label;
					// 	return rtu;
					// });
					//that.markets = marketPoints;
					that.scale = 14;
				}
			}).catch(err => {
				console.log(err)
			})
		},
		data() {
			return {
				title: '危险区地图',
				id: 0,
				areaList: [],
				areaIndex: 0,
				latitude: 40.848119,
				longitude: 111.755426,
				zoom: true,
				scale: 14,
				markets: [],
				polygons: [],
				mapStyles: {
					width: '100%',
					height: '600px'
				},
			}
		},
		computed: {

		},
		onShow() {

		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
	.uni-body {
		font-size: 0.7rem;
	}
</style>