[英]ionic leaflet angularjs directive - switching tileLayer in side menu thru Service
I am trying to test develop ionic app for leaflet-angularjs-directive. 我正在尝试测试针对leaflet-angularjs-directive的ionic应用程序。 There's not many demos for me to try out. 我可以尝试的演示不多。
I am using: ionic-leafletjs-map-demo by calendee (github) https://github.com/calendee/ionic-leafletjs-map-demo 我正在使用:calendee(github)的ionic-leafletjs-map-demo https://github.com/calendee/ionic-leafletjs-map-demo
And I am trying to reproduce the LocationsService to an another service: HistoricalMapService. 我正在尝试将LocationsService复制到另一个服务:HistoricalMapService。 Whenever I have added that HistoricalMapService, the webpage view for "ionic serve" is blank. 只要添加了HistoricalMapService,“离子服务”的网页视图就为空白。 When I commented it, the webpage is working but didn't use the HistoricalMapService. 当我发表评论时,该网页正在运行,但未使用HistoricalMapService。
Here's my code in the mapController.js (js/controller/mapController.js) 这是我在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);
});
};
}]);
And my historicalMapService (js/services/historicalMapService.js) in here: http://pastebin.com/mYsU0Dpk 还有我的historyMapService(js / services / historicalMapService.js)在这里: http : //pastebin.com/mYsU0Dpk
And my menu.html (templates/menu.html) as follows: 和我的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>
How can I display the Layer's Name and when the user clicked on it, it will switch the map in the TMS TileLayer? 如何显示图层名称,当用户单击该图层名称时,它将在TMS TileLayer中切换地图?
Thanks in advance for the help. 先谢谢您的帮助。
Solved: Updated 解决:更新
mapController.js + using shared attributes 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 (not using menu.html) 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.