leaflet 添加arcgis rest 服务

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"
        integrity="sha512-q7X96AASUF0hol5Ih7AeZpRF6smJS55lcvy+GLWzJfZN+31/BQ8cgNx2FGF+IQSA4z2jHwB20vml+drmooqzzQ=="
        crossorigin=""></script>
    <style>
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map'>

    </div>
    <script>
        let map = L.map('map').setView([39.751407, 114.628740], 5);
        let dynamicLayer = L.esri.dynamicMapLayer({
            url: 'https://www.chart.msa.gov.cn/arcgis/rest/services/CHARTCELL_84/MapServer/',
            opacity: 1,
            f: 'json'
        });
        map.addLayer(dynamicLayer);
    </script>

</body>

</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Leaflet是一个轻量级的开源JavaScript库,用于创建移动友好的交互式地图。而ArcGIS则是一个强大的地理信息系统(GIS)平台,提供各种类型的地图和数据。要将ArcGIS的瓦片地图加载Leaflet中,你可以按照以下步骤进行操作: 1. 安装依赖:在项目中安装LeafletArcGISJavaScript库。你可以使用npm或yarn等包管理器来安装所需的依赖项。 2. 创建地图容器:使用Leaflet创建一个地图容器,并设置其id或其他自定义属性以便于后续引用。 3. 加载瓦片图层:使用Leaflet的TileLayer类加载ArcGIS的瓦片图层。你需要提供ArcGIS服务器的主机名、瓦片图层的名称和瓦片图层的URL。 ```javascript var tileLayer = L.tileLayer('http://<ArcGIS服务器主机名>/arcgis/rest/services/<瓦片图层名称>/MapServer/tile/{z}/{y}/{x}', { attribution: '© <ArcGIS版权信息>' }); ``` 确保将`<ArcGIS服务器主机名>`替换为实际的ArcGIS服务器主机名,并将`<瓦片图层名称>`替换为实际的瓦片图层名称。 4. 将图层添加到地图:将加载的瓦片图层添加到地图容器中。 ```javascript map.addLayer(TileLayer); ``` 5. 配置地图选项:根据需要配置地图选项,如缩放级别、坐标系等。 6. 显示地图:将配置好的地图显示在页面上。 这样,你就可以在Leaflet加载和使用ArcGIS的瓦片地图了。请确保你已正确配置ArcGIS服务器和相关权限,以便能够访问所需的瓦片图层。此外,你可能还需要根据需要调整代码以适应特定的项目要求和样式。 请注意,此过程假设你已经了解了基本的LeafletJavaScript知识,并且已经正确安装和配置了所需的依赖项。如果你不熟悉这些技术,建议参考相关的文档和教程以获得更深入的了解。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值