ArcGIS API for JavaScript - 将图片设为map的底图

卫星互联网
• 阅读 2810

1,问题引出

     我们在开发web应用时,需要一些地图作为我们的底图。ArcGIS API给我们提供了样式众多的basemap,我们还可以使用ArcgisOnline提供的一些地图服务以及自己发布的一些地图服务。然而有时候我们不需要在这个底图服务上实现一些操作功能,只是用其作为展示,因此将他发布为地图服务显得没有必要。

2,如何解决

        ArcGIS API:esri/layers/MapImageLayeresri/layers/MapImage

MapImageLayer类用于将地理配准图像添加到地图中。地图将地理参考图像放置在指定的地理范围内。图像的范围应该在地图的范围内。图像也应与地图位于同一坐标系中。

MapImage类用于设置图片的一些属性。支持的格式有:gif | jpg | png | bmp

3,实现过程

        以夜晚灯光地图作为说明

        1,获取图片:

             如果底图需要准确的地理位置,则图片不能随便乱来,可以在Arcmap中将其进行地理配准。

            本次我的图片如下:范围:全球;坐标系:WGS_84(4326)

ArcGIS API for JavaScript - 将图片设为map的底图

          2,MapImage类的实现

                 由于我的底图是全球范围,所以范围是   x:[-180,180]      y:[-90,90],你要根据你图片实地范围来写。

                  href是你图片的地址

var image = new MapImage({
    'extent': {   
        'xmin':-180, 
        'ymin': -90, 
        'xmax': 180, 
        'ymax': 90, 
        'spatialReference': { 'wkid': 4326 }
    },
    'href': "img/灯光tif.png"
});

           3,MapImageLayer类的实现

var mapImageLayer = new MapImageLayer();
mapImageLayer.addImage(image);

4,全部代码

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>1</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css">
    <script src="https://js.arcgis.com/3.25/"></script>
    <style>
        html, body, #MapDiv {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <script>
        require([
            "esri/map",
            "esri/layers/MapImage",
            "esri/layers/MapImageLayer",
            "dojo/domReady!"
        ], function(Map,MapImage,MapImageLayer) {            
                var image = new MapImage({
                    'extent': {   
                        'xmin':-180, 
                        'ymin': -90, 
                        'xmax': 180, 
                        'ymax': 90, 
                        'spatialReference': { 'wkid': 4326 }
                    },
                    'href': "img/灯光tif.png"
                });
            
                var mapImageLayer = new MapImageLayer();
                mapImageLayer.addImage(image);
                var map = new Map("MapDiv");
                map.addLayer(mapImageLayer);          
        });
    </script>
    
    <div id="MapDiv"></div>
    
</body>
</html>
点赞
收藏
评论区
推荐文章
Karen110 Karen110
4年前
Python-geopandas 中国地图绘制
上一期的地图可视化推文教程中,我们详细介绍了使用Rggplot2包完美绘制中国标准地图,本期推文我们则试着使用Pythongeopandas包绘制空间地图,主要的知识点如下:geopandas绘制中国地图matplotlibadd\axes()添加南海小地图绘图文件分享geopandas读取中国地图文件g
Easter79 Easter79
4年前
Threejs绘制地图(geojson)
https://juejin.im/post/5e344733e51d453ce13d2579目前接触了一些室内地图的开发工作,二维的、三维的,数据源基本都是采用geojson格式基于geojson的地图绘制目前已经有比较成熟的框架和解决方案了。但是今天我们还是要在Threejs里来简单实现一下三维数据的展示。代码地址(htt
Stella981 Stella981
4年前
Native地图与Web融合技术的应用与实践
!(https://oscimg.oschina.net/oscnet/upaad2c4fa385750c08df2ae9ab139e03c96b.JPEG)1\.背景美团打车业务很早就在美团App与点评App中提供了服务入口,并在技术上采用了H5与Native的混合开发技术。随着业务上线,有用户反馈我们的地图性能有一些问题,原
Stella981 Stella981
4年前
Google Map 开发(三):Google Map 地点搜索功能
开发国内应用当我们需要使用到地图时,首选肯定是高德地图或者百度地图,这是因为它们的地图功能足够强大,对于开发人员来说,更是因为API封装的完善和简单的调用实现,扩展功能强大。如果要开发全球通用的APP,需要集成地图,我们难免会对需要使用的地图SDK进行一番调研,百度和高德并没有全世界范围的地图数据,在亚洲或许还能使用以下,对于需要全球范围内都要
Wesley13 Wesley13
4年前
12、开源游戏
在前面中我们初始化了游戏的资源,这次我们来说下地图的绘制和游戏主循环设计。地图绘制    以前说过地图是用tiled画好,导出为图片形式的,所以地图的绘制,就是把这个图片绘制到canvas的过程。这样绘制地图就简单了,使用drawImage方法绘制即可。    这里有个2问题,1是地图的大小一般肯定是大于canvas的,所以我们只是把地图
鸿蒙小林 鸿蒙小林
8个月前
《仿盒马》app开发技术分享-- 新增地址(28)
技术栈Appgalleryconnect开发准备上一节我们实现了地图选点,获取当前位置,在地图上添加标记,根据当前的定位获取poi地址列表等功能,这些全部都为了我们这一节而铺垫,这一节我们要实现的是新增地址,把我们的用户信息,填写收件人、门牌号、手机号、经
鸿蒙小林 鸿蒙小林
7个月前
《仿盒马》app开发技术分享-- 兑换提交准备(72)
技术栈Appgalleryconnect开发准备上一节我们实现了地址的选择,商品数据的展示,我们页面中需要的提交的内容还有所欠缺,我们还需要新增一些展示兑换细节的组件,同时在提交之前还需要实现备注功能,我们还要在页面中展示一些积分相关的内容,告知用户积分的
上海张律师 上海张律师
8个月前
鸿蒙地图功能开发【2. 申请Profile文件】##地图开发##
​如果使用鸿蒙的MapKit能力进行地图开发的话,需要在后台的API管理里面打开“地图服务”。如果是在原有项目上增加的话,那么……你需要去申请一个新的Profile文件我们按照新项目的流程去走注:新项目的意思是没有创建过Profile文件,而不是说在Dev
鸿蒙小林 鸿蒙小林
8个月前
《仿盒马》app开发技术分享-- 定位获取(25)
技术栈Appgalleryconnect开发准备上一节我们实现了地址管理页面的数据查询和展示,接下来我们要实现的功能是地址添加相关的,我们想实现的功能是地图选点,那么在地图选点之前我们要做的就是先获取用户当前的定位。获取定位后我们拿到经纬度和其他信息,然后
鸿蒙小林 鸿蒙小林
8个月前
《仿盒马》app开发技术分享-- 原生地图展示(26)
技术栈Appgalleryconnect开发准备上一节我们实现了获取当前用户的位置,并且成功的拿到了经纬度,这一节我们就要根据拿到的经纬度,结合我们其他的知识点来实现地图的展示。功能分析地图的展示,我们需要在管理中心先给我们对应的应用开启地图api功能,否
鸿蒙小林 鸿蒙小林
8个月前
《仿盒马》app开发技术分享-- 地图选点(27)
技术栈Appgalleryconnect开发准备上一节我们实现了地图的简单展示,这一节我们要实现的内容是,根据展示的地图,实现当前定位功能,当前位置的poi地址功能,以及列表的展示,给地图添加标记,展示自己的当前定位功能分析要想实现这些功能,首先我们需要在