ArcGIS for Javascript
开始接触JS的一个记录:
IDE:WebStorm
Overview
- 设置中心点以及刻度
const view = new MapView({
center: [ -122, 38 ],
scale: 12345678
});
- 设置比例及属性
view = new MapView();
view.center = [ -122, 38 ];
view.scale = 12345678;
- 监听属性变化
// watch handler: the callback fires each time the title of the map's basemap changes
var handle = map.watch('basemap.title', function(newValue, oldValue, property, object) {
console.log("New value: ", newValue,
"<br>Old value: ", oldValue,
"<br>Watched property: ", property,
"<br>Watched object: ", object);
});
- Autocasting
直接将函数的构造参数传递属性 - 3D support
使用WebGL显示地图和场景应用
const view = new SceneView({
container: "viewDiv",
map: map,
scale: 500000,
center: [-101.17, 21.78]
});
使用 Camera内部类构造函数
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: [7.654, 45.919, 5184],
tilt: 80
}
});
2D或者3D适用
var viewpoint = new Viewpoint({
targetGeometry: new Point({
x: 4.4856,
y: 48.3908
}),
scale: 2000
});
- 三维符号学( 3D symbology)
- Web GIS 集成
- 创建可视化数据地图
Get the API
- CDN(content delivery network)
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>
Benefits to working with :
--CDN是地理分布的Web服务器的集合,它有效地传递内容;
--服务器负载均衡并监视;
--只需修改应用程序中的脚本标记即可指向新版本,不需要重新安装API.
- npm(a JavaScript package manager)
注册类型说明:
extension MIME/type Description
----------------------------------------------------------
.ttf application/octet-stream True Type Fonts
.wasm application/wasm WebAssembly
.woff application/font-woff Web Open Font Format
.woff2 application/font-woff2 WOFF File Format 2.0
.wsv application/octet-stream Supports SceneView's stars visualization
- 版本支持
API
- Properties
//Getting properties
var basemapTitle = null;
if (map.basemap) {
basemapTitle = map.basemap.title;
}
//or get()
var basemapTitle = map.get("basemap.title");
//Setting properties
view.center = [ -100, 40 ];
view.zoom = 6;
map.basemap = 'oceans';
//or set()
var viewProperties = {
center: [ -100, 40 ],
zoom: 6
};
view.set(viewProperties);
//Watching properties
var map = new Map({basemap: 'streets'});
var handle = map.watch('basemap.title', function(newValue, oldValue, property, object) {
console.log("New value: ", newValue,
"<br>Old value: ", oldValue,
"<br>Watched property: ", property,
"<br>Watched object: ", object);
});
//If the user changes the basemap to the following:
map.basemap = "topo";
//The console will log the followings based on the watch handler:
New value: Topographic
Old value: Streets
Watched property: basemap.title
Watched object:
- Promise
//.then()
someAsyncFunction().then(callback, errback);
//回调和回退
someAsyncFunction().then(function(resolvedVal){
console.log(resolvedVal);
}, function(error){
console.error(error);
});
//Example: GeometryService.project()
require([
"esri/tasks/GeometryService",
"esri/tasks/support/ProjectParameters", ...
], function(GeometryService, ProjectParameters, ... ) {
var gs = new GeometryService( "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer" );
var params = new ProjectParameters({
geometries: [points],
outSR: outSR,
transformation = transformation
});
gs.project(params).then(function(projectedGeoms){
console.log("projected points: ", projectedGeoms);
}, function(error){
console.error(error);
});
});
//Example: geometryEngineAsync.geodesicBuffer()
var bufferLayer = new GraphicsLayer();
gs.project(params).then(bufferPoints)
.then(addGraphicsToBufferLayer)
.then(calculateAreas)
.then(sumArea)
.catch(function(error){
console.error('One of the promises in the chain was rejected! Message: ', error);
});
function bufferPoints(points) {
return geometryEngine.geodesicBuffer(points, 1000, 'feet');
}
function addGraphicsToBufferLayer