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访问私有服务

相关推荐
Din几秒前
主动取消的防抖
前端·javascript·typescript
H5开发新纪元16 分钟前
Nginx 部署 Vue3 项目完整指南
前端·javascript·面试
决斗小饼干18 分钟前
跨语言移植手记:把 TypeScript 的 Codex SDK 请进 .NET 世界
前端·javascript·typescript
进击的尘埃21 分钟前
Vitest 浏览器模式:别再用 jsdom 骗自己了
javascript
bluceli22 分钟前
JavaScript模块化深度解析:从CommonJS到ES Modules的演进之路
前端·javascript
前端人类学23 分钟前
前端输入框禁用:disabled、readonly 与.prop (‘disabled‘, true) 完全解析
前端·javascript
青青家的小灰灰1 小时前
Pinia 完全指南:重构你的 Vue 3 状态管理架构
前端·javascript·vue.js
yuki_uix1 小时前
深入理解 JavaScript Event Loop:从概念到实践的完整探索
前端·javascript
Lee川1 小时前
JavaScript 继承进化史:从原型链的迷雾到完美的寄生组合
前端·javascript·面试
码路飞2 小时前
热榜全是 OpenClaw,但我用 50 行 Python 就造了个桌面 AI Agent 🤖
java·javascript