|
|
@@ -4,48 +4,80 @@
|
|
|
id="prevMap"
|
|
|
map-id="prevMap"
|
|
|
class="light-map-map"
|
|
|
- :markers="mapLoader.content.value || []"
|
|
|
- :polygons="polygon"
|
|
|
- :polyline="polyline"
|
|
|
:enable-poi="false"
|
|
|
- :scale="10"
|
|
|
+ :scale="12"
|
|
|
:longitude="AppCofig.defaultLonLat[0]"
|
|
|
:latitude="AppCofig.defaultLonLat[1]"
|
|
|
+ @markertap="onMarkerTap"
|
|
|
+
|
|
|
/>
|
|
|
<SimpleDropDownPicker
|
|
|
class="light-map-region-picker"
|
|
|
- v-model:modelValue="selectedRegion"
|
|
|
+ :modelValue="selectedRegion"
|
|
|
+ @update:modelValue="onSelectedRegion"
|
|
|
:columns="regionLoader.content.value"
|
|
|
/>
|
|
|
+ <Button
|
|
|
+ :innerStyle="{
|
|
|
+ position: 'absolute',
|
|
|
+ bottom: '20rpx',
|
|
|
+ right: '20rpx',
|
|
|
+ zIndex: 100,
|
|
|
+ backgroundColor: '#ffffff',
|
|
|
+ }"
|
|
|
+ icon="navigation"
|
|
|
+ size="large"
|
|
|
+ @click="getCurrentLonlat"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { getCurrentInstance, ref, watch } from 'vue';
|
|
|
+import { getCurrentInstance, onMounted, ref, watch } from 'vue';
|
|
|
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
|
|
|
import { geoJsonToWechatMapShapes } from '@/common/utils/geoJsonToWechatMap';
|
|
|
-import LightVillageApi from '@/api/light/LightVillageApi';
|
|
|
+import LightVillageApi, { VillageListItem } from '@/api/light/LightVillageApi';
|
|
|
import MapApi from '@/api/map/MapApi';
|
|
|
import AppCofig from '@/common/config/AppCofig';
|
|
|
import type { MapMarker, MapPolygon, MapPolyline } from '@/types/Map';
|
|
|
import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
|
|
|
+import Button from '@/components/basic/Button.vue';
|
|
|
+import { navTo } from '@/components/utils/PageAction';
|
|
|
+import CommonContent from '@/api/CommonContent';
|
|
|
+import { waitTimeOut } from '@imengyu/imengyu-utils';
|
|
|
|
|
|
const instance = getCurrentInstance();
|
|
|
const mapCtx = uni.createMapContext('prevMap', instance);
|
|
|
const selectedRegion = ref<number>();
|
|
|
+const nextNeedAutoFocus = ref(false);
|
|
|
+const currentAddress = ref<string>('');
|
|
|
+const currentLonlat = ref<{ longitude: number, latitude: number }>({
|
|
|
+ longitude: AppCofig.defaultLonLat[0],
|
|
|
+ latitude: AppCofig.defaultLonLat[1],
|
|
|
+});
|
|
|
+const villageData = new Map<number, VillageListItem>();
|
|
|
+const emit = defineEmits(['getedCurrentLonlat','update:isLightMode']);
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ isLightMode: boolean;
|
|
|
+}>();
|
|
|
|
|
|
const regionLoader = useSimpleDataLoader(async () => {
|
|
|
- return [
|
|
|
- {
|
|
|
- id: undefined as any,
|
|
|
- name: '厦门市 · 湖里区',
|
|
|
- },
|
|
|
- ]
|
|
|
-});
|
|
|
+ return (await CommonContent.getCategoryChildList(5)).map(p => ({
|
|
|
+ id: p.id,
|
|
|
+ name: p.title,
|
|
|
+ }));
|
|
|
+}, false);
|
|
|
const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
|
|
|
- const res = (await LightVillageApi.getVillageList(undefined, selectedRegion.value, undefined, 1, 12)).map((p, i) => {
|
|
|
+ mapCtx.removeMarkers({
|
|
|
+ markerIds: Array.from(villageData.keys()),
|
|
|
+ })
|
|
|
+ villageData.clear();
|
|
|
+
|
|
|
+ await waitTimeOut(200);
|
|
|
+ const res = (await LightVillageApi.getVillageList(undefined, selectedRegion.value, undefined, 1, 100)).map((p, i) => {
|
|
|
+ villageData.set(p.id, p);
|
|
|
const maker : MapMarker = {
|
|
|
- ...p,
|
|
|
id: p.id ?? i,
|
|
|
title: p.villageName,
|
|
|
longitude: Number(p.longitude),
|
|
|
@@ -53,10 +85,13 @@ const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
|
|
|
width: 30,
|
|
|
height: 30,
|
|
|
iconPath: '',
|
|
|
+ joinCluster: true,
|
|
|
callout: {
|
|
|
+ display: 'ALWAYS',
|
|
|
content: p.villageName,
|
|
|
color: '#000000',
|
|
|
fontSize: 12,
|
|
|
+ padding: 5,
|
|
|
bgColor: '#ffffff',
|
|
|
borderRadius: 5,
|
|
|
},
|
|
|
@@ -64,71 +99,149 @@ const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
|
|
|
|
|
|
if (p.isLight) {
|
|
|
if (p.lightValue >= 1) {
|
|
|
- maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightSun.png`;
|
|
|
+ maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/Light3.png`;
|
|
|
} else if (p.lightValue >= 0.5) {
|
|
|
- maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightMoon.png`;
|
|
|
+ maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/Light2.png`;
|
|
|
} else if (p.lightValue >= 0.25) {
|
|
|
- maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightStar.png`;
|
|
|
+ maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/Light1.png`;
|
|
|
} else {
|
|
|
- maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightStar.png`;
|
|
|
+ maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/Light1.png`;
|
|
|
}
|
|
|
- const size = (p.lightValue + 0.5) * 36;
|
|
|
+ const size = Math.floor(25 +(p.lightValue) * 10);
|
|
|
maker.width = size;
|
|
|
maker.height = size;
|
|
|
+
|
|
|
} else {
|
|
|
- maker.width = 15;
|
|
|
- maker.height = 15;
|
|
|
- maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/StarNotLight.png`;
|
|
|
+ maker.width = 25;
|
|
|
+ maker.height = 25;
|
|
|
+ maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightUnLight.png`;
|
|
|
}
|
|
|
|
|
|
return maker as MapMarker;
|
|
|
});
|
|
|
|
|
|
- /* const countryGeoJsonData = await MapApi.loadCountryGeoJsonData();
|
|
|
- const { polygons, polylines: geoPolylines } = geoJsonToWechatMapShapes(countryGeoJsonData, {
|
|
|
- fillColor: '#344A41',
|
|
|
- strokeColor: '#4AB58A',
|
|
|
- strokeWidth: 2,
|
|
|
- level: 'abovebuildings',
|
|
|
- });
|
|
|
- polygon.value.push(...polygons);
|
|
|
- polyline.value = geoPolylines; */
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- mapCtx.includePoints({
|
|
|
- points: res.map(p => {
|
|
|
- if (!p.longitude || !p.latitude) {
|
|
|
- p.longitude = AppCofig.defaultLonLat[0];
|
|
|
- p.latitude = AppCofig.defaultLonLat[1];
|
|
|
- }
|
|
|
- return {
|
|
|
- latitude: p.latitude,
|
|
|
- longitude: p.longitude,
|
|
|
- }
|
|
|
- }),
|
|
|
- padding: [20, 20, 20, 20],
|
|
|
- });
|
|
|
- }, 200);
|
|
|
+ mapCtx.addMarkers({
|
|
|
+ clear: true,
|
|
|
+ markers: res,
|
|
|
+ })
|
|
|
+
|
|
|
+ if (nextNeedAutoFocus.value) {
|
|
|
+ setTimeout(() => {
|
|
|
+ mapCtx.includePoints({
|
|
|
+ points: res.map(p => {
|
|
|
+ if (!p.longitude || !p.latitude) {
|
|
|
+ p.longitude = AppCofig.defaultLonLat[0];
|
|
|
+ p.latitude = AppCofig.defaultLonLat[1];
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ latitude: p.latitude,
|
|
|
+ longitude: p.longitude,
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ padding: [20, 20, 20, 20],
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
|
|
|
return res;
|
|
|
-});
|
|
|
+}, false, false, true);
|
|
|
+
|
|
|
+function onMarkerTap(e: any) {
|
|
|
+ if (props.isLightMode) {
|
|
|
+ emit('update:isLightMode', false);
|
|
|
+ navTo('/pages/home/light/submit', {
|
|
|
+ villageId: e.markerId,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const village = villageData.get(e.markerId);
|
|
|
+ if (village) {
|
|
|
+ uni.setStorageSync('VillageTemp', JSON.stringify(village));
|
|
|
+ setTimeout(() => {
|
|
|
+ navTo('/pages/home/light/details', { id: village.id });
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
+}
|
|
|
+function onSelectedRegion(regionId: number) {
|
|
|
+ selectedRegion.value = regionId;
|
|
|
+ nextNeedAutoFocus.value = true;
|
|
|
+ mapLoader.loadData(undefined, true);
|
|
|
+}
|
|
|
|
|
|
-const polygon = ref<MapPolygon[]>([
|
|
|
- /* {
|
|
|
- fillColor: '#000',
|
|
|
- level: 'abovebuildings',
|
|
|
- points: [
|
|
|
- { latitude: -89, longitude: 0 },
|
|
|
- { latitude: 89, longitude: 0 },
|
|
|
- { latitude: 89, longitude: 179.999 },
|
|
|
- { latitude: -89, longitude: 179.999 },
|
|
|
- ]
|
|
|
- } */
|
|
|
-]);
|
|
|
-const polyline = ref<MapPolyline[]>([]);
|
|
|
-
|
|
|
-watch(selectedRegion, async () => {
|
|
|
+function setCurrentRegion(regionName: string) {
|
|
|
+ selectedRegion.value = regionLoader.content.value?.find(p => p.name == regionName)?.id || undefined;
|
|
|
mapLoader.loadData(undefined, true);
|
|
|
+}
|
|
|
+
|
|
|
+function getCurrentLonlat() {
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: async (res) => {
|
|
|
+ currentLonlat.value = {
|
|
|
+ longitude: res.longitude,
|
|
|
+ latitude: res.latitude,
|
|
|
+ };
|
|
|
+ const address = await MapApi.regeo(res.latitude, res.longitude);
|
|
|
+ currentAddress.value = address.district;
|
|
|
+ setCurrentRegion(address.district);
|
|
|
+ emit('getedCurrentLonlat', currentLonlat.value);
|
|
|
+ mapCtx.moveToLocation({
|
|
|
+ latitude: currentLonlat.value.latitude,
|
|
|
+ longitude: currentLonlat.value.longitude,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ mapCtx.initMarkerCluster({
|
|
|
+ enableDefaultStyle: false,
|
|
|
+ zoomOnClick: true,
|
|
|
+ gridSize: 40,
|
|
|
+ });
|
|
|
+ mapCtx.on('markerClusterCreate', (e: { clusters: any[] }) => {
|
|
|
+ const customClusters = e.clusters.map((cluster) => {
|
|
|
+ const { center, clusterId, markerIds } = cluster;
|
|
|
+ return {
|
|
|
+ ...center,
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ clusterId,
|
|
|
+ label: {
|
|
|
+ content: markerIds.length.toString(), // 聚合点的数量
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#fff',
|
|
|
+ width: 30,
|
|
|
+ height: 30,
|
|
|
+ bgColor: '#8bb346', // 背景颜色
|
|
|
+ borderRadius: 25,
|
|
|
+ textAlign: 'center',
|
|
|
+ anchorX: -10,
|
|
|
+ anchorY: -35,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ mapCtx.addMarkers({
|
|
|
+ markers: customClusters,
|
|
|
+ clear: false,
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ await regionLoader.loadData(undefined, true);
|
|
|
+
|
|
|
+ const res = await LightVillageApi.getIpAddress();
|
|
|
+ currentLonlat.value = {
|
|
|
+ longitude: Number(res.point.x),
|
|
|
+ latitude: Number(res.point.y),
|
|
|
+ };
|
|
|
+ await waitTimeOut(100);
|
|
|
+ currentAddress.value = res.address_detail.district;
|
|
|
+ setCurrentRegion(res.address_detail.district);
|
|
|
+ emit('getedCurrentLonlat', currentLonlat.value);
|
|
|
+ mapCtx.moveToLocation({
|
|
|
+ latitude: currentLonlat.value.latitude,
|
|
|
+ longitude: currentLonlat.value.longitude,
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
@@ -153,5 +266,12 @@ watch(selectedRegion, async () => {
|
|
|
transform: translateX(-50%);
|
|
|
z-index: 100;
|
|
|
}
|
|
|
+
|
|
|
+ .light-map-address {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|