<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echarts和ArcGIS JS API结合</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>
<style>
body {
margin: 0 !important;
}
#mapview {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<script src="https://js.arcgis.com/4.14/"></script>
<script src="/js/require.min.js" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script>
require(
["esri/Map", "esri/views/MapView", "esri/Basemap", "esri/layers/TileLayer", "esri/identity/IdentityManager", "esri/identity/ServerInfo", "dojo/domReady!"],
function (Map, MapView, Basemap, TileLayer, esriId, ServerInfo) {
var serverInfo = new ServerInfo();
serverInfo.serverString = "https://mapserver.nyncw.sh.gov.cn/OneMapServer/rest/services/ShanghaiCityBoundary/MapServer";
serverInfo.tokenServiceUrl = "https://mapserver.nyncw.sh.gov.cn/RemoteTokenServer";
var userInfo = {username: "longken", password: "abc123"};
esriId.generateToken(serverInfo, userInfo).then(function (data) {
// This is called when the promise resolves
var tokenValue = data.token;
//注册Token，注册之后，在Portal里的所有资源，只要该用户由权限访问，就可以直接使用，之前的所有安全服务请求都将会把token值作为参数发送到服务器端
esriId.registerToken({server: serverInfo.serverString, token: tokenValue});
/* var basemap = new Basemap({ //此处自定义一张暗夜色的底图，并没有用JS API自带的底图
baseLayers: [
new TileLayer({
// url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
// url: "https://mapserver.nyncw.sh.gov.cn/OneMapServer/rest/services/ShanghaiZoneBoundary/MapServer?token=xRka2zYNUaRPiLafzobOaXfADZBMWpAWmJKQK-era6RgiSRhDipwr5LAyRBLDWZ_",
url: "https://mapserver.nyncw.sh.gov.cn/OneMapServer/rest/services/ShanghaiCityBoundary/MapServer",
// title: "Basemap"
})
],
// title: "basemap",
id: "basemap"
});
var map = new Map({
basemap: basemap
});
var view = new MapView({
container: "mapview",
map: map,
zoom: 8,
center: [121.601351, 31.615139] //地图中心点为成都
});*/
var baseLayer = new TileLayer({url: serverInfo.serverString});
var map = new Map();
map.add(baseLayer);
var view = new MapView({
center: [-80, 35],
container: "mapview",
map: map,
zoom: 3
});
}, function (error) {
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
})
;
</script>
</head>
<body>
<div id="mapview"></div>
</body>
</html>