fuyuhang
/
Project_yhfu
镜像自地址 http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script type="text/javascript" include="mapv" src="../../dist/ol/include-ol.js"></script>
    <title data-i18n="resources.title_lianjia"></title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #popupContainer {
            background: rgba(9, 1, 54, 0.589);
            color: red;
            display: none;
            padding: 15px;
            color: white;
            font-size: 15px;
            font-weight: bolder;
            border-radius: 5px;
            box-shadow: 0px -1px 46px 0px rgba(0, 0, 0, 0.75);
        }

        #price {
            font-weight: lighter;
            padding-right: 5px;
        }

        #titleContainer {
            position: absolute;
            color: white;
            left: 0;
            top: 30px;
            text-align: center;
            width: 100%;
        }

        #titleContainer>#title {
            letter-spacing: 0.1em;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <div id="titleContainer">
        <h2 id="title" data-i18n="resources.title_lianjia"></h2>
    </div>
    <div id="popupContainer">
        <table>
            <tr>
                <td data-i18n="resources.text_mapvLianjia_tooltip"></td>
                <td id="price"></td>
            </tr>
        </table>
    </div>
    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
    <script type="text/javascript">
        // map
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";

        var url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
        var queryUrl = "https://www.supermapol.com/iserver/services/map_201802beijingfangjia/rest/maps/2018年2月北京房价_链家小区参考价_蜂巢";

        var map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({ attributionOptions: { collapsed: true } })
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [12956083.664865, 4872418.298275658],
                zoom: 10,
                projection: 'EPSG:3857',
                multiWorld: true
            }),
            layers: [new ol.layer.Tile({
                source: new ol.source.TileSuperMapRest({
                    url: url
                })
            })]
        });

        // popup
        var popupContainer = document.getElementById('popupContainer');
        var popup = new ol.Overlay({
            element: document.getElementById('popupContainer'),
            offset: [15, -50]
        });
        map.addOverlay(popup);

        var sqlParam = new SuperMap.QueryBySQLParameters({
            queryParams: {
                name: "lj_xq_500fc@BJ_201802LJ",
                attributeFilter: "SMID>0",
            },
            fromIndex: 0,
            toIndex: 10000,
            maxFeatures: 10000,
        });

        new ol.supermap.QueryService(queryUrl).queryBySQL(sqlParam, function (data) {
            var features = data.result.recordsets[0].features.features;
        
            //构造mapv数据
            var data = [], arr = [];
            for (var i = 0; i < features.length; i++) {

                var feature = features[i];
                var average_price = feature.properties.average_price_1;

                data.push({
                    geometry: {
                        type: 'Polygon',
                        coordinates: feature.geometry.coordinates[0]
                    },
                    count: Math.floor(average_price / 10000),
                    price: parseFloat(average_price).toFixed(2),
                });

            };

            var dataSet = new mapv.DataSet(data.concat());
            var mapvOptions = {
                max: 27,
                gradient: { // 显示的颜色渐变范围
                    '0': 'rgba(0,0,255,0.7)',
                    '0.6': 'rgba(255,0,0,0.7)'
                },
                draw: 'intensity',
                methods: {
                    click: function (item) {
                        if (item != null) {
                            $("#price").text("￥" + item.price);
                            popupContainer.style.display = "block";
                            popup.setPosition(item.geometry.coordinates[0][0]);
                        } else {
                            popup.setPosition();
                        };
                    }
                }
            };

            var options = {
                map: map, dataSet: dataSet, mapvOptions: mapvOptions
            };

            map.addLayer(new ol.layer.Image({
                source: new ol.source.Mapv(options)
            }));
        });
    </script>
</body>

</html>