Вопрос:

Схема проезда Mapbox с пользовательским маркером

javascript mapbox geojson

946 просмотра

2 ответа

18 Репутация автора

У меня есть следующий код, чтобы использовать mapbox в качестве моего направления движения, но, к сожалению, он не позволяет мне менять маркеры, и он продолжает использовать маркер по умолчанию, хотя я пытаюсь изменить его с помощью geoJson

<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);

Автор: Farshid Источник Размещён: 25.11.2015 05:48

Ответы (2)


1 плюс

2424 Репутация автора

API Mapbox Directions вставляет стандартные маркеры поверх ваших пользовательских. Вы также, кажется, добавить 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);

Вот рабочий пример .

Автор: kmandov Размещён: 25.11.2015 01:21

1 плюс

18 Репутация автора

Решение

Все, что мне нужно было сделать, это настроить файл directions.js, к сожалению, даже если вы опубликуете маркер настройки как часть вашего 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 = [];
        },
Автор: Farshid Размещён: 14.01.2016 01:39
Вопросы из категории :
32x32