带有自定义标记的 Mapbox 行车路线

Question

我有以下代码使用 mapbox 作为我的行车方向，但不幸的是它不允许我更改标记，并且即使我尝试使用 geoJson[=11 更改它，它仍然使用其默认标记=]

<script>

L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyc2hpZGFsYXZpIiwiYSI6ImNpZjNmNTRrYzQ0b2xzNWx1bXN5MnlmdjUifQ.IvZZfdiPe4rxQNolE88fhg';

var __journey = {"logbook":"29","consumer":"732","account":"1","category":"13","source":"2","platform":"4","vehicle":"25","label":"Farshid","startingodometer":"20000","endingodometer":"22721","note":"","status":"unverified","isreimbursable":"no","isdeductible":"yes","type":"deductible","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21","dbupdate":"2015-11-25 14:42:21","detail":{"logbook":"29","consumer":"732","account":"1","category":"13","source":"2","platform":"4","vehicle":"25","label":"Farshid","startingodometer":"20000","endingodometer":"22721","note":"","status":"unverified","isreimbursable":"no","isdeductible":"yes","type":"deductible","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21","dbupdate":"2015-11-25 14:42:21"},"__consumer":{"customer":null,"customerkey":"ed64e42a-e7c1-49b9-9fef-f5dd96bcd783","firstname":null,"lastname":null,"apikey":null,"email":"farshid@ichit.com","birth":null,"pincode":null,"pinlastupdate":null,"password":null,"gender":null,"emailverify":"1","postcode":null,"reference":null,"country":null,"forgetpasswordtoken":null,"forgetpasswordexpiry":null,"ipaddress":null,"company":"3","created":null,"updated":null,"active":"1","active !=":null,"archive":"0","archive !=":null,"mobile":null},"__account":{"id":"29","account":"Business","sequence":null,"icon":null,"parent":null,"customer":null,"admin":null,"created":"2015-11-23 03:10:21","updated":"2015-11-23 03:10:21","active":null},"__category":{"id":"29","category":"Home","brands":null,"keywords":null,"icon":null,"parent":null,"customer":null,"admin":null,"active":null,"customisable":null,"created":"2015-11-23 03:10:21","updated":"2015-11-25 03:42:21"},"__source":{"source":"29","creator":null,"name":"My Car","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21"},"__platform":{"platform":"29","creator":null,"name":"My Car","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21"},"__route":[{"logbookroute":"1448421928.896","logbook":"29","latitude":"-37.8437403","longitude":"144.9758769","pindate":"2015-11-05","pintime":"02:09 AM","journey":"29","pinned":"2015-11-05 02:09:00"},{"logbookroute":"1448421928.901","logbook":"29","latitude":"-31.980216","longitude":"115.869578","pindate":"2015-11-22","pintime":"12:10 PM","journey":"29","pinned":"2015-11-22 12:10:00"}],"__vehicle":{"vehicle":"25","consumer":"732","name":"My Car","make":"Toyota","family":"Yaris","description":"1.4 Manual","year":"2015","odometer":"20725","registrationnumber":"123ABC","isactive":"yes","isdefualt":"no","isdeleted":"no","updated":"2015-10-10 10:10:10","created":"2015-10-10 10:10:10","dbupdate":"2015-11-23 03:10:21","log":"2","__make":false,"__family":false,"__description":false},"__reimbursement":false,"taxdeduction_code":"D5","mileage":"2721","name":"My Car","accountname":"Business","categoryname":"Home","reimbursement_status":null};
var start = {lat: '-37.8437403', lng: '144.9758769'};
var finish = {lat: '-31.980216', lng: '115.869578'};
var zoom = 9;

if(Number(__journey.mileage) >= 10000) zoom = 1;
else if(Number(__journey.mileage) >= 4000) zoom = 2;
else if(Number(__journey.mileage) >= 700) zoom = 3;
else if(Number(__journey.mileage) >= 500) zoom = 5;
else if(Number(__journey.mileage) >= 400) zoom = 6;
else if(Number(__journey.mileage) >= 300) zoom = 7;
else if(Number(__journey.mileage) >= 200) zoom = 8;
else zoom = 9;

console.log(zoom);

var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: true}).setView([-35.792529592717, 129.89108613555], zoom);

var geoJson = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            properties: {
                "marker-color": "#f76565",
                route: {id: 1, type: "origin", points: 2}
            },
            geometry: {
                type: "Point",
                coordinates: ['144.9758769', '-37.8437403']}
        },{
            type: "Feature",
            properties: {
                "marker-color": "#f76565",
                route: {id: 2, type: "destination", points: 3}
            },
            geometry: {
                type: "Point",
                coordinates: ['115.869578', '-31.980216']
            }
        }
    ]
};

var origin = {"type":"Feature","geometry":{"type":"Point","coordinates":[144.9758769,-37.8437403]},"properties":{"marker-symbol":"circle-stroked","marker-color":"ff1f20","marker-size":"medium"}};
var destination = {"type":"Feature","geometry":{"type":"Point","coordinates":[115.869578,-31.980216]},"properties":{"marker-symbol":"circle-stroked","marker-color":"23be20","marker-size":"medium"}};

// = L.mapbox.directions({profile: 'mapbox.driving'})
var directions = L.mapbox.directions();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);
directions.setOrigin(origin).setDestination(destination).query();

var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);

var myLayer = L.mapbox.featureLayer().addTo(map);
myLayer.setGeoJSON(geoJson);

Answer 1

Mapbox 方向 API 将标准标记插入自定义标记之上。您似乎还多次添加 directionsLayer 和 directionsRoutesControl。

这应该有效：

var geoJson = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            properties: {
                "marker-color": "#f76565",
                "marker-symbol":"circle-stroked",
                "marker-color":"ff1f20",
                "marker-size": "medium",                
                route: {id: 1, type: "origin", points: 2}
            },
            geometry: {
                type: "Point",
                coordinates: ['144.9758769', '-37.8437403']}
        },{
            type: "Feature",
            properties: {
                "marker-color": "#f76565",
                "marker-symbol":"circle-stroked",
                "marker-color":"23be20",
                "marker-size":"medium",                
                route: {id: 2, type: "destination", points: 3}
            },
            geometry: {
                type: "Point",
                coordinates: ['115.869578', '-31.980216']
            }
        }
    ]
};

var origin = geoJson.features[0];
var destination = geoJson.features[1];

var directions = L.mapbox.directions();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);
directions.setOrigin(origin).setDestination(destination).query();

var myLayer = L.mapbox.featureLayer().addTo(map);
myLayer.setGeoJSON(geoJson);

这里是a working example。

Answer 2

我需要做的就是自定义 directions.js 文件，不幸的是，即使你 post 你的自定义标记作为你的 geoJson 的一部分，因为它是硬编码的 directions.js 它赢了'更改它，除非您下载库并自己自定义它（您可以在加载 geoJson 对象时使其动态化或根据需要将其更改为硬编码）在 directions.js 中查找以下代码

                L.setOptions(this, options);
            this._directions = directions || new L.Directions();
            L.LayerGroup.prototype.initialize.apply(this);

            this._drag = debounce(L.bind(this._drag, this), 100);

            this.originMarker = L.marker([0, 0], {
                draggable: !this.options.readonly,
                icon: L.mapbox.marker.icon({
                    "marker-symbol": "circle-stroked",
                    "marker-color": "23be20",
                    "marker-size": "medium",
                    "stroke": "#e8b920",
                    "stroke-opacity": "1.0",
                    "stroke-width": 5,
                    "fill":"#e8b920",
                })
            }).on('drag', this._drag, this);

            this.destinationMarker = L.marker([0, 0], {
                draggable: !this.options.readonly,
                icon: L.mapbox.marker.icon({
                    "marker-symbol": "circle-stroked",
                    "marker-color": "ff1f20",
                    "marker-size": "medium",
                    "stroke": "#e8b920",
                    "stroke-opacity": "1.0",
                    "stroke-width": 5,
                    "fill":"#e8b920",
                })
            }).on('drag', this._drag, this);

            this.stepMarker = L.marker([0, 0], {
                icon: L.divIcon({
                    className: 'mapbox-marker-drag-icon mapbox-marker-drag-icon-step',
                    iconSize: new L.Point(12, 12)
                })
            });

            this.dragMarker = L.marker([0, 0], {
                draggable: !this.options.readonly,
                icon: this._waypointIcon()
            });

            this.dragMarker
                .on('dragstart', this._dragStart, this)
                .on('drag', this._drag, this)
                .on('dragend', this._dragEnd, this);

            this.routeLayer = L.geoJson(null, {
                style: this.options.routeStyle
            });
            this.routeHighlightLayer = L.geoJson(null, {
                style: this.options.routeStyle
            });

            this.waypointMarkers = [];
        },

Answer 3

首先，您需要自定义出发地和目的地的默认图标。您可以将这些样式 these styles 推送到 MapboxDirections。

const directions = new MapboxDirections({
    accessToken: mapboxgl.accessToken,
    unit: "metric",
    profile: "mapbox/driving",
    interactive: false,
    controls: false,
    styles: **directionStyles**
});

顺便说一句，如果您想添加图片，请尝试在您的帐户中自定义地图的样式。只需将新图像添加到地图中，然后您就可以在精灵中找到它，如下所示：

{
"id": "directions-origin-label",
"type": "symbol",
"source": "directions",
"layout": {
    "icon-image": "**uploading-marker**",
},
"paint": {
    "text-color": "#fff"
},
"filter": [
    "all",
    ["in", "$type", "Point"],
    ["in", "marker-symbol", "A"]
]}

下一个，需要在方向上加上waypoints：

directions.addWaypoint(index, [ln, lat]);

然后下一层，需要在地图加载后的方向上方添加Marker(map.current.on("load", handleMapLoad);):

const el = document.createElement("div");
el.className = className;
new mapboxgl.Marker(el).setLngLat(geo).addTo(map.current);

还有奖励 :) 您需要在路由加载后向边界添加额外的 waypoints：

directions.on("route", () => {
    const bounds = new mapboxgl.LngLatBounds(
        [originPoint.ln, originPoint.lat], [destinationPoint.ln, destinationPoint.lat]
    );
    for (const coord of uploadingPointsGeo) {
        bounds.extend(coord);
    }
    for (const coord of unloadingPointsGeo) {
        bounds.extend(coord);
    }

    map.current.fitBounds(bounds, {
        padding: 30
    });});

欢迎您来到 Mapbox 世界:)

带有自定义标记的 Mapbox 行车路线

Mapbox Driving Direction with Custom Marker

javascript

geojson

mapbox