arcgis js api 4.9显示热力图

最新推荐文章于 2021-08-18 16:25:32 发布

L.傲骨雄风

最新推荐文章于 2021-08-18 16:25:32 发布

阅读量1.2k

点赞数 1

分类专栏： arcgis-js

本文链接：https://blog.csdn.net/xlp789/article/details/86648794

版权

arcgis-js 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

1.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>Visualize points with a heatmap - 4.9</title>

    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/4.9/esri/css/main.css">

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script src="http://localhost:8080/arcgis_js_api/library/4.9/init.js"></script>

    <script>
        require([
            "esri/Map",
            "esri/layers/CSVLayer",
            "esri/views/MapView",
            "esri/widgets/Legend",
            "esri/layers/FeatureLayer",
            "esri/layers/WebTileLayer",
        ], function(
            Map,
            CSVLayer,
            MapView,
            Legend,
            FeatureLayer,
            WebTileLayer
        ) {
            // 天地图矢量
            const vec_w = new WebTileLayer({
                urlTemplate:'http://t0.tianditu.com/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=02801311f98d845c66cfb48af037e949'
            })
            //天地图中文注记
            const cva_w = new WebTileLayer({
                urlTemplate:'http://t0.tianditu.com/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=02801311f98d845c66cfb48af037e949'
            })
            var quakesUrl =
                "http://localhost:6080/arcgis/rest/services/hotel/FeatureServer/0";

            const template = {
                title: "{NAME}",
                content: " 地址:{ADDR} <br>区域:{AREANAME} "
            };

            // The heatmap renderer assigns each pixel in the view with
            // an intensity value. The ratio of that intensity value
            // to the maxPixel intensity is used to assign a color
            // from the continuous color ramp in the colorStops property

            const renderer = {    //'#00f', '#0ff', '#0f0', '#ff0', '#f00'
                type: "heatmap",
                colorStops: [
                    {
                        color: "rgba(63, 40, 102, 0)",
                        ratio: 0
                    },
                    {
                        color: "#00f",
                        ratio: 0.183
                    },
                    {
                        color: "#0ff",
                        ratio: 0.266
                    },
                    {
                        color: "#0f0",
                        ratio: 0.549
                    },
                    {
                        color: "#ff0",
                        ratio: 0.732
                    },
                    {
                        color: "#f00",
                        ratio: 0.915
                    }],
                maxPixelIntensity: 120,
                minPixelIntensity: 0
            };


            var wellsLayer = new FeatureLayer({
                url: quakesUrl,
                outFields: ["*"],
                popupTemplate: template,
                renderer: renderer
            })

            const map = new Map({
                basemap: "gray",
                layers: [vec_w,cva_w,wellsLayer]
            });

            const view = new MapView({
                container: "viewDiv",
                center:[123.5,41.8],
                zoom: 11,
                map: map
            });

            view.ui.add(new Legend({
                view: view
            }), "bottom-left");

        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>

</html>

2.结果

L.傲骨雄风

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
arcgis js api 4.9显示热力图

1.代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"&gt; &
复制链接

扫一扫

专栏目录