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

编程入门行业动态更新时间:2024-10-14 02:19:14

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

应用场景：假设有一批楼宇的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=".18/esri/themes/light/main.css"><script src=".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: ""}) 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>