arcgis javascript api4.x加载非公开或者私有的arcgis地图服务

需求:

加载arcgis没有公开或者私有的地图服务,同时还想实现加载时不弹出登录窗口

提示:​

下述是针对独立的arcgis server,没有portal的应用场景;

如果有portal可以参考链接:https://mp.weixin.qq.com/s/WB09URxnPkaW9RvjHqAoSg

补充:

如果按照下述代码还弹窗,请确保通信协议保持统一,例如都使用https后者http

代码:

html 复制代码
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>hello</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.27/"></script>
    <script>
      require([
        "esri/config",
        "esri/WebMap",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/identity/IdentityManager",
        "esri/identity/ServerInfo",
      ], function (
        esriConfig,
        Map,
        MapView,
        FeatureLayer,
        IdentityManager,
        ServerInfo
      ) {
        let serverInfo = new ServerInfo({
          hasServer: true,
          server: "https://192.168.17.138:6443/arcgis/rest/services",
          tokenServiceUrl:
            "https://192.168.17.138:6443/arcgis/tokens/generateToken",
        
        });
        let userInfo = {
          username: "siteadmin",
          password: "arcgis123",
        };
        IdentityManager.generateToken(serverInfo, userInfo).then(
          (res) => {
            console.log(res);
            IdentityManager.registerToken({
              server: "https://192.168.17.138:6443/arcgis/rest/services",
              token: res.token,
            });

            let layer = new FeatureLayer({
              url: "https://192.168.17.138:6443/arcgis/rest/services/china/MapServer/0",
            });

            const map = new Map({
              layers: [layer],
            });

            const view = new MapView({
              map: map,
              container: "viewDiv",
            });

            view.when(function () {
              view.extent = layer.fullExtent;
            });
          },
          (error) => {
            console.error(error);
          }
        );
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

参考资料:

arcgis中基于token访问私有服务

相关推荐
雪碧聊技术几秒前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
Owen_Q5 分钟前
Denso Create Programming Contest 2025(AtCoder Beginner Contest 413)
开发语言·算法·职场和发展
·云扬·22 分钟前
【Java源码阅读系列37】深度解读Java BufferedReader 源码
java·开发语言
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
liulilittle1 小时前
C++ i386/AMD64平台汇编指令对齐长度获取实现
c语言·开发语言·汇编·c++
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
Thomas_YXQ1 小时前
Unity URP法线贴图实现教程
开发语言·unity·性能优化·游戏引擎·unity3d·贴图·单一职责原则