我正在尝试为 leaflet-angularjs-directive 测试开发 ionic 应用程序。可供我试用的演示不多。
我正在使用:calendee (github) 的 ionic-leafletjs-map-demo https://github.com/calendee/ionic-leafletjs-map-demo
我正在尝试将 LocationsService 复制到另一项服务:HistoricalMapService。每当我添加 HistoricalMapService 时，“ionic serve”的网页 View 都是空白的。当我评论它时，该网页正在运行但没有使用 HistoricalMapService。
这是我在 mapController.js (js/controller/mapController.js) 中的代码
angular.module('starter').controller('MapController',
[ '$scope',
'$cordovaGeolocation',
'$stateParams',
'$ionicModal',
'$ionicPopup',
'LocationsService',
/*'HistoricalMapService',*/
'InstructionsService',
function(
$scope,
$cordovaGeolocation,
$stateParams,
$ionicModal,
$ionicPopup,
LocationsService,
/*HistoricalMapService,*/
InstructionsService
) {
/**
* Once state loaded, get put map on scope.
*/
$scope.$on("$stateChangeSuccess", function() {
$scope.locations = LocationsService.savedLocations;
$scope.newLocation;
if(!InstructionsService.instructions.newLocations.seen) {
var instructionsPopup = $ionicPopup.alert({
title: 'Add Locations',
template: InstructionsService.instructions.newLocations.text
});
instructionsPopup.then(function(res) {
InstructionsService.instructions.newLocations.seen = true;
});
}
$scope.map = {
defaults: {
tileLayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17'
},
center: {
lat: 1.355,
lng: 103.840,
zoom: 14,
minZoom: 12,
maxZoom: 18,
zoomControlPosition: 'topleft'
},
markers : {},
events: {
map: {
enable: ['context'],
logic: 'emit'
}
}
};
//$scope.goTo(0);
$scope.locate();
});
var Location = function() {
if ( !(this instanceof Location) ) return new Location();
this.lat = "";
this.lng = "";
this.name = "";
};
$ionicModal.fromTemplateUrl('templates/addLocation.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
/**
* Detect user long-pressing on map to add new location
*/
$scope.$on('leafletDirectiveMap.contextmenu', function(event, locationEvent){
$scope.newLocation = new Location();
$scope.newLocation.lat = locationEvent.leafletEvent.latlng.lat;
$scope.newLocation.lng = locationEvent.leafletEvent.latlng.lng;
$scope.modal.show();
});
$scope.saveLocation = function() {
LocationsService.savedLocations.push($scope.newLocation);
$scope.modal.hide();
$scope.goTo(LocationsService.savedLocations.length - 1);
};
/**
* Center map on specific saved location
* @param locationKey
*/
$scope.goTo = function(locationKey) {
var location = LocationsService.savedLocations[locationKey];
$scope.map.center = {
lat : location.lat,
lng : location.lng,
zoom : 12
};
$scope.map.markers[locationKey] = {
lat:location.lat,
lng:location.lng,
message: location.name,
focus: true,
draggable: false
};
};
$scope.goToMapYear = function(histmap) {
var histmap = HistoricalMapService.locateMapYear[histmap];
console.log("Map Year: " + histmap.name);
console.log("Map Layer: " + histmap.tileLayer);
$scope.map = {
defaults: {
tileLayer: histmap.tileLayer
},
center: {
lat: 1.355,
lng: 103.840,
zoom: 14,
minZoom: 12,
maxZoom: 18,
zoomControlPosition: 'topleft'
},
markers : {},
events: {
map: {
enable: ['context'],
logic: 'emit'
}
}
};
};
/**
* Center map on user's current position
*/
$scope.locate = function(){
$cordovaGeolocation
.getCurrentPosition()
.then(function (position) {
$scope.map.center.lat = position.coords.latitude;
$scope.map.center.lng = position.coords.longitude;
$scope.map.center.zoom = 15;
$scope.map.markers.now = {
lat:position.coords.latitude,
lng:position.coords.longitude,
message: "You Are Here",
focus: true,
draggable: false
};
}, function(err) {
// error
console.log("Location error!");
console.log(err);
});
};
}]);
我的 historicalMapService (js/services/historicalMapService.js) 在这里:http://pastebin.com/mYsU0Dpk
和我的menu.html(templates/menu.html)如下:
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
<header class="bar bar-header bar-stable">
<h1 class="title">Map Year</h1>
</header>
<ion-content class="has-header">
<ion-list>
<!--<ion-item nav-clear menu-close ng-click="goTo(locationKey)" ng-repeat="(locationKey,location) in locations track by location.name">
{{location.name}}
</ion-item>-->
<ion-item nav-clear menu-close ng-click="goToMapYear(histmap)" ng-repeat="(histmap,mapyear) in mapyears track by mapyear.name">
{{mapyear.name}}
</ion-item>
</ion-list>
</ion-content>
如何在TMS TileLayer 中显示Layer 的名称并在用户点击它时切换 map ？
在此先感谢您的帮助。
最佳答案
已解决:已更新
mapController.js + 使用共享属性
/*angular.module('starter').controller('MapController', ['$scope', 'leafletData',
function($scope, leafletData) {
leafletData.getMap().then(function(map) {
L.GeoIP.centerMapOnPosition(map, 15);
});
}
]); */
angular.module('starter').controller('MapController',
[ '$scope',
'$cordovaGeolocation',
'$stateParams',
'$ionicModal',
'$ionicPopup',
'$http',
'LocationsService',
'InstructionsService',
function(
$scope,
$cordovaGeolocation,
$stateParams,
$ionicModal,
$ionicPopup,
$http,
LocationsService,
InstructionsService
) {
/**
* Once state loaded, get put map on scope.
*/
$scope.$on("$stateChangeSuccess", function() {
$scope.locations = LocationsService.savedLocations;
$scope.newLocation;
if(!InstructionsService.instructions.newLocations.seen) {
var instructionsPopup = $ionicPopup.alert({
title: 'Add Locations',
template: InstructionsService.instructions.newLocations.text
});
instructionsPopup.then(function(res) {
InstructionsService.instructions.newLocations.seen = true;
});
}
$scope.basemapLayers = {
basemap: {
name: 'BaseMap',
url: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
type: 'xyz'
},
map1955: {
name: '1955',
url: 'https://api.tiles.mapbox.com/v4/sla.d62b6062/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
type: 'xyz'
},
map1969: {
name: '1969',
url: 'https://api.tiles.mapbox.com/v4/sla.d33a760d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
type: 'xyz'
},
map1975: {
name: '1975',
url: 'https://api.tiles.mapbox.com/v4/sla.dbfef17c/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
type: 'xyz'
},
map1988: {
name: '1988',
url: 'https://api.tiles.mapbox.com/v4/sla.65929e4d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
type: 'xyz'
},
map1998: {
name: '1998',
url: 'https://api.tiles.mapbox.com/v4/sla.d7a29a60/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
type: 'xyz'
},
map2007: {
name: '2007',
url: 'https://api.tiles.mapbox.com/v4/sla.7ce67a24/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
type: 'xyz'
}
}
$scope.map = {
defaults: {
//tileLayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
//tileLayer: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
layers: {
baselayers: {
basemap: $scope.basemapLayers.basemap,
map2007: $scope.basemapLayers.map2007,
map1998: $scope.basemapLayers.map1998,
map1988: $scope.basemapLayers.map1988,
map1975: $scope.basemapLayers.map1975,
map1969: $scope.basemapLayers.map1969,
map1955: $scope.basemapLayers.map1955
}
}
},
center: {
lat: 1.355,
lng: 103.840,
zoom: 14,
minZoom: 12,
maxZoom: 18,
zoomControlPosition: 'topleft'
},
markers : {},
events: {
map: {
enable: ['context'],
logic: 'emit'
}
}
};
//$scope.goTo(0);
$scope.locate();
//$scope.map2 = $scope.map;
$scope.map2 = {
defaults: {
//tileLayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17',
//tileLayer: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
layers: {
baselayers: {
map1955: $scope.basemapLayers.map1955,
map1969: $scope.basemapLayers.map1969,
map1975: $scope.basemapLayers.map1975,
map1988: $scope.basemapLayers.map1988,
map1998: $scope.basemapLayers.map1998,
map2007: $scope.basemapLayers.map2007,
basemap: $scope.basemapLayers.basemap
}
}
},
center: {
lat: 1.355,
lng: 103.840,
zoom: 14,
minZoom: 12,
maxZoom: 18,
zoomControlPosition: 'topleft'
},
markers : {},
events: {
map: {
enable: ['context'],
logic: 'emit'
}
}
};
//$scope.goTo(0);
$scope.locate();
});
var Location = function() {
if ( !(this instanceof Location) ) return new Location();
this.lat = "";
this.lng = "";
this.name = "";
};
$ionicModal.fromTemplateUrl('templates/addLocation.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
/**
* Detect user long-pressing on map to add new location
*/
$scope.$on('leafletDirectiveMap.contextmenu', function(event, locationEvent){
$scope.newLocation = new Location();
$scope.newLocation.lat = locationEvent.leafletEvent.latlng.lat;
$scope.newLocation.lng = locationEvent.leafletEvent.latlng.lng;
$scope.modal.show();
});
$scope.saveLocation = function() {
LocationsService.savedLocations.push($scope.newLocation);
$scope.modal.hide();
$scope.goTo(LocationsService.savedLocations.length - 1);
};
/**
* Center map on specific saved location
* @param locationKey
*/
$scope.goTo = function(locationKey) {
var location = LocationsService.savedLocations[locationKey];
$scope.map.center = {
lat : location.lat,
lng : location.lng,
zoom : 14
};
$scope.map.markers[locationKey] = {
lat:location.lat,
lng:location.lng,
message: location.name,
focus: true,
draggable: false
};
};
$scope.goToMapYear = function(histmap) {
var mapyear = HistoricalMapService.locateMapYear[histmap];
};
/**
* Center map on user's current position
*/
$scope.locate = function(){
$cordovaGeolocation
.getCurrentPosition()
.then(function (position) {
$scope.map.center.lat = position.coords.latitude;
$scope.map.center.lng = position.coords.longitude;
$scope.map.center.zoom = 15;
$scope.map.markers.now = {
lat:position.coords.latitude,
lng:position.coords.longitude,
message: "You Are Here",
focus: true,
draggable: false
};
}, function(err) {
// error
console.log("Location error!");
console.log(err);
});
};
}]);
map.html(不使用 menu.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();" title="Search" class="button button-icon icon ion-ios-search-strong"></button>
</ion-nav-buttons>
<div class="row">
<ion-content data-tap-disabled="true" class="col col-50">
<leaflet id="map1" event-broadcast="map.defaults.events" defaults="map.defaults" center="map.center" markers="map.markers" layers="map.defaults.layers" width="100%" height="100%" ng-if="map"></leaflet>
</ion-content>
<ion-content data-tap-disabled="true" class="col col-50" style="left: 50%;">
<leaflet id="map2" event-broadcast="map.defaults.events" defaults="map.defaults" center="map.center" markers="map.markers" layers="map2.defaults.layers" width="100%" height="100%" ng-if="map2"></leaflet>
</ion-content>
</div>
<ion-tabs id="actionTabs" class="tabs-positive tabs-icon-top">
<a ng-click="locate();" name="Find Me" class="button button-icon icon ion-pinpoint" style="color: white;"></button>
</ion-tab>
</ion-tabs>
</ion-view>
关于javascript - ionic leaflet angularjs 指令 - 通过服务在侧边菜单中切换 tileLayer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30118007/