|
|
@@ -0,0 +1,269 @@
|
|
|
+<template>
|
|
|
+ <div class="mapItems">
|
|
|
+ <modular-loading :loadding="loadding" tipsText="地图加载中"></modular-loading>
|
|
|
+ <div class="topSelect">
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <div class="mapInit" id="mapInit"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: '',
|
|
|
+ disCountry: '',
|
|
|
+ placeSearch: '',
|
|
|
+ district: null,
|
|
|
+ marker: '',
|
|
|
+ polygons: [],
|
|
|
+ addressName: '', //地址查询名称
|
|
|
+ poisArray: [],
|
|
|
+ loadding: true,
|
|
|
+ mixins_query: {
|
|
|
+ communityId: ''
|
|
|
+ },
|
|
|
+ centet: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ computed: {
|
|
|
+ ...mapState(['homeCommunityAll']),
|
|
|
+ poisArrays() {
|
|
|
+ return this.poisArray;
|
|
|
+ // let arrs = [];
|
|
|
+ // this.poisArray.map((item) => {
|
|
|
+ // if (!!this.mixins_query.communityId) {
|
|
|
+ // if (item.id == this.mixins_query.communityId) {
|
|
|
+ // arrs = [item];
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // arrs = this.poisArray;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // return arrs;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ homeCommunityAll(val) {
|
|
|
+ if (!!val) {
|
|
|
+ this.mixins_query.communityId = val;
|
|
|
+ if (!!this.map) {
|
|
|
+ this.map.clearMap();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.poisArrays.length > 0) {
|
|
|
+ this.addIcon(this.poisArrays);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.map = new AMap.Map('mapInit', {
|
|
|
+ resizeEnable: true, //是否监控地图容器尺寸变化
|
|
|
+ center: this.centet,
|
|
|
+ zoom: 8, //初始化地图层级
|
|
|
+ mapStyle: 'amap://styles/darkblue',
|
|
|
+ defaultCursor: 'pointer'
|
|
|
+ });
|
|
|
+ //地图加载完成监听点击事件
|
|
|
+ this.map.on('complete', () => {
|
|
|
+ this.loadding = false;
|
|
|
+ if (this.poisArrays.length > 0) {
|
|
|
+ this.addIcon(this.poisArrays);
|
|
|
+ }
|
|
|
+ this.mapClick();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ mapClick() {
|
|
|
+ this.map.on('click', (ev) => {
|
|
|
+ this.getAddress([ev.lnglat.lng, ev.lnglat.lat]);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ addIcon(arrs) {
|
|
|
+ let self = this;
|
|
|
+ arrs.map((item) => {
|
|
|
+ self.marker = new AMap.Marker({
|
|
|
+ icon: new AMap.Icon({
|
|
|
+ image: require('@assets/img/icon_point_community.png'),
|
|
|
+ size: new AMap.Size(40, 50),
|
|
|
+ imageSize: new AMap.Size(40, 50)
|
|
|
+ }),
|
|
|
+ position: [item.longitude, item.latitude],
|
|
|
+ map: self.map,
|
|
|
+ communityData: item
|
|
|
+ });
|
|
|
+ self.marker.setLabel({
|
|
|
+ offset: new AMap.Pixel(-15, 50),
|
|
|
+ content: `${item.communityName}`
|
|
|
+ });
|
|
|
+ if (self.poisArrays.length < 2) {
|
|
|
+ self.map.setFitView();
|
|
|
+ }
|
|
|
+ self.marker.on('click', function () {
|
|
|
+ self.setCommunity(this.De.communityData);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setCommunity(its) {
|
|
|
+ this.$store.commit('setHomeCommunityAll', its.id);
|
|
|
+ this.$parent.showMap = false;
|
|
|
+ },
|
|
|
+ //搜索区域
|
|
|
+ districtMask(val) {
|
|
|
+ if (!this.district) {
|
|
|
+ //实例化DistrictSearch
|
|
|
+ var opts = {
|
|
|
+ subdistrict: 0, //获取边界不需要返回下级行政区
|
|
|
+ extensions: 'all', //返回行政区边界坐标组等具体信息
|
|
|
+ level: 'district' //查询行政级别为 市
|
|
|
+ };
|
|
|
+ this.district = new AMap.DistrictSearch(opts);
|
|
|
+ }
|
|
|
+ // this.district.setLevel(val);
|
|
|
+ this.district.search(val, (status, result) => {
|
|
|
+ this.map.remove(this.polygons); //清除上次结果
|
|
|
+ this.polygons = [];
|
|
|
+ var bounds = result.districtList[0].boundaries;
|
|
|
+ if (bounds) {
|
|
|
+ for (var i = 0, l = bounds.length; i < l; i++) {
|
|
|
+ //生成行政区划polygon
|
|
|
+ var polygon = new AMap.Polygon({
|
|
|
+ strokeWeight: 1, //边界宽度
|
|
|
+ path: bounds[i],
|
|
|
+ fillOpacity: 0.3, // 透明度
|
|
|
+ fillColor: '#2887f2',
|
|
|
+ strokeColor: '#2887f2' //边界颜色
|
|
|
+ });
|
|
|
+ this.polygons.push(polygon);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.map.add(this.polygons);
|
|
|
+ this.map.setFitView(this.polygons); //视口自适应
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getAddress(points) {
|
|
|
+ //获取准确地址
|
|
|
+ let geocoder = new AMap.Geocoder({ radius: 1000 });
|
|
|
+ geocoder.getAddress(points, (status, result) => {
|
|
|
+ if (status === 'complete' && result.regeocode) {
|
|
|
+ this.districtMask(result.regeocode.addressComponent.district);
|
|
|
+ } else {
|
|
|
+ this.map.remove(this.polygons);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getPoin(resolve) {
|
|
|
+ this.$http.get('/sc-community/assets/community/list').then(({ data, status, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.poisArray = data;
|
|
|
+ this.centet = this.getPointsCenter(data);
|
|
|
+ resolve && resolve(true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getLoc(resolve) {
|
|
|
+ this.$http.get('/sc-user-center/user/findUserArea').then(({ data, status, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.centet[0] = data.lng;
|
|
|
+ this.centet[1] = data.lat;
|
|
|
+ resolve && resolve(true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getPointsCenter(points) {
|
|
|
+ var point_num = points.length; //坐标点个数
|
|
|
+ var X = 0,
|
|
|
+ Y = 0,
|
|
|
+ Z = 0;
|
|
|
+ for (let i = 0; i < points.length; i++) {
|
|
|
+ if (points[i] == '') {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ var lat, lng, x, y, z;
|
|
|
+ lat = (parseFloat(points[i].latitude) * Math.PI) / 180;
|
|
|
+ lng = (parseFloat(points[i].longitude) * Math.PI) / 180;
|
|
|
+ x = Math.cos(lat) * Math.cos(lng);
|
|
|
+ y = Math.cos(lat) * Math.sin(lng);
|
|
|
+ z = Math.sin(lat);
|
|
|
+ X += x;
|
|
|
+ Y += y;
|
|
|
+ Z += z;
|
|
|
+ }
|
|
|
+ X = X / point_num;
|
|
|
+ Y = Y / point_num;
|
|
|
+ Z = Z / point_num;
|
|
|
+ var tmp_lng = Math.atan2(Y, X);
|
|
|
+ var tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
|
|
|
+
|
|
|
+ return [(tmp_lng * 180) / Math.PI, (tmp_lat * 180) / Math.PI];
|
|
|
+ return [
|
|
|
+ Math.floor(((tmp_lng * 180) / Math.PI) * 1000000) / 1000000,
|
|
|
+ Math.floor(((tmp_lat * 180) / Math.PI) * 1000000) / 1000000
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ this.map && this.map.destroy();
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getPoin();
|
|
|
+ // new Promise((resolve) => {
|
|
|
+ // this.getLoc(resolve);
|
|
|
+ // }).then(() => {
|
|
|
+ // new Promise((resolve) => {
|
|
|
+ // if (!!AMap) {
|
|
|
+ // resolve(true);
|
|
|
+ // }
|
|
|
+ // }).then(() => {
|
|
|
+ // this.init();
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+
|
|
|
+ new Promise((resolve) => {
|
|
|
+ this.getPoin(resolve);
|
|
|
+ }).then(() => {
|
|
|
+ new Promise((resolve) => {
|
|
|
+ if (!!AMap) {
|
|
|
+ resolve(true);
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ this.init();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
+.mapItems {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ color: white;
|
|
|
+ .topSelect {
|
|
|
+ position: absolute;
|
|
|
+ top: rem(15);
|
|
|
+ left: 0;
|
|
|
+ padding: 0 rem(15);
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+#mapInit {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /deep/ .amap-marker-label {
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ text-align: center;
|
|
|
+ min-width: rem(80);
|
|
|
+ min-height: rem(20);
|
|
|
+ line-height: rem(20);
|
|
|
+ box-shadow: 0px 2px 10px 0px rgba(66, 70, 86, 0.08);
|
|
|
+ border: 0 none;
|
|
|
+ white-space: nowrap;
|
|
|
+ box-shadow: 0 0 5px 0rgba (0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Shannon_mu
