fj-dc-ui/.svn/pristine/66/664d33538b3084032674e1c8b2e46bf8839b58e8.svn-base

<template>
    <div id="mapToolBarContainer_hhjc">
        <div id="mapTopToolBar">
            <div style="padding-left: 10px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                <!-- <p style="margin-left:0%;margin-right:10px;display:inline;color:rgb(129, 131, 135);">
                    导航:
                </p> -->
                <img src="../assets/daohang.png" style="width: 20px;">
                <el-button  :icon="this.showXzqPanel ?'el-icon-arrow-up':'el-icon-arrow-down'"
                    @click="showPanel('navi')" style="border-radius: 5px;padding: 5px 5px;" size="small ">{{currentStatus.currentTitle}}</el-button>
            </div>
            <div style="padding-left: 20px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                <img src="../assets/tool.png" style="width: 20px;">
                <el-button  :icon="this.showToolPanel ?'el-icon-arrow-up':'el-icon-arrow-down'"
                    @click="showToolPanelHandler()" style="border-radius: 5px;padding: 5px 5px;" size="small ">工具箱</el-button>
            </div>
            <!-- <div style="width: 70px;margin-left:40px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                <p style="margin-left:0%;margin-right:10px;display:inline;color:rgb(129, 131, 135);">
                    <i class="el-icon-location"></i>地图工具:
                </p>
                <img src="../assets/distance.png" class="imgClass" title="测距" @click="mapToolHandler('distance')">
                <img src="../assets/area.png" class="imgClass" title="测面" @click="mapToolHandler('area')">
                <img src="../assets/clear.png" class="imgClass" title="清除" @click="mapToolHandler('clear')">
            </div> -->
        </div>
        <div class="xzqPanelClass">
            <div v-if="showXzqPanel">
                <div style="min-height:30px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px solid rgb(240,240,240)">
                    <div style="display:flex;flex-direction:row;">
                        <p style="font-size:14px;margin-left:10px;padding-top: 5px;color:rgb(173,177,192)">当前:</p>
                        <p class="naviClickableLink" v-for="step in naviStateStack" @click="backToStep(step)" style="color: blue;font-size:14px;padding-left:5px;">{{step.title}}</p>
                    </div>
                    <!-- <div style="display:flex;flex-direction:row;padding-right: 5px;cursor: pointer;">
                            <span class="el-icon-circle-close-outline" @click="closeNavigationPanel"></span>
                    </div> -->
                </div>
                <div style="display:flex;flex-direction:row;margin-top:5px;">
                    <p style="font-size:small;color:rgb(173,177,192);margin-left:10px;">行政区列表:</p>
                </div>
                <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap;border-bottom:1px solid rgb(240,240,240);max-height:300px;overflow:auto;"> 
                    <p class="naviClickableLink" style="flex-shrink:1;flex-grow:0;color: blue;" v-for="nextxzq in nextLevelXzq" :key="nextxzq.adCode" @click="clickAd(nextxzq)">{{nextxzq.adName}}</p>
                </div>
            </div>
        </div>
        <div class="toolPanelClass">
            <div v-if=showToolPanel>
                <transition name="el-zoom-in-top">
                    <ul role="menu" id="cascader-menu-1602" class="mapRightMenu" style="margin-left: 118px;width: 80px;">
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('fullExtent')">
                            <img src="../assets/fullExtent.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">全图</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('biaoji')">
                            <img src="../assets/bjR.png" alt="" style="height:17px;margin-right: 9px;margin-left: 5px;">
                            <p class="pClass">标记</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('daohang')">
                            <img src="../assets/daohang1.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">导航</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('measureDistance')">
                            <img src="../assets/distance.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">测距</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem" @click="click('measureArea')">
                            <img src="../assets/area.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">测面</p>
                        </li>
                        <li tabindex="-1" role="menuitem" aria-haspopup="true" aria-owns="menu-8696-1" 
                            class="menuItem"  @click="click('clear')">
                            <img src="../assets/clear.png" alt="" style="height:17px;margin-right:5px;">
                            <p class="pClass">清除</p>
                        </li>
                    </ul>
                </transition>
            </div>
        </div>
        <div id="daohangContainer" class="daohangContainerClass" v-if="showDaoHangPanel">
            <div style="height:30px;float:right;">
                <i class="el-icon-close" @click="closeDaoHangPanel" style="padding-right: 5px;color: #dbdbdb;cursor:pointer;"></i>
                <!-- <ul class="tabs dir_tab col3 z-depth-1 clearfix" id="trafficTab">  -->
                    <!-- <li :class="{'trafficActivity':showDaoHanButton=='car'}" style="display: flex;align-items: center;justify-content: center;"> 
                        <img src="../assets/car.png" alt="" @click="chooseTraffic('car')" style="height:19px;width:19px;cursor:pointer;">
                    </li> -->
                    <!-- <li :class="{'trafficActivity':showDaoHanButton=='bus'}" style="display: flex;align-items: center;justify-content: center;"> 
                        <img src="../assets/bus.png" alt="" @click="chooseTraffic('bus')" style="height:20px;width:19px;cursor:pointer;">
                    </li> 
                    <li :class="{'trafficActivity':showDaoHanButton=='walk'}" style="display: flex;align-items: center;justify-content: center;"> 
                        <img src="../assets/walk.png" alt="" @click="chooseTraffic('walk')" style="height:19px;width:24px;cursor:pointer;">
                    </li>  -->
                <!-- </ul> -->
            </div>
            <div style="display: flex;width: 100%;align-items: center;padding-top: 10px;">
                <div>
                    <img src="../assets/jiaohuan.png" alt="" @click="startChangeEndHandler" style="height:40px;width:40px;cursor:pointer;">
                </div>
                <div>
                    <el-input placeholder="请输入起点" v-model="startText" clearable @focus="startFocusHandler"
                        style="padding-bottom: 5px;width: 250px;height: 35px;"></el-input>
                    <el-input placeholder="请输入终点" v-model="endText" clearable @focus="endFocusHandler"
                        style="padding-bottom: 5px;width: 250px;height: 35px;"></el-input>
                </div>
            </div>
            <div style="float: right;padding-top: 10px;padding-right: 30px;">
                <el-button type="primary" v-show="showDaoHanButton == 'car'" @click="trafficButtonClick('car')" size="mini">导航</el-button>
                <el-button type="primary" v-show="showDaoHanButton == 'bus'" @click="trafficButtonClick('bus')" size="mini">公交</el-button>
                <el-button type="primary" v-show="showDaoHanButton == 'walk'" @click="trafficButtonClick('walk')" size="mini">步行</el-button>
            </div>
        </div>
        <div id="poiContainer" class="poiClass" v-if="showPoiList">
            <div class="poiListClass" v-for="(item,index) in pois" :key="index" @click="poiListClick(item)">
                <span style="color: blue;">{{item.name}}</span>
                <span style="font-size: small;color: #aaaaaa;padding-left: 10px;">{{item.cityname}}{{item.adname}}</span>
            </div>
        </div>
        <div id="stepContainer" class="stepClass" v-if="showStepPanel">
            <div style="display:flex;justify-content: space-around;">
                <div style="padding: 5px;padding-top: 10px;">
                    <span>约</span>
                    <span style="color:blue;">{{(trafficSteps.duration/3600).toFixed(1)}}</span>
                    <span>个小时</span>
                </div>
                <div style="margin-top: 13px;width: 2px;height: 15px;background: #000;"></div>
                <div style="padding: 5px;padding-top: 10px;">
                    <span style="color:blue;">{{(trafficSteps.distance/1000).toFixed(1)}}</span>
                    <span>公里</span>
                </div>
                <!-- <div style="margin-top: 13px;width: 1.5px;height: 15px;background: #000;"></div>
                <div style="padding: 5px;padding-top: 10px;">
                    <span>红绿灯</span>
                    <span style="color:red;">{{trafficSteps.traffic_lights}}</span>
                    <span>个</span>
                </div> -->
            </div>
            <div style="padding-left: 20px;">
                <el-collapse accordion>
                    <el-collapse-item v-for="(item,index) in trafficSteps.steps" :key="index">
                        <template slot="title">
                            {{typeof(item.road) == "undefined"?"无名路":item.road}}<span style="padding-left: 20px;color: #938f8f;">{{(item.distance/1000).toFixed(1)}}km</span>
                        </template>
                        <div style="cursor:pointer;" @click="detailRouteOnMap(item)">{{item.instruction}}</div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
        <div id="biaojiContainer" class="stepClass" v-if="showBiaoJiPanel">
            <div style="padding-left: 20px;">
                <el-collapse accordion>
                    <el-collapse-item v-for="(item,index) in tableResultData" :key="index">
                        <template slot="title">
                            {{item.inteName}}
                        </template>
                        <div style="cursor:pointer;" @click="clickBiaoJiHandler(item)">{{item.des}}</div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
    </div>
</template>
<script>
const options = {
  url: "/arcgisApi/4.7/init.js"
};
import { getAdData} from "../../../api/duChaAPI.js";
import {getMyBiaoJi} from '../../../api/zhxxAPI.js'
import {_getLngLat} from '../js/mercatorToLngLat'
import request from "../../../utils/gw_ajax_request.js"
import axios from 'axios'
import _default,* as esriLoader from "esri-loader";
export default {
    components: {
        
    },
    props:['view','map','fullExtent'],
    data () {
        return {
            currentText:'',//当前输入的是 起点还是终点
            currentStartLocation:'',//起点经纬度  字符串
            currentEndLocation:'',//终点经纬度
            showDaoHangPanel:false,
            showDaoHanButton:'car',
            startText:'',
            endText:'',
            currentStatus:{
                currentType:'global',
                currentTitle:'全国',
                currentCode:'000000000000',
            },
            naviStateStack:[{title:'全国',type:'global',code:'000000000000'}],
            currentAdCode:'',
            currentAdName:'',
            nextLevelXzq:[],
            showXzqPanel:false,
            showToolPanel:false,
            viewObject:null,
            mapObject:null,
            fullExtent1:null,
            measureGraphicLayer:null,
            measureLengthGraphicLayer_lable:null,
            draw:null,//测量对象
            pois:[],
            showPoiList:false,
            trafficSteps:{},//交通路线
            showStepPanel:false,
            showBiaoJiPanel:false,//标记list
            tableResultData:[],//标记列表
            currentFocus:''//当前focus位置  起点还是终点
        }
    },
    computed:{
		userId: function () {
            return localStorage.getItem("userid") ?localStorage.getItem("userid") : "1098101939614724096";
        },
	},
    mounted:function() {
        this.currentAdCode = localStorage.getItem('areacode') ? localStorage.getItem('areacode') : '000000000000';
        this.currentAdName = localStorage.getItem('areaname') ? localStorage.getItem('areaname') : '全国';
        if(this.currentAdCode == "undefined"){
            this.currentAdCode = '000000000000';
        }
        this.currentStatus.currentCode = this.currentAdCode;
        this.currentStatus.currentTitle = this.currentAdName;
        this.getAdData();
        this.viewObject = this.view;
        this.mapObject = this.map;
        this.startText = '';
        this.endText = '';
    },
    watch: {
        view(n,o){
            this.viewObject = n;
        },
        map(n,o){
            this.mapObject = n;
        },
        fullExtent(n,o){
            this.fullExtent1 = n;
        },
        startText(n,o){
            this.inputChange(n,'start')
        },
        endText(n,o){
            this.inputChange(n,'end')
        },
    },
    methods: {
        closeDaoHangPanel(){
            this.showDaoHangPanel = false;
            this.showPoiList = false;
            this.showStepPanel = false;
            this.showBiaoJiPanel = false;
            var daohangGraphicLayer = this.mapObject.findLayerById("daohangGraphicLayer");
            daohangGraphicLayer.removeAll();
            daohangGraphicLayer.visible = false;
            var daohangGraphicLayer1 = this.mapObject.findLayerById("daohangGraphicLayer1");
            daohangGraphicLayer1.removeAll();
            daohangGraphicLayer1.visible = false;
        },
        detailRouteOnMap(item){//定位具体路线
            var _self = this;
            esriLoader.loadModules(["esri/Graphic","esri/views/2d/draw/Draw","esri/geometry/SpatialReference",
                "esri/geometry/Polyline","esri/layers/GraphicsLayer","esri/geometry/geometryEngine",
                "esri/geometry/Point","dojo/domReady!"],options).then((
                [Graphic,Draw,SpatialReference,Polyline,GraphicsLayer,geometryEngine,Point]) => {
                    var arr1 = item.tmcs;
                    var gras = [];
                    for(var n=0;n<arr1.length;n++){
                        var str = arr1[n].polyline;
                        var arr2 = str.split(";");
                        var vertices = [];
                        for(var j=0;j<arr2.length;j++){
                            var arr3 = arr2[j].split(",");
                            var arr4 = [];
                            for(var m=0;m<arr3.length;m++){
                                arr4.push(parseFloat(arr3[m]));
                            }
                            vertices.push(arr4);
                        }
                        var polyline = new Polyline({
                            paths: [vertices],
                            spatialReference: 4326
                        });
                        var gra = new Graphic({
                            geometry: polyline,
                            symbol: {
                                type: "simple-line", 
                                color: "green",
                                width: "5px",
                                style: "solid",
                                cap:"round"
                            }
                        });
                        gras.push(gra);
                    }
                   _self.viewObject.goTo({
                        target:gras
                    }).then((r)=>{
                        var lod = _self.viewObject.zoom - 2;
                        console.log(lod);
                        _self.viewObject.goTo({
                            target:gras,
                            zoom:lod
                        })
                    })
            }).catch(err => {
                console.error(err);
            });
        },
        showRouteOnMap(){//地图上展示导航路线
            var _self = this;
            esriLoader.loadModules(["esri/Graphic","esri/views/2d/draw/Draw","esri/geometry/SpatialReference",
                "esri/geometry/Polyline","esri/layers/GraphicsLayer","esri/geometry/geometryEngine",
                "esri/geometry/Point","dojo/domReady!"],options).then((
                [Graphic,Draw,SpatialReference,Polyline,GraphicsLayer,geometryEngine,Point]) => {
                    var daohangGraphicLayer = _self.mapObject.findLayerById("daohangGraphicLayer");
                    daohangGraphicLayer.removeAll();
                    daohangGraphicLayer.visible = true;
                    var daohangGraphicLayer1 = _self.mapObject.findLayerById("daohangGraphicLayer1");
                    daohangGraphicLayer1.removeAll();
                    daohangGraphicLayer1.visible = true;
                    if(_self.currentStartLocation && _self.currentEndLocation){
                        var arr3 = _self.currentStartLocation.split(",");
                        var arr4 = [];
                        for(var m1=0;m1<arr3.length;m1++){
                            arr4.push(parseFloat(arr3[m1]));
                        }
                        var pt_start = new Point(arr4[0],arr4[1],new SpatialReference(4326));
                        var gra_start = new Graphic({
                            geometry:pt_start,
                            symbol:{
                                type: "picture-marker", 
                                url: "/src/views/zongHeXinXiNew/assets/xhstart.png",
                                width: "40px",
                                height: "40px"
                            }
                        })
                        daohangGraphicLayer1.add(gra_start);
                        var arr5 = _self.currentEndLocation.split(",");
                        var arr6 = [];
                        for(var m2=0;m2<arr5.length;m2++){
                            arr6.push(parseFloat(arr5[m2]));
                        }
                        var pt_end = new Point(arr6[0],arr6[1],new SpatialReference(4326));
                        var gra_end = new Graphic({
                            geometry:pt_end,
                            symbol:{
                                type: "picture-marker", 
                                url: "/src/views/zongHeXinXiNew/assets/xhend.png",
                                width: "40px",
                                height: "40px"
                            }
                        })
                        daohangGraphicLayer1.add(gra_end);
                    }
                    var symbol_green = {
                        type: "simple-line", 
                        color: "green",
                        width: "5px",
                        style: "solid",
                        cap:"round"
                    };
                    var symbol_yellow = {
                        type: "simple-line", 
                        color: "yellow",
                        width: "5px",
                        style: "solid",
                        cap:"round"
                    };
                    var symbol_red = {
                        type: "simple-line", 
                        color: "red",
                        width: "5px",
                        style: "solid",
                        cap:"round"
                    };
                    var symbol_red1 = {
                        type: "simple-line", 
                        color: "#700000",
                        width: "5px",
                        style: "solid",
                        cap:"round"
                    };
                    var arr = _self.trafficSteps.steps;
                    for(var i=0;i<arr.length;i++){
                        var arr1 = arr[i].tmcs;
                        for(var n=0;n<arr1.length;n++){
                            var str = arr1[n].polyline;
                            var arr2 = str.split(";");
                            var vertices = [];
                            for(var j=0;j<arr2.length;j++){
                                var arr3 = arr2[j].split(",");
                                var arr4 = [];
                                for(var m=0;m<arr3.length;m++){
                                    arr4.push(parseFloat(arr3[m]));
                                }
                                vertices.push(arr4);
                            }
                            var polyline = new Polyline({
                                paths: [vertices],
                                spatialReference: 4326
                            });
                            var symbol;
                            if(arr1[n].status == "缓行"){
                                symbol = symbol_yellow
                            }else if(arr1[n].status == "拥堵"){
                                symbol = symbol_red
                            }else if(arr1[n].status == "严重拥堵"){
                                symbol = symbol_red1
                            }else{
                                symbol = symbol_green
                            }
                            var gra = new Graphic({
                                geometry: polyline,
                                symbol: symbol
                            });
                            daohangGraphicLayer.add(gra);
                        }
                    }
                    _self.viewObject.goTo({
                        target:daohangGraphicLayer1.graphics
                    }).then((r)=>{
                        var lod = _self.viewObject.zoom - 1;
                        console.log(lod);
                        _self.viewObject.goTo({
                            target:daohangGraphicLayer.graphics,
                            zoom:lod
                        })
                    })
            }).catch(err => {
                console.error(err);
            });
        },
        trafficButtonClick(val){//驾车  公交  步行
            var _self = this;
            if(_self.startText == ''){
                if(_self.showPoiList){
                    _self.$message.warning('请选择起点！');
                }else{
                    _self.$message.warning('请输入起点！');
                }
                return;
            }
            if(_self.endText == ''){
                if(_self.showPoiList){
                    _self.$message.warning('请选择终点！');
                }else{
                    _self.$message.warning('请输入终点！');
                }
                return;
            }
            if(val == "car"){
                axios.get('/GDAPI/v3/direction/driving',{
                    params: {
                        origin:_self.currentStartLocation,
                        destination:_self.currentEndLocation,
                        output:'json',
                        key:'481d08235e1dc266e0f979db1d86162c',
                    }
                }).then((res)=>{
                    console.log('car');
                    if(res.data.status == "1"){
                        _self.showStepPanel = true;
                        _self.trafficSteps = res.data.route.paths[0];
                        _self.showRouteOnMap();
                    }
                })
            }else if(val == "bus"){
                axios.get('/GDAPI/v3/direction/transit/integrated',{
                    params: {
                        origin:_self.currentStartLocation,
                        destination:_self.currentEndLocation,
                        output:'json',
                        key:'481d08235e1dc266e0f979db1d86162c',
                    }
                }).then((res)=>{
                    console.log('bus');
                    if(res.data.status == "1"){
                        
                    }
                })
            }else if(val == "walk"){

            }
        },
        poiListClick(item){//模糊查询列表  点击
            var _self = this;
            if(_self.currentText == "start"){
                _self.startText = item.name;
                _self.currentStartLocation = item.location;
            }else{
                _self.endText = item.name;
                _self.currentEndLocation = item.location;
            }
            _self.showPoiList = false;
        },
        inputChange(val,type){//input输入内后后  关键字模糊查询
            var _self = this;
            _self.showPoiList = true;//打开poi
            _self.showBiaoJiPanel = false;//关闭标记
            _self.showStepPanel = false;//关闭详情路线
            _self.currentText = type;
            // if(type == "start"){
            //     _self.currentStartLocation = '';
            // }else{
            //     _self.currentEndLocation = '';
            // }
            axios.get('/GDAPI/v3/place/text',{
                params: {
                    keywords:val,
                    output:'json',
                    offset:10,
                    page:1,
                    key:'481d08235e1dc266e0f979db1d86162c',
                }
            }).then((res)=>{
                console.log('succ');
                if(res.data.status =='1'){
                    _self.pois = res.data.pois;
                }
            })
        },
        clickBiaoJiHandler(item){//点击标记列表   给起点终点赋值
            var _self = this;
            var lgtd102100 = item.lgtd;
            var lttd102100 = item.lttd;
            var topRight = _getLngLat({
                x:lgtd102100,
                y:lttd102100
            })
            var lgtd84 = topRight.lng;
            var lttd84 = topRight.lat;
            if(_self.currentFocus == 'start'){
                _self.currentStartLocation = String(lgtd84.toFixed(6))+","+String(lttd84.toFixed(6));
                _self.startText = item.inteName;
            }else if(_self.currentFocus == 'end'){
                _self.currentEndLocation = String(lgtd84.toFixed(6))+","+String(lttd84.toFixed(6));
                _self.endText = item.inteName;
            }
        },
        startFocusHandler(evt){
            var _self = this;
            console.log('开始 标记');
            _self.currentFocus = 'start';
            getMyBiaoJi(_self.userId,'','','',1,1000).then((res)=>{
                if(res.success){
                    console.log('biaoji')
                    _self.tableResultData = res.data.list;
                    _self.showPoiList = false;//关闭poi
                    _self.showBiaoJiPanel = true;//打开标记
                    _self.showStepPanel = false;//关闭详情路线
                }
            });
        },
        endFocusHandler(evt){
            var _self = this;
            console.log(evt);
            _self.currentFocus = 'end';
            getMyBiaoJi(_self.userId,'','','',1,1000).then((res)=>{
                if(res.success){
                    console.log('biaoji')
                    _self.tableResultData = res.data.list;
                    _self.showPoiList = false;//关闭poi
                    _self.showBiaoJiPanel = true;//打开标记
                    _self.showStepPanel = false;//关闭详情路线
                }
            });
        },
        chooseTraffic(val){//选择交通工具
            this.showDaoHanButton = val;
        },
        startChangeEndHandler(){
            var str = this.startText;
            this.startText = this.endText;
            this.endText = str;
            var str1 = this.currentStartLocation;
            this.currentStartLocation = this.currentEndLocation;
            this.currentEndLocation = str1;
        },
        mapToolHandler:function(item){
            this.$emit("mapToolHandler",item);
        },
        showToolPanelHandler(){
            this.showToolPanel = !this.showToolPanel;
        },
        showPanel:function(){
            this.showXzqPanel = !this.showXzqPanel;
        },
        getAdData:function(){
            var _self = this;
            getAdData(_self.currentAdCode).then((response)=>{
                _self.nextLevelXzq = response.data;
            });
        },
        backToStep:function(item){
            this.currentStatus={
                currentType:item.type,
                currentTitle:item.title,
                currentCode:item.code,
            };
            var arr = [];
            for(var i=0;i<this.naviStateStack.length;i++){
                if(this.naviStateStack[i].code == item.code){
                    for(var j=0;j<=i;j++){
                        arr.push(this.naviStateStack[j]);
                    }
                    this.naviStateStack = arr;  
                }
            }
            this.currentAdCode = item.code;
            this.getAdData();
            this.$emit("clickAd",{'adCode':item.code,"adName":item.title,"adGrad":item.adGrad});
        },
        closeNavigationPanel:function(item){
            this.showXzqPanel = false;
        },
        clickAd:function(item){
            this.currentStatus={
                currentType:'xzq',
                currentTitle:item.adName,
                currentCode:item.adCode,
                currentAdGrad:item.adGrad
            };
            this.naviStateStack.push({
                title:item.adName,
                type:'xzq',
                code:item.adCode,
                adGrad:item.adGrad
            });
            this.currentAdCode = item.adCode;
            this.getAdData();
            this.$emit("clickAd",item);
            // this.showXzqPanel = false;
        },
        click:function(item){
            var _self = this;
            _self.showToolPanel = false;
            _self.$emit('rightMenuClick',item);//点击之后   关闭
            if(item == "fullExtent"){
                _self.viewObject.extent = _self.fullExtent1;
            }else if(item == "clear"){
                _self.draw.reset();
                _self.measureLengthGraphicLayer_lable = _self.mapObject.findLayerById("measureLengthGraphicLayer_lable");
                if(_self.measureLengthGraphicLayer_lable){
                    _self.mapObject.remove(_self.measureLengthGraphicLayer_lable);
                }
                _self.measureGraphicLayer = _self.mapObject.findLayerById("measureGraphicLayer");
                if(_self.measureGraphicLayer){
                    _self.mapObject.remove(_self.measureGraphicLayer);
                }
            }else if(item == "measureDistance"){
                _self.measureDistance();
            }else if(item == "measureArea"){
                _self.measureArea();
            }else if(item == "biaoji"){
                _self.bjHandler();
            }else if(item == "daohang"){
                _self.showDaoHangPanel = !_self.showDaoHangPanel;
                if(!_self.showDaoHangPanel){
                    _self.showStepPanel = false;
                    var daohangGraphicLayer = _self.mapObject.findLayerById("daohangGraphicLayer");
                    daohangGraphicLayer.removeAll();
                    daohangGraphicLayer.visible = false;
                    var daohangGraphicLayer1 = _self.mapObject.findLayerById("daohangGraphicLayer1");
                    daohangGraphicLayer1.removeAll();
                    daohangGraphicLayer1.visible = false;
                }
            }
        },
        bjHandler(){
            var _self = this;
            this.$emit('bjHandler');
            document.getElementById("mapNode").style.cursor = "crosshair";

            // document.getElementById("mapNode").style.cursor = "default";
        },
        measureDistance:function(){
            var _self = this;
            esriLoader.loadModules(["esri/views/2d/draw/Draw","esri/geometry/SpatialReference",
                "esri/geometry/Point","esri/layers/GraphicsLayer","dojo/domReady!"],options).then((
                [Draw,SpatialReference,Point,GraphicsLayer]) => {
                    _self.measureGraphicLayer = _self.mapObject.findLayerById("measureGraphicLayer");
                    if(_self.measureGraphicLayer){
                        _self.measureGraphicLayer.removeAll();
                    }else{
                        _self.measureGraphicLayer = new GraphicsLayer({id:'measureGraphicLayer'});
                        _self.mapObject.add(_self.measureGraphicLayer);
                    }
                    //标注 graphicLayer
                    _self.measureLengthGraphicLayer_lable = _self.mapObject.findLayerById("measureLengthGraphicLayer_lable");
                    if(_self.measureLengthGraphicLayer_lable){
                        _self.measureLengthGraphicLayer_lable.removeAll();
                    }else{
                        _self.measureLengthGraphicLayer_lable = new GraphicsLayer({id:'measureLengthGraphicLayer_lable'});
                        _self.mapObject.add(_self.measureLengthGraphicLayer_lable);
                    }
                    _self.draw = new Draw({
                        view:_self.viewObject
                    });
                    var action = _self.draw.create("polyline", {mode: "click"});
                    action.on("vertex-add", _self.measurePolyline_add);
                    action.on("vertex-remove", _self.measurePolyline);
                    action.on("cursor-update", _self.measurePolyline);
                    action.on("draw-complete", _self.measurePolyline);
            }).catch(err => {
                console.error(err);
            });
        },
        measurePolyline:function(evt){
            var _self = this;
            esriLoader.loadModules(["esri/Graphic","esri/views/2d/draw/Draw","esri/geometry/SpatialReference",
                "esri/geometry/Polyline","esri/layers/GraphicsLayer","esri/geometry/geometryEngine",
                "esri/geometry/Point","dojo/domReady!"],options).then((
                [Graphic,Draw,SpatialReference,Polyline,GraphicsLayer,geometryEngine,Point]) => {
                    _self.measureGraphicLayer.removeAll();
                    var vertices = evt.vertices;
                    var polyline = new Polyline({
                        paths: vertices,
                        spatialReference: 102100
                    });
                    var gra = new Graphic({
                        geometry: polyline,
                        symbol: {
                            type: "simple-line",  // autocasts as new SimpleLineSymbol()
                            color: [255, 0, 0,0.7],
                            width: "2px",
                        }
                    });
                    _self.measureGraphicLayer.add(gra);
                    var length = geometryEngine.geodesicLength(polyline,"kilometers");
                    var x = vertices[vertices.length-1][0];
                    var y = vertices[vertices.length-1][1];
                    var pt = new Point({
                        x:x,
                        y:y,
                        spatialReference:102100
                    });
                    var graLenght = new Graphic({
                        geometry: pt,
                        symbol: {
                            type: "text",
                            color: "yellow",
                            haloColor: "black",
                            haloSize: "1px",
                            text: length.toFixed(2) + "公里",
                            xoffset: 3,
                            yoffset: 3,
                            font: { // autocast as Font
                                size: 14,
                                family: "sans-serif"
                            }
                        }
                    });
                    _self.measureGraphicLayer.add(graLenght);
            }).catch(err => {
                console.error(err);
            });
        },
        //在每一个折点添加标注，不然会被remove掉
        measurePolyline_add:function(evt){
            var _self = this;
            esriLoader.loadModules(["esri/Graphic","esri/views/2d/draw/Draw","esri/geometry/SpatialReference",
                "esri/geometry/Polyline","esri/layers/GraphicsLayer","esri/geometry/geometryEngine",
                "esri/geometry/Point","dojo/domReady!"],options).then((
                [Graphic,Draw,SpatialReference,Polyline,GraphicsLayer,geometryEngine,Point]) => {
                    _self.measureGraphicLayer.removeAll();
                    var vertices = evt.vertices;
                    var polyline = new Polyline({
                        paths: vertices,
                        spatialReference: 102100
                    });
                    var gra = new Graphic({
                        geometry: polyline,
                        symbol: {
                            type: "simple-line",  // autocasts as new SimpleLineSymbol()
                            color: [255, 0, 0,0.7],
                            width: "2px",
                        }
                    });
                    _self.measureGraphicLayer.add(gra);
                    var length = geometryEngine.geodesicLength(polyline,"kilometers");
                    var x = vertices[vertices.length-1][0];
                    var y = vertices[vertices.length-1][1];
                    var pt = new Point({
                        x:x,
                        y:y,
                        spatialReference:102100
                    });
                    var graLenght = new Graphic({
                        geometry: pt,
                        symbol: {
                            type: "text",
                            color: "yellow",
                            haloColor: "black",
                            haloSize: "1px",
                            text: length.toFixed(2) + "公里",
                            xoffset: 3,
                            yoffset: 3,
                            font: { // autocast as Font
                                size: 14,
                                family: "sans-serif"
                            }
                        }
                    });
                    _self.measureLengthGraphicLayer_lable.add(graLenght);
            }).catch(err => {
                console.error(err);
            });
        },
        measureArea:function(){
            var _self = this;
            esriLoader.loadModules(["esri/views/2d/draw/Draw","esri/geometry/SpatialReference",
                "esri/geometry/Point","esri/layers/GraphicsLayer","dojo/domReady!"],options).then((
                [Draw,SpatialReference,Point,GraphicsLayer]) => {
                    _self.measureLengthGraphicLayer_lable = _self.mapObject.findLayerById("measureLengthGraphicLayer_lable");
                    if(_self.measureLengthGraphicLayer_lable){
                        _self.mapObject.remove(_self.measureLengthGraphicLayer_lable);
                    }
                    _self.measureGraphicLayer = _self.mapObject.findLayerById("measureGraphicLayer");
                    if(_self.measureGraphicLayer){
                        _self.measureGraphicLayer.removeAll();
                    }else{
                        _self.measureGraphicLayer = new GraphicsLayer({id:'measureGraphicLayer'});
                        _self.mapObject.add(_self.measureGraphicLayer);
                    }
                    _self.draw = new Draw({
                        view:_self.viewObject
                    });
                    var action = _self.draw.create("polygon", {mode: "click"});
                    action.on("vertex-add", _self.measurePolygon);
                    action.on("vertex-remove", _self.measurePolygon);
                    action.on("cursor-update", _self.measurePolygon);
                    action.on("draw-complete", _self.measurePolygon);
            }).catch(err => {
                console.error(err);
            });
        },
        measurePolygon:function(evt){
            var _self = this;
            esriLoader.loadModules(["esri/Graphic","esri/views/2d/draw/Draw","esri/geometry/SpatialReference",
                "esri/geometry/Polygon","esri/layers/GraphicsLayer","esri/geometry/geometryEngine",
                "dojo/domReady!"],options).then((
                [Graphic,Draw,SpatialReference,Polygon,GraphicsLayer,geometryEngine]) => {
                    _self.measureGraphicLayer.removeAll();
                    var vertices = evt.vertices;
                    var polygon = new Polygon({
                        rings: vertices,
                        spatialReference: 102100
                    });
                    var gra = new Graphic({
                        geometry: polygon,
                        symbol: {
                            type: "simple-fill", // autocasts as SimpleFillSymbol
                            color: [140, 140, 222, 0.2],
                            style: "solid",
                            outline: { // autocasts as SimpleLineSymbol
                                color: [255, 0, 0,0.7],
                                width: 1
                            }
                        }
                    });
                    _self.measureGraphicLayer.add(gra);
                    var area = geometryEngine.geodesicArea(polygon,"square-kilometers");
                    if(area < 0){
                        var simplifiedPolygon = geometryEngine.simplify(polygon);
                        if (simplifiedPolygon) {
                            area = geometryEngine.geodesicArea(simplifiedPolygon, "square-kilometers");
                        }
                    }
                    var graArea = new Graphic({
                        geometry: polygon.centroid,
                        symbol: {
                            type: "text",
                            color: "yellow",
                            haloColor: "black",
                            haloSize: "1px",
                            text: area.toFixed(2) + " 平方公里",
                            xoffset: 3,
                            yoffset: 3,
                            font: { // autocast as Font
                                size: 14,
                                family: "sans-serif"
                            }
                        }
                    });
                    _self.measureGraphicLayer.add(graArea);
            }).catch(err => {
                console.error(err);
            });
        },
    }
}
</script>
<style>
#mapToolBarContainer_hhjc{
    position: fixed;
    top: 106px;
    right: 0px;
}
#mapTopToolBar{
    display: flex;
    background-color: white;
    height: 29px;
    border-radius: 3px;
    width: 200px;
    z-index: 1;
}
.xzqPanelClass{
    margin-top: 5px;
    background-color: white;
    width: 380px;
    margin-right: 10px;
}
.naviClickableLink{
    padding: 5px;
    padding-left: 10px;
    /* margin: 3px !important; */
    text-align: center;
    font-size: small;
    color: #000000b0;
    font-weight: normal;
    cursor: pointer;
}
.naviClickableLink:hover{
    text-decoration: underline;
}
.imgClass{
    width:17px;
    height: 17px;
    margin-right:5px;
    cursor:pointer;
}
.imgClass:hover{
    background-color: rgb(200,200,200);
}
.mapRightMenu{
    background-color: white;
    padding-left: 0px;
    /* padding-left:10px;
    padding-right:10px;
    padding-bottom:5px;
    padding-top:5px; */
    border: 1px solid rgba(142, 142, 142, 0.3);
    box-shadow: rgba(0, 0, 0, 0.23) 4px 3px 3px 0px;
}
.mapRightMenu .menuItem{
    padding: 10px;
    border-bottom: 1px solid rgba(154, 154, 154, 0.36);
    display: flex;
    flex-direction: row;
    justify-content: flex-start; 
    align-items: center;
}
.mapRightMenu .menuItem:hover{
    cursor: pointer;
    background-color: rgba(154, 154, 154, 0.082);
}
.mapRightMenu:last-child{
    
    border-bottom:0px solid rgba(102, 102, 102, 0.507) !important;
}
ul.tabs.dir_tab {
    padding-top: 10px;
    width: 200px;
    border: 0;
    border-radius: 0;
    background: none;
    height: 30px;
    margin: 0 auto;
    white-space: nowrap;
}
ul.tabs.dir_tab li {
    height: 30px;
    width: 33.3333%;
    line-height: 30px;
    position: relative;
    display: block;
    float: left;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .8px;
}
ul.tabs.dir_tab li:active {
    background-color:#dbdbe7;
}
.trafficActivity{
    background-color: #dbdbe7;
}
.daohangContainerClass{
    height: 170px;
    background-color: #0069d5;
    right: 20px;
    position: fixed;
    width: 320px;
}
.poiClass{
    background-color: #ffffff;
    position: fixed;
    top: 310px;
    right: 20px;
    width: 320px;
    max-height: 350px;
    overflow: auto;
}
.poiClass :hover{
    background: #ece9e9;
    cursor:pointer;
}
.poiListClass{
    padding: 5px;
    padding-left: 15px;
}
.stepClass{
    position: fixed;
    top: 310px;
    right: 20px;
    width: 320px;
    max-height: 350px;
    background: #f4f9fd;
    overflow: auto;
    min-height: 70px;
}
.stepClass .el-collapse-item__header{
    color:blue;
}
</style>