fj-dc-ui/.svn/pristine/8b/8b85f5557f86274d82d7dab29e2515e8af1496d6.svn-base

<template>
    <div id="mapContent" style="width:100%;height:100%;float:right;">
        <div id="mapNode" style="width:100%;height:100%;"></div>
    </div>
</template>
<script>
import * as esriLoader from 'esri-loader'
export default {
    name:'mapContent',
    components:{},
    data(){
        return{
            tianditu_img_c:null,//天地图全局对象
            tianditu_img_c_zhuji:null,//天地图影像注记
            mapObject:null,//map全局对象
            viewObject:null,//view全局对象
            option:{url:'http://10.1.102.143/arcgis_js_api/4.5/init.js'},//配置arcgis api
        }
    },
    computed:{},
    mounted:function(){
        this.initMap();
    },
    watch:{
        statusStack:function(oldValue,newValue){
            // this.xzqChange(newValue[newValue.length - 1]);
        }
    },
    methods:{
        //初始化地图
        initMap:function(){
            var _self = this;
            esriLoader.loadModules(["esri/Map","esri/views/MapView","esri/geometry/Extent",
                "esri/geometry/SpatialReference","esri/layers/testLayer","esri/layers/waterRSLayer",
                "esri/layers/TimeImageLayer","esri/layers/superMapZhuji","esri/config","esri/layers/GraphicsLayer",
                "dojo/domReady!"],_self.option)
                .then(([Map,MapView,Extent,SpatialReference,testLayer,waterRSLayer,
                TimeImageLayer,superMapZhuji,esriConfig,GraphicsLayer]) => {
                esriConfig.request.corsEnabledServers.push("t0.tianditu.com");
                //天地图影像option
                var options_tianditu_img_c = {
                    "id": "tianditu_img_c",
                    "label": "天地图影像地图",
                    "visible": true,
                    "opacity": 1,
                    "style": "default",
                    "wmtslayer": "vec",
                    "tileMatrixSet": "c",
                    "format": "tiles",
                    "urlTemplate": "http://{subDomain}.tianditu.com/img_c/wmts?SERVICE=WMTS&   VERSION=1.0.0&REQUEST=GetTile&LAYER=img&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
                    "copyright": "TiandituWMTS",
                    "subDomains": ["t0"]
                };
                //天地图影像注记option
                var options_tianditu_img_c_zhuji = {
                    "id": "tianditu_img_c_zhuji",
                    "label": "天地图影像地图注记",
                    "visible": true,
                    "opacity": 1,
                    "style": "default",
                    "wmtslayer": "vec",
                    "tileMatrixSet": "c",
                    "format": "tiles",
                    "urlTemplate": "http://{subDomain}.tianditu.com/cia_c/wmts?SERVICE=WMTS&   VERSION=1.0.0&REQUEST=GetTile&LAYER=cia&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
                    "copyright": "TiandituWMTS",
                    "subDomains": ["t0"]
                };
                _self.tianditu_img_c = new testLayer(options_tianditu_img_c);
                _self.tianditu_img_c_zhuji = new testLayer(options_tianditu_img_c_zhuji);
                //初始化map对象
                _self.mapObject = new Map();
                _self.mapObject.add(_self.tianditu_img_c,0);
                _self.mapObject.add(_self.tianditu_img_c_zhuji,1);
                //初始化view对象
                _self.viewObject = new MapView({
                    container:"mapNode",
                    map:_self.mapObject,
                    viewingMode: "global",
                });
                //设置地图左上角放大缩小按钮隐藏
                _self.viewObject.ui.empty("top-left");
                _self.viewObject.then(()=>{
                    var xzqGraphicLayer = new GraphicsLayer({id : "xzqGraphicLayer"});//行政区边界graphicLayer
                    _self.mapObject.add(xzqGraphicLayer,10);
                    var ext = new Extent({
                        xmin: 42.88346723165233,
                        ymin: 12.017399169398608,
                        xmax: 163.07685370953612,
                        ymax: 58.56373990644145,
                        spatialReference: new SpatialReference({wkid:4490})
                    });
                    _self.viewObject.Extent = ext;
                    _self.xzqChange("420000");
                });
                //鼠标移入事件
                _self.viewObject.on("pointer-move",function(event){

                });
                //鼠标点击事件
                _self.viewObject.on("click",function(event){
                    var screenPoint = {
                        x: event.x,
                        y: event.y
                    };
                    //检查是否点到graphic
                    _self.viewObject.hitTest(screenPoint).then(function(response){

                    });
                });
            });
        },
        //定位行政区
        xzqChange:function(xzqid){
            var _self = this;
            esriLoader.loadModules(["esri/Graphic","esri/layers/GraphicsLayer","esri/geometry/SpatialReference","esri/geometry/Extent","esri/geometry/Polyline","esri/geometry/Polygon","esri/tasks/QueryTask", "esri/tasks/support/Query","dojo/domReady!"],_self.option).then(([Graphic,GraphicsLayer,SpatialReference,Extent,Polyline,Polygon,QueryTask, Query])=>{
                var queryTask = new QueryTask();
                var query = new Query();
                //根据行政区划码判断 全国 省、市、县，做查询
                if(xzqid.substring(0,6) == "000000"){//全国
                    var xzqGraphicLayer = _self.mapObject.findLayerById("xzqGraphicLayer");
                    xzqGraphicLayer.removeAll();
                    var ext = new Extent({
                        xmin: 42.88346723165233,
                        ymin: 12.017399169398608,
                        xmax: 163.07685370953612,
                        ymax: 58.56373990644145,
                        spatialReference: new SpatialReference({wkid:4490})
                    });
                    _self.viewObject.Extent = ext;
                    return;
                }else if(xzqid.substring(2,6) == "0000"){//省
                    queryTask.url = "http://10.1.198.103:6080/arcgis/rest/services/hzz/hzz_xzq/MapServer/1";
                    query.where = "PROV_CODE='"+xzqid+"'";
                }else if(xzqid.substring(4,6) =="00"){//市
                    queryTask.url = "http://10.1.198.103:6080/arcgis/rest/services/hzz/hzz_xzq/MapServer/0";
                    query.where = "DIST_CODE='"+xzqid+"'";
                }else{//县
                    queryTask.url = "http://10.1.198.103:6080/arcgis/rest/services/hzz/hzz_xzq/MapServer/2";
                    query.where = "CNTY_CODE="+xzqid;
                }
                query.returnGeometry = true;
                query.outFields = ["*"];
                queryTask.execute(query).then(function(results){
                    var symbolLine = {type: "simple-line",color: [ 255,255,0, 1 ],width:"3px",style: "solid"};
                    var symbolPolygon = {type: "simple-fill",color: [ 214,214, 214, 0 ],outline: {color: "white",width: 0.4},style: "solid"};
                    var xzqGraphicLayer = _self.mapObject.findLayerById("xzqGraphicLayer");
                    xzqGraphicLayer.removeAll();
                    var xzqGraphic;
                    for(var i=0;i<results.features.length;i++){
                        var polygon = new Polygon({
                            rings:results.features[i].geometry.rings,
                            spatialReference:{wkid:4490}
                        });
                        xzqGraphic = new Graphic({
                            geometry:polygon,
                            symbol:symbolPolygon,
                            attributes:results.features[i].attributes
                        });
                        xzqGraphicLayer.add(xzqGraphic);
                    }
                    _self.viewObject.extent = xzqGraphicLayer.graphics.items[0].geometry.extent;
                    var lod = _self.viewObject.zoom;
                    _self.viewObject.zoom = Number(lod - 1);
                });
            });
        },
    },
}
</script>