tba-gx-guochan/public/static/biz/map_1h3h.js

var watfMap = {
    map: null,
    view: null,
    layer: [],
    allBizs: [],
    num: 0,
    nextid: function () {
        watfMap.num = watfMap.num + 1;
        return watfMap.num;
    },
    trim: function (x) {
        return x.replace(/^\s+|\s+$/gm, '');
    },
    showLayer: function (layerId) {
        var layer = watfMap.map.findLayerById(layerId);
        if (layer) {
            layer.visible = true;
        }
    },
    hideLayer: function (layerId) {
        var layer = watfMap.map.findLayerById(layerId);
        if (layer) {
            layer.visible = false;
        }
    },
    removeLayer: function (layerId) {
        watfMap.map.removeLayer(layerId);
    }
};

function formatDate(date) {
    var d = new Date(date),
        month = (d.getMonth() + 1),
        day = d.getDate(),
        year = d.getFullYear();

    if (parseInt(month) < 10) month = "0" + month;
    if (day.length < 2) day = "0" + day;

    return [year, month, day].join('-');
}

require([
    "esri/layers/WebTileLayer",
    "esri/layers/BaseTileLayer",
    "esri/layers/GraphicsLayer",
    "esri/layers/MapImageLayer",
    "esri/layers/TileLayer",
    "esri/geometry/SpatialReference",
    "esri/Basemap",
    "esri/Map",
    "esri/Graphic",
    "esri/Color",
    "esri/symbols/TextSymbol",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/geometry/Extent",
    "esri/geometry/Point",
    "esri/geometry/Polygon",
    "esri/geometry/Polyline",
    "esri/symbols/SimpleLineSymbol",
    "esri/views/MapView",
    "esri/request",
    "esri/config",
    "dojo/domReady!"
], function (WebTileLayer, BaseTileLayer, GraphicsLayer, MapImageLayer, TileLayer, SpatialReference, Basemap,
             Map, Graphic, Color, TextSymbol, SimpleMarkerSymbol, SimpleFillSymbol, Extent, Point, Polygon, Polyline, SimpleLineSymbol,
             MapView, esriRequest, esriConfig
) {

    //影像图
    var imgmapBaseLayer = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=5c5a468d333dbb827f134fb64818aa65",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        copyright: '天地图影像图'
    });
    //影像图
    var imganoBaseLayer = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=5c5a468d333dbb827f134fb64818aa65",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        copyright: '天地图影像注记'
    });
    //矢量图
    var vecmapBaseLayer = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=5c5a468d333dbb827f134fb64818aa65",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        copyright: '天地图矢量图'
    });
    //矢量图
    var vecanoBaseLayer = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=5c5a468d333dbb827f134fb64818aa65",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        copyright: '天地图矢量注记'
    });
    //地形图
    var termapBaseLayer = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=5c5a468d333dbb827f134fb64818aa65",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        copyright: '天地图地形图'
    });
    //地形图
    var teranoBaseLayer = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=5c5a468d333dbb827f134fb64818aa65",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        copyright: '天地图地形注记'
    });
    // 影像图
    var imgBasemap = new Basemap({
        baseLayers: [imgmapBaseLayer, imganoBaseLayer],
        title: "影像图",
        id: "img_w",
        thumbnailUrl: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/0/0/0"
    });
    // 矢量图
    var vecBasemap = new Basemap({
        baseLayers: [vecmapBaseLayer, vecanoBaseLayer],
        title: "矢量图",
        id: "vec_w",
        thumbnailUrl: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/0/0/0"
    });
    // 地形图
    var terBasemap = new Basemap({
        baseLayers: [termapBaseLayer, teranoBaseLayer],
        title: "地形图",
        id: "ter_w",
        thumbnailUrl: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/0/0/0"
    });

    var map = new Map({
         basemap: imgBasemap,
        //ground: "world-elevation"
    });

    // add the map to a new 3d view
    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [120.906514, 31.017386],
        zoom: 10,
    });
    watfMap.map = map;
    watfMap.view = view;

    view.when(function () {
        // var ext = new Extent({
        //     xmin: 117.23277038231637,
        //     ymin: 29.520199484581486,
        //     xmax: 123.65255617604646,
        //     ymax: 32.551632806009266,
        //     spatialReference: new SpatialReference({wkid: 4326})
        // });
        // view.extent = ext;

        var loadTbaAreaPath = function () {
            var line = new Polyline({
                paths: tba_area_paths,
                spatialReference: {wkid: 4326}
            });
            var graphic_line = new Graphic({
                geometry: line,
                symbol: tba_area_line
            });
            var graphicLayer_line = new GraphicsLayer();
            graphicLayer_line.add(graphic_line);
            map.add(graphicLayer_line);
        };
        var load1H3HLines = function () {
            var _layer = '1h3hLayer';
            var graphicLayer = new GraphicsLayer({
                id: 'layer_' + _layer,
            });
            map.add(graphicLayer, 2);
            watfMap.layer.push(graphicLayer);
            var fill = [];
            fill.push(SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#39B5B8"), 1), new Color([204, 254, 217, 0.3])));
            fill.push(SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#39B5B8"), 1), new Color([255, 227, 195, 0.3])));
            fill.push(SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#39B5B8"), 1), new Color([20, 49, 241, 0.3])));
            fill.push(SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#39B5B8"), 1), new Color([255, 227, 195, 0.6])));
            fill.push(SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#39B5B8"), 1), new Color([255, 255, 190, 0.6])));
            fill.push(SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#39B5B8"), 1), new Color([255, 227, 195, 0.6])));
            fill.push(SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#39B5B8"), 1), new Color([255, 255, 190, 0.6])));
            for (var i = 0; i < hh_1h3h.length; i++) {
                var ptA = [];
                var poAC = hh_1h3h[i].rings.split(";");
                for (var j = 0; j < poAC.length; j++) {
                    var singp = poAC[j].split(",")
                    ptA.push([singp[0], singp[1]]);
                }
                var polygon = new Polygon(new SpatialReference({wkid: 4326}));
                polygon.addRing(ptA);
                var graphic = new Graphic({
                    geometry: polygon, symbol: fill[i], tp: "area", attributes: hh_1h3h[i].AREA,
                });
                graphicLayer.add(graphic);
            }
            var data = [
                {LGTD: 120.638317, LTTD: 31.109815, VAL: "吴江区"},
                {LGTD: 121.124178, LTTD: 31.100681, VAL: "青浦区"},
                {LGTD: 120.925850, LTTD: 30.830898, VAL: "嘉善县"}
            ];
            for (var i = 0; i < data.length; i++) {
                var textSymbol = {
                    type: "text",
                    color: "rgb(244,243,243)",
                    haloSize: "10px",
                    text: data[i].VAL,
                    xoffset: 1,
                    yoffset: 1,
                    font: {
                        size: 18, family: "仿宋", weight: "normal"
                    }
                };
                var point = new Point(data[i].LGTD, data[i].LTTD, new SpatialReference({wkid: 4326}));
                var graphic = new Graphic({
                    geometry: point, symbol: textSymbol,
                });
                graphicLayer.add(graphic);
            }
        };
        $("#mapImg").click(function () {
            $(".ditu").show();
        });
        $(".mapqiehuan .ditu .tuxing").click(function () {
            $(this).parents().find('.dituImg').removeClass("tips");
            $(this).find('.dituImg').addClass("tips");
            var ob = $(this).attr("ob");
            if (ob == 'tdt') {//天地图
                map.basemap = vecBasemap;
            } else if (ob == 'yxt') {//影像图
                map.basemap = imgBasemap;
            } else if (ob == 'dxt') {//地形图
                map.basemap = terBasemap;
            }
        });
        $(".ditu .closeBtn").click(function () {
            $(".ditu").hide();
        });

        /**
         * 隐藏业务图层
         */
        var hideLayer = function () {
            map.remove(graphicLayerClick);
            watfMap.allBizs.map(function (biz) {
                watfMap.hideLayer("layer_" + biz);
            });
        };

        /**
         * 显示业务图层
         * @param code
         */
        var showLayer = function (code) {
            watfMap.showLayer("layer_" + code);
        };

        //加载数据函数
        var loadData = function (_layer, _url, _param, symbol, callback, visiable) {
            $.ajax({
                url: _url,
                async: true,
                dataType: 'json',
                success: function (result) {
                    if (result.status == 200) {
                        callback(_layer, symbol, result.rows, visiable);
                    }
                }
            });
        };

        var createGraphic = function (layer, symbol, datas, visiable) {
            var graphicLayer = new GraphicsLayer({
                id: layer
            });
            map.add(graphicLayer);
            watfMap.layer.push(graphicLayer);

            var len = datas.length;
            for (var i = 0; i < len; i++) {
                var data = datas[i];
                var stcd = data.stcd;
                if (stcds_1h3h.indexOf(stcd) > -1) {
                    var lgtd = data.lgtd, lttd = data.lttd;
                    if (lgtd != null && lttd != null) {
                        var point = new Point(lgtd, lttd, new SpatialReference(4326));
                        var graphic = new Graphic({
                            geometry: point,
                            attributes: data,
                            symbol: symbol
                        });
                        graphicLayer.add(graphic);
                    }
                }
            }
        };
        var graphicLayerClick = null;
        /**
         * 定义图标区域
         * @type {{type: string, url: string, width: string, height: string}}
         */
        var symbol_flick = {
            type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
            url: ctx + "static/images/gis/dyCenter.gif",
            width: "64px",
            height: "64px"
        }

        var symbol_zb = {
            type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
            url: ctx + "static/images/gis/ls_swjc.png?r=2",
            width: "14px",
            height: "14px"
        };

        /**
         * GIS 页面，点击业务按钮，切换
         */
        $("#xzqPanel1 ul li").click(function () {
            hideLayer();
            var name = $(this).attr('name');
            $(this).removeClass(name).addClass(name + "1");
            var sibs = $(this).removeClass(name).addClass(name + "1").siblings();
            for (var i = 0; i < sibs.length; i++) {
                var cname = $(sibs[i]).attr('name');
                $(sibs[i]).removeClass(cname + "1").addClass(cname);
            }
            let code = $(this).attr("bizCode");
            if (code == 'TBA_SL') {
                for (let i = 0; i < sl.length; i++) {
                    showLayer(sl[i]);
                }
            }
            if (code == 'TBA_SZ') {
                for (let i = 0; i < sz.length; i++) {
                    showLayer(sz[i]);
                }
            }
            if (code == 'TBA_PW') {
                for (let i = 0; i < pwk.length; i++) {
                    showLayer(pwk[i]);
                }
            }
            view.popup.close();
        });

        //加载太湖流域边界线
        loadTbaAreaPath();
        load1H3HLines();
        for (var i = 0; i < sz.length; i++) {
            var bizCode = sz[i];
            watfMap.allBizs.push(bizCode);
            var bizDefine = gxdata.getDataDefine(bizCode);
            if (bizDefine) {
                loadData('layer_' + bizCode, bizDefine.newestDataUrl, null, symbol_zb, createGraphic, true);
            }
        }
        for (var i = 0; i < sl.length; i++) {
            var bizCode = sl[i];
            watfMap.allBizs.push(bizCode);
            var bizDefine = gxdata.getDataDefine(bizCode);
            if (bizDefine) {
                loadData('layer_' + bizCode, bizDefine.newestDataUrl, null, symbol_zb, createGraphic, true);
            }
        }
        for (var i = 0; i < pwk.length; i++) {
            var bizCode = pwk[i];
            watfMap.allBizs.push(bizCode);
            var bizDefine = gxdata.getDataDefine(bizCode);
            if (bizDefine) {
                loadData('layer_' + bizCode, bizDefine.newestDataUrl, null, symbol_zb, createGraphic, true);
            }
        }
    });

    view.on("pointer-move", function (event) {
        var screenPoint = {
            x: event.x,
            y: event.y
        };
        var point = view.toMap(screenPoint);
        $("#textPointLgtd").text(point.longitude);
        $("#textPointLttd").text(point.latitude);
        view.hitTest(screenPoint).then(function (response) {
            // console.log(event.mapPoint.longitude, event.mapPoint.latitude);
            if (response.results[0].graphic) {

                var layerId = response.results[0].graphic.layer.id;
                var bizCode = layerId.replace('layer_', '');
                var bizDefine = gxdata.getDataDefine(bizCode);
                if (!bizDefine) {
                    return console.log('biz define not exist.', bizCode);
                }
                var gxUnit = getGxUnit(bizCode);
                var pt = response.results[0].mapPoint;
                var attr = response.results[0].graphic.attributes;

                var content = '';

                if (bizDefine.layuiTable.length > 10) {
                    $('.esri-popup__main-container').css("width", "550px");
                    content =
                        "<div style='border-top:1px solid #D5D5D5;font-size:12px;font-family:STSongti-SC-Regular;font-weight:400;color:rgba(97,97,97,1);'>" +
                        "<table class='gis_table_pop'>" +
                        "<tr> <td align='right'> 测站</td><td align='left' colspan='3'>&nbsp;<a style='color:rgba(31,159,255,1);' onclick='pointerClik(\"" + attr.stcd + "\",\"" + attr.stnm + "\",\"" + bizCode + "\")'>" + isblankNull(attr.stcd, "站码") + ' ' + isblankNull(attr.stnm, "站名") + "</a> </td> </tr>";
                    content += "<tr> <td align='right'> 共享单位</td><td align='left' colspan='3'>&nbsp;<a style='color:rgba(31,159,255,1);'>" + gxUnit + "</a> </td> </tr>";
                    var added = 0;
                    for (var i = 0; i < bizDefine.layuiTable.length; i++) {
                        var field = bizDefine.layuiTable[i].field;
                        var title = bizDefine.layuiTable[i].title;

                        if (field == 'id' || field == 'stcd' || field == 'stnm') {
                            continue;
                        }

                        if (added % 2 == 0) {
                            content += "<tr>";
                        }
                        if (title == '时间') {
                            content += "<td align='right' style='width: 25%'> " + title + "</td><td align='left' style='width: 25%'>&nbsp;" + isblankNull(dateTran(attr[field]), title) + " </td>";
                        } else {
                            content += "<td align='right' style='width: 25%'> " + title + "</td><td align='left' style='width: 25%'>&nbsp;" + isblankNull(attr[field], title) + " </td>";
                        }

                        if (added % 2 != 0) {
                            content += "</tr>";
                        }

                        added += 1;
                    }
                } else {
                    $('.esri-popup__main-container').css("width", "300px");
                    content =
                        "<div style='border-top:1px solid #D5D5D5;font-size:12px;font-family:STSongti-SC-Regular;font-weight:400;color:rgba(97,97,97,1);'>" +
                        "<table class='gis_table_pop'>" +
                        "<tr> <td align='right'> 测站</td><td align='left'>&nbsp;<a style='color:rgba(31,159,255,1);' onclick='pointerClik(\"" + attr.stcd + "\",\"" + attr.stnm + "\",\"" + bizCode + "\")'>" + isblankNull(attr.stcd, "站码") + ' ' + isblankNull(attr.stnm, "站名") + "</a> </td> </tr>";
                    content += "<tr> <td align='right'> 共享单位</td><td align='left' colspan='3'>&nbsp;<a style='color:rgba(31,159,255,1);'>" + gxUnit + "</a> </td> </tr>";
                    for (var i = 0; i < bizDefine.layuiTable.length; i++) {
                        var field = bizDefine.layuiTable[i].field;
                        var title = bizDefine.layuiTable[i].title;

                        if (field == 'id' || field == 'stcd' || field == 'stnm') {
                            continue;
                        }

                        if (title == '时间') {
                            content += "<tr> <td align='right'> " + title + "</td><td align='left'>&nbsp;" + isblankNull(dateTran(attr[field]), title) + " </td> </tr>";
                        } else {
                            content += "<tr> <td align='right'> " + title + "</td><td align='left'>&nbsp;" + isblankNull(attr[field], title) + " </td> </tr>";
                        }
                    }
                }

                content +=
                    "</table>" +
                    "</div>" +
                    "<div>" +
                    "</div>";

                view.popup.open({
                    title: "<span style='color:rgba(31,159,255,1);'>" + attr.stnm + "</span>",
                    content: content,
                    location: pt
                });

                return;

                if (layerId == "layer-gx-sj-river" || layerId == "layer-gx-sj-basin" || layerId == "layer-gx-sj-rh") {
                    var bizCode = "";
                    var pt = response.results[0].mapPoint;
                    var attr = response.results[0].graphic.attributes;
                    if (layerId == "layer-gx-sj-river") {
                        bizCode = "TBA_SZY_SJ_RIVER"
                    }
                    if (layerId == "layer-gx-sj-basin") {
                        bizCode = "TBA_SZY_SJ_BASIN";
                    }
                    if (layerId == "layer-gx-sj-rh") {
                        bizCode = "TBA_SZY_RH";
                    }
                    if (layerId == "layer-gx-sz-lz") {
                        bizCode = "TBA_SZY_LZJC";
                    }

                    //更改内容区域大小
                    $('.esri-popup__main-container').css("width", "550px");

                    view.popup.open({
                        title: "<span style='color:rgba(31,159,255,1);'>" + attr.stnm + "</span>",
                        content: "<div id='" + layerId + "' style='border-top:1px solid #D5D5D5;font-size:12px;font-family:STSongti-SC-Regular;font-weight:400;color:rgba(97,97,97,1);width: 100%;'>" +
                            "<pre><table style='width: 100%;' class='gis_table_pop'>" +
                            "<tr> <td align='right'> 共享单位</td><td align='left' colspan='3'>&nbsp;<a style='color:rgba(31,159,255,1);'>" + gxUnit + "</a> </td> </tr>" +
                            "<tr><td style='width:120px;'>站码：<span><a style='color:rgba(31,159,255,1);' onclick='pointerClik(\"" + attr.stcd + "\",\"" + attr.stnm + "\",\"" + bizCode + "\")'>" + isblankNull(attr.stcd, "站码") + "</a></span></td><td>PH：<span>" + isblankNull(attr.ph, "PH") + "</span></td><td>氰化物：<span>" + isblankNull(attr.cn, "氰化物") + "</span></td></tr>" +
                            "<tr><td>日期：<span>" + isblankNull(attr.spt, "日期") + "</span></td><td>砷：<span>" + isblankNull(attr.ars, "砷") + "</span></td><td>氟化物：<span>" + isblankNull(attr.f, "氟化物") + "</span></td></tr>" +
                            "<tr><td>水温：<span>" + isblankNull(attr.wt, "水温") + "</span></td><td>硒：<span>" + isblankNull(attr.se, "硒") + "</span></td><td>硫化物：<span>" + isblankNull(attr.s2, "硫化物") + "</span></td></tr>" +
                            "<tr><td>氨氮：<span>" + isblankNull(attr.nh3n, "氨氮") + "</span></td><td>锌：<span>" + isblankNull(attr.zn, "锌") + "</span></td><td>石油类：<span>" + isblankNull(attr.oil, "石油类") + "</span></td></tr>" +
                            "<tr><td>总磷：<span>" + isblankNull(attr.tp, "总磷") + "</span></td><td>镉：<span>" + isblankNull(attr.cd, "镉") + "</span></td><td>化学需氧量：<span>" + isblankNull(attr.codcr, "化学需氧量") + "</span></td></tr>" +
                            "<tr><td colspan='3'>总氮：<span>" + isblankNull(attr.tn, "总磷") + "</span></td></tr>" +
                            "<tr><td>六价铬：<span>" + isblankNull(attr.cr6, "六价铬") + "</span></td><td>铜：<span>" + isblankNull(attr.cu, "铜") + "</span></td><td>高锰酸盐指数：<span>" + isblankNull(attr.codmn, "高锰酸盐指数") + "</span></td></tr>" +
                            "<tr><td>溶解氧：<span>" + isblankNull(attr.dox, "溶解氧") + "</span></td><td>汞：<span>" + isblankNull(attr.hg, "汞") + "</span></td><td>五日生化需氧量：<span>" + isblankNull(attr.bod5, "五日生化需氧量") + "</span></td></tr>" +
                            "<tr><td>挥发酚：<span>" + isblankNull(attr.vlph, "挥发酚") + "</span></td><td>铅：<span>" + isblankNull(attr.pb, "铅") + "</span></td><td>阴离子表面活性剂：<span>" + isblankNull(attr.las, "阴离子表面活性剂") + "</span></td></tr>" +
                            "</table></pre>" +
                            "</div>" +
                            "<div>" +
                            "</div>",
                        location: pt
                    });
                }
            }
        });
    });
    view.on("pointer-move", function (event) {
        var screenPoint = {
            x: event.x,
            y: event.y
        };
        var point = view.toMap(screenPoint);
        $("#textPointLgtd").text(point.longitude);
        $("#textPointLttd").text(point.latitude);
        view.hitTest(screenPoint).then(function (response) {
            // console.log(event.mapPoint.longitude, event.mapPoint.latitude);
            if (response.results[0].graphic) {

                var layerId = response.results[0].graphic.layer.id;
                var bizCode = layerId.replace('layer_', '');
                var bizDefine = gxdata.getDataDefine(bizCode);
                if (!bizDefine) {
                    return console.log('biz define not exist.', bizCode);
                }
                var gxUnit = getGxUnit(bizCode);
                var pt = response.results[0].mapPoint;
                var attr = response.results[0].graphic.attributes;

                var content = '';

                if (bizDefine.layuiTable.length > 10) {
                    $('.esri-popup__main-container').css("width", "550px");
                    content =
                        "<div style='border-top:1px solid #D5D5D5;font-size:12px;font-family:STSongti-SC-Regular;font-weight:400;color:rgba(97,97,97,1);'>" +
                        "<table class='gis_table_pop'>" +
                        "<tr> <td align='right'> 测站</td><td align='left' colspan='3'>&nbsp;<a style='color:rgba(31,159,255,1);' onclick='pointerClik(\"" + attr.stcd + "\",\"" + attr.stnm + "\",\"" + bizCode + "\")'>" + isblankNull(attr.stcd, "站码") + ' ' + isblankNull(attr.stnm, "站名") + "</a> </td> </tr>";
                    content += "<tr> <td align='right'> 共享单位</td><td align='left' colspan='3'>&nbsp;<a style='color:rgba(31,159,255,1);'>" + gxUnit + "</a> </td> </tr>";
                    var added = 0;
                    for (var i = 0; i < bizDefine.layuiTable.length; i++) {
                        var field = bizDefine.layuiTable[i].field;
                        var title = bizDefine.layuiTable[i].title;

                        if (field == 'id' || field == 'stcd' || field == 'stnm') {
                            continue;
                        }

                        if (added % 2 == 0) {
                            content += "<tr>";
                        }
                        if (title == '时间') {
                            content += "<td align='right' style='width: 25%'> " + title + "</td><td align='left' style='width: 25%'>&nbsp;" + isblankNull(dateTran(attr[field]), title) + " </td>";
                        } else {
                            content += "<td align='right' style='width: 25%'> " + title + "</td><td align='left' style='width: 25%'>&nbsp;" + isblankNull(attr[field], title) + " </td>";
                        }

                        if (added % 2 != 0) {
                            content += "</tr>";
                        }

                        added += 1;
                    }
                } else {
                    $('.esri-popup__main-container').css("width", "300px");
                    content =
                        "<div style='border-top:1px solid #D5D5D5;font-size:12px;font-family:STSongti-SC-Regular;font-weight:400;color:rgba(97,97,97,1);'>" +
                        "<table class='gis_table_pop'>" +
                        "<tr> <td align='right'> 测站</td><td align='left'>&nbsp;<a style='color:rgba(31,159,255,1);' onclick='pointerClik(\"" + attr.stcd + "\",\"" + attr.stnm + "\",\"" + bizCode + "\")'>" + isblankNull(attr.stcd, "站码") + ' ' + isblankNull(attr.stnm, "站名") + "</a> </td> </tr>";
                    content += "<tr> <td align='right'> 共享单位</td><td align='left' colspan='3'>&nbsp;<a style='color:rgba(31,159,255,1);'>" + gxUnit + "</a> </td> </tr>";
                    for (var i = 0; i < bizDefine.layuiTable.length; i++) {
                        var field = bizDefine.layuiTable[i].field;
                        var title = bizDefine.layuiTable[i].title;

                        if (field == 'id' || field == 'stcd' || field == 'stnm') {
                            continue;
                        }

                        if (title == '时间') {
                            content += "<tr> <td align='right'> " + title + "</td><td align='left'>&nbsp;" + isblankNull(dateTran(attr[field]), title) + " </td> </tr>";
                        } else {
                            content += "<tr> <td align='right'> " + title + "</td><td align='left'>&nbsp;" + isblankNull(attr[field], title) + " </td> </tr>";
                        }
                    }
                }

                content +=
                    "</table>" +
                    "</div>" +
                    "<div>" +
                    "</div>";

                view.popup.open({
                    title: "<span style='color:rgba(31,159,255,1);'>" + attr.stnm + "</span>",
                    content: content,
                    location: pt
                });

                return;

                if (layerId == "layer-gx-sj-river" || layerId == "layer-gx-sj-basin" || layerId == "layer-gx-sj-rh") {
                    var bizCode = "";
                    var pt = response.results[0].mapPoint;
                    var attr = response.results[0].graphic.attributes;
                    if (layerId == "layer-gx-sj-river") {
                        bizCode = "TBA_SZY_SJ_RIVER"
                    }
                    if (layerId == "layer-gx-sj-basin") {
                        bizCode = "TBA_SZY_SJ_BASIN";
                    }
                    if (layerId == "layer-gx-sj-rh") {
                        bizCode = "TBA_SZY_RH";
                    }
                    if (layerId == "layer-gx-sz-lz") {
                        bizCode = "TBA_SZY_LZJC";
                    }

                    //更改内容区域大小
                    $('.esri-popup__main-container').css("width", "550px");

                    view.popup.open({
                        title: "<span style='color:rgba(31,159,255,1);'>" + attr.stnm + "</span>",
                        content: "<div id='" + layerId + "' style='border-top:1px solid #D5D5D5;font-size:12px;font-family:STSongti-SC-Regular;font-weight:400;color:rgba(97,97,97,1);width: 100%;'>" +
                            "<pre><table style='width: 100%;' class='gis_table_pop'>" +
                            "<tr> <td align='right'> 共享单位</td><td align='left' colspan='3'>&nbsp;<a style='color:rgba(31,159,255,1);'>" + gxUnit + "</a> </td> </tr>" +
                            "<tr><td style='width:120px;'>站码：<span><a style='color:rgba(31,159,255,1);' onclick='pointerClik(\"" + attr.stcd + "\",\"" + attr.stnm + "\",\"" + bizCode + "\")'>" + isblankNull(attr.stcd, "站码") + "</a></span></td><td>PH：<span>" + isblankNull(attr.ph, "PH") + "</span></td><td>氰化物：<span>" + isblankNull(attr.cn, "氰化物") + "</span></td></tr>" +
                            "<tr><td>日期：<span>" + isblankNull(attr.spt, "日期") + "</span></td><td>砷：<span>" + isblankNull(attr.ars, "砷") + "</span></td><td>氟化物：<span>" + isblankNull(attr.f, "氟化物") + "</span></td></tr>" +
                            "<tr><td>水温：<span>" + isblankNull(attr.wt, "水温") + "</span></td><td>硒：<span>" + isblankNull(attr.se, "硒") + "</span></td><td>硫化物：<span>" + isblankNull(attr.s2, "硫化物") + "</span></td></tr>" +
                            "<tr><td>氨氮：<span>" + isblankNull(attr.nh3n, "氨氮") + "</span></td><td>锌：<span>" + isblankNull(attr.zn, "锌") + "</span></td><td>石油类：<span>" + isblankNull(attr.oil, "石油类") + "</span></td></tr>" +
                            "<tr><td>总磷：<span>" + isblankNull(attr.tp, "总磷") + "</span></td><td>镉：<span>" + isblankNull(attr.cd, "镉") + "</span></td><td>化学需氧量：<span>" + isblankNull(attr.codcr, "化学需氧量") + "</span></td></tr>" +
                            "<tr><td colspan='3'>总氮：<span>" + isblankNull(attr.tn, "总磷") + "</span></td></tr>" +
                            "<tr><td>六价铬：<span>" + isblankNull(attr.cr6, "六价铬") + "</span></td><td>铜：<span>" + isblankNull(attr.cu, "铜") + "</span></td><td>高锰酸盐指数：<span>" + isblankNull(attr.codmn, "高锰酸盐指数") + "</span></td></tr>" +
                            "<tr><td>溶解氧：<span>" + isblankNull(attr.dox, "溶解氧") + "</span></td><td>汞：<span>" + isblankNull(attr.hg, "汞") + "</span></td><td>五日生化需氧量：<span>" + isblankNull(attr.bod5, "五日生化需氧量") + "</span></td></tr>" +
                            "<tr><td>挥发酚：<span>" + isblankNull(attr.vlph, "挥发酚") + "</span></td><td>铅：<span>" + isblankNull(attr.pb, "铅") + "</span></td><td>阴离子表面活性剂：<span>" + isblankNull(attr.las, "阴离子表面活性剂") + "</span></td></tr>" +
                            "</table></pre>" +
                            "</div>" +
                            "<div>" +
                            "</div>",
                        location: pt
                    });
                }
            }
        });
    });
    view.on("click", function (event) {
        var screenPoint = {
            x: event.x,
            y: event.y
        };
        view.hitTest(screenPoint).then(function (response) {
            if (response.results[0].graphic) {
                var pt = response.results[0].mapPoint;
                var attr = response.results[0].graphic.attributes;
                if (response.results[0].graphic.layer.id == "layer_1h3hLayer") {
                    if (attr == 'WJ') {
                        pointerClik("320584", "吴江市", "JS_ST_WRY");
                    }
                    if (attr == 'JS') {
                        pointerClik("330421", "嘉善县", "ZJ_ST_WRY");
                    }
                    if (attr == 'QP') {
                        pointerClik("310118", "青浦区", "SH_ST_WRY");
                    }
                }
            }
        });
    });
});

function isblankNull(data, name) {
    if (data == null || data == "") {
        return "";
    } else {
        if (name == "氰化物" || name == "氨氮" || name == "总磷" || name == "总氮" || name == "叶绿素a" || name == "六价铬" || name == "溶解氧" || name == "砷" || name == "硒" || name == "锌"
            || name == "镉" || name == "铜" || name == "汞" || name == "铅" || name == "氟化物" || name == "硫化物" || name == "石油类" || name == "化学需氧量" || name == "高锰酸盐指数" || name == "五日生化需氧量" || name == "阴离子表面活性剂" || name == "挥发酚") {
            return data + "&#9;mg/L  ";
        } else if (name == "水温") {
            return data + " ℃  ";
        } else if (name == "电导率") {
            return data + "&#9;uS/cm  ";
        } else if (name == "PH") {
            return data;
        } else if (name == "水位") {
            return data + "&#9;m  ";
        } else if (name == "浊度") {
            return data + "&#9;度  ";
        } else if (name == "流量") {
            return data + "&#9;m³/s  ";
        } else {
            return data;
        }
    }

}

function pointerClik(stcd, stnm, flag) {
    $('.sg-mask').css('display', 'none');

    $("#contentUrl").attr("src", ctx + "web/data-common-chart.html?bizCode=" + flag + "&stcd=" + stcd + "&stnm=" + encodeURI(stnm));

    $("#nameStcd").text(stnm);

    $('.sg-mask').css('display', 'block');
}