openlayers-directive为标记创建图层

时间:2016-08-01 09:13:44

标签: angularjs openlayers-3 layer marker angular-openlayers

我使用Openlayers-directive并尝试使用标记创建图层。我查看了示例thisthis

我的观点(SLIM):

openlayers ol-center="center" ol-defaults="defaults" custom-layers="true"
  ol-layer ol-layer-properties="layers.main"
  ol-layer ol-layer-properties="layers.markers"

我的控制器:

MapCtrl = ($scope, olData, Node) ->

  ctrl = this
  $scope.markers = []

  ctrl.source = new ol.source.Vector(features: $scope.markers)

  ctrl.clusterSource = new ol.source.Cluster({
    distance: 40
    source: ctrl.source
  })

  getStyle = (feature) ->
    style = createPointStyle('blue')


  createPointStyle = (color, text) ->
    options = image: new (ol.style.Circle)(
      radius: 10
      fill: new (ol.style.Fill)(
        color: color
        opacity: 0.6)
      stroke: new (ol.style.Stroke)(
        color: 'white'
        opacity: 0.4))
    return

  angular.extend $scope, {
    events:
        map: ['moveend']
    layers: 
      main:
        source: 
          type: "OSM"
      markers:
        clustering: true
        clusteringDistance: 40
        style: getStyle
  }

  $scope.query_marker = ->
    # console.debug gon.location
    Node.get {}, (res) ->

      ctrl.source.clear()
      ctrl.source.addFeature new ol.Feature(new ol.geom.Point(51.5406, 46.0086))      

      ctrl.clusterSource.set 'source', ctrl.source       
      $scope.layers.source = ctrl.clusterSource
    return

  $scope.$on 'openlayers.map.moveend', (event, data) ->
    $scope.$apply ->
      $scope.query_marker()

      return
    return

但标记未显示,并出现在控制台错误中:

    angular.self-5657ace….js?body=1:12478 TypeError: Cannot read property 'all' of undefined
    at dm (ol.self-72a25ce….js?body=1:293)
    at bm.l.forEach (ol.self-72a25ce….js?body=1:293)
    at forEach (angular.self-5657ace….js?body=1:341)
    at copy (angular.self-5657ace….js?body=1:933)
    at copy (angular.self-5657ace….js?body=1:902)
    at copy (angular.self-5657ace….js?body=1:946)
    at copy (angular.self-5657ace….js?body=1:902)
    at copy (angular.self-5657ace….js?body=1:946)
    at copy (angular.self-5657ace….js?body=1:902)
    at copy (angular.self-5657ace….js?body=1:946)(anonymous function) @ angular.self-5657ace….js?body=1:12478(anonymous function) @ angular.self-5657ace….js?body=1:9247$digest @ angular.self-5657ace….js?body=1:15845$apply @ angular.self-5657ace….js?body=1:16098done @ angular.self-5657ace….js?body=1:10547completeRequest @ angular.self-5657ace….js?body=1:10745requestLoaded @ angular.self-5657ace….js?body=1:10686
angular.self-5657ace….js?body=1:12478 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.7/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.self-5657ace….js?body=1:69
    at Scope.$digest (angular.self-5657ace….js?body=1:15865)
    at Scope.$apply (angular.self-5657ace….js?body=1:16098)
    at done (angular.self-5657ace….js?body=1:10547)
    at completeRequest (angular.self-5657ace….js?body=1:10745)
    at XMLHttpRequest.requestLoaded (angular.self-5657ace….js?body=1:10686)(anonymous function) @ angular.self-5657ace….js?body=1:12478(anonymous function) @ angular.self-5657ace….js?body=1:9247$apply @ angular.self-5657ace….js?body=1:16100done @ angular.self-5657ace….js?body=1:10547completeRequest @ angular.self-5657ace….js?body=1:10745requestLoaded @ angular.self-5657ace….js?body=1:10686
angular.self-5657ace….js?body=1:69 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.7/$rootScope/infdig?p0=10&p1=%5B%5D

0 个答案:

没有答案