fuyuhang
/
Project_yhfu
spiegel van http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title data-i18n="resources.title_uniqueTheme3DLayer"></title>
    <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,user-scalable=no"/>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <style>
        .mapboxgl-popup {
            cursor: auto;
        }

        .mapboxgl-popup-tip {
            border-top-color: rgba(0, 0, 0, 0.8) !important;
        }

        .mapboxgl-popup-content {
            color: whitesmoke;
            background-color: rgba(0, 0, 0, 0.8) !important;
        }
    </style>
</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" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
<script>
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var dataUrl = host + "/iserver/services/data-jingjin/rest/data";

    var center = [116.640545, 40.531714], themeField = "LANDTYPE", popup;

    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

    var map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        },
        center: center,
        zoom: 7
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        buildThemeLayer();

    function buildThemeLayer() {
        var getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
            queryParameter: new SuperMap.FilterParameter({
                name: "Jingjin",
                attributeFilter: "SMID > -1"
            }),
            toIndex: 500,
            datasetNames: ["Jingjin:Landuse_R"]
        });

        var queryFeatures = new SuperMap.GetFeaturesBySQLService(dataUrl, {
            eventListeners: {
                processCompleted: function (serviceResult) {
                    if (serviceResult.error) {
                        alert("error:" + JSON.stringify(serviceResult.error));
                        return;
                    }
                    var result = serviceResult.result;
                    if (result.features) {
                        createThemeLayer(result.features)
                    }
                }
            },
            format: SuperMap.DataFormat.GEOJSON
        });
        queryFeatures.processAsync(getFeatureBySQLParams);
    }

    //创建专题图图层
    function createThemeLayer(data) {
        popup = new mapboxgl.Popup({closeOnClick: true}).addTo(map);
        var themeLayer = new mapboxgl.supermap.UniqueTheme3DLayer("uniqueThemeLayer", {
            height: 6000,
            enableHighlight: true,
            themeField: themeField,
            colorStops: [
                ["草地", "#C1FFC1"], ["城市", "#CD7054"], ["灌丛", "#7CCD7C"], ["旱地", "#EE9A49"],
                ["湖泊水库", "#8EE5EE"], ["经济林", "#548B54"], ["沙漠", "#DEB887"], ["水浇地", "#E0FFFF"],
                ["水田", "#388E8E"], ["用材林", "#556B2F"], ["沼泽", "#2F4F4F"]
            ],

            // 显示图例
            showLegend: true,
            legendTitle: resources.text_landUseType,
            legendOrientation: 'vertical'
        });
        themeLayer.setHighlightStyleOptions({callback: highlightCallback}).setData(data).addTo(map);
        map.easeTo({
            pitch: 60,
            bearing: 0
        })
    }

    //设置高亮图层提示
    function highlightCallback(features, evt) {
        var ft = features && features[0];
        if (!ft) {
            popup.remove();
        }
        if (ft && ft.properties) {
            var content = "<span>" + resources.text_landType + ": " + ft.properties[themeField] + "</span><br>";
            content += "<span>" + resources.text_landArea + ": " + ft.properties["AREA"] + " " + resources.text_squareKilometre + "</span><br>";
            popup.addTo(map);
            popup.setLngLat(evt.lngLat);
            popup.setHTML(content);
        }
        map.on('mouseout', function () {
            popup.remove();
        });
    }

</script>
</body>
</html>