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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_lianjia"></title>
        <script type="text/javascript" src="../js/include-web.js"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
                background: #fff;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
            }

            #map {
                margin: 0 auto;
                width: 100%;
                height: 100%;
            }

            #titleContainer {
                width: 100%;
                position: absolute;
                top: 30px;
                color: white;
                z-index: 999;
                font-size: 20px;
                font-weight: bold;
                text-align: center;
            }

            #titleContainer > #title {
                letter-spacing: 0.1em;
            }

            .popupStyle {
                font-size: 15px;
                font-weight: bolder;
                padding: 15px;
                border-radius: 5px;
            }

            .popupStyle .leaflet-popup-content-wrapper,
            .popupStyle .leaflet-popup-tip {
                background: rgba(9, 1, 54, 0.589);
                color: white;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div id="titleContainer">
            <h2 id="title" data-i18n="resources.title_lianjia"></h2>
        </div>
        <script type="text/javascript" include="mapv" src="../../dist/leaflet/include-leaflet.js"></script>
        <script type="text/javascript">
            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
            var baseurl = host + '/iserver/services/map-china400/rest/maps/ChinaDark';

            var dataUrl =
                'https://www.supermapol.com/iserver/services/map_201802beijingfangjia/rest/maps/2018年2月北京房价_链家小区参考价_蜂巢';

            var map, resultLayer, popup;

            map = L.map('map', {
                center: [39.954, 116.36],
                zoom: 12,
                maxZoom: 18,
                minZoom: 6
            });
            L.supermap.tiledMapLayer(baseurl).addTo(map);

            query();

            function query() {
                var param = new SuperMap.QueryBySQLParameters({
                    queryParams: {
                        name: 'lj_xq_500fc@BJ_201802LJ',
                        attributeFilter: 'SMID > 0'
                    },
                    fromIndex: 0,
                    toIndex: 10000,
                    maxFeatures: 10000
                });
                L.supermap.queryService(dataUrl).queryBySQL(param, function(serviceResult) {
                    var result = serviceResult.result;
                    var features = result.recordsets[0].features.features;
                    //构造数据
                    var data = [];
                    for (var i = 0; i < features.length; i++) {
                        var feature = features[i];
                        var average_price = feature.properties.average_price_1;
                        var coordinates = feature.geometry.coordinates[0];
                        for (var k = 0; k < coordinates.length; k++) {
                            for (var j = 0; j < coordinates[k].length; j++) {
                                coordinates[k][j] = coordsTo4326(coordinates[k][j]);
                            }
                        }
                        data.push({
                            geometry: {
                                type: 'Polygon',
                                coordinates: coordinates
                            },
                            count: parseFloat(average_price / 10000).toFixed(2),
                            price: parseFloat(average_price).toFixed(2)
                        });
                    }
                    var dataSet = new mapv.DataSet(data);
                    var options = {
                        fillStyle: 'rgba(255, 80, 53, 0.8)',
                        max: 27,
                        label: {
                            show: true,
                            fillStyle: 'white'
                        },
                        globalAlpha: 0.7,
                        gradient: {
                            // 显示的颜色渐变范围
                            '0': '#5d5dff',
                            '0.2': '#74add1',
                            '0.4': '#ffffbf',
                            '0.6': '#d73027',
                            '0.8': '#FF0000'
                        },
                        draw: 'intensity',
                        //弹窗的点击事件
                        methods: {
                            click: function(item) {
                                if (item != null) {
                                    var point = item.geometry.coordinates[0][0];
                                    popup
                                        .setLatLng([point[1], point[0]])
                                        .setContent(resources.text_mapvLianjia_tooltip + item.price)
                                        .openOn(map);
                                } else {
                                    popup.closePopup();
                                }
                            }
                        }
                    };
                    //创建mapv图层
                    resultLayer = L.supermap.mapVLayer(dataSet, options).addTo(map);
                    popup = L.popup({
                        className: 'popupStyle'
                    });
                });

                function coordsTo4326(coords) {
                    var lngLat = L.CRS.EPSG3857.unproject(L.point(coords));
                    return [lngLat.lng, lngLat.lat];
                }
            }
        </script>
    </body>
</html>