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

相关推荐
一粒黑子2 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
IT枫斗者2 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
九转成圣2 小时前
Java 性能优化实战:如何将海量扁平数据高效转化为类目字典树?
java·开发语言·json
Beginner x_u3 小时前
链表专题:JS 实现原理与高频算法题总结
javascript·算法·链表
SmartRadio3 小时前
ESP32-S3 双模式切换实现:兼顾手机_路由器连接与WiFi长距离通信
开发语言·网络·智能手机·esp32·长距离wifi
laowangpython3 小时前
Rust 入门:GitHub 热门内存安全编程语言
开发语言·其他·rust·github
我叫汪枫3 小时前
在后台管理系统中,如何递归和选择保留的思路来过滤菜单
开发语言·javascript·node.js·ecmascript
_.Switch3 小时前
东方财富股票数据JS逆向:secids字段和AES加密实战
开发语言·前端·javascript·网络·爬虫·python·ecmascript
软件技术NINI3 小时前
webkit简介及工作流程
开发语言·前端·javascript·udp·ecmascript·webkit·yarn
Brendan_0013 小时前
JavaScript的Stomp.over
开发语言·javascript·ecmascript