You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.5 KiB
113 lines
2.5 KiB
<template>
|
|
<view>
|
|
<view class="m-mapbox">
|
|
<map class="m-map" name="" :longitude="longitude" :latitude="latitude" :polygons="polygons" enable-satellite="true"></map>
|
|
<view class="m-shadow">
|
|
<view class="m-mj">{{ blockData.blockArea || '0' }}亩</view>
|
|
<view class="m-type"><dict-tag :type="'land_type'" :value="blockData.blockType" class="m-dic-tag" /></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import DictTag from '@/components/DictTag/index.vue';
|
|
export default {
|
|
components: {
|
|
DictTag
|
|
},
|
|
data() {
|
|
return {
|
|
blockData: undefined,
|
|
polygons: [],
|
|
includePoints: [],
|
|
longitude: null,
|
|
latitude: null
|
|
};
|
|
},
|
|
onReady() {},
|
|
onLoad: function (option) {
|
|
//option为object类型，会序列化上个页面传递的参数
|
|
const obj = JSON.parse(option.val);
|
|
console.log(obj);
|
|
this.blockData = obj;
|
|
},
|
|
mounted() {
|
|
this.initmapPolygon();
|
|
},
|
|
methods: {
|
|
initmapPolygon() {
|
|
let this_ = this;
|
|
const mapCon = uni.createMapContext('map');
|
|
const arr = JSON.parse(this.blockData.positionStr);
|
|
const center = this_.calculateCenter(arr);
|
|
let Arr = arr.map((item) => {
|
|
const obj = {
|
|
latitude: item[1],
|
|
longitude: item[0]
|
|
};
|
|
return obj;
|
|
});
|
|
console.log(Arr);
|
|
let Obj = {
|
|
points: Arr,
|
|
strokeColor: this_.blockData.blockColor && this_.blockData.blockColor != null ? this_.blockData.blockColor : '#007969',
|
|
fillColor: this_.blockData.blockColor && this_.blockData.blockColor != null ? this_.blockData.blockColor + '5c' : '#0079695c',
|
|
zIndex: 1
|
|
};
|
|
this_.$nextTick(() => {
|
|
this_.polygons.push(Obj);
|
|
mapCon.includePoints({
|
|
padding: [20, 20, 20, 20],
|
|
points: Arr
|
|
});
|
|
this_.longitude = center[0];
|
|
this_.latitude = center[1];
|
|
});
|
|
},
|
|
//计算中心点
|
|
calculateCenter(coordinates) {
|
|
let sumLat = 0;
|
|
let sumLng = 0;
|
|
coordinates.forEach((coord) => {
|
|
sumLat += coord[0];
|
|
sumLng += coord[1];
|
|
});
|
|
const count = coordinates.length;
|
|
const centerLat = sumLat / count;
|
|
const centerLng = sumLng / count;
|
|
return [centerLat, centerLng];
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.m-mapbox {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.m-map {
|
|
width: 100%;
|
|
height: 550rpx;
|
|
}
|
|
|
|
.m-shadow {
|
|
display: flex;
|
|
position: absolute;
|
|
bottom: 0;
|
|
white-space: nowrap;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: #eee;
|
|
padding: 15rpx 20rpx;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
|
|
/deep/ .m-dic-tag .v-dict-text {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|