上一篇介绍了如何使用arcgis for javascript的jdk以及如何使用arcgis内置的基础地图,本篇将介绍如何发布一个自定义地图以及加载自定义地图/底图到页面上。如果您会发布地图or已经有一个地图链接可直接跳转到二、使用代码加载自定义地图到页面。
PS:如果有ArcGIS Server 站点可直接阅读 2.准备素材文件
首先我们需要在浏览器中打开http://localhost:6080/arcgis/manager/ 创建一个ArcGIS Server 站点
最后点击完成 然后等待创建完成之后可以点击登录然后可以查看默认的一个地图
首先:我们不是专门去做arcgis的,所以我们可以找一个做好的文件 or 向公司的制作arcgis的小姐姐发一份文件给我们,自己动手上传 or 直接叫制作arcgis的小姐姐发布
推荐指数:
我们这里没有arcgis小姐姐也没有money去找人做一份(公司项目涉及到政府文件,不便公开),所以我们这里就在网上随便低价买了一份资料文件(四川的地图文件)来做演示
实在找不到的话可以点击这里下载
文件大概长这样:
文件中大概有.shp、.dbf、.mxd等文件,如果有mxd文件的话可以直接双击,它会打开arcMap(在这里面您就可以进行编辑or发布等操作)。如果没有mxd文件,那您就需要手动打开arcMap然后创建一个新的图层,导入您下载的图层
打开后示例图:
我们随便移动、放大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>
其它说明:
当然实现加载地图/底图的方式不止这一种,上面这种只是官方的写法示例
下一篇:自定义地图优化/隐藏or显示子图层