Project-Annex/userCenter/src/components/common/MapInit.vue

<template>
    <div class="map-content-div">
        <input type="hidden" v-model="searchPointInfo" />
        <div id="viewDiv"></div>
    </div>
</template>


<script>
import initMap from '@utils/initMap.js';
import location from '@/assets/img/mapdeviceimg/location.png';
export default {
    name: 'map-init',
    mixins: [initMap],
    props: {
        deviceinfo: {
            type: Array,
            default: null
        }
    },
    data() {
        return {
            thislayerView: '',
            map: {},
            // lesseeId: JSON.parse(sessionStorage.getItem("loginInfo")).lesseeId,
            deviceObjData: '',
            addpointGraphic: '',
            addGraphic: '',
            count: 0,
            allserviceType: [],
            graphicsLayer: [],
            selectGislist: '',
            setcenterpoint: '', //中心点
            cityName: '', //城市名称
        };
    },
    computed: {
        searchPointInfo() {
            return this.$store.getters['getSearchPointInfo'].XY;
        }
    },
    created(){
        this.getzoom=2;
    },
    methods: {
        mapviewHandle(){
            this.view.on(['click'], (event) => {
                let point = event.mapPoint;               
                // console.log(point.x, point.y);
                let item = {
                    XY: [point.x, point.y],
                    address: '',
                    id: '',
                    text: ''
                };
                this.$store.commit('setSearchPointInfo', item);
                this.centerAtByPoint();
                this.view.hitTest(event).then((response) => {
                    if (response.results.length) {
                    } else {
                    }
                });
            });
            this.centerAtByPoint();
        },
        centerAtByPointXY(x, y) {
            if(!x||!y){
                // this.$message.error("坐标错误")
                return
            }
            var point = new this.gisConstructor.Point({
                type: 'point',
                x: x,
                y: y,
                spatialReference: this.wkidval
            });
            this.view.center = point;
            this.view.zoom = 2;
        },
        centerAtByPoint() {
            if(this.map.findLayerById('linshiLayer')){
                this.map.remove(this.map.findLayerById('linshiLayer'));
            }
            this.graphicsLayer = new this.gisConstructor.GraphicsLayer({
                id: 'linshiLayer',
                name: '临时图层',
                opacity: 1,
                visible: true
            });
            this.map.add(this.graphicsLayer);
            this.graphicsLayer.removeAll();
            let pointXY = this.searchPointInfo;
            if(!this.searchPointInfo)return 
            var point = new this.gisConstructor.Point({
                type: 'point',
                x: pointXY[0],
                y: pointXY[1],
                spatialReference: this.wkidval
            });
            this.view.center = point;
            this.view.zoom = 18;
            //  var graphicsLayer = new this.gisConstructor.GraphicsLayer({
            //     id: 'linshiLayer',
            //     name: '临时图层',
            //     opacity: 1,
            //     visible: true
            // });
            // this.map.add(graphicsLayer);
            var tempAData = {
                名称: '定位点',
                // "json": string2Array(item.json),
                id: '1111'
                // value: valueval
                // alarm: "",
                // areaName: "",
            };
            // 设置点的样式
            var pictureMarkerSymbol = {
                type: 'picture-marker',
                url: location,
                width: '16px',
                height: '24px'
                // yoffset: '-20px'
            };
            var pointGraphic = new this.gisConstructor.Graphic({
                geometry: point,
                symbol: pictureMarkerSymbol,
                // popupTemplate: popupTemplate,
                attributes: tempAData
            });
            this.graphicsLayer.add(pointGraphic);
        },
        // 模糊查询定位
        fuzzyQueryLocation(queryString,cb){
            
            var findTask = new this.gisConstructor.FindTask(this.baseUrl);
			// FindTask的参数
			var findParams = new this.gisConstructor.FindParameters();
			// 返回Geometry
			findParams.returnGeometry = true;
			// 查询的图层id
			findParams.layerIds = [1,2,3,4,5,6,7];
			// 查询字段
			findParams.searchFields = "TEXTSTRING";
			findParams.searchText = queryString;
			findTask.execute(findParams).then(res=>{
                cb(res.results)
            });
			// findTask.on("complete", lang.hitch(this, function(evt) {
			// 	gisCommonFunction.excuteCallBack(successCallBack, evt.result);
			// }));
        }
    }
};
</script>