TSYWXT-CLOUD-APP/pages/home/regionmap.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="width: 100%; height: 600px;" :latitude="latitude" :longitude="longitude" :markers="markets"
					enable-zoom="true" :polygons="polygons" :scale="scale">
				</map>
			</view>

			<!-- 			<view class="item-button-group">
				<view v-for="item in areaList" :key="item.id" class="item-button" @click="onAreaClick(item)">
					<view class="items-line">
						<uni-icons class="input-uni-icon" type="close" size="18" color="coral" />
						<text class="button-text">{{ item.name }}</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>
<!-- <script src="../../static/js/gcoord.global.prod.js" type="module"></script> -->
<script>
	import {
		gcoord
	} from '@/static/js/gcoord.global.prod.js'
	import http from '@/http/api.js';
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js';
	import {
		oss,
		devUrl,
		prodUrl
	} from '@/common/setting';

	export default {
		components: {

		},
		onLoad(options) {
			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/region/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;
					
			        p['strokeWidth'] = 2;
					p['strokeColor'] = '#EE1ADC';
						//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];

				
				
					that.scale = 8;
				}
			}).catch(err => {
				console.log(err)
			})
		},
		data() {
			return {
				title: '地图测试',
				id: 0,
				title: 'map',
				areaList: [],
				areaIndex: 0,
				latitude: 40.848119,
				longitude: 111.755426,
				zoom: true,
				scale: 8,
				markets: [],
				polygons: [],
			}
		},
		computed: {

		},
		onShow() {

		},
		created() {

		},
		methods: {
			toOss(path) {
				return oss + path;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onAreaClick(item) {
				let p = {};
				p['points'] = item.data;
				let dashArray = [];
				dashArray.push(10);
				dashArray.push(10);
				p['dashArray'] = dashArray;
				p['strokeColor'] = '#FFF';
				p['fillColor'] = '#A500337D';
				this.polygons = [];
				this.polygons.push(p);
				let center = item.center;
				this.latitude = center[1];
				this.longitude = center[0];
			},
		}
	}
</script>

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