TaicangPopulationApp2/pages/building/map.vue

<template>
	<navigation-general :title="title">
		<template v-slot:right>
			<view class="nav-right">
				<view class="right-item">共{{buildData.length}}户</view>
				<view class="right-item">该层未排查{{weiPaimo}}户</view>
			</view>
		</template>
		<view class="floor-list" :style="{top:boxTop + 'rpx'}" :msg="mapData" :change:msg="leaflet.receiveMsg">
			<view :class="currentIndex == index ? 'active-foolt' : ''" v-for="(item, index) in list" :key="index"
				@click="clickFoort(item,index)">
				{{ item.name }}
			</view>
		</view>
		<view id="map" class="map"></view>
	</navigation-general>
</template>
//逻辑层级
<script>
	import {
		handleColor
	} from '@/utils/handlerColor.js'
	import buildjson from "./buildjson/buildjson";
	import {
		getNumNew
	} from "@/api/taicangpop/data";
	export default {
		data() {
			return {
				currentIndex: null,
				boxTop: 0,
				title: '',
				deptname: '',

				weiPaimo: 0,
				totalHouse: 0,
				mapData: null,
				buildData: [],
			}
		},
		onLoad(opt) {
			const systemData = this.$u.sys()
			this.boxTop = (systemData.statusBarHeight + 44) * 2 + 20
			this.title = opt.name
			this.deptname = opt.deptname + opt.name
			this.buildingId = opt.buildingId
		
		},
		onShow(){
			this.getBuildData()
		},
		methods: {
			// 获取该楼层数据
			async getBuildData(index) {
				this.list = buildjson[this.deptname.replace("幢", "")];
				let res = await getNumNew({
					buildingId: this.buildingId,
				});
				this.buildData = res.data

				this.clickFoort(this.list[0], 0)


			},

			filterListData(index) {
				this.weiPaimo = 0
				this.list[index].json.features.map(item => {

					let houseItem = this.buildData.find(
						(it) =>
						it.name.replace("室", "") == item.properties.TextString
					);
					if (houseItem && houseItem.id) {
						if (item.daycount > 0) {
							this.weiPaimo = item.weiPaimo + 1
						}
						houseItem = handleColor([houseItem])[0]
						item.properties = {
							...item.properties,
							...houseItem
						};
					}


				})

			},

			clickFoort(item, index) {
				if (this.currentIndex == index) return
				this.filterListData(index)
				this.mapData = item
				this.currentIndex = index
			},
			// 接收renderjs发回的数据

			reciveMessage(val) {
				if (val.isNoHouse) {
					uni.showToast({
						title: val.title,
						icon: 'none'
					})
				} else if (val.isRouter) {
					this.$u.route({
						url: 'pages/house/house',
						params: val.params
					})
				}
				console.log('receiveRenderData-->', val);

			}
		}
	}
</script>
//试图层级
<script module="leaflet" lang="renderjs">
	import "leaflet/dist/leaflet.css"
	import L from "leaflet"

	let globalMap = null

	export default {
		data() {
			return {
				mapData: null,
				mapLayer: {
					geoJsonLayer: null,
				},
				geojson: null,
				previousLayer: null,
				highlightStyle: {
					fill: true,
					fillColor: "#FD873F",
					fillOpacity: 0.9,
					color: "#02F5FF", //描边颜色
					weight: 2, //描边宽度
				},
			}
		},
		mounted() {
			this.initMap()

		},
		methods: {
			initMap() {
				globalMap = L.map('map', {
					center: [31.47687, 121.11881], // 地图中心[纬度，经度]
					zoom: 11, // 地图层级
					maxZoom: 22,
					minZoom: 11,
					zoomControl: false, // 放大缩小按钮
					attributionControl: false, // 右下角leaflet图标
				})

				// L.tileLayer(
				// 		'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=9813be7882272b227babab98c39a64b6')
				// 	.addTo(globalMap)
				globalMap.createPane("geoJsonLayer");
				globalMap.getPane("geoJsonLayer").style.zIndex = 502;
				globalMap.getPane("geoJsonLayer").style.pointerEvents = "none";
				this.mapLayer.geoJsonLayer = L.featureGroup().addTo(globalMap);

				globalMap.createPane("marker");
				globalMap.getPane("marker").style.zIndex = 503;
				globalMap.getPane("marker").style.pointerEvents = "none";
				this.mapLayer.marker = L.featureGroup().addTo(globalMap);

				globalMap.on("zoomend", (e) => {
					let zoom = globalMap.getZoom();
					if (zoom <= 19) {
						globalMap.removeLayer(this.mapLayer.marker);
					} else {
						globalMap.addLayer(this.mapLayer.marker);
					}
				});
			},


			// 接收逻辑层发送的数据
			receiveMsg(newValue, oldValue, ownerVm, vm) {
				console.log('ssss', newValue)
				if (!newValue) return

				this.clickFloor(newValue)
				//数据变化

			},

			clickFloor(item) {
				if (item && item.disable) {
					this.sendMsg({
						isNoHouse: true,
						title: '该楼层功能正在开发中！'
					})

					return;
				}
				this.mapLayer.geoJsonLayer.clearLayers();
				this.mapLayer.marker.clearLayers();
				this.geojson = null;
				this.initPolygon(item.json);
			},

			// 渲染面
			initPolygon(json) {
				this.geojson = L.geoJSON(json, {
					pane: "geoJsonLayer",
					style: {
						fill: true,
						fillColor: "#0B3369",
						fillOpacity: 0.9,
						color: "#02F5FF", //描边颜色
						weight: 2, //描边宽度
					},
					onEachFeature: (feature, layer) => {
						const attr = feature.properties;
						// console.log(attr, 'ssss')


						const point = layer._bounds.getCenter();
						this.addTextMarker(attr, point);

						layer.on("click", (e) => {
							const item = e.target.feature.properties;
							if (item.TextString == null) return;
							if (!item.id) {
								this.sendMsg({
									isNoHouse: true,
									title: '该户数据缺失,请联系管理员!'
								})

								return;
							}


							if (this.previousLayer) {
								this.geojson.resetStyle(this.previousLayer);
							}
							this.previousLayer = layer;
							layer.setStyle(this.highlightStyle);

							this.sendMsg({
								isRouter: true,
								params: {
									buildingId: item.building_id,
									houseId: item.id,
									deptId: item.dept_id,
									houseName: item.name
								}
							})

						});
					},
				}).addTo(this.mapLayer.geoJsonLayer);

				globalMap.fitBounds(this.geojson.getBounds());
			},
			addTextMarker(attr, point) {
				if (attr.TextString == null) return;
				var myIcon = L.divIcon({
					className: "building-marker",
					html: `<div class="houser">
				          <div class="point-color">
				            <div  style="background: red;display:${
				              attr.daycount > 0 ? "block" : "none"
				            }"></div>
				            <div style="background: green;display:${
				              attr.daycount == 0 ? "block" : "none"
				            }"></div>
				            </div>
				          <div class="house-is">
						  <div class="is_d is_type"  style="display:${attr.is_d ? "block" : "none"}"> </div>
						  <div class="is_j is_type"  style="display:${attr.is_j ? "block" : "none"}"> </div>
						  <div class="is_k is_type"  style="display:${attr.is_k ? "block" : "none"}"> </div>
						  <div class="is_x is_type"  style="display:${attr.is_x ? "block" : "none"}"> </div>
				            
				            </div>
				            <div class="house-name">${attr.TextString}</div>
				            <div class="left-color" style="background:${attr.leftColor}"></div>
				            <div class="right-color">
				            <div style=" background: ${attr.rightTopColor} "></div>
				            <div
				              class="rigth-bottom"
				              style="display:${
				                attr.color == "HF" || attr.color == "NF" ? "block" : "none"
				              }"
				            ></div>
				          </div>
				          </div>`,
				});
				L.marker([point.lat, point.lng], {
					icon: myIcon,
					interactive: false, //禁止marker交互，防止遮挡点不到面
				}).addTo(this.mapLayer.marker);
			},
			sendMsg(item) {
				// 向页面传参
				this.$ownerInstance.callMethod('reciveMessage', item)
			},
		}
	}
</script>



<style lang="scss" scoped>
	.app-container {
		position: relative;

		.nav-right {
			margin-right: 14rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.right-item {
				box-sizing: border-box;
				padding: 0 6rpx;
				font-size: 22rpx;
				background: #fff;
				color: red;
			}

			.right-item:last-child {
				margin-top: 4rpx;
				background-color: red;
				color: #fff;
			}
		}

		.floor-list {
			position: absolute;
			left: 0;
			z-index: 600;
			width: 260rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			/* 每行两个元素 */
			gap: 10px;
			/* 元素之间的间距 */
			padding: 16rpx;

			/* 容器内边距 */
			&>view {
				text-align: center;
				color: #fff;
				cursor: pointer;
				padding: 8rpx 12rpx;
				font-size: 30rpx;
				border: 1px solid #0075b7;
				border-radius: 6px;
				margin-bottom: 6px;
				background: #031c3c;
			}

			&>div:hover,
			.active-foolt {
				background: #1292c7 !important;
			}
		}
	}

	.map {
		width: 100%;
		height: 100vh;
	}
</style>