标签: angular-leaflet-directive
鼠标悬停在多个标记leaflet.js上？
所以我有一张传单地图,上面放着很多标记.我希望在标记上的"悬停"上有一个像资产等状态的弹出窗口.我在谷歌上看到了一些例子并尝试实现,但没有一个是触发任何事件.这是我尝试的代码.我怎样才能实现这个功能？我是否必须使用某种工具提示而不是弹出窗口？
buildMarkerLayer = (rawAssetsObjects) => {
let markersGroup = null;
var self = this;
markersGroup = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
spiderfyDistanceMultiplier: 2
});
self.$localForage.getItem('showAllAreas').then((_showAll) => {
if(_showAll){
this.loadAllAreas();
}else{
this.hideAllAreas();
}
});
angular.forEach(rawAssetsObjects, function(_asset) {
if(_asset.latitude && _asset.longitude){
markersGroup.addLayer(L.marker(L.latLng(_asset.latitude,
_asset.longitude), {
id: _asset.id,
icon: L.divIcon({
html: self.siMarkers.createHTMLMarker(_asset)
})
}).on('click', function(e) {
//dismiss the event timeline
self.$mdSidenav('right').close();
self.centerOnClick(_asset);
//set the selected asset to a shared service for availability in
//other controllers
self.siMapRam.setActive(_asset);
//inform detail controller of a newly …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
检查多边形点是否在传单中的另一个内部
我有从叶子geoJSON地图中选择的两组多边形坐标.父和子坐标的坐标是:
var parentCoordinates=[
[
32.05898221582174,
-28.31004731142091
],
[
32.05898221582174,
-28.308044824292978
],
[
32.06134255975485,
-28.308044824292978
],
[
32.06134255975485,
-28.31004731142091
],
[
32.05898221582174,
-28.31004731142091
]
]
var childCoordinates=[
[
32.059904895722866,
-28.30970726909422
],
[
32.059904895722866,
-28.308743809931784
],
[
32.06089194864035,
-28.308743809931784
],
[
32.06089194864035,
-28.30970726909422
],
[
32.059904895722866,
-28.30970726909422
]
]
如图所示,孩子被绘制在父区域内:
使用Ray Casting算法确定点是否位于多边形内部我无法确定结果我得到的是假.请让我知道我在哪里做错了或以其他方式确定解决方案.谢谢
javascript polygon angularjs leaflet angular-leaflet-directive
推荐指数
解决办法
查看次数
Angular Leaflet - 地图无法正确渲染
无论我在 Angular 7 中尝试哪种方式，我的 Leaflet 地图都无法正确加载。我得到一个块拼图，一半屏幕为灰色，另一半为随机脱节的地图块（见图）。
\n\n地图块拼图：
\n\n
\n我的 HTML 是：
<div \n leaflet \n [leafletOptions]="options">\n</div>\n或者
\n\n<div id="map" class="map"></div>\n
\n我的组件是：
import * as L from "leaflet";\n...\n@Component( {\n styleUrls: [ "../../../../node_modules/leaflet/dist/leaflet.css" ],\n templateUrl: "./map.html"\n} )\n...\nexport class Map implements OnInit {\n\n map: any;\n\n options = {\n layers: [\n L.tileLayer(\'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\', { maxZoom: 7, attribution: \'...\' })],\n zoom: 5,\n center: L.latLng([ 46.879966, -121.726909 ])};\n\n async ngOnInit() {\n\n this.map = L.map(\'map\').setView( [37.8, -96], 4 );\n …推荐指数
解决办法
查看次数
angular-leaflet-directive自定义消息html,带有标记弹出窗口中的angular指令.如何？
我想将带有$ scope事件处理程序的自定义html标记插入到传单标记的message属性中.例如:
App.controller('testController', ['$scope', "leafletEvents", '$compile', 'leafletMarkersHelpers',
function($scope, leafletEvents, $compile, leafletMarkersHelpers){
angular.extend($scope, {
currentLocation : {
lat: 20,
lng: 20,
zoom: 20
},
markers: {
},
defaults: {
scrollWheelZoom: true
},
events: {
map: {
enable: ['zoomstart', 'drag', 'click', 'mousemove', 'popupopen'],
logic: 'emit'
},
markers: {
enable: leafletEvents.getAvailableMarkerEvents()
}
}
});
var html = " <a href=''>info</a><button type='button' ng-click='doSomeAction()'>Choose</button>";
var item = {...}; //some data for marker
$scope.markers["newMarker"] = {
lat: item.lat,
lng: item.lng,
message: item.message + html,
draggable: false …推荐指数
解决办法
查看次数
如何在折线上应用css:传单
我正在使用使用传单api的应用程序.
介绍
我需要绘制不同类型的栅栏,使用装饰器我可以在一定程度上对折线应用良好的视觉效果,但不是很多.
问题
我愿意显示扭曲的线而不是破折号,点或平线,我知道绞线将是一个图像,但无法找到有关将自定义css应用于折线的帮助.
脚本示例
var fence2Icon = L.icon({
iconUrl: 'xxxx.png',
iconSize: [5, 20]
iconAnchor: [5, 18]
});
// Add coordinate to the polyline
var polylineFence2 = new L.Polyline([], { color: 'red' });
function fencePlace2(e) {
// New marker on coordinate, add it to the map
new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr);
// Add coordinate to the polyline
polylineFence2.addLatLng(e.latlng).addTo(curr);
var decorator = L.polylineDecorator(polylineFence2, {
patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5})
}]
}).addTo(curr);
}
L.easyButton('fa-flash', function () {
$('.leaflet-container').css('cursor', 'crosshair');
map.on('click', fencePlace2); …推荐指数
解决办法
查看次数
如何更改传单指令上的默认图标引脚？
我想知道是否可以更改默认图标（蓝色），在应用程序初始化时使用另一个自定义图标，我阅读了有关如何更改的信息，但我想要整个应用程序的自定义图标。
HTML
<div ng-controller="CustomizedMarkersController">
<button type="button" class="btn btn-primary padright" ng-click="markers.m1.icon=icon" ng-repeat="(key, icon) in icons">{{ key }}</button>
<leaflet markers="markers" center="lisbon"></leaflet>
</div>
JS
app.controller("CustomizedMarkersController", [ '$scope', function($scope) {
var local_icons = {
default_icon: {},
leaf_icon: {
iconUrl: 'examples/img/leaf-green.png',
shadowUrl: 'examples/img/leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] …javascript directive angularjs leaflet angular-leaflet-directive
推荐指数
解决办法
查看次数
AngularJS Leaflet getMap()不起作用
将Leaflet添加到我的AngularJS应用程序后:
<leaflet id="map" defaults="defaults" center="center" bounds="bounds" controls="controls" event-broadcast="events"></leaflet>
并设置:
// Initialise the feature group to store editable layers
var drawnItems = new L.FeatureGroup();
// Initialise the draw control
var drawControl = new L.Control.Draw({
position: 'topright',
edit: {
featureGroup: drawnItems
}
});
// Configure Leaflet
angular.extend($scope, {
defaults: {
zoomControlPosition: 'topright',
minZoom: 3,
tileLayerOptions: {
detectRetina: true,
reuseTiles: true,
attribution: '<a href="http://osm.org">OpenStreetMaps</a>'
}
},
center: {},
controls: {
custom: [drawControl]
},
events: {
map: {
enable: ['click']
}
}
});
遵循此代码,它不会被评估(尽管没有显示错误): …
推荐指数
解决办法
查看次数
如何使用角度传单指令和geojson更改传单弹出窗口的偏移量？
我正在使用angular-leaflet-directive和geojson来使用leaflet和mapbox创建地图标记.标记上的弹出窗口未在标记上正确对齐.
angular.extend($scope, { // Map data
geojson: {
data: $scope.filteredShows,
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.artist + ' · ' + feature.properties.venue);
layer.setIcon(defaultMarker);
layer.on({
mouseover: pointMouseover,
mouseout: pointMouseout
});
layers[feature.properties.id] = layer;
}
}
});
如何更改标记的偏移量？
推荐指数
解决办法
查看次数
如何过滤角度模型(数组)而不破坏它
我有一个模型供我观看.
该模型是对象数组:
var arr = { "12345qwery": { prop1: "value", prop2: "value" } } // contains 500 items
今天我用以下方式过滤它:
arr = $filter('filter')(arr, filterTerm); // contains 4 items
在这一行之后我获得了很好的过滤数据但是如果我再次运行这个过滤器我没有500个项目但是4.
为了避免这种情况我将原始数组存储在临时对象中并且当用户更改过滤器时我首先用备份更新arr数据(它是原始的500项)并进行过滤.
现在我遇到麻烦,因为我有多个过滤器,我必须在每个过滤器之前恢复原始数据...无论如何它是一个烂摊子:)
有没有更好的(角度)方式来实现这个javascript过滤？
更新
为了更好地解释我创建的问题是什么问题:
https
://plnkr.co/edit/99b02UtUfPeM3wl4IiX6 ? p = preview
正如您所见,我加载了带有对象的标记,并希望通过文本字段过滤它.
但我不能因为我总是得到一些错误.
我在这里做错了吗？
并且为了避免这种情况并以某种方式实现过滤器,这就是为什么我决定在代码中执行它并在每个过滤器之后保留原始数组,但这是非常复杂的解决方案,我不想以更自然的角度方式进行.
BOUNTY UPDATE
我在js代码中过滤对象,因为我找不到以标准角度方式过滤此指令上的标记的方法.
这就是为什么我在代码中过滤并在过滤器之前总是复制它.
我需要帮助以标准角度方式过滤此指令上的标记对象.
Plunker实现此指令但我不知道如何过滤它.
javascript angularjs angularjs-scope angularjs-filter angular-leaflet-directive
推荐指数
解决办法
查看次数