Esri Leaflet 第一个例子：加载ArcGIS底图

最新推荐文章于 2024-03-25 09:41:48 发布
VIP文章 最新推荐文章于 2024-03-25 09:41:48 发布
阅读量3.4k 收藏 2
点赞数 3
分类专栏： Esri Leaflet Leaflet 文章标签： Esri Leaflet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meizi454089902/article/details/81222572
版权

Leaflet是一种开源的JavaScript 地图库，算是WebGIS中比较主流的地图库，轻量、插件丰富、社区活跃度高，相对来说比较成熟。就在前不久，刚发布了新版本1.3.3。

下面，将介绍如何显示ArcGIS基础底图。

首先，在加载Leaflet的代码和样式，Leaflet.js、leaflet.css；加载Esri Leaflet库： esri-leflet.js。

  <!-- lets load Leaflet's .js and .css from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

  <!-- Load Esri Leaflet from CDN.  it has no .css stylesheet of its own, only .js -->
  <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>

支持的基础底图
         支持ArcGIS Online的基础底图ÿ

最低0.47元/天 解锁文章
「已注销」
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
esri-leaflet:一组用于在Leaflet中使用ArcGIS服务的轻量级工具
04-12
埃斯里传单 用于处理少数几种最流行的类型的插件。 这包括Esri和，以及地图， 地图和服务。 该项目与 :red_heart: 由Esri的多个团队的成员提供，但我们不提供个人功能的保证，也不提供传统的产品生命周期来支持计划。 该项目的目的不是要替换 ，而是仅为希望使用构建地图应用程序的开发人员提供针对ArcGIS平台某些方面的小型组件。 我们为能够推动一个需要我们多样化的用户社区参与才能蓬勃发展的项目而感到自豪，我们欢迎那些开源领域的人们做出的贡献。 还支持服务和地理处理服务以及服务定义的渲染（通过其他插件）。 如果您想在任何Leaflet应用程序中显示Esri服务，我们要求您遵守我们的使用条款和出处规定。 目录 入门 演示版 例子 API参考 其他插件 经常问的问题 问题 依存关系 更深入 开发说明 版本控制 贡献 条款 信用 执照 演示版 我们共享了许多示例代码，这些示例代码展示了Es
使用 esri-leaflet 加载 arcGIS server
m0_57133304的博客
10-08 918
【代码】使用esri-leaflet加载arcGIS server。
Esri Leaflet：地理信息系统与Web Mapping的完美融合
最新发布
gitblog_00020的博客
03-25 251
Esri Leaflet：地理信息系统与Web Mapping的完美融合 项目地址:https://gitcode.com/Esri/esri-leaflet Esri Leaflet 是一个轻量级的JavaScript库，它使得在Leaflet地图中集成Esri ArcGIS服务变得简单易行。该项目旨在提供一种无缝的方式，将世界领先的GIS平台——Esri的功能与广泛使用的开源地图库Leafle...
基于leaflet扩展，支持arcgis网络分析
08-23
基于leaflet扩展，支持arcgis网络分析，可以实现实现路径分析，以及路径导航距离、方向信息面板的展示。
Leaflet.js加载天地图的WMTS服务（EPSG4326类型）
02-18
通过修改Leaflet扩展插件leaflet-tilelayer-wmts.js加载天地图的wmts服务（epsg4326类型）。具体介绍见：http://blog.csdn.net/dahongdahong/article/details/49685653 补充： 对于新版本的leaflet不建议使用插件方式，其本身已经支持4326坐标系了
leaflet系列二 加载arcgis自定义坐标系服务
u010303603的博客
08-16 4189
leaflet目前只支持以下几种坐标系 而且对于EPSG4236的支持也不是很好需要更改一些参数，才能正常加载切片服务，那么如何正确加载arcgis自定义服务呢？ 首先，我们需要知道如何计算瓦片服务的行列；可以去看这篇文章（WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)），这里就不过多赘述。 arcgis 服务详情如图所示 如何利用上面这些信息呢？废话不多说，...
leaflet入门——地图加载（以arcgis服务为例）
u012320231的博客
08-21 1万+
最近由于项目需求，于是开始了leaflet的学习，leaflet在加载地图上具有自己独特的优势，能够在各种浏览器（包括手机）下面很好的运行，并且具有很多的插件供我们选择。在该教程中， 我们使用了除leaflet之外的额外插件有 esri-leaflet.js(https://esri.github.io/esri-leaflet/)、L.Control.MousePosition.js(https...
leaflet加载arcgis图层并可查找图层信息
m0_45305745的博客
03-22 693
使用esri-leaflet。查找图层信息：利用相关api。
leaflet 在线调用arcgis GP插值
qq_42751928的博客
05-18 214
调用GP插值服务主要分为两步 一.arcgis 制作 GP服务 1.arcmap版本需要和server版本一样， 不然gp服务无法使用 2.发布服务的时候选择“查看结果图层”，不然不能渲染到地图上（同理，模型构建器中需要把最后的结果设为参数，不然也无法渲染） 3.如果一直报错，但不知道哪有问题，打开arcgis manager ，点进调用的 gp 服务，里面有个 ”submitJob ***“ 的按钮，get或者post 的都可以，可以进入测试界面 二.js调用 import qs from 'qs' //
学习leaflet笔记（一）加载 ArcGIS Server 地图
C_SF_C
08-02 2490
学习leaflet笔记（一）加载 ArcGIS Server 地图 leaflet版本1.5.1，esri-leaflet-v2.3.0版本2.3.0，ArcGIS Server 版本10.2 导入必要CSS、JS 样式主要使用leaflet.css ，js需要导入leaflet.js/esri-leaflet-debug.js <link rel="stylesheet" type="te...
WebGIS-Leaflet应用（一）地图初始化之多种底图加载
weixin_39103552的博客
07-23 1733
Leaflet支持加载不同类型地图，如天地图、高德地图、百度地图等等在线地图服务，在线加载各大厂商地图服务网上已有很多例子，不在此重复。本文主要讲解离线地图发布及加载。 在线地图源 1、可用于加载天地图、高德地图、谷歌地图及部分卫星图。https://github.com/htoooth/Leaflet.ChineseTmsProviders 2、借助超图iclient 9D 加载天地图、...
esri-leaflet-vector:使用Esri传单显示ArcGIS Online矢量底图
05-02
Esri Leaflet的插件，用于可视化来自ArcGIS Online的Vector切片。 例子 看一下。 <!DOCTYPE html > < html > < head > < meta charset =" utf-8 " /> < title > Esri Leaflet Vector...
esri-leaflet-geocoder:传单中使用ArcGIS World地理编码服务的助手
05-17
Esri Leaflet Geocoder是一小部分API帮助程序和UI控件，可与ArcGIS Online地理编码服务进行交互。 例子 看一下。 <!DOCTYPE html > < html > < head > < meta charset =" utf-8 " /> <...
com.esri.arcgis.android:arcgis-android:10.2.9-100.x资料库
05-17
ArcGIS SDK——Android v10.2.9~v100.1.0官方开发包，附带pdf文档说明，详细实用
esri-leaflet-svelte-demo:在Svelte应用程序中使用Esri Leaflet
05-08
Esri Leaflet Svelte演示 一个在应用程序中使用简单演示。 另请参阅 。
esri-leaflet入门教程（3）-自定义底图
GIS制图乐园
02-09 1万+
esri-leaflet入门教程（3）-自定义底图 by 李远祥       在前面的篇章我们已经了解到了怎么样使用FlatUI、leaflet和esri-leaflet 去搭建简单的地图应用界面了。如果有着手写代码的朋友可能已经发现第一个Hello World 程序，使用的就是esri 的 Topographic 样式底图。底图这东西从来都是个好东西，放在互联网领域就是一个免费而好用的资源，
leaflet：入门基础（三）之加载数据
Puzzle的博客
07-17 1万+
前言 上一篇 leaflet：入门基础（二） 讲了如何加载底图 这一篇将讲解如何加载自己已有的数据（未更完 1：加载Geojson数据 需要的数据：一个geojson数据（可以是点/线/面 注：如果手上有shp数据，可以通过https://mapshaper.org/转换得到geojson数据（使用说明[链接]） var map = new L.Map('map', { center: new L.LatLng(39.86,116...
esri-leaflet入门教程（4）-加载各类图层
热门推荐
GIS制图乐园
02-20 2万+
esri-leaflet入门教程（4）-加载各类图层 by 李远祥 在leaflet中图层一般分为底图（Basemap）和叠加图层（Overlay）。前面章节已经介绍过底图其实也是实现了TileLayer 接口，而其他的叠加图层要么就是叠加的业务图层，要么就是动态显示的图形和符号。这一点在esri leaflet中也是有对照的。 ArcGIS产品中比较让人熟知的图层包括ArcGISDynam
leaflet加载ArcGIS for Server地图图层
TJLCY的博客
01-08 1775
leaflet 加载ArcGIS for Server地图服务的两种方式 基于ESRI leaflet插件 var map = L.map('map').setView([37.7614, -122.3911], 12); L.esri.tiledMapLayer({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer', maxZoom: 15 }).addTo(map);
esri-leaflet 自定义切片底图
09-01
您可以使用 esri-leaflet 插件来自定义切片底图。以下是一个简单的示例： 首先，将 esri-leaflet 插件添加到您的项目中。您可以通过以下方式在 HTML 文件中引入 esri-leaflet： ```html <script src="https://cdn.jsdelivr.net/npm/esri-leaflet@2.0.0-beta.6/dist/esri-leaflet.js"></script> ``` 接下来，您可以使用 `L.esri.tiledMapLayer` 方法来创建自定义切片底图。例如，如果您有一个自定义的切片地图服务 URL，您可以这样使用： ```javascript var customTileLayer = L.esri.tiledMapLayer({ url: 'http://your-custom-tile-service-url/{z}/{x}/{y}.png', maxZoom: 18 }); // 将自定义切片底图添加到地图上 customTileLayer.addTo(map); ``` 在上面的示例中，`url` 参数指定了自定义切片地图服务的 URL。`{z}`、`{x}` 和 `{y}` 是模板变量，分别表示瓦片的缩放级别、列索引和行索引。 您还可以为切片底图定义其他选项，如 `maxZoom`，指定切片的最大缩放级别。 希望这个示例能帮助您自定义 esri-leaflet 切片底图！如果有任何问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值