我如何在 Angular-Js 中使用 ArcGIS Maps？
How do i use ArcGIS Maps in Angular-Js?
我如何在 Angular-Js 中使用 ArcGIS Maps 轻松地操作；
- 缩放
- 定位
- 添加标记
- 按地理坐标和地名搜索我的地点
- 延迟加载标记之类的？
有人可以给我一个样品吗？
嗯，下面是使用 angular-js 加载 ArcGIS/ESRI 地图的示例，更多细节和相关性 sample/concept read getting-started 来自下面提到的 link:
<!DOCTYPE html>
<html ng-app="esri-map-example">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Angular Esri Quick Start</title>
<link rel="stylesheet" href="//js.arcgis.com/4.0/esri/css/main.css">
<style type="text/css">
html, body, .esri-view {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body ng-controller="MapController as vm">
<esri-scene-view map="vm.map" view-options="{scale: 50000000, center: [-101.17, 21.78]}">
</esri-scene-view>
<!-- load Esri JSAPI -->
<script src="//js.arcgis.com/4.0/"></script>
<!-- load AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<!-- load angular-esri-map -->
<script src="//unpkg.com/angular-esri-map@2"></script>
<script type="text/javascript">
angular.module('esri-map-example', ['esri.map'])
.controller('MapController', function(esriLoader) {
var self = this;
esriLoader.require(['esri/Map'], function(Map) {
self.map = new Map({
basemap: 'streets'
});
});
});
</script>
</body>
</html>
希望这能帮助您理解并开始实施:)
这个网站有很多例子和示例代码：
http://esri.github.io/angular-esri-map/#/home
我发现了一种添加所有提到的功能并能够以这种方式控制它们的非常简单的方法。
angular.module('eBlood').directive('esriPointRenderersMap', ['$q', 'appConfig', 'esriLoader', 'esriRegistry', function($q, appConfig, esriLoader, esriRegistry) {
return {
// element only directive
restict: 'E',
// isolate the scope
scope: {
// 1-way string binding
rendererActive: '@',
// 2-way object binding
basemapActive: '=',
clusterTolerance: '=',
heatmapRendererParams: '='
},
compile: function($element, $attrs) {
// remove the id attribute from the main element
$element.removeAttr('id');
// append a new div inside this element, this is where we will create our map
$element.append('<div id=' + $attrs.id + '></div>');
// since we are using compile we need to return our linker function
// the 'link' function handles how our directive responds to changes in $scope
// jshint unused: false
return function(scope, element, attrs, controller) {};
},
controller: function($scope, $element, $attrs) {
var mapDeferred = $q.defer();
var esriApp = {};
// add this map to the registry
if ($attrs.registerAs) {
var deregister = esriRegistry._register($attrs.registerAs, mapDeferred.promise);
// remove this from the registry when the scope is destroyed
$scope.$on('$destroy', deregister);
}
esriApp.createGeoCordFinder = coords => {
return esriLoader.require([
'esri/geometry/Point',
'esri/tasks/Locator'
]).then(x => {
var Point = x[0];
if (!esriApp.mapLocator) {
var Locator = x[1];
esriApp.mapLocator = new Locator('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer');
}
return esriApp.mapLocator.locationToAddress(new Point(coords)).then(res => {
return res.address.Match_addr;
});
});
};
esriApp.zoomToLocation = mapOptions => {
if (mapOptions.view) {
mapOptions.zoom = mapOptions.zoom || appConfig.pointRenderers.mapOptions.zoom;
mapOptions.view.goTo({
target: [mapOptions.coordinates.longitude, mapOptions.coordinates.latitude],
zoom: mapOptions.zoom
});
// change the marker to the current Geo.
var promise = (!mapOptions.address) ? esriApp.createGeoCordFinder(mapOptions.coordinates) : $q.when(mapOptions.address);
promise.then(location => {
esriApp.changeLocationMarker({
view: mapOptions.view,
attributes: {
address: location
},
geometry: {
longitude: mapOptions.coordinates.longitude,
latitude: mapOptions.coordinates.latitude
}
});
});
}
};
esriApp.createLocateIcon = mapOptions => {
var container;
if (!mapOptions || !mapOptions.view)
return $q.reject('Our MapView is setYet');
container = mapOptions.container |"map";
mapOptions.container = undefined;
mapOptions.goToLocationEnabled = appConfig.goToLocationEnabled;
mapOptions.graphic = null;
return esriLoader.require([
'esri/widgets/Locate'
]).then(x => {
var Locate = x[0];
esriApp.locateWidget = new Locate(mapOptions, container);
esriApp.locateWidget.startup();
if (!container)
mapOptions.view.ui.add(esriApp.locateWidget, 'top-left');
esriApp.locateWidget.on('locate', data => {
esriApp.zoomToLocation({
view: mapOptions.view,
coordinates: data.position.coords
});
});
return esriApp.locateWidget;
});
};
function setSearchWidget(opts) {
var srcNodeRef;
if (!opts || !opts.view) {
return $q.reject('MapView is undefined');
}
srcNodeRef = opts.container;
opts.container = undefined;
opts.showPopupOnSelect = false;
opts.autoSelect = false;
return esriLoader.require([
'esri/widgets/Search'
]).then(x => {
var Search = x[0];
var searchWidget = new Search(opts, srcNodeRef);
searchWidget.startup();
if (!srcNodeRef) {
opts.view.ui.add(searchWidget, 'top-right');
}
searchWidget.on('search-complete', e => {
if (e.results.length > 0 && e.results[0].results.length > 0) {
var res = e.results[0].results[0];
var coords = {
longitude: res.feature.geometry.longitude,
latitude: res.feature.geometry.latitude
};
esriApp.zoomToLocation({
view: opts.view,
coordinates: coords,
address: res.name
});
}
});
return searchWidget;
});
}
var mapoption = {
map: esriApp.map,
container: 'map',
zoom: 3,
padding: {
top: 65
},
view: esriApp.mapView
};
esriApp.buildmap = (mapViewDiv) => {
return esriApp.creatMap({
basemap: $scope.basemapActive
})
.then(map => {
mapoption.map = map;
mapoption.container = mapViewDiv;
return esriApp.createMapView(mapoption);
});
};
esriApp.creatMap = properties => {
return esriLoader.require(['esri/Map'])
.then(esriModules => {
var Map = esriModules[0];
return new Map(properties);
});
};
esriApp.createMapView = config => {
return esriLoader.require(['esri/views/MapView'])
.then(x => {
var MapView = x[0];
esriApp.mapView = new MapView(config);
mapDeferred.resolve({
view: esriApp.mapView
});
return mapDeferred.promise;
});
};
esriApp.map = esriApp.buildmap($attrs.id);
mapoption.view = esriApp.mapView;
esriApp.createLocateIcon(mapoption);
setSearchWidget(mapoption);
mapDeferred.promise.then(function(esriApp) {
// clean up
$scope.$on('$destroy', function() {
esriApp.map.destroy();
});
});
// });
}
};
}]);
简单的指令将非常有用。现在更重要的是，它使用地图功能更新了 'appConfig' 全局配置对象。这对我来说效果很好。
感谢大家的贡献。
我如何在 Angular-Js 中使用 ArcGIS Maps 轻松地操作；
- 缩放
- 定位
- 添加标记
- 按地理坐标和地名搜索我的地点
- 延迟加载标记之类的？
有人可以给我一个样品吗？
嗯，下面是使用 angular-js 加载 ArcGIS/ESRI 地图的示例，更多细节和相关性 sample/concept read getting-started 来自下面提到的 link:
<!DOCTYPE html>
<html ng-app="esri-map-example">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Angular Esri Quick Start</title>
<link rel="stylesheet" href="//js.arcgis.com/4.0/esri/css/main.css">
<style type="text/css">
html, body, .esri-view {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body ng-controller="MapController as vm">
<esri-scene-view map="vm.map" view-options="{scale: 50000000, center: [-101.17, 21.78]}">
</esri-scene-view>
<!-- load Esri JSAPI -->
<script src="//js.arcgis.com/4.0/"></script>
<!-- load AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<!-- load angular-esri-map -->
<script src="//unpkg.com/angular-esri-map@2"></script>
<script type="text/javascript">
angular.module('esri-map-example', ['esri.map'])
.controller('MapController', function(esriLoader) {
var self = this;
esriLoader.require(['esri/Map'], function(Map) {
self.map = new Map({
basemap: 'streets'
});
});
});
</script>
</body>
</html>
希望这能帮助您理解并开始实施:)
这个网站有很多例子和示例代码： http://esri.github.io/angular-esri-map/#/home
我发现了一种添加所有提到的功能并能够以这种方式控制它们的非常简单的方法。
angular.module('eBlood').directive('esriPointRenderersMap', ['$q', 'appConfig', 'esriLoader', 'esriRegistry', function($q, appConfig, esriLoader, esriRegistry) {
return {
// element only directive
restict: 'E',
// isolate the scope
scope: {
// 1-way string binding
rendererActive: '@',
// 2-way object binding
basemapActive: '=',
clusterTolerance: '=',
heatmapRendererParams: '='
},
compile: function($element, $attrs) {
// remove the id attribute from the main element
$element.removeAttr('id');
// append a new div inside this element, this is where we will create our map
$element.append('<div id=' + $attrs.id + '></div>');
// since we are using compile we need to return our linker function
// the 'link' function handles how our directive responds to changes in $scope
// jshint unused: false
return function(scope, element, attrs, controller) {};
},
controller: function($scope, $element, $attrs) {
var mapDeferred = $q.defer();
var esriApp = {};
// add this map to the registry
if ($attrs.registerAs) {
var deregister = esriRegistry._register($attrs.registerAs, mapDeferred.promise);
// remove this from the registry when the scope is destroyed
$scope.$on('$destroy', deregister);
}
esriApp.createGeoCordFinder = coords => {
return esriLoader.require([
'esri/geometry/Point',
'esri/tasks/Locator'
]).then(x => {
var Point = x[0];
if (!esriApp.mapLocator) {
var Locator = x[1];
esriApp.mapLocator = new Locator('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer');
}
return esriApp.mapLocator.locationToAddress(new Point(coords)).then(res => {
return res.address.Match_addr;
});
});
};
esriApp.zoomToLocation = mapOptions => {
if (mapOptions.view) {
mapOptions.zoom = mapOptions.zoom || appConfig.pointRenderers.mapOptions.zoom;
mapOptions.view.goTo({
target: [mapOptions.coordinates.longitude, mapOptions.coordinates.latitude],
zoom: mapOptions.zoom
});
// change the marker to the current Geo.
var promise = (!mapOptions.address) ? esriApp.createGeoCordFinder(mapOptions.coordinates) : $q.when(mapOptions.address);
promise.then(location => {
esriApp.changeLocationMarker({
view: mapOptions.view,
attributes: {
address: location
},
geometry: {
longitude: mapOptions.coordinates.longitude,
latitude: mapOptions.coordinates.latitude
}
});
});
}
};
esriApp.createLocateIcon = mapOptions => {
var container;
if (!mapOptions || !mapOptions.view)
return $q.reject('Our MapView is setYet');
container = mapOptions.container |"map";
mapOptions.container = undefined;
mapOptions.goToLocationEnabled = appConfig.goToLocationEnabled;
mapOptions.graphic = null;
return esriLoader.require([
'esri/widgets/Locate'
]).then(x => {
var Locate = x[0];
esriApp.locateWidget = new Locate(mapOptions, container);
esriApp.locateWidget.startup();
if (!container)
mapOptions.view.ui.add(esriApp.locateWidget, 'top-left');
esriApp.locateWidget.on('locate', data => {
esriApp.zoomToLocation({
view: mapOptions.view,
coordinates: data.position.coords
});
});
return esriApp.locateWidget;
});
};
function setSearchWidget(opts) {
var srcNodeRef;
if (!opts || !opts.view) {
return $q.reject('MapView is undefined');
}
srcNodeRef = opts.container;
opts.container = undefined;
opts.showPopupOnSelect = false;
opts.autoSelect = false;
return esriLoader.require([
'esri/widgets/Search'
]).then(x => {
var Search = x[0];
var searchWidget = new Search(opts, srcNodeRef);
searchWidget.startup();
if (!srcNodeRef) {
opts.view.ui.add(searchWidget, 'top-right');
}
searchWidget.on('search-complete', e => {
if (e.results.length > 0 && e.results[0].results.length > 0) {
var res = e.results[0].results[0];
var coords = {
longitude: res.feature.geometry.longitude,
latitude: res.feature.geometry.latitude
};
esriApp.zoomToLocation({
view: opts.view,
coordinates: coords,
address: res.name
});
}
});
return searchWidget;
});
}
var mapoption = {
map: esriApp.map,
container: 'map',
zoom: 3,
padding: {
top: 65
},
view: esriApp.mapView
};
esriApp.buildmap = (mapViewDiv) => {
return esriApp.creatMap({
basemap: $scope.basemapActive
})
.then(map => {
mapoption.map = map;
mapoption.container = mapViewDiv;
return esriApp.createMapView(mapoption);
});
};
esriApp.creatMap = properties => {
return esriLoader.require(['esri/Map'])
.then(esriModules => {
var Map = esriModules[0];
return new Map(properties);
});
};
esriApp.createMapView = config => {
return esriLoader.require(['esri/views/MapView'])
.then(x => {
var MapView = x[0];
esriApp.mapView = new MapView(config);
mapDeferred.resolve({
view: esriApp.mapView
});
return mapDeferred.promise;
});
};
esriApp.map = esriApp.buildmap($attrs.id);
mapoption.view = esriApp.mapView;
esriApp.createLocateIcon(mapoption);
setSearchWidget(mapoption);
mapDeferred.promise.then(function(esriApp) {
// clean up
$scope.$on('$destroy', function() {
esriApp.map.destroy();
});
});
// });
}
};
}]);
简单的指令将非常有用。现在更重要的是，它使用地图功能更新了 'appConfig' 全局配置对象。这对我来说效果很好。
感谢大家的贡献。