11 地图添加OSM图层

此示例主要是介绍通过默认的实例化方式来添加一个OpenStreetMap图层,如下图所示:

具体实现方式如下:

1 实现此功能的主要组件是“esri/layers/OpenStreetMapLayer”,所以在开始时要引入相关的组件,如下:

require([

"esri/map",

"esri/layers/OpenStreetMapLayer",

"dojo/domReady!"

], function (Map, OpenStreetMapLayer){

});

2 然后实例化一个空白底图,空白底图的意思就是我们在实例化Map时只指定初始化中心和初始化级别,其余的底图之类等都不指定,如下:

map = new Map("esri-map-container", {

center: [104.072331,30.66303],

zoom: 11

});

3 然后实例化一个OpenStreetMap,将其添加到底图上面,如下所示:

openStreetMapLayer = new OpenStreetMapLayer();

map.addLayer(openStreetMapLayer);

4 至此呢,我们就完成了将OSM的图层加载到了ArcGIS的底图上面。完整的代码如下所示:

<!DOCTYPE html>

<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>OpenStreetMap</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">

<style>

html, body, #esri-map-container {

padding: 0px;

margin: 0px;

height: 100%;

}

</style>

<script src="https://js.arcgis.com/3.25/"></script>

<script>

require([

"esri/map",

"esri/layers/OpenStreetMapLayer",

"dojo/domReady!"

], function (Map, OpenStreetMapLayer){



var map, openStreetMapLayer;


map = new Map("esri-map-container", {

center: [104.072331,30.66303],

zoom: 11

});

openStreetMapLayer = new OpenStreetMapLayer();

map.addLayer(openStreetMapLayer);

});

</script>

</head>

<body>

<div id="esri-map-container"></div>

</body>

</html>

X北辰北的博客,想看更多内容,请移步我的个人博客:http://www.xbeichenbei.com/
原文地址:https://www.cnblogs.com/xuqw/p/11794673.html