leaflet⼊门——地图加载（以arcgis服务为例） 在加载还图层的时候注意，此时的URL只能是动态图层服务地址，不能具体到某个图层。加载代码如下： let map = L.map('divclass').setView([28.751407,118.628740],12);
let dynamicLayer = L.esri.dynamicMapLayer({
url:'localhost:6080/arcgis/rest/services/js/jsdxt/MapServer/',
opacity: 0.8,
f:'json'
});
map.addLayer(dynamicLayer);
2. 要素图层加载
let map = L.map('divclass').setView([28.751407,118.628740],12);
let featureLayer = L.esri.featureLayer({
url:'localhost:6080/arcgis/rest/services/js/tx/MapServer/1/'
});
map.addLayer(featureLayer);
3. 切⽚图层的加载
our map service must be published using the Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857) and the default scale options used by Google Maps, Bing Maps and .Esri Leaflet will not support any other spatial reference for tile layers.
当我们获取到了投影参数之后，我们就可以使⽤L.Proj.CRS来定义⼀个投影了，具体代码如下： let tileMapUrl ="localhost:6082/arcgis/rest/services/jhzhps/JHJT/MapServer";
let CRS_4490 = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
resolutions: [
1.40625,
0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.021********,
0.010*********,
0.0054931640625,
0.00274658203125,
0.001373291015625,
6.866455078125E-4,
3.4332275390625E-4,
1.71661376953125E-4,
8.58306884765625E-5,
4.291534423828125E-5,
2.1457672119140625E-5,
1.0728836059570312E-5,
5.364418029785156E-6,
2.682209064925356E-6,
1.3411045324626732E-6
],
origin: [-179.9999, 90.00016],
bounds: L.bounds([117.75370429660006, 26.99449191557761, ], [123.63262097540007, 32.2668788575695])
//这⾥可以有origin、transformation、scales、resulutions、bounds⼏个参数提供
//选择，其中scales与resolutions不能同时配置
});
let map = L.map('divclass',{
crs:CRS_4490
}).setView([29.108339,119.647787],13);
let tileMapLayer = L.esri.tiledMapLayer({
url:tileMapUrl
});
//L.esri.basemapLayer('Gray').addTo(map);
map.addLayer(tileMapLayer);
'position': 'bottomright'
}).addTo(map);
此时，我们已经完成了对切⽚，要素，动态地图的加载，此代码仅供初学者学习借鉴，整个⽂件的代码如下图所⽰：
<!DOCTYPE html>
甲烷制氢
<html>
<head>
<meta charset="utf-8">
<title>leaflet实例</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <!--添加leaflet样式⽂件-->
<link rel="stylesheet" type="text/css" href="../floodIndex/leaflet/leaflet.css">
<link rel="stylesheet" type="text/css" href="../floodIndex/css/L.Control.MousePosition.css">
<!--添加leaflet引⽤-->
<script type="text/javascript" src="../floodIndex/leaflet/leaflet-src.js"></script>
<script type="text/javascript" src="../floodIndex/leaflet/esri-leaflet.js"></script>
<script type="text/javascript" src="../floodIndex/leaflet/L.Control.MousePosition.js"></script>
<script type="text/javascript" src="../floodIndex/leaflet/proj4.js"></script>
<script type="text/javascript" src="../floodIndex/leaflet/proj4leaflet.js"></script>
<style>
<style>
html,body{李四光计划
margin:0;
padding: 0;
}
#divclass{
height:calc(100% - 50px) ;
width: 100%;
background: white;
position: absolute;
}
</style>
</head>
呼风唤雨的世纪教学设计<body>
<div >
</div>
<div id="divclass">
三峡情缘网
</div>
<script>
//1. 动态图层加载注意此时的URL只能是动态图层服务地址只能具体到某个图层
let map = L.map('divclass').setView([28.751407,118.628740],12);
let dynamicLayer = L.esri.dynamicMapLayer({
url:'localhost:6080/arcgis/rest/services/js/jsdxt/MapServer/',
opacity: 0.8,
f:'json'
});
map.addLayer(dynamicLayer);
//2.加载要素图层
let map = L.map('divclass').setView([28.751407,118.628740],12);
let featureLayer = L.esri.featureLayer({
url:'localhost:6080/arcgis/rest/services/js/tx/MapServer/1/'
});
map.addLayer(featureLayer);
//3.加载切⽚图层
/**
* Your map service must be published using the Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857) * and the default scale options used by Google Maps, Bing Maps and .
* Esri Leaflet will not support any other spatial reference for tile layers.
*/
let tileMapUrl ="localhost:6082/arcgis/rest/services/jhzhps/JHJT/MapServer";
let CRS_4490 = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
resolutions: [
1.40625,
0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.021********,
0.010*********,
0.0054931640625,
0.00274658203125,
0.001373291015625,
6.866455078125E-4,
3.4332275390625E-4,
1.71661376953125E-4,
8.58306884765625E-5,
4.291534423828125E-5,
2.1457672119140625E-5,
1.0728836059570312E-5,
5.364418029785156E-6,
2.682209064925356E-6,小企业会计准则
1.3411045324626732E-6
],
origin: [-179.9999, 90.00016],
bounds: L.bounds([117.75370429660006, 26.99449191557761, ], [123.63262097540007, 32.2668788575695]) //这⾥可以有origin、transformation、scales、resulutions、bounds⼏个参数提供
//选择，其中scales与resolutions不能同时配置
});
let map = L.map('divclass',{
crs:CRS_4490
}).setView([29.108339,119.647787],13);
let tileMapLayer = L.esri.tiledMapLayer({
url:tileMapUrl
});
//L.esri.basemapLayer('Gray').addTo(map);
map.addLayer(tileMapLayer);苏维埃
'position': 'bottomright'
}).addTo(map);
</script>
</body>
</html>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议