陆家嘴 区域道路和房屋可视化echarts polygons3D配置项内容和展示

陆家嘴 区域道路和房屋可视化

      var uploadedDataURL_Road = "/asset/get/s/data-1534143589600-SJRPnoAHQ.json";

var uploadedDataURL = "/asset/get/s/data-1534124434928-H1s9ZDCHm.png";

var urls = [
    '/asset/get/s/data-1534122453627-Sk0AFUAS7.json',
    '/asset/get/s/data-1534122457941-SyzJ5LRrm.json',
    '/asset/get/s/data-1534122460460-Sy4ycIRrm.json',
    '/asset/get/s/data-1534122464227-SyO19LASQ.json',
    '/asset/get/s/data-1534122469424-H1T1cIAHm.json',
    '/asset/get/s/data-1534122472873-r1bxqLCrm.json',
    '/asset/get/s/data-1534122475403-rkXe9I0B7.json',
    '/asset/get/s/data-1534122480993-Byte9UABm.json',
    '/asset/get/s/data-1534122485491-Sk6ecICBQ.json',
    '/asset/get/s/data-1534122489312-SJWbqIRSX.json',
    '/asset/get/s/data-1534122493485-SkSZ5L0SQ.json',
    '/asset/get/s/data-1534122497610-rJq-qU0H7.json',
    '/asset/get/s/data-1534122500830-H16ZcLRSQ.json',
    '/asset/get/s/data-1534122505132-Hk-M980HX.json',
    '/asset/get/s/data-1534122575649-Bku8qI0rm.json',
    '/asset/get/s/data-1534122579059-SJiIqUCrQ.json',
    '/asset/get/s/data-1534122582576-SyyvqURSm.json',
    '/asset/get/s/data-1534123103827-Hyuvn8ABX.json',
    '/asset/get/s/data-1534123105869-rJqP2IASX.json',
    '/asset/get/s/data-1534123108102-rynD3IAH7.json',
    '/asset/get/s/data-1534123110483-Hk0DnIRSm.json',
    '/asset/get/s/data-1534123112641-Sy-OnUAS7.json',
    '/asset/get/s/data-1534123114663-H1XdnIASQ.json',
    '/asset/get/s/data-1534123117335-S1Su3U0rm.json',
    '/asset/get/s/data-1534123119678-ryuu2U0BX.json',
    '/asset/get/s/data-1534123122201-r19_2LRrX.json',
    '/asset/get/s/data-1534123124560-rkpOnL0HX.json',
    '/asset/get/s/data-1534123127438-rJ1Yh8ASQ.json',
    '/asset/get/s/data-1534123130178-HkMY2URH7.json',
    '/asset/get/s/data-1534123132763-SkBtnUCr7.json',
    '/asset/get/s/data-1534123135252-BJvKnLCB7.json',
    '/asset/get/s/data-1534123147274-r1m52ICSm.json',
    '/asset/get/s/data-1534123149452-SJB938Crm.json',
    '/asset/get/s/data-1534123151998-rkO9h8RSm.json',
    '/asset/get/s/data-1534123154271-rJ99h8CS7.json',
    '/asset/get/s/data-1534123156635-ByT53ICBm.json',
    '/asset/get/s/data-1534123158829-rk1in80Sm.json',
    '/asset/get/s/data-1534123165450-rJHj2LRH7.json',
    '/asset/get/s/data-1534123169857-ry9s3I0BQ.json',
    '/asset/get/s/data-1534123172167-BJ3i38CHQ.json',
    '/asset/get/s/data-1534123178732-SymnnIRHQ.json',
    '/asset/get/s/data-1534123181402-r1HnhLRS7.json',
    '/asset/get/s/data-1534123184197-ByO2nLRr7.json',
    '/asset/get/s/data-1534123187746-Hyh3nUAr7.json',
    '/asset/get/s/data-1534123191298-Bykp3URSQ.json',
    '/asset/get/s/data-1534123210480-ryzC3U0H7.json',
    '/asset/get/s/data-1534123213741-S180h8AHm.json',
    '/asset/get/s/data-1534123216424-BydCn80HX.json',
    '/asset/get/s/data-1534123218675-HJsChURBX.json',
    '/asset/get/s/data-1534123229545-SyU1T8ABX.json',
    '/asset/get/s/data-1534123232244-BkdJaUCrX.json',
    '/asset/get/s/data-1534123234858-H1sJ6I0Hm.json',
    '/asset/get/s/data-1534123237173-rk6kaLCB7.json',
    '/asset/get/s/data-1534123239663-HkxlpLABm.json',
    '/asset/get/s/data-1534123242280-HkGgaU0Hm.json',
    '/asset/get/s/data-1534123244901-HJSepUCHm.json',
    '/asset/get/s/data-1534123248392-rkOg68CrX.json',
    '/asset/get/s/data-1534123250899-SJjgpL0H7.json',
    '/asset/get/s/data-1534123254292-rkAlaUArm.json',
    '/asset/get/s/data-1534123258486-ryz-6LRBX.json',
    '/asset/get/s/data-1534123282702-B1iG6I0Bm.json',
    '/asset/get/s/data-1534123284897-H1aGpICSX.json',
    '/asset/get/s/data-1534123287886-HkgmTL0BX.json',
    '/asset/get/s/data-1534123290691-rJQXaUAHm.json',
    '/asset/get/s/data-1534123293635-ryLXa8ArQ.json',
    '/asset/get/s/data-1534123296625-rkFQpIRHQ.json',
    '/asset/get/s/data-1534123300422-S137pLCSm.json',
    '/asset/get/s/data-1534123304645-Sy-ETI0Sm.json',
    '/asset/get/s/data-1534123308760-BySVa8CSm.json',
    '/asset/get/s/data-1534123319900-BJeBpL0SX.json',
    '/asset/get/s/data-1534123323017-H1mSTLRSQ.json',
    '/asset/get/s/data-1534123325915-rk8STLAHQ.json',
    '/asset/get/s/data-1534123337250-Hk-LaLCSQ.json',
    '/asset/get/s/data-1534123351737-BkgvpLCSX.json',
    '/asset/get/s/data-1534123353938-HyMw68CS7.json',
    '/asset/get/s/data-1534123356243-ry4PTLRrX.json',
    '/asset/get/s/data-1534123358565-HJvvpIASX.json',
    '/asset/get/s/data-1534123360969-BJKPTL0Hm.json',
    '/asset/get/s/data-1534123363418-BJoD6LCHm.json',
    '/asset/get/s/data-1534123365741-HJRP6U0Sm.json',
    '/asset/get/s/data-1534123368303-r1l_aLABm.json',
    '/asset/get/s/data-1534123371112-H1m_TL0rQ.json',
    '/asset/get/s/data-1534123373639-rk8dpICHQ.json',
    '/asset/get/s/data-1534123375996-HJdOpLCSm.json',
    '/asset/get/s/data-1534123378375-HJ5_aL0BQ.json',
    '/asset/get/s/data-1534123381458-rkTdaUABQ.json',
    '/asset/get/s/data-1534123383791-H1gY6LASm.json',
    '/asset/get/s/data-1534123386608-r1Qta8AHX.json',
    '/asset/get/s/data-1534123389592-BkLFT80Sm.json',
    '/asset/get/s/data-1534123392752-ByYFaLASQ.json',
    '/asset/get/s/data-1534123404802-H1H9p8ASQ.json',
    '/asset/get/s/data-1534123406805-HJwqTU0Bm.json',
    '/asset/get/s/data-1534123409216-rkYcTURB7.json',
    '/asset/get/s/data-1534123411440-rkoqT8AHX.json',
    '/asset/get/s/data-1534123413486-HJ69pU0SX.json',
    '/asset/get/s/data-1534123415782-rygoTI0Hm.json',
    '/asset/get/s/data-1534123418179-SJMipICBm.json',
    '/asset/get/s/data-1534123420543-rJrj6LRBQ.json',
    '/asset/get/s/data-1534123422759-rkDiaUASQ.json',
    '/asset/get/s/data-1534123425409-H1FsTLRB7.json',
    '/asset/get/s/data-1534123427825-rk2o680rQ.json',
    '/asset/get/s/data-1534123430410-ryCsTUCr7.json',
    '/asset/get/s/data-1534123432881-S1Z2pUCBQ.json',
    '/asset/get/s/data-1534123435520-BkNnp80SQ.json',
    '/asset/get/s/data-1534123439893-By_3TIABm.json',
    '/asset/get/s/data-1534123443374-HJi3aURBm.json',
    '/asset/get/s/data-1534123446355-HyAh6L0rm.json',
    '/asset/get/s/data-1534123449835-ByM6TICHm.json',
    '/asset/get/s/data-1534123452692-HJrT6LASm.json',
    '/asset/get/s/data-1534123455539-Sy_6680SX.json',
    '/asset/get/s/data-1534123466997-S1mApURBm.json',
    '/asset/get/s/data-1534123469207-rJHRaIAHm.json',
    '/asset/get/s/data-1534123471315-SyDATUArQ.json',
    '/asset/get/s/data-1534123474095-B15Cp8RrX.json',
    '/asset/get/s/data-1534123476663-Hyp0TIRrX.json',
    '/asset/get/s/data-1534123479220-BJJ10LABQ.json',
    '/asset/get/s/data-1534123481859-SyzkALAHX.json',
    '/asset/get/s/data-1534123484201-B1Ek0UABm.json',
    '/asset/get/s/data-1534123486539-rJwy08RHX.json',
    '/asset/get/s/data-1534123488873-SyKJAURrX.json',
    '/asset/get/s/data-1534123491450-Hks10IRHm.json',
    '/asset/get/s/data-1534123494077-S10108RSQ.json',
    '/asset/get/s/data-1534123496303-Hkgxg08CHX.json',
    '/asset/get/s/data-1534123498919-By7eRLAH7.json',
    '/asset/get/s/data-1534123504469-Sk_xC80S7.json',
    '/asset/get/s/data-1534123508397-B1ne0IRB7.json',
    '/asset/get/s/data-1534123511120-SyJbC8CrX.json',
    '/asset/get/s/data-1534123514840-Sk7ZCICBm.json',
    '/asset/get/s/data-1534123517358-SyBZ0IRS7.json'
];


var len = urls.length;
var index = 0;
var idMap = {};

function getRoads(callback) {
    $.getJSON(uploadedDataURL_Road, function(roadJson) {
        console.log(roadJson)
        var linesData = formatRoadData(roadJson);
        callback(linesData);
    });
}



function formatRoadData(shanghairoads) {
    var roads = shanghairoads;
    var roadList = [];
    roads.forEach(element => {
        var roadArray = element.split(';');
        var lnglats = [];
        roadArray.forEach(ll => {
            let lnglat = ll.split(',');
            lnglat = [parseFloat(lnglat[0]), parseFloat(lnglat[1])];
            let pt = turf.point(lnglat);
            let converted = turf.toWgs84(pt);
            lnglats.push(converted.geometry.coordinates);
        });
        roadList.push({
            coords: lnglats
        });
    });
    return roadList;

}

function getJson(idx) {
    var url = urls[idx];
    $.getJSON(url, function(buildingsGeoJSON) {
        var builds = [];
        if (buildingsGeoJSON.features) {
            buildingsGeoJSON = buildingsGeoJSON.features;
            builds = buildingsGeoJSON.map(function(feature) {
                //   feature.properties.name=feature.id;
                // console.log(feature.properties)
                return feature;
            })
        } else {
            builds = buildingsGeoJSON.map(function(feature) {
                return {
                    "type": "Feature",
                    "properties": {
                        "name": Math.random().toString(),
                        "height": feature.height
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [feature.polygon]
                    }
                }
            })
        }
        var buildsNew = [];
        builds.forEach(element => {
            let id = element.id;
            if (!idMap[id]) {
                buildsNew.push(element);
                idMap[id] = id;
            }

        });
        var regionsData = buildsNew.map(function(feature) {
            let f = {
                name: feature.properties.name || feature.properties.id,
                value: Math.random() * 1,
                height: feature.properties.height * 2 || feature.properties.levels * 8,
                coords: feature.geometry.coordinates,
            };
            if (f.height < 30 || isNaN(f.height)) f.height = 30;
            return f;
        });
        index++;
        if (index < len) {
            myChart.appendData({
                seriesIndex: 0,
                data: regionsData
            });
            getJson(index);
        } else {
            //initCharts(index);
        }
    })

}

function initCharts(linesData) {
    myChart.setOption({
        title: {
            text: '陆家嘴',
            textStyle: {
                color: '#fff',
                fontSize: 45,
                align: 'center'
            }
        },
        maptalks3D: {
            zoom: 6,
            center: [121.49342415576655, 31.24042154361959],
            pitch: 55,
            bearing: 0,
            urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
            postEffect: {
                enable: true,
                FXAA: {
                    enable: true
                }
            },
            light: {
                main: {
                    intensity: 1,
                    shadow: false,
                    shadowQuality: 'high'
                },
                ambient: {
                    intensity: 0.
                },
                ambientCubemap: {
                    texture: '/asset/get/s/data-1491838644249-ry33I7YTe.hdr',
                    exposure: 1,
                    diffuseIntensity: 0.5,
                    specularIntensity: 2
                }
            }
        },
        series: [{
                type: 'polygons3D',
                coordinateSystem: 'maptalks3D',
                // multiPolygon: true,
                // map: 'buildings',
                data: [], //buildsData,
                shading: 'realistic',
                instancing: true,
                silent: true,
                realisticMaterial: {
                    metalness: 1,
                    roughness: 0.4,
                    textureTiling: 35,
                    detailTexture: uploadedDataURL
                }
            },
            {
                type: 'lines3D',
                coordinateSystem: 'maptalks3D',
                effect: {
                    show: true,
                    constantSpeed: 0.001,
                    trailWidth: 5,
                    trailLength: 0.5,
                    trailOpacity: 1,
                    spotIntensity: 10
                },
                blendMode: 'lighter',
                lineStyle: {
                    color: '#0991A9',
                    opacity: 0.1

                },
                polyline: true,
                data: linesData
            }
        ]
    });
    var map = myChart.getModel().getComponent('maptalks3D').getMaptalks();
    map.on('click', function(e) {
        console.log(map.getView());
    })
    map.animateTo({
        zoom: 16,
        center: [121.49342415576655, 31.24042154361959],
        pitch: 55,
        bearing: 0
    }, {
        duration: 5000
    })
}
myChart.showLoading();
getRoads(function(linesData) {
    myChart.hideLoading();
    initCharts(linesData);
    getJson(0)
});


window.addEventListener('resize', function() {
    myChart.resize();
});