arcgis、geoscene 4.x api加载天地图切片方式的mapserver服务

zhanggong1993

已于 2025-03-31 22:34:34 修改

阅读量137

点赞数 1

分类专栏： arcgis、geoscene 文章标签： arcgis geoscene

于 2025-03-31 22:33:55 首次发布

本文链接：https://blog.youkuaiyun.com/zhanggong1993/article/details/146887638

版权

arcgis、geoscene 专栏收录该内容

1 篇文章

订阅专栏

直接贴代码吧。。。,3.x支持拼接token，4.x不支持拼接token，会被replace掉，要用IdentityManager

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ArcGIS JSAPI 底图示例</title>
  <link rel="stylesheet" href="http://localhost/jsapi/4.22/@arcgis/core/assets/esri/themes/light/main.css"> 
</head>
<body>
  <div id="viewDiv" style="height: 600px; width: 100%;"></div>
        <button id="pointBtn">绘制点</button>
        <button id="lineBtn">绘制线</button>
        <button id="polygonBtn">绘制面</button>
  <script type="module">
    // 导入所需模块 
    import Map from "http://localhost/jsapi/4.22/@arcgis/core/Map.js"; 
    import MapView from "http://localhost/jsapi/4.22/@arcgis/core/views/MapView.js"; 
    import MapImageLayer from "http://localhost/jsapi/4.22/@arcgis/core/layers/MapImageLayer.js"; 
    import Graphic from 'http://localhost/jsapi/4.22/@arcgis/core/Graphic.js'; 
    import GraphicsLayer from 'http://localhost/jsapi/4.22/@arcgis/core/layers/GraphicsLayer.js'; 
    import SketchViewModel from 'http://localhost/jsapi/4.22/@arcgis/core/widgets/Sketch/SketchViewModel.js'; 
    import TileLayer from 'http://localhost/jsapi/4.22/@arcgis/core/layers/TileLayer.js'; 
	import IdentityManager from "http://localhost/jsapi/4.22/@arcgis/core/identity/IdentityManager.js";
	import ServerInfo from "http://localhost/jsapi/4.22/@arcgis/core/identity/ServerInfo.js";
    // 初始化地图 
    const url = "https://localhost:6443/arcgis/tokens/generateToken";
	 var serverInfo = new ServerInfo();
	  serverInfo.serverString = "https://localhost:6443/arcgis/rest/services";  //这里配置ArcGIS Server的REST服务地址
	  serverInfo.tokenServiceUrl = url;  //
	  var userInfo  = {username:"fjsldtst",password:"esri@123"};  //这里填写server的用户和密码
	  IdentityManager.generateToken(serverInfo,userInfo).then(function(data){
		  // 获取token
		  var tokenValue = data.token;
		  //注册Token，注册之后，在server里的所有资源，只要该用户由权限访问，就可以直接使用，之前的所有安全服务请求都将会把token值作为参数发送到服务器端
	      IdentityManager.registerToken({server:"https://localhost:6443/arcgis/rest/services",token:tokenValue});
		  console.log(tokenValue);
    const map = new Map({
      basemap: null // 不搞底图 
    });
	var tileLayer = new TileLayer({
        	url: "https://localhost:6443/arcgis/rest/services/Basemap/FujianBasemap2019st/MapServer",
			//token: tokenservice,
        	opacity: 1.0
    });
	
 
	map.add(tileLayer);
    const view = new MapView({
      container: "viewDiv", // DOM容器ID 
      map: map,
      center: [119.3, 26.08], // 中心点坐标(南京)
      zoom: 12 
    });
const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer); 
 
        // 初始化绘图工具 
        let sketchViewModel = new SketchViewModel({
            view: view,
            layer: graphicsLayer 
        });
 
        // 按钮事件绑定 
        document.getElementById("pointBtn").addEventListener("click",  () => {
            sketchViewModel.create("point"); 
        });
 
        document.getElementById("lineBtn").addEventListener("click",  () => {
            sketchViewModel.create("polyline"); 
        });
 
        document.getElementById("polygonBtn").addEventListener("click",  () => {
            sketchViewModel.create("polygon"); 
        });
 
        // 绘图完成事件 
        sketchViewModel.on("create",  (event) => {
            if (event.state  === "complete") {
                graphicsLayer.add(event.graphic); 
            }
        });
		}, function(error){
		  // This function is called when the promise is rejected
		  console.error(error);  // Logs the error message
		});
	  
	
  </script>
</body>
</html>