openlayers加载arcgis server发布的动态切片服务

arcgis server发布动态切片服务并用openlayers加载

发布服务

首先,确保已经安装了arcgis server并完成配置
另:本文采用的坐标系为wgs1984(4326)后续引用服务的时候注意坐标系问题,坐标系不对图层加载不出来

1.对地图进行处理后,点【文件】,【共享为】,【服务】,如图所示,填好项目名称等后,直接下一步,
在这里插入图片描述
2.填好项目名称等后,选择连接为6080这个,如图,然后下一步
在这里插入图片描述
3.直接发布地图,不做参数修改
在这里插入图片描述
4.发布好的服务可以在这里面看http://localhost:6080/arcgis/manager/

参数

参数部分可以看一下这位大佬的文章(膜拜大佬

加载地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>切片地图</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
  <link
        href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css"
        rel="stylesheet"
      />
      <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
      <script
        type="text/javascript"
        src="https://cdn.bootcss.com/proj4js/2.5.0/proj4.js"
      ></script>
	  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	  </head>
	  <body>
	  <div id="map"></div>
	      <script type="text/javascript">
	              var map = new ol.Map({
	                  target: 'map',
	                  layers: [
	                      new ol.layer.Tile({
	                          source: new ol.source.TileArcGISRest({
	                              url: '服务地址'
	                          })
	                      })
	                  ],
	                  view: new ol.View({
	                      center: [地图中心点],
	                      zoom: 16,
	                      projection: 'EPSG:4326'
	                  })
	              });
	          map.on('click', function(evt) {
	              var coor=evt.coordinate;
	              alert(coor);
	          });
	      </script>
	  </body>
	  </html>

服务地址就是这个
在这里插入图片描述

结果参考

在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值