07 ArcGIS JS API 4.14实现地图加载图片

最新推荐文章于 2024-09-05 14:17:19 发布
最新推荐文章于 2024-09-05 14:17:19 发布
阅读量4.8k 收藏 10
点赞数 17
分类专栏： ArcGIS API for JS 4.X学习 文章标签： ArcGIS地图叠加图片 图片叠加到ArcGIS地图 图片叠加到地图 地图添加图片 ArcGIS JS API图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35117024/article/details/105247503
版权
本文详细介绍了如何在ArcGIS地图上叠加图片，包括四种实现方法：通过Graphic、MapImage、扩展MapImageLayer以及使用BaseDynamicLayer。最终选用BaseDynamicLayer实现，实现图片随地图缩放调整大小的功能。
摘要由CSDN通过智能技术生成

需求描述

将一张图片叠加到ArcGIS地图上是现在很多项目的一个广泛需求，通过查阅网上资料后发现这种需求目前只有四种方法可以实现，因为ArcGIS JS API官网并没有提供相应的图片类图层来让我们实例化图片图层，但是JS API官网有说明后期会增加这类API，就是不知道是什么时间了。既然目前没有这类API图层，那我们就自己来找找其他的路子吧，刚才提到过实现将图片叠加到地图上的方法目前有四种，分别如下：

  • 通过ArcGIS知乎上有人提到过的使用Graphic来实现，其实就是将图片当做一个Symbol；
  • 通过类似于ArcGIS JS API 3.X中的MapImage模块来实现；
  • 通过扩展MapImageLayer来实现；
  • 通过JS API官网上的BaseDynamicLayer这个类来实现

接下来我们就看看各种方法到底能不能做，或者说可以做成什么效果。具体操作步骤开始介绍之前，我们先给大家透露一下的是，本文是通过第四种方法来实现的，即通过BaseDynamicLayer这个类来实现，最终效果如下：

各种方案实现分析及具体操作

了解本专栏 订阅专栏 解锁全文
X北辰北
关注
专栏目录
订阅专栏
10 ArcGIS JS API 4.15实现地图加载图片(优化版)
X北辰北的博客
06-09 2439
写在前面 之前写了一篇关于在ArcGIS地图上添加图片的文章，关注度还可以，在项目中也用文章中提到的技术路线实现了地图叠加图片的需求。但是最近客户又有了新需求，因为我们在之前的文章中通过扩展图层来实现图片添加后，如果图片中某一处的信息比较丰富，在地图缩放的一瞬间如果我们拖动地图的话，那部分的图片会有卡顿。其实这情况不算严重，因为仅仅卡顿那么一秒钟左右而已，但是客户抓着这个点就要较劲，那没办法，来一波优化吧。 之前文章的地址如下：《07 ArcGIS JS API 4.14实现地图加载图片》。 最终的效
ArcGIS API for JavaScript 3.x 加载Point点上图
一碗老面的博客
09-06 1273
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>数据上图</title> <link rel="sty.
ArcGIS API for JavaScript：从版本3.39到4.22的演进
最新发布
weixin_42452924的博客
09-05 1766
本文还有配套的精品资源，点击获取 简介：本文深入探讨了ArcGIS API for JavaScript的两个版本：4.22与3.39。ArcGIS API for JavaScript是Esri公司提供的地图开发工具，支持地图创建、地理编码、空间分析和数据可视化等GIS操作。3.39版本提供基础地图服务和3D场景支持，而4.22版本则是对3.x系列的大幅度升级，增加了丰富...
arcgis api for JavaScript 4.14加载高德地图（影像地图、电子地图）
wangyong_h
07-28 1254
require([ “esri/Map”, “esri/views/MapView”, “esri/layers/VectorTileLayer”, “esri/config”, “esri/layers/BaseTileLayer”, “esri/request”, “esri/Color” ], function(Map, MapView, VectorTileLayer, esriConfig,BaseTileLayer,esriRequest,Color) { esriConfig.request
arcgis js 4.x 加载地图
zhengxiaoya2017的博客
02-25 741
使用arcgis js 4.22 加载并显示地图 <!-- arcgis js 4.x 加载地图 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>4.xl
ArcGIS API for JavaScript 4.x 基础之绘制点、线、面、标注、图片（完整代码）
01-08
ArcGIS API for JavaScript 4.x 基础之绘制点、线、面、标注、图片的完整代码；
ArcGIS API for JavaScript v4.14下载（api + sdk开发包）
01-07
ArcGIS API for JavaScript是Esri...开发者可以通过下载的"arcgis_js_v414_api"压缩包获取完整的API库和SDK，从而开始创建自己的地图应用。同时，不断学习和掌握API的新特性和最佳实践，能有效提升开发效率和应用质量。
ArcGIS API for JavaScript 加载切片地图
ResponseBody的博客
04-04 4745
说明：本人是一个gis小白，由于网上的资料过于专业，当时学习的时候经常看不懂，于是写了一些简单的关于ArcGIS Api for javaScript分享，若该分享中出现错误，希望大家指出，若能帮助到各位，不胜荣幸。地图的发布在网上到处都有，这里不多说，值得注意的一点是选择缓存的时候不要选择“根据数据动态绘制”，要选择下面的那个选项发布完成之后登录站点查看刚刚发布的地图服务是否有Levels of...
arcGIS api 配合vue开发(二) 给地图添加标注
老鼠爱大米OvO
12-21 1643
上一篇已经写过了怎么引入arcGIS的css，js文件，有需要的可以去看一下，接下来就是地图的标注，我是用arcGIS的PictureMarkerSymbol来添加到地图上，话不多说 上代码 <template> <div id="app"></div> </template> <script> import { loadModules } from "esri-loader"; export default { }, mounted: fu
44<转载>arcgis api for js 4.x 叠加自定义图片
weixin_30690833的博客
09-17 497
原文地址：https://xiaozhuanlan.com/topic/6591843207 版权归原作者所有 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1...
ArcGIS Js API 加载WMTS服务
08-07
NULL 博文链接：https://wzg866.iteye.com/blog/2110958
实现地图加载自定义图片（含图片切割）
Micheal's Blog
04-09 2675
一、效果 实现在地图中指定区域显示自定义图片，并支持指定层级放大缩小 二、 材料准备 高清图片一张 使用ps的切片选择工具，将图片分别4等分，16等分，64等分切割。 然后存储为web所用格式（确保每张图片大小为256px * 256px）,按层级保存到文件夹 三、编写html（过程省略，不理解的评论指出） <!DOCTYPE html> <html> <h...
ArcGIS API for JavaScript：Layer之间那点儿事
weixin_30668887的博客
03-22 334
先来看一个模型： |–TiledMapServiceLayer||–ArcGISTiledMapServiceLayer|–DynamicLayer||–DynamicMapServiceLayer||–ArcGISDynamicMapServiceLayer||–ArcGISI...
ArcGIS API For JavaScript（8）之使用动态图层dynamicLayers实现多图层合并截图
wokao253615105的专栏
12-05 1289
场景还原： 定位某个矢量图斑范围面，过滤展示该图斑，以图斑为中心，截图图斑周边并附带影像底图的截图。 在前端要实现地图截图，首先想到的是使用arcgis rest api中的export接口，这是没问题的，export方法可以很轻松的实现图片导出。官网rest api导出截图的参考地址如下：Export Map—ArcGIS REST APIs | ArcGIS Developers 通过bbox控制导出范围，用于定位到指定图斑范围；layers控制要导出的图层；l
高德、百度地图自定义底图
热门推荐
陶呵呵的专栏
10-12 3万+
前言 项目中需要用到地图，百度地图加载自定义底图是通过切片的方式加载，而不像高德地图直接加载一张完整图片，这里瓦片加载的好处得到体现：不会因为底图文件过大导致页面加载失败或假死。 另一方面，由于自己私下学习过百度地图API的用法，对百度地图更为熟悉，故最终采用了百度地图而非高德地图。 百度底图API网址： http://developer.baidu.com/map/index.php?t
地图加载不出来坐标标识点图片
從吥蔣僦的博客
03-27 1149
在做地图这块的时候遇到过地图标识图片加载不出来的问题，从以下几个方面查找问题： 查看图片路径是否正确 查看图片是否过大，导致显示的时候只显示空白部分，如果图片过大，建议更换一张图片，或者用百度自带的 ...
arcgis js api 4.x 动态展示一个服务里面的图层(MapImageLayer)
发果叁
05-20 1130
哟哟哟哟哟哟哟哟哟~ 私密马赛同志们! 看我今天敲的什么代码。 使用MapImageLayer动态的展示地图服务里的图层 我在这里给大家展示的是官网的例子,如果不想看的话可以直接去看官网的示例(俺么有自己的地图服务) 废话不多说开始正题 首先看下这个MapImageLayer官网是如何解释的 MapImageLayer allows you to display and analyze data from sublayers defined in a map service, exporting im
arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示（附源码下载）
weixin_30336061的博客
07-22 1209
前言 关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 4.x for js：esri 官网 api，里面详细的介绍 arcgis api 4.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 4.x 的好素材。 内容概览 arcgis api 4.x for js 实现地图叠加图片效果源...
ArcGIS JS API 4.14 图片叠加到地图实战：四种方法解析
"本文主要介绍了如何在ArcGIS JS API 4.14版本中将图片加载到地图上，提供了四种实现方法，并重点讲解了通过BaseDynamicLayer类实现的步骤和效果。" ArcGIS JS API 是Esri公司提供的用于构建地理信息系统Web应用的...
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X北辰北

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值