0

我正在使用https://github.com/calendee/ionic-leafletjs-map-demo/和更新的 angular-leaflet-directive.min.js (0.7.15)，因为演示使用的是旧版本。

我在 ionic + angularjs 传单指令的 $scope.map （在 mapController.js 中）中添加 DrawControl 时遇到问题。

索引.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Leaflet Demo</title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link rel="stylesheet" href="css/leaflet.css" />
  <link rel="stylesheet" href="css/style.css" />

  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <script src="lib/leaflet/leaflet.js"></script>
    <!--<script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>-->
    <script src="lib/src/Leaflet.draw.js"></script>    
    <script src="http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js"></script>

    <script src="lib/src/Toolbar.js"></script>
    <script src="lib/src/Tooltip.js"></script>

    <script src="lib/src/ext/GeometryUtil.js"></script>
    <script src="lib/src/ext/LatLngUtil.js"></script>
    <script src="lib/src/ext/LineUtil.Intersect.js"></script>
    <script src="lib/src/ext/Polygon.Intersect.js"></script>
    <script src="lib/src/ext/Polyline.Intersect.js"></script>

    <script src="lib/src/draw/DrawToolbar.js"></script>
    <script src="lib/src/draw/handler/Draw.Feature.js"></script>
    <script src="lib/src/draw/handler/Draw.SimpleShape.js"></script>
    <script src="lib/src/draw/handler/Draw.Polyline.js"></script>
    <script src="lib/src/draw/handler/Draw.Circle.js"></script>
    <script src="lib/src/draw/handler/Draw.Marker.js"></script>
    <script src="lib/src/draw/handler/Draw.Polygon.js"></script>
    <script src="lib/src/draw/handler/Draw.Rectangle.js"></script>

    <script src="lib/src/edit/EditToolbar.js"></script>
    <script src="lib/src/edit/handler/EditToolbar.Edit.js"></script>
    <script src="lib/src/edit/handler/EditToolbar.Delete.js"></script>

    <script src="lib/src/Control.Draw.js"></script>

    <script src="lib/src/edit/handler/Edit.Poly.js"></script>
    <script src="lib/src/edit/handler/Edit.SimpleShape.js"></script>
    <script src="lib/src/edit/handler/Edit.Circle.js"></script>
    <script src="lib/src/edit/handler/Edit.Rectangle.js"></script>
    <script src="lib/src/edit/handler/Edit.Marker.js"></script>    

    <script src="lib/opacity/Control.Opacity.js"></script>
    <script src="lib/jquery/jquery-1.9.1.js"></script>
    <script src="lib/jquery/jquery-ui-1.10.3.custom.min.js"></script>
  <script src="lib/fullscreen/Control.FullScreen.js"></script>
  <link rel="stylesheet" href="lib/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="lib/dist/MarkerCluster.Default.css" />
  <script src="lib/dist/leaflet.markercluster-src.js"></script>

  <script src="lib/leaflet/angular-leaflet-directive.min.js"></script>

  <script src="lib/ng-cordova.min.js"></script>
  <script src="cordova.js"></script>

  <script src="js/app.js"></script>
  <script src="js/controllers/mapController.js"></script>
  <script src="js/services/locationsService.js"></script>
  <script src="js/services/instructionsService.js"></script>
  <script src="js/directives/igTruncate.js"></script>

</head>

<body ng-app="starter" class="platform-ios platform-cordova platform-webview">
<ion-nav-view></ion-nav-view>
</body>
</html>

地图.html

<ion-view title="OneMap">

  <ion-nav-buttons side="left">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>

  <ion-nav-buttons side="right">
    <button ng-click="locate();" class="button button-icon icon ion-pinpoint"></button>
  </ion-nav-buttons>

  <ion-content data-tap-disabled="true">

    <leaflet defaults="map.defaults" center="map.center" layers="map.layers" markers="map.markers" ng-if="map" width="100%" height="100%">k</leaflet>

  </ion-content>

</ion-view>

地图控制器.js

    /*leafletData.getMap().then(function(map) {

    // Initialise the feature group to store editable layers
    //var drawnItems = new L.FeatureGroup();
    var drawnItems = $scope.controls.draw.edit.featureGroup;

    map.on('draw:created', function (e) {
      var layer = e.layer;
      drawnItems.addLayer(layer);
      console.log(JSON.stringify(layer.toGeoJSON()));
      });
    });

    // Initialise the draw control
    var drawControl = $scope.controls.draw({
        position: 'bottomright',
        edit: {
            featureGroup: drawnItems
        }
    });*/

    var drawnItems = new L.FeatureGroup();

    $scope.map = {
      defaults: {
        scrollWheelZoom: true
      },
       center: {
        lat: 1.355,
        lng: 103.840, 
        zoom: 14,
        minZoom: 12,
        maxZoom: 18,
        zoomControlPosition: 'topleft'
            },
      markers : {},
      events: {
        map: {
          enable: ['context'],
          logic: 'emit'
        }
      },
      controls: {
          type: 'layers',
          //control: new L.control.layers(map2007).addTo(basemap),
          draw: {},
          edit: {
            featureGroup: drawnItems
          }
      },
      layers: {
        baselayers: {
          basemap: {
            name: 'Basemap',
            url: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
            type: 'xyz'
          }
        },          
        overlays: {
          map2007: {
            name: '2007',
            type: 'xyz',
            visible: true,
            url: 'http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:2007wgs84@EPSG:3857@png/{z}/{x}/{y}.png',
            layerParams: {
              format: 'image/png',
              transparent: true
            }
          }
        }
      }
    };

我想让 Leaflet DrawControl 显示在地图中。

希望这对其他人也有帮助。

提前致谢。干杯!

4

0 回答 0