随着互联网的发展,地图应用在我们的生活中变得越来越普遍,而这背后的支持关键就是地图 API。ArcGIS API for JavaScript 便是其中一个常用的地图 API。
如果你是前端开发人员,那么你一定经常处理的问题就是将地理空间数据可视化成地图,并与其他数据源整合。javascript arcgis api 刚好能够解决这些问题。
require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer" ], function(Map, MapView, FeatureLayer) { const map = new Map({ basemap: "gray-vector" }); const view = new MapView({ container: "viewDiv", map: map, center: [-120.80566406246835, 47.41322033015946], zoom: 6 }); const layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYC_Restaurant_Violations/FeatureServer/0" }); map.add(layer); });
上方代码便是基本的引用 ArcGIS API for JavaScript 实现地图可视化的例子,具体可以参见开发文档。另外,除了实现地图可视化外,javascript arcgis api 还具有很多实用的特性。
首先是依托于 ArcGIS 平台的数据源支持。ArcGIS 收集了全球许多类型(如卫星影像、道路、区划等)的标准地理空间数据,而 javascript arcgis api 可以很方便地使用这些数据作为底图或添加到自有数据源上。比如下方代码可以将中国的高德地图瓦片图层添加到地图上:
require([ "esri/Map", "esri/layers/WebTileLayer", "esri/views/MapView" ], function(Map, WebTileLayer, MapView) { const map = new Map({ basemap: "gray-vector" }); const view = new MapView({ container: "viewDiv", map: map, center: [107.6, 42], zoom: 5 }); const amap = new WebTileLayer({ urlTemplate: "https://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8" }); map.add(amap); });
其次是交互式的地图操作,比如地图拖拽、缩放以及标记点等。javascript arcgis api 提供了基本的事件处理,包括 mouseup、keydown 等事件。开发人员可以调用 API 接口进行相应事件的监听和响应,实现互动性地图操作。比如下方代码可以在地图点击位置上添加一个标记点:
require([ "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/Map", "esri/views/MapView" ], function( Point, SimpleMarkerSymbol, GraphicsLayer, Graphic, Map, MapView ) { const map = new Map({ basemap: "gray-vector" }); const view = new MapView({ container: "viewDiv", map: map, center: [-120.80566406246835, 47.41322033015946], zoom: 6 }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); view.on("click", function(event) { const point = new Point({ longitude: event.mapPoint.longitude, latitude: event.mapPoint.latitude, spatialReference: event.mapPoint.spatialReference }); const markerSymbol = new SimpleMarkerSymbol({ color: [226, 119, 40], outline: { color: [255, 255, 255], width: 2 } }); const graphic = new Graphic({ geometry: point, symbol: markerSymbol }); graphicsLayer.add(graphic); }); });
最后是 javascript arcgis api 的扩展性。该 API 不仅提供了丰富的可视化控件,同时它还允许开发人员利用自有库和插件自定义功能。开发人员可以基于 API 的组件和构架实现自有的数据处理和可视化功能。
总之,javascript arcgis api 是一个不错的地图 API。通过它,你可以基于全球标准的数据源迅速地实现地图可视化和互动性。同时它的扩展性也为开发人员提供了更多的发挥空间。