mapbox-gl-js

问题 I'm having some troubles trying to display 2 different markers placed at exactly the same coordinates. The case is: we are displaying stores, and some of them are placed at the same building (ie. a mall), so, they are different stores but shares the same ubication/coordinates. Our json source content looks like this: { "properties" : { "id" : "1", "name" : "Store 1" }, "geometry" : { "coordinates" : [-70.66667, -33.45], "type" : "Point" } }, { "properties" : { "id" : "2", "name" : "Store 2" }

问题 I'm trying to center a text label over a feature polygon in mapbox-gl-js. Is this possible? It looks like the only option related to the placement of a label is the "symbol-placement" layout property (https://www.mapbox.com/mapbox-gl-style-spec/#symbol): symbol-placement Optional enum. One of point, line. Defaults to point. Label placement relative to its geometry. line can only be used on LineStrings and Polygons. Using "point" places the label at the bottom right corner of the feature:

问题 Here m adding tile created using tiff mapboxgl.accessToken ='pk.eyJ1IjoiZ2F1cmF2Y2F0c3RlY2giLCJhIjoiY2l1cGo0MTl4MDAxajJ1bng5a2xieTY0diJ9.0fDXNulI91U85ngSc4jGCg'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', zoom: 13, center: [-122.447303, 37.753574] }); map.on('load', function () { map.addSource('terrain-data', { type: 'raster', url:'mapbox://gaurav.2on6cgzq' }); map.addLayer({ "id": "terrain-data", "type": "line", "source": "terrain-data", "source

问题 Started an angular-cli project and installed mapbox-gl via npm. Included the mapbox-gl script and styles in the angular-cli.json file. I can get the map to show, but I cannot add a layer on the load event. The map is undefined suddenly? Here is the template html (app.component.html): <div id="map" style="margin:0; padding:0; position:absolute; top:25px; bottom:0; width:100%;"> </div> And here is my component code (app.component.ts): import { Component, ViewChild, AfterViewInit, OnInit } from

问题 I'm using Mapbox GL to show a map and crop a fixed size image from the center of it. It works great for a particular resolution I designed it (1920x1080) but when I started to make the page responsive where the map styles width and height changes, the canvas size also started to change! So, when I crop the image the size should be always different because 300px on a 900px canvas it's not the same map area as 300px on a 2000px canvas. The canvas size even changes drastically if I change the

问题 I want to decrease the size of the markers when the zoom level of the map is increased. How can I achieve this? 回答1: You can use the interpolate expression with the zoom expression, along these lines: "icon-size": ['interpolate', ['linear'], ['zoom'], 10, 1, 15, 0.5] Documentation here: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#ramps-scales-curves 来源： https://stackoverflow.com/questions/61032600/scale-marker-size-relative-to-the-zoom-level-in-mapbox-gl-js

问题 How to add a button to the popup and add an onClick to the function? .setPopup(new mapboxgl.Popup({ offset: 25 }) .setHTML('<button onclick=' + { this.handlePop } + '> Button</button>')) .addTo(map); It does not work. 回答1: You can addEventListner to button using this. const btn = document.getElementsByClassName("btn")[0]; btn.addEventListener("click", () => { console.log("hello"); }); I have added working example with React here. You can find it here var popup = new mapboxgl.Popup()

问题 How to add a button to the popup and add an onClick to the function? .setPopup(new mapboxgl.Popup({ offset: 25 }) .setHTML('<button onclick=' + { this.handlePop } + '> Button</button>')) .addTo(map); It does not work. 回答1: You can addEventListner to button using this. const btn = document.getElementsByClassName("btn")[0]; btn.addEventListener("click", () => { console.log("hello"); }); I have added working example with React here. You can find it here var popup = new mapboxgl.Popup()

问题 Is it possible in Mapbox GL JS to get the users bearing? I would like to show the direction in which the user is facing, to assist them in navigating to nearby POI. I understand that it is possible to set the bearing of the map and also get the current bearing of it, but i need the actual real life bearing of the user. Kind of the same thing as on Google Maps: The service is intended to run as an Ionic app on iOS and Android, and the assistance in bearing is a key feature in helping them

来源： https://stackoverflow.com/questions/57272806/mapbox-gl-combine-filters-issue