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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!--********************************************************************
* 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>
    <style type="text/css">
        .editPane {
            position: absolute;
            right: 10px;
            top: 50px;
            width: 350px;
            text-align: center;
            background: #FFF;
            z-index: 9999999;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div class='panel panel-primary editPane' id='editPane'>
    <div class='panel-heading'>
        <h5 class='panel-title text-center'>Supermap OSM BUildings Draw Data</h5>
    </div>
    <div class='panel-body' id='params'>
        <div class='input-group'>
            <span class='input-group-addon' data-i18n="resources.text_topHeight"></span>
            <input id='building_maxheight' type='text' class='form-control' value="50"/>
        </div>
        <p></p>
        <div class='input-group'>
            <span class='input-group-addon' data-i18n="resources.text_bottomHeight"></span>
            <input id='building_minheight' type='text' class='form-control' value="0"/>
        </div>
        <p></p>
        <div class='input-group'>
            <span class='input-group-addon' data-i18n="resources.text_wallColor"></span>
            <input id='building_wallcolor' type='text' class='form-control' value="DDDDDD"/>
        </div>
        <p></p>
        <div class='input-group'>
            <span class='input-group-addon' data-i18n="resources.text_topColor"></span>
            <input id='building_roofcolor' type='text' class='form-control' value="F9F7F4"/>
        </div>
    </div>
</div>
<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, polygonLayer, drawPolygon, osm, featureID = 0,
        host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-china400/rest/maps/China";

    //检测浏览器是否支持canves，Buildings 需要Canvas绘制
    if (!document.createElement('canvas').getContext) {
        widgets.alert.showAlert(resources.msg_supportCanvas,false);
    }
    $(document).ready(function () {
        widgets.alert.showAlert(resources.msg_drawShape, false);
    });

    //新建矢量面图层 保存绘制的要素
    polygonLayer = new SuperMap.Layer.Vector("polygonLayer");
    drawPolygon = new SuperMap.Control.DrawFeature(polygonLayer, SuperMap.Handler.Polygon);
    //设置featureadded监听事件
    drawPolygon.events.on({"featureadded": drawCompleted});

    //初始化地图
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Navigation(),
            new SuperMap.Control.MousePosition(),
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.Zoom(),
            drawPolygon
        ]
    });

    //初始化图层
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, {maxResolution: "auto"});
    //监听图层信息加载完成事件
    layer.events.on({"layerInitialized": addLayer});

    //异步加载图层
    function addLayer() {
        map.addLayers([layer, polygonLayer]);
        map.setCenter(new SuperMap.LonLat(12957186.36784, 4852711.53595), 12);
        //激活多边形绘制
        drawPolygon.activate();
    }

    //Buildings data 初始状态
    var Draw_geojson = {
        "type": "FeatureCollection",
        "features": []
    };

    //绘制完毕
    function drawCompleted(e) {
        featureID++;
        var feature = {
            "type": "Feature",
            "id": 0,
            "geometry": {
                "type": "Polygon",
                "coordinates": []
            },
            "properties": {}
        };
        //feature屬性设置
        feature.id = featureID;
        feature.properties.height = parseInt(document.getElementById("building_maxheight").value);
        feature.properties.minHeight = parseInt(document.getElementById("building_minheight").value);
        feature.properties.wallColor = document.getElementById("building_wallcolor").value;
        feature.properties.roofColor = document.getElementById("building_roofcolor").value;

        //提取e对象中的经纬度 生成feature 保存在Draw_geojson的features中
        var components1 = e.feature.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 component = components2.components[j];
                var lonlat1 = new SuperMap.LonLat(component.x, component.y);
                //坐标系转换 OSM Buildings 数据坐标必须是 EPSG:4326
                var lonlat2 = lonlat1.transform(new SuperMap.Projection("EPSG:3857"), new SuperMap.Projection("EPSG:4326"));
                geometry_coordinates.push([lonlat2.lon, lonlat2.lat]);
            }
            //起点终点相同 闭合
            geometry_coordinates.push(geometry_coordinates[0]);
            feature.geometry.coordinates = [geometry_coordinates];
            Draw_geojson.features.push(feature);

            //判断是否已经创建了OSM Buildings图层
            if (map.getLayersByName("OSM Buildings").length) {
                osm.set(Draw_geojson);
            }
            else {
                osm = new OSMBuildings(map);
                osm.load();
                osm.date(new Date()); //设置当前时间 计算OSMBuildings 阴影
                osm.set(Draw_geojson);
                osm.click(function (e) {
                    //Buildings 单击事件 返回当前Building的ID 和 经纬度
                    widgets.alert.showAlert("FeatureID:" + e.feature,true);
                });
            }
        }
    }
</script>
</body>
</html>