如何在Angular-Js中使用ArcGIS Maps?

时间:2016-09-07 04:39:43

标签: javascript angularjs arcgis esri arcgis-js-api

如何通过操作;

轻松地在Angular-Js中使用ArcGIS Maps
  • 变焦
  • 定位
  • 添加标记
  • 按地理坐标和地名搜索我的地点
  • 懒洋洋地加载标记等?

有人可以给我一个样品。

3 个答案:

答案 0 :(得分:1)

嗯,下面是使用angular-js加载ArcGIS / ESRI地图的示例,以及来自下面提到的链接的更多详细信息和相关示例/概念read getting-started

<!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>

更多详情please click here...

希望这有助于您理解并开始实施:)

答案 1 :(得分:1)

本网站有很多例子和示例代码: http://esri.github.io/angular-esri-map/#/home

答案 2 :(得分:0)

我遇到了一种非常简单的方法来添加所有提到的功能,并能够以这种方式控制它们。

[TestFixture]
public class MyTests 
{
    [Test]
    [Classification="One"]
    [Classification="Two"]
    public void TestA()
    {
    }
    [Test]
    [Classification="One"]
    public void TestB()
    {
    }
    [Test]
    [Classification="Three"]
    public void TestC()
    {
    }
} 

简单的指令将非常有用。现在更多的是它使用地图功能更新'appConfig'全局配置对象。这对我很有用。

谢谢你们的贡献。