Javascript 使用角度传单指令的传单曲线（Bé；zier）

我在AngularJS应用程序中使用来显示传单地图。现在我正在玩路径游戏——在两点之间画线。这非常有效，但此时它被渲染为一条直线。我想要一条光滑的贝塞尔曲线。我在传单网站上找到了两个插件，但是没有一个有AngularJS实现

问题：是否有人将此纳入角传单指令？如果是这样的话，你能给我一些建议吗？我已经看过代码了，但我不知道如何开始。当然，我在谷歌上搜索过，但什么也没找到。

您需要搜索“如何将自定义控件添加到角度传单指令”

你可以找到很多样品

var-app=angular.module（“demoapp”[“传单指令”]）；
app.controller（'layersOverlaymarkerClusterController'，['$scope'，函数（$scope）{
角度。扩大范围{
里波尔：{
lat:42.20133，
液化天然气：2.19110，
缩放：8
},
图层：{
基层：{
osm：{
名称：“OpenStreetMap”，
键入：“xyz”，
url:'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
分层：{
子域：['a'，'b'，'c']，
属性：“©；参与者”，
连续世界：真的吗
}
},
周期：{
名称：“OpenCycleMap”，
键入：“xyz”，
url:'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'，
分层：{
子域：['a'，'b'，'c']，
属性：“©；参与者-©；参与者”，
连续世界：真的吗
}
}
},
覆盖层：{
山体阴影：{
名称：“Hillshade Europa”，
类型：“wms”，
网址：'http://129.206.228.72/cached/hillshade',
可见：对，
分层：{
图层：“欧洲wms:hs_srtm_europa”，
格式：'image/png'，
不透明度：0.25，
属性：GIScience提供的山体阴影层http://www.osm-wms.de',
crs:L.crs.EPSG900913
}
},
汽车：{
名称：“汽车”，
类型：“markercluster”，
可见：正确
}
}
},
标记：{
m1：{
lat:42.20133，
液化天然气：2.19110，
图层：“汽车”，
信息：“我是一辆行驶中的汽车”
},
m2:{
纬度：42.21133，
液化天然气：2.18110，
图层：“汽车”，
信息：“我是一辆车”
},
m3：{
纬度：42.19133，
液化天然气：2.18110，
图层：“汽车”，
信息：“一辆自行车！！”
},
m4：{
lat:42.3，
液化天然气：2.16110，
图层：“汽车”
},
m5：{
lat:42.1，
液化天然气：2.16910，
图层：“汽车”
},
m6：{
拉脱维亚：42.15，
液化天然气：2.17110，
图层：“汽车”
}
}
});
$scope.move=函数（）{
$scope.markers.m1.lng=$scope.markers.m1.lng+0.1；
}
} ]);

斯格里隆给出的答案非常有用，让我们了解了传单的扩展机制是如何工作的。对于那些正在搜索集成传单.Bezier.js的未来读者，我已经做了以下几件事

1） 将控件标记添加到传单地图

2） 扩展映射并实例化自定义控件-在我的示例中是L.Bezier

angular.extend（$scope{
中心：{
拉脱维亚：50.653657，
液化天然气：4.383432，
缩放：7
},
图层：{
基层：{
xyz：{
名称：“OpenStreetMap（XYZ）”，
url:'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
键入：“xyz”，
分层：{
shownSelector:错误
}
}
},
覆盖：{}
},
路径：{}，
标记：{}，
控制：{
定制：新L.bezier({
路径：[
[]
]
})
},
默认图标：{}，
默认值：{
滚轮缩放：对，
minZoom:7，
最大缩放：14
}
});

在应绘制曲线的位置，创建L.bezier的新实例并将其添加到自定义控件中

//创建贝塞尔曲线路径
var bezier=新的L.bezier({
路径：[
[{
lat:运算符.几何体.坐标[1]，
lng：操作员。几何。坐标[0]
},
{
lat:selectedController.geometry.coordinates[1]，
lng:selectedController.geometry.coordinates[0]
}
]
],
图标：{
路径：“图像/图标/car.png”
}
}，破折号（直）；
$scope.controls.custom=bezier；

它起作用了

<script>
    var app = angular.module("demoapp", ["leaflet-directive"]);
    app.controller('LayersOverlaysMarkerclusterController', [ '$scope', function($scope) {
        angular.extend($scope, {
            ripoll: {
                lat: 42.20133,
                lng: 2.19110,
                zoom: 8
            },
            layers: {
                baselayers: {
                    osm: {
                        name: 'OpenStreetMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    },
                    cycle: {
                        name: 'OpenCycleMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    }
                },
                overlays: {
                    hillshade: {
                        name: 'Hillshade Europa',
                        type: 'wms',
                        url: 'http://129.206.228.72/cached/hillshade',
                        visible: true,
                        layerOptions: {
                            layers: 'europe_wms:hs_srtm_europa',
                            format: 'image/png',
                            opacity: 0.25,
                            attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
                            crs: L.CRS.EPSG900913
                        }
                    },
                    cars: {
                        name: 'Cars',
                        type: 'markercluster',
                        visible: true
                    }
                }
            },
            markers: {
                m1: {
                    lat: 42.20133,
                    lng: 2.19110,
                    layer: 'cars',
                    message: "I'm a moving car"
                },
                m2: {
                    lat: 42.21133,
                    lng: 2.18110,
                    layer: 'cars',
                    message: "I'm a car"
                },
                m3: {
                    lat: 42.19133,
                    lng: 2.18110,
                    layer: 'cars',
                    message: 'A bike!!'
                },
                m4: {
                    lat: 42.3,
                    lng: 2.16110,
                    layer: 'cars'
                },
                m5: {
                    lat: 42.1,
                    lng: 2.16910,
                    layer: 'cars'
                },
                m6: {
                    lat: 42.15,
                    lng: 2.17110,
                    layer: 'cars'
                }
            }
        });
        $scope.move = function() {
            $scope.markers.m1.lng = $scope.markers.m1.lng + 0.1;
        }
    } ]);
</script>