Arcgis api 4.x 前端2D拉伸成3D

最新推荐文章于 2023-11-14 14:18:21 发布

gis小白的成长之路

最新推荐文章于 2023-11-14 14:18:21 发布

阅读量935

点赞数 2

分类专栏： ARCGIS API 文章标签： arcgis 2D拉伸成3D arcgis api 4.x

本文链接：https://blog.csdn.net/qq_36179257/article/details/112964732

版权

ARCGIS API 专栏收录该内容

21 篇文章 18 订阅

订阅专栏

应用场景：假设有一批楼宇的shp数据，想要在前端用三维模式展示，不同高度用不同颜色表示。
测试数据如下：将此数据发布成要素服务。

可用arcgis api 4.x 面3D符号实现 PolygonSymbol3D：传输门：PolygonSymbol3D官方API文档
在这里插入图片描述
渲染配置 SimpleRenderer: 传送门：SimpleRenderer官方API文档

实现效果，拉伸前：
在这里插入图片描述
拉伸后：

源代码：要素图层服务需要替换成你自己的url，渲染配置的字段也根据你发布的要素图层设置

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>2D拉伸成3D</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>
    <script>
        var to3D;
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/TileLayer",
            "esri/Basemap",
            "esri/geometry/SpatialReference",
            "esri/symbols/PolygonSymbol3D",
            "esri/symbols/ExtrudeSymbol3DLayer",
            "esri/renderers/SimpleRenderer",
            "esri/layers/FeatureLayer",
            "esri/geometry/Extent",
            "dojo/domReady!"
        ], function (
            Map,  
            SceneView, 
            TileLayer, 
            Basemap, 
            SpatialReference, 
            PolygonSymbol3D, 
            ExtrudeSymbol3DLayer,
            SimpleRenderer,
            FeatureLayer, 
            Extent) {
                var tileLayer = new TileLayer({ //arcgis在线地图
                    url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
                }) 
                var featureLayer = new FeatureLayer({ //需替换成自己发布的要素图层
                    url:"http://localhost:6080/arcgis/rest/services/TEST/TEST_2DTO3D/MapServer/0"
                })
                var customBasemap = new Basemap({
                    baseLayers: [tileLayer, featureLayer],
                    title: "Custom Basemap",
                    id: "myBasemap"
                });
                var map = new Map({
                    basemap: customBasemap
                });
                var view = new SceneView({
                    container: "viewDiv",
                    map: map,
                    zoom: 16,
                    center: [110.301,20.025]
                });

                //拉伸参数:根据发布的要素图层的具体字段来配置
                var visualVariables = [{
                    type: "color", //类型 ：颜色
                    field: "COLOR", //需要配置颜色的字段 
                    stops: [ //不同高度级别不同的颜色表示
						{ value: 1, color: "#7CFC00" },
                        { value: 2, color: "#ffff99" },
                        { value: 3, color: "#FFA500" },
                        { value: 4, color: "#FFC0CB" },
                        { value: 5, color: "#D8BFD8" },
                        { value: 6, color: "#4682B4" }  
                    ]
                },{
                    type: "size", //类型: 高度
                    field: "HIGH", //需要配置高度的字段
                    stops: [
						{ value: 1, size: 1 }, //不同的值代表不同高度，单位:米
                        { value: 120, size: 120 },
                        
                    ]
                }];
                var resSym = new PolygonSymbol3D({ //3D符号
                    symbolLayers: [
                        new ExtrudeSymbol3DLayer()
                    ]
                });

                var renderer = new SimpleRenderer({ //渲染实例
                    symbol: resSym,
                    visualVariables: visualVariables
                });
                
                to3D = function() { //拉伸按钮绑定的方法
                    var testLayer = new FeatureLayer({ //需替换成自己发布的要素图层
                        url: 'http://localhost:6080/arcgis/rest/services/TEST/TEST_2DTO3D/MapServer/0',
					    outFields: ["*"],
                        opacity: 0.9,
					    renderer:renderer
                    });
                    map.addMany([testLayer]);
                }   
            });
    </script>
</head>
<body>
    <button type="button" onclick="to3D()">2D拉伸3D</button>
    <div id="viewDiv"></div>
</body>
</html>