地图创建 ArcGIS

地图创建 ArcGIS

图层天地图

引入css

  <style>
        html,
        body,
        #viewDiv {
            padding-top: 100px;
            height: 500px;
            width: 800px;
            margin: auto;
        }
    </style>

引入css 插件 js 插件

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.12/"></script>

创建js

 /**
	* esri/Map  Map类创建一个容器和必需的DOM结构
	* esri/views/MapView    MapView显示Map实例的2D视图
	* esri/layers/WebTileLayer  瓦片层
	*/
	require(["esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer"], function (Map, MapView, WebTileLayer) {
	
	var tiledLayer = new WebTileLayer({
	  urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=e30af8b1302f1497eb42b6343b228cf5",
	  subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
	});
	
	var tiledLayer_poi = new WebTileLayer({
	  //地图地址
	  urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=e30af8b1302f1497eb42b6343b228cf5",
	  //子网域
	  subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
	});
	
	var map = new Map({
	  basemap: {
	      baseLayers: [tiledLayer, tiledLayer_poi]
	  }
	});
	
	var view = new MapView({
	  container: "viewDiv",
	  map: map,
	  zoom: 10,
	  center: [116.0383728188, 28.6848692123] // longitude, latitude
	});
});

创建Div 显示地图

 <div id="viewDiv"></div>