pengyu
/
tongyu_visu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title data-i18n="resources.title_rangeTheme3DLayer"></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 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 center = [116.640545, 40.531714], themeField = "POP_DENSITY99",
        themeLayer, popup;

    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:BaseMap_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);
        themeLayer = new mapboxgl.supermap.RangeTheme3DLayer("range3DThemeLayer", {
            heightField: themeField,
            themeField: themeField,
            parseNumber: true,
            enableHighlight: true,

            heightStops: [
                [0.01, 1000], [0.1, 5000], [0.2, 6000]
            ],
            colorStops: [
                [0.01, "#FDE2CA"], [0.02, "#FACE9C"], [0.04, "#F09C42"], [0.06, "#D0770B"], [0.1, "#945305"], [0.2, "#714902"]
            ],

            // 显示图例
            showLegend: true,
            legendTitle: resources.text_densityOfPopulation,
            legendOrientation: 'vertical'
        });
        themeLayer.setHighlightStyleOptions({
            color: "#058e94", 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 style='font-weight:bold;font-size: 16px;'>" + ft.properties["NAME"] + "</span><br>";
            content += "<span>" + resources.text_densityOfPopulation + ": " + ft.properties[themeField] + "</span><br>";
            popup.addTo(map);
            popup.setLngLat(evt.lngLat);
            popup.setHTML(content);
        }
        map.on('mouseout', function () {
            popup.remove();
        });
    }

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