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


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

<head>
    <meta charset="UTF-8">
    <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="echarts,ol3-echarts" 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%
        }

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

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

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

        .ol-overlaycontainer-stopevent{
            height: 0% !important;
        }
    </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="jquery" src="../js/include-web.js"></script>
    <script>
       
        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: [12954583.524137927, 4860747.532344677],
                zoom: 10,
                projection: 'EPSG:3857',
                multiWorld: true
            }),
            layers: [new ol.layer.Tile({
                source: new ol.source.TileSuperMapRest({
                    url: url
                })
            })]
        });

        var echartslayer = new ol3Echarts(null, {
            hideOnMoving: true,
            hideOnZooming: true
        });
        echartslayer.appendTo(map);

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

        new ol.supermap.QueryService(queryUrl).queryBySQL(sqlParam, function (data) {
            echartslayer.hideLoading();
            var features = data.result.recordsets[0].features.features;

            var data = [];//由矩形左上角点&权重值&矩形右下角点组成
            for (var i = 0; i < features.length; i++) {
                var pointLeftTop = features[i].geometry.coordinates[0][0][0];
                var pointRightBottom = features[i].geometry.coordinates[0][0][2];
                var value = parseFloat((features[i].properties.average_price_1 / 10000).toFixed(2))
                data.push(pointLeftTop.concat(value).concat(pointRightBottom));
            }
            var COLORS = ['#e0dffb', '#8c88ef', '#5954e8', '#221cd2', '#17138d', '#0c0a48', '#030314', 'red'];
            var option = {
                tooltip: {},
                visualMap: {
                    type: 'piecewise',
                    inverse: true,
                    top: 110,
                    left: 10,
                    pieces: [{
                        gt: 0, lte: 2, color: COLORS[0]
                    }, {
                        gt: 2, lte: 4, color: COLORS[1]
                    }, {
                        gt: 4, lte: 6, color: COLORS[2]
                    }, {
                        gt: 6, lte: 8, color: COLORS[3]
                    }, {
                        gt: 8, lte: 10, color: COLORS[4]
                    }, {
                        gt: 10, lte: 15, color: COLORS[5]
                    }, {
                        gt: 15, lte: 20, color: COLORS[8]
                    }, {
                        gt: 20, lte: 28, color: COLORS[9]
                    }],
                    borderColor: '#ccc',
                    borderWidth: 2,
                    backgroundColor: '#eee',
                    dimension: 2,
                    inRange: {
                        color: COLORS,
                        opacity: 0.7
                    }
                },

                series: [{
                    type: 'custom',
                    coordinateSystem: "openlayers",
                    data: data,
                    renderItem: renderItem,
                    animation: false,
                    itemStyle: {
                        emphasis: {
                            color: 'pink'
                        }
                    },
                    encode: {
                        tooltip: 2
                    }
                }]
            };
            echartslayer.setChartOptions(option);
            // 自定义渲染
            function renderItem(params, api) {
                var pointLeftTop = [api.value(0), api.value(1)];
                pointLeftTop = map.getPixelFromCoordinate(pointLeftTop);

                var pointRightBottom = [api.value(3), api.value(4)];
                pointRightBottom = map.getPixelFromCoordinate(pointRightBottom);
              
                return {
                    type: 'rect',
                    shape: {
                        x: pointLeftTop[0],
                        y: pointLeftTop[1],
                        width: pointLeftTop[0] - pointRightBottom[0],
                        height: pointLeftTop[1] - pointRightBottom[1]
                    },
                    style: api.style({
                        stroke: 'rgba(0,0,0,0.1)'
                    }),
                    styleEmphasis: api.styleEmphasis()
                };
            }
        });
    </script>
</body>

</html>