• arcgis前端(2)-----＞基础篇--发布一个自定义地图及加载自定义地图/底图

    arcgis前端(2)-----＞基础篇–发布一个自定义地图及加载自定义地图/底图

    文章目录

    前言

    上一篇介绍了如何使用arcgis for javascript的jdk以及如何使用arcgis内置的基础地图，本篇将介绍如何发布一个自定义地图以及加载自定义地图/底图到页面上。如果您会发布地图or已经有一个地图链接可直接跳转到二、使用代码加载自定义地图到页面。

    注：发布自定义地图需要安装arcgis软件

    一、使用arcgis软件发布一个自定义地图

    1.在本地创建一个ArcGIS Server 站点

    PS:如果有ArcGIS Server 站点可直接阅读 2.准备素材文件
    首先我们需要在浏览器中打开http://localhost:6080/arcgis/manager/ 创建一个ArcGIS Server 站点

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    最后点击完成 然后等待创建完成之后可以点击登录然后可以查看默认的一个地图
    在这里插入图片描述

    2.准备素材文件

    首先：我们不是专门去做arcgis的，所以我们可以找一个做好的文件 or 向公司的制作arcgis的小姐姐发一份文件给我们，自己动手上传 or 直接叫制作arcgis的小姐姐发布
    推荐指数：

    • 直接叫专业做arcgis的技术大佬发布 ★★★★★
    • 向公司的制作arcgis的小姐姐发一份文件给我们，自己动手上传 ★★★
    • 找一个做好的文件★★
    • 自己动手，丰衣足食👍👍 ★

    我们这里没有arcgis小姐姐也没有money去找人做一份(公司项目涉及到政府文件，不便公开)，所以我们这里就在网上随便低价买了一份资料文件(四川的地图文件)来做演示实在找不到的话可以点击这里下载
    文件大概长这样：
    在这里插入图片描述
    文件中大概有.shp、.dbf、.mxd等文件，如果有mxd文件的话可以直接双击，它会打开arcMap(在这里面您就可以进行编辑or发布等操作)。如果没有mxd文件，那您就需要手动打开arcMap然后创建一个新的图层，导入您下载的图层
    打开后示例图：
    在这里插入图片描述

    3.将地图发布到服务器上

    我们随便移动、放大or缩小看一下地图是否可以，可以就进行导出

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    等待发布成功后我们打开服务地址：http://localhost:6080/arcgis/manager/ 可以看到刚刚发布的地图 点击图片可以进行预览
    在这里插入图片描述

    二、使用代码加载自定义地图到页面

    相关代码：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.24/"></script>
    <script>
        require(["esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer"], function (Map, MapView, MapImageLayer) {
            const map = new Map();
            // points to the states layer in a service storing U.S. census data
            let layer = new MapImageLayer({
                url: "http://localhost:6080/arcgis/rest/services/MyMaps/%E7%94%B5%E5%AD%90%E5%9C%B0%E5%9B%BE/MapServer" //url地址请看下图说明
            });
            map.add(layer);  // adds the layer to the map

            // 创建一个map视图 后期视图上的操作都通过这个对象来操作
            const view = new MapView({
                container: "viewDiv",//html容器，即将地图添加到哪个容器里
                map: map,
                zoom: 4,
                // center: [15, 65] // longitude, latitude 地图初始位置
                logo: false  //不显示Esri的logo
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    在这里插入图片描述
    其它说明：
    当然实现加载地图/底图的方式不止这一种，上面这种只是官方的写法示例

  • 相关阅读:
    C语言实验四 循环结构程序设计（一）
    Windows使用一些问题的注意事项（包括换设备备份）和乱七八糟
    P3959 [NOIP2017 提高组] 宝藏
    [WesternCTF2018]shrine
    Softing IT Networks线上研讨会 | 9月 (下篇)
    备战2024秋招面试题-对比Java、Go和Python
    第四章 Pandas统计分析基础
    oracle灾备切换和回切步骤以及sql执行语句
    移动电源外贸出口亚马逊UL2056测试报告周期
    【快速搭建系列】idea快速搭建struts2框架和测试
  • 原文地址：https://blog.csdn.net/z1783883121/article/details/125484868