fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Supermap OSM BUildings Draw Data</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" include="OSMBuildings-SuperMap" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript">
    var map, layer, osm, dataurl,alertDiv,
        host = window.isLocal ? window.server : "https://iserver.supermap.io";
    url = host + "/iserver/services/map-china400/rest/maps/China";
    dataurl = host + "/iserver/services/data-jingjin/rest/data";

    //检测浏览器是啥支持canves Buildings 需要Canvas绘制
    if (!document.createElement('canvas').getContext) {
        widgets.alert.showAlert(resources.msg_supportCanvas, false);
    }
    //初始化地图
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Navigation(),
            new SuperMap.Control.MousePosition(),
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.Zoom()
        ]
    });
    //初始化图层
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, {maxResolution: "auto"});
    //监听图层信息加载完成事件
    layer.events.on({"layerInitialized": addLayer});

    //异步加载图层
    function addLayer() {
        map.addLayers([layer]);
        //显示地图范围
        map.setCenter(new SuperMap.LonLat(12957186.36784, 4852711.53595), 8);

        // SQL 查询方式从服务器端获取数据
        getFeatureBySQL();
    }

    function getFeatureBySQL() {
        //vectorlayer.removeAllFeatures();
        var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParam;
        //查询参数设置
        getFeatureParam = new SuperMap.REST.FilterParameter({
            name: "Capital",
            atrributeFilter: "SMID<15"
        });
        getFeatureBySQLParam = new SuperMap.REST.GetFeaturesBySQLParameters({
            queryParameter: getFeatureParam,
            datasetNames: ["Jingjin:BaseMap_R"]
        });
        //实例化Service 并且设置监听函数
        getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(dataurl, {
            eventListeners: {
                "processCompleted": processCompleted,
                "processFailed": processFailed
            }
        });
        //向服务发送操作参数
        getFeatureBySQLService.processAsync(getFeatureBySQLParam);
    }

    //查询成功后的处理方法
    function processCompleted(getFeatureEventArgs) {
        var i, len, features, result = getFeatureEventArgs.result;
        if (result && result.features) {
            features = result.features;
            for (i = 0, len = features.length; i < len; i++) {
                //var feature = features[i];
                FeatureToOSMBuildingsGeojson(features[i]);
            }
            //构建OSMBuildings
            OSMBuildingsInit();
        }
    }

    //查询失败
    function processFailed(e) {
        widgets.alert.showAlert(e.error.errorMsg,false);
    }

    var Draw_geoJSON = {
        "type": "FeatureCollection",
        "features": []
    };
    var featureID = 0;

    //处理服务器端返回的feature数据
    function FeatureToOSMBuildingsGeojson(e) {
        featureID++;
        var feature = {
            "type": "Feature",
            "id": 0,
            "geometry": {
                "type": "Polygon",
                "coordinates": []
            },
            "properties": {
                "wallColor": "rgb(111,168,220)",
                "roofColor": "rgb(207,226,243)",
                "height": 0,
                "minHeight": 0
            }
        };

        feature.id = featureID;
        feature.properties.height = e.attributes.POP_DENSITY99 * 800;
        feature.properties.wallColor = getWallColorByPoP(e.attributes.POP_DENSITY99);
        feature.properties.roofColor = getRootColorByPoP(e.attributes.POP_DENSITY99);


        var components1 = e.geometry.components;

        var geometry_coordinates = [];
        for (var i = 0; i < components1.length; i++) {
            var components2 = components1[i];
            for (var j = 0; j < components2.components.length; j++) {
                var components3 = components2.components[j];
                for (var k = 0; k < components3.components.length; k++) {
                    var component = components3.components[k];
                    var lonlat = new SuperMap.LonLat(component.x, component.y);
                    geometry_coordinates.push([lonlat.lon, lonlat.lat]);
                }
                //起点终点相同 闭合
                geometry_coordinates.push(geometry_coordinates[0]);
                feature.geometry.coordinates = [geometry_coordinates];
                Draw_geoJSON.features.push(feature);
            }
        }
    }

    function getWallColorByPoP(pop) {
        var color = "#00eeee"
        if (pop >= 0 && pop < 0.02) {
            color = "#FDE2CA"
        } else if (pop >= 0.02 && pop < 0.04) {
            color = "#FACE9C";
        } else if (pop >= 0.04 && pop < 0.06) {
            color = "#F09C42";
        } else if (pop >= 0.06 && pop < 0.1) {
            color = "#D0770B";
        } else if (pop >= 0.1 && pop < 0.2) {
            color = "#945305";
        }
        return color;
    }

    function getRootColorByPoP(pop) {
        var color = "#00eeee"
        if (pop >= 0 && pop < 0.02) {
            color = "#F5E0CD"
        } else if (pop >= 0.02 && pop < 0.04) {
            color = "#F7D1A6";
        } else if (pop >= 0.04 && pop < 0.06) {
            color = "#F3A755";
        } else if (pop >= 0.06 && pop < 0.1) {
            color = "#DA861F";
        } else if (pop >= 0.1 && pop < 0.2) {
            color = "#A96411";
        }
        return color;
    }

    //OSMBuildings 构建
    function OSMBuildingsInit() {
        osm = new OSMBuildings(map);
        osm.load();
        osm.date(new Date()); //设置当前时间 计算OSMBuildings 阴影
        osm.set(Draw_geoJSON);
        osm.click(function (e) {
            // 返回当前点击的feature ID 和 当前的经纬度
            widgets.alert.showAlert("FeatureID:" + e.feature,true);
        });
    }
</script>
</body>
</html>