arcgis
官网示例
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/css/main.css">
<script src="https://js.arcgis.com/4.19/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap"
], function(Map, MapView, Basemap) {
var view = new MapView({
container: "viewDiv",
map: new Map,
center: [-118.71511,34.09042],
zoom: 11
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
离线版：
部分参考GIS之家：arcgis api 4.x for js 离线部署，但在如何获取当前地址上做了些更改，直接用localhost是报错的
环境：vscode 通过live server插件启动的纯html+js项目
下载arcgis api离线包，把离线包放到项目合适的位置
改动两个文件 ./arcgis_js_api/library/4.17/init.js和 ./arcgis_js_api/library/4.17/dojo/dojo.js 中的 HOSTNAME_AND_PATH_TO_JSAPI 为getRootPath()+"/lib/arcgis_js_api/library/4.17/dojo"
其中getRootPath()方法为
function getRootPath() {
var path = window.document.location.href //取得当前URL
var pathName = window.document.location.pathname //取得主机地址后的目录
var post = path.indexOf(pathName)
var hostPath = path.substring(0, post) //取得主机地址
var name = pathName.substring(0, pathName.substr(1).indexOf("/") + 1) //取得项目名
return hostPath + name
}
var rootPath = getRootPath() //http://127.0.0.1:5500/file
*附：我自己项目通过live server 启动的项目地址为http://127.0.0.1:5500/file/page/index/index.html
cesium
*需要引用本地文件包。
*通过CDN方式似乎需要用申请token，感觉不是很有必要
下载：Cesium 1.76
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script src="./Cesium/Cesium.js"></script>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer(‘cesiumContainer‘, {
timeline: false,
animation: false,
navigationHelpButton: false,
homeButton: false,
sceneMode : Cesium.SceneMode.COLUMBUS_VIEW, //2.5D视图
imageryProvider : new Cesium.OpenStreetMapImageryProvider(), //OSM底图
sceneModePicker: false,
baseLayerPicker: false,
geocoder: false,
fullscreenButton: false,
selectionIndicator: false
});
// 除去cesium标志
viewer._cesiumWidget._creditContainer.style.display = ‘none‘
</script>
</body>
</html>
编辑于 06-22