контроль слоя карты mapbox с помощью JavaScript - PullRequest
Новая
       11

контроль слоя карты mapbox с помощью JavaScript

0 голосов
/ 26 мая 2019

Я пытаюсь создать веб-карту из mapbox.Я создал свой собственный стиль карты и сгенерировал в этом коде.здесь я пытаюсь контролировать цвет слоя с помощью некоторой кнопки.Я создал свою собственную карту с еще четырьмя слоями: da_underconstruction, da_approve, da_completed, da_applied.два других слоя встроены в воду и здание.с помощью этого приложения вода может быть изменена, но другие слои я не могу изменить.Кто-нибудь может взглянуть и помочь мне выяснить, что я делаю не так?Примечание: чтобы запустить код, скопируйте его в HTML-файл и откройте в браузере.Заранее спасибо.

Я пробовал карты разных стилей. 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Change a layer's color with buttons</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 200px;
    top: 0;
    left: 0;
    padding: 10px;
}

.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.10);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}

.map-overlay-inner fieldset {
    border: none;
    padding: 0;
    margin: 0 0 10px;
}

.map-overlay-inner fieldset:last-child {
    margin: 0;
}

.map-overlay-inner select {
    width: 100%;
}

.map-overlay-inner label {
    display: block;
    font-weight: bold;
    margin: 0 0 5px;
}

.map-overlay-inner button {
    display: inline-block;
    width: 36px;
    height: 20px;
    border: none;
    cursor: pointer;
}

.map-overlay-inner button:focus {
    outline: none;
}

.map-overlay-inner button:hover {
    box-shadow:inset 0 0 0 3px rgba(0, 0, 0, 0.10);
}
</style>

<div id='map'></div>
<div class='map-overlay top'>
    <div class='map-overlay-inner'>
        <fieldset>
            <label>Select layer</label>
            <select id='layer' name='layer'>
                <option value='da_approved'>da_approved</option>

                 <option value='da_completed'>da_completed</option>
                  <option value='da_applied'>da_applied</option>
                   <option value='da_underconstruction'>da_underconstruction</option>
                   <option value='building'>Buildings</option>
                   <option value='water'>water</option>
            </select>
        </fieldset>
        <fieldset>
            <label>Choose a color</label>
            <div id='swatches'></div>
        </fieldset>
    </div>
</div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibnNiemhkIiwiYSI6ImNqdnhudHdkejA2anI0NHBpamNqbzIxaHcifQ.w7fVujcKAIAF0WTN9A8HZg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/nsbzhd/cjw4md68g226y1cp3k6iwobna',
    center: [144.961786, -37.817656],
    zoom: 15.78,
    pitch:60.00
});

var swatches = document.getElementById('swatches');
var layer = document.getElementById('layer');
var colors = [
    '#ffffcc',
    '#a1dab4',
    '#41b6c4',
    '#2c7fb8',
    '#253494',
    '#fed976',
    '#feb24c',
    '#fd8d3c',
    '#f03b20',
    '#bd0026'
];

colors.forEach(function(color) {
    var swatch = document.createElement('button');
    swatch.style.backgroundColor = color;
    swatch.addEventListener('click', function() {
        map.setPaintProperty(layer.value, 'fill-color', color);
    });
    swatches.appendChild(swatch);
});
</script>

</body>
</html>

Я пытаюсь контролировать цвет da_construced, da_approved, da_applied, но здесь можно контролировать только цвет воды.

1 Ответ

0 голосов
/ 30 мая 2019

Отказ от ответственности: я работаю в Mapbox.

Привет, fallen_programmer,

Похоже, вы используете неправильное свойство для заполнения в строке 133:

map.setPaintProperty(layer.value, 'fill-color', color);

если вы измените это на fill-extrusion-color, это сработает.

map.setPaintProperty(layer.value, 'fill-extrusion-color', color);

Надеюсь, это поможет!

Лучший, Брэнди

...