123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
- <title>nb BuildingSceneLayer with Slice widget | Sample | ArcGIS Maps SDK for JavaScript 4.27</title>
- <style>
- html,
- body,
- #viewDiv {
- padding: 0;
- margin: 0;
- height: 100%;
- width: 100%;
- }
- #menu {
- padding: 0.8em;
- max-width: 250px;
- }
- #sliceContainer {
- width: inherit;
- }
- #sliceOptions {
- margin: 0 15px;
- }
- #sliceOptions>button {
- margin-bottom: 15px;
- }
- #sliceContainer {
- max-width: 228px;
- }
- #containerDiv {
- background-color: white;
- padding: 3px;
- text-align: center;
- width: 300px;
- }
- #title {
- font-size: 14pt;
- }
- /deep/.esri-color-slider .esri-slider .esri-slider__content {
- height: 180px;
- }
- </style>
- <link href="https://2.21.138.152:8003/arcgisjs2.24/arcgis_js_api/javascript/4.24/esri/themes/light/main.css"
- rel="stylesheet" type="text/css" />
- <script src="https://2.21.138.152:8003/arcgisjs2.24/arcgis_js_api/javascript/4.24/init.js"></script>
- <script>
- require([
- "esri/WebScene",
- "esri/Map",
- "esri/views/SceneView",
- "esri/layers/SceneLayer",
- "esri/geometry/SpatialReference",
- "esri/layers/TileLayer",
- "esri/layers/IntegratedMeshLayer",
- "esri/layers/BuildingSceneLayer",
- "esri/layers/ElevationLayer",
- "esri/layers/MapImageLayer",
- "esri/identity/IdentityManager",
- "esri/identity/ServerInfo",
- "esri/widgets/Legend",
- "esri/smartMapping/renderers/color", "esri/widgets/smartMapping/ColorSlider"
- ], (
- WebScene,
- Map,
- SceneView,
- SceneLayer, SpatialReference, TileLayer, IntegratedMeshLayer, BuildingSceneLayer, ElevationLayer, MapImageLayer,
- IdentityManager, ServerInfo, Legend, colorRendererCreator, ColorSlider
- ) => {
- //获取Token
- var serverInfo = new ServerInfo();
- serverInfo.tokenServiceUrl = "https://2.21.138.152:6443/geoscene/tokens/generateToken";
- var userInfo = { username: "dci", password: "dci..112" };
- IdentityManager.generateToken(serverInfo, userInfo).then(function (data) {
- var tokenValue = data.token;
- //注册Token,注册之后,在Portal里的所有资源,只要该用户由权限访问,就可以直接使用,之前的所有安全服务请求都将会把token值作为参数发送到服务器端
- IdentityManager.registerToken({ server: "https://2.21.138.152:6443/geoscene/rest/services/", token: tokenValue });
- }, function (error) {
- // This function is called when the promise is rejected
- console.error(error); // Logs the error message
- });
- // Load webscene and display it in a SceneView
- const webscene = new WebScene();
- const map = new Map({
- ground: {
- navigationConstraint: {
- type: "stay-above"
- },
- //surfaceColor:"#fff",
- opacity: 0.5,
- }
- });
- const layer1 = new TileLayer({
- id: "yx",
- url: "https://2.21.138.152:6443/geoscene/rest/services/BM/WXSQMAP/MapServer"
- //url:"https://2.21.138.152:6443/geoscene/rest/services/BM/%E7%AE%A1%E7%BA%BF%E6%B7%B1%E8%89%B2%E5%BA%95%E5%9B%BE/MapServer"
- //url:"https://2.21.138.152:6443/geoscene/rest/services/BM/2022wxsqdom1/MapServer"
- });
- const layer2 = new TileLayer({
- id: "gx",
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/qsrqgx/MapServer"
- });
- const layer_zj = new TileLayer({
- id: "yxzj",
- url: "https://2.21.138.152:6443/geoscene/rest/services/BM/%E5%BD%B1%E5%83%8F%E9%81%93%E8%B7%AF%E6%B3%A8%E8%AE%B0/MapServer"
- });
- //layer1.maxScale = 0;
- var layer_t = new MapImageLayer({
- id: "layer_t",
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/qsgx/MapServer"
- });
- var layer_gw = new MapImageLayer({
- id: "layer_gw",
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/service_rq/MapServer"
- });
- // const layer = new SceneLayer({
- // url: "https://2.21.138.152:6443/geoscene/rest/services/gx/trline/SceneServer",
- // title: "test"
- // });
- const layer21 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/ldline/SceneServer",
- title: "layer21"
- });
- const layer22 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/gdline/SceneServer",
- title: "layer22"
- });
- const layer23 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "layer23"
- });
- const layer24 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jspoint/SceneServer",
- title: "layer24"
- });
- const layer25 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "test23"
- });
- const layer26 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "test23"
- });
- const layer27 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "test23"
- });
- const layer28 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "test23"
- });
- const layer29 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "test23"
- });
- const layer210 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "test23"
- });
- const layer211 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "test23"
- });
- const layer212 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "test23"
- });
- const layer213 = new SceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/jsline/SceneServer",
- title: "test23"
- });
-
- var bLayer = new BuildingSceneLayer({
- url: "https://2.21.138.152:6443/geoscene/rest/services/gx/wspoint/SceneServer"
- });
- bLayer.loadAll().then(function () {
- console.log('no here ===========================================================');
- bLayer.allSublayers.forEach((subayer) => {
- if (subayer.modelName == "Overview") {
- subayer.visible = false;
- } else {
- subayer.visible = true;
- }
- });
- }).catch(function (error) {
- });
- map.addMany([layer21,layer22,layer23,layer24]);
- var layer_dem = new ElevationLayer({
- id: "",
- url: "https://2.21.138.152:6443/geoscene/rest/services/BM/%E5%B8%82%E5%8C%BADEM5m_1/ImageServer"
- });
-
- map.ground.when(() => {
- // console.log('map.ground.layers', map.ground.layers, layer_dem);
- // map.ground.layers.add(layer_dem);
- });
- /*
-
- const buildingLayer = new SceneLayer({
- url:"http://2.21.132.6:6080/geoscene/rest/services/jinkaiBM/SceneServer",
- title: "test"
- });
-
- const buildingLayer1 = new SceneLayer({
- url:"http://2.21.132.6:6080/geoscene/rest/services/jinkaiJM/SceneServer",
- title: "tQest"
- });
-
- var imLayer = new IntegratedMeshLayer({
- url: "http://2.21.132.6:6080/geoscene/rest/services/lhwlcQX/SceneServer"
- });
-
-
-
- map.addMany([imLayer,layer1]);*/
- const view = new SceneView({
- viewingMode: "local",
- container: "viewDiv",
- map: map
- });
- });
- </script>
- </head>
- <body>
- <div id="viewDiv"></div>
- <div id="containerDiv">
- <span id="title" class="esri-widget">Construction Year</span>
- <div id="slider"></div>
- </div>
- </body>
- </html>
|