如何在Angular-Js中使用ArcGIS Map？
[英]How do i use ArcGIS Maps in Angular-Js?
問題描述
如何通過操作輕松在Angular-Js中使用ArcGIS Maps；
- 放大
- 定位
- 添加標記
- 通過地理坐標和地點名稱搜索我的地點
- 懶惰地加載標記之類的？
請給我一個樣品。
3 個解決方案
解決方案1
1 2016-09-07 10:41:52
好吧，以下是使用angular-js加載ArcGIS / ESRI地圖的示例，有關更多詳細信息和相關示例/概念，請閱讀下面提到的鏈接入門 ：
<!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>
更多詳情請點擊這里...
希望這可以幫助您了解並開始實施：)
解決方案2
1 2016-09-07 12:16:59
該網站有許多示例和示例代碼： http : //esri.github.io/angular-esri-map/#/home
解決方案3
0 已采納 2016-09-08 06:25:57
我遇到了一種非常簡單的方法，可以添加所有提到的功能，並能夠以這種方式對其進行控制。
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 中，如何根據所選行中包含的數據顯示按鈕？
[英]In Angular-JS, how can i show a button based on data contained in a selected row?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.