leaflet

WebGIS基础开发（一）：实现地图展示

by giser · 2019-04-03

从事WebGIS一年了，把知识梳理一遍，共勉。

使用arcgis的layers中ArcGISTiledMapServiceLayer，创建地图服务。代码如下：

<!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>放置一张底图</title>
 <!--  <link rel="stylesheet" href="http://js.arcgis.com/3.27/esri/css/esri.css"> -->
	<link rel="stylesheet" href="./3.27/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
	  .esriControlsBR{
		display:none;
	  }
    </style>
   <!--  <script src="http://js.arcgis.com/3.27/init.js"></script> -->
	     <script src="./3.27/init.js"></script>
    <script>
	
	 var map;	
	 
		require([ 
					"dojo/ready",
					"esri/map", 
					"esri/geometry/Point",
					"esri/SpatialReference", 
					"esri/layers/ArcGISTiledMapServiceLayer"],function(
					ready, Map, Point, SpatialReference,ArcGISTiledMapServiceLayer){
				ready(function() {
					
					map = new Map("map", {
						logo : false
					});
					
					var url = "http://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer";
					
					baseLayer = new ArcGISTiledMapServiceLayer(url, {
						id : "baseLayer"
					});
					map.addLayer(baseLayer);
			
					map.setLevel(7);
					map.centerAt(new Point(116.403613,39.914687,
							new SpatialReference({
								wkid : 4326
								})));
						
				});
			});
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

其中，init.js和esri.css文件，可以在”http://js.arcgis.com/3.27/esri/css/esri.css”和”http://js.arcgis.com/3.27/init.js”复制创建。服务地址来自arcgisonline中，可自行更换服务地址。

转载自：https://blog.csdn.net/m86729/article/details/87187437

相关推荐

Tags: leaflet WebGIS基础开发（一）：实现地图展示

You may also like...