我在 Mapbox 上有一个矢量瓦片集，我通过上传一个 geojson 文件创建了它，该文件包含代表澳大利亚维多利亚州特定郊区的多边形。我的矢量切片集具有三个属性 - 郊区、州、邮政编码 - 对应于 geojson 中的特征属性。
我还可以通过 Mapbox web gl js 库成功查询这些属性以获得准确的地图。例如，我有一张地图在工作，当我单击突出显示的多边形时会显示一个弹出窗口，并且弹出窗口正确显示了该郊区的属性（郊区、州、邮政编码）。
现在我想在我的网页中访问这些属性 - 对于我的图块集中的每个功能。我基本上想将这些属性作为列表转储到地图外的 div 中；只是列出每个郊区及其属性。为此，我尝试使用 MapBox Web GL JS 库的 querySourceFeatures 函数。我有点挣扎。
这是我的代码。我的地图按预期显示。但是在 JS 控制台中，我只是得到一个空数组。
这是我的代码
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
center: [144.96, -37.81], // starting position
zoom: 8, // starting zoom,
hash:true
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.Navigation());
map.on('load', function () {
map.addSource('charlieSource', {
type: 'vector',
url: …有什么方法可以在 Mapbox GL 内画线？例如，我需要绘制一些连接我的标记的线（直线或曲线）。使用 Mapbox，我可以使用 Arc.js，但我不知道 Mapbox GL 是否已经存在一些解决方案。
我找到了 mapbox-gl-draw ( https://bl.ocks.org/danswick/083a0b48c2cc78c4a08d ) 但它似乎只是一个在地图中使用的工具......但我没有看到任何用于使用 javascript 绘制的 API。
我还发现了这个 Tesspathy ( http://gree.github.io/tesspathy/ )，也许一种解决方案是使用它在地图的上下文中绘制。
你怎么认为？什么是最好的方法？谢谢！
有一个示例说明如何使点可拖动（具有图层），还有一个示例说明如何使用自定义图像设置标记，但是当它没有时，我如何使该自定义图像可在地图上拖动与之相关的层？！
我刚开始使用vuex和vue.我(大致)理解文档.我有一个特定的问题,我不确定是否应该使用vuex,如果是的话,如何去做.
我有一个应用程序,其中mapbox地图在各种布局和组件等无处不在.因为我将制作几个vue单个文件组件,但正在使用一个相同的mapbox地图实例,我认为有了mapbox是有道理的在vuex商店中启动和管理的地图.因此,例如,当我更改地图布局或其他内容时,它将反映在所有组件中.
当我继续朝着这个方向前进时,我对以下几点感到困惑:
我试过以下:
制作了一个mapboxmap模块
mapboxmap.js
import simple from '../../components/simplestyle'
let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
// initial state
const state = {
myMap: {},
mapLoaded: false
}
const mutations = {
loadMap (state, myMap) {
state.myMap = myMap
state.mapLoaded = true
}
}
const actions = {
loadMap (context) {
'use strict'
mapboxgl.accessToken = 'mysecretmapboxcode'
let myMap = new mapboxgl.Map({
container: 'map',
style: simple,
hash: true,
center: [-74.0073, 40.7124],
zoom: 16
})
context.commit('loadMap', myMap)
}
}
export default { …在 mapbox gl 中突出显示多边形的示例使用第二层和过滤器功能。是否无法更改从 geojson 源绘制的 mapbox gl js 中单个要素/多边形的颜色？
我想根据最近的草皮更改地图点击时的图标大小。我如何做到这一点？nearestBuilding.properties['icon-size'] = 0.2;不起作用。
var retail = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
title: 'TEST',
description: 'TEST'
},
geometry: {
type: 'Point',
coordinates: [121.051779, 14.550224]
}
},
{
type: 'Feature',
properties: {
title: 'TEST',
description: 'TEST'
},
geometry: {
type: 'Point',
coordinates: [121.04568958282472, 14.552170837008527]
}
}
]
};
map.on('load', function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Wiki_Loves_Earth_map_marker.svg/600px-Wiki_Loves_Earth_map_marker.svg.png', function(error, image) {
if (error) throw error;
map.addImage('marker', image);
map.addLayer({
id: 'retail',
type: 'symbol',
source: {
type: 'geojson',
data: retail
},
layout: { …当我在地图框上使用草皮时，特别是以下行，它会产生错误var nearestBuilding = turf.nearest(currentLocation, geoJson);。我使用mapbox-gl和草皮来获取最近的建筑物。当我手动输入数据而无需object.push()但我需要数据库中的信息时，它会起作用。
var object = [];
for (var x = 0; x < json.length; x++) {
var
image = json[x].image == '' ? '' : "<div style='text-align:center;'><img src='" + json[x].image + "' width='100' height='75' /></div>",
number = json[x].contact == '' ? '' : "<br/>" + json[x].contact,
details = json[x].details == '' ? '' : '<br/>' + '<a href="{{ url('restaurants-and - cafe') }}/' + json[x].details + '">More Details</a>';
object.push({
type: 'Feature',
properties: {
title: …我正在尝试使用 React 使用 MapBox。我已经用 create-react-app 创建了项目，添加了 mapbox-gl ("mapbox-gl": "^0.46.0-beta.1")，但是我的 css 文件有问题。它向我展示了这个警告：
This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described inhttps://www.mapbox.com/mapbox-gl-js/api/
我已按照以下所有步骤操作：
1 - 安装 npm 包： npm install --save mapbox-gl
2 - 在您的 HTML 文件中包含 CSS 文件：<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />.
但是我如何使用与 ES6 的反应，我已经在 index.js css 文件中添加了 import 'mapbox-gl/dist/mapbox-gl.css';
如果我导入 css 文件，它不会显示任何内容，如果我评论导入它会显示我的地图而没有设计，它会向我显示警告。
我怎样才能解决它？？？谢谢你的帮助
这是我的代码：
import React, { Component …我正在读取GeoJSON 文件并将多边形（和其他东西）导入 mapbox-gl draw 使用draw.set(geoJSON). 如何通过要素属性中的属性为单个多边形着色。例子：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
//"id": "the most unique id in the world",
"properties": {
"class_id": 1
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
79.30961608886719,
61.57192958204744
],
[
79.34309005737303,
61.57192958204744
],
[
79.34309005737303,
61.57871162332267
],
[
79.30961608886719,
61.57871162332267
],
[
79.30961608886719,
61.57192958204744
]
]
]
}
},
{
"type": "Feature",
"properties": {
"class_id": 2
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
79.35201644897461,
61.58271478278019 …我使用 Mapbox Geocoder 和另外几个选择菜单来自定义地图。现在我想在用户从选择菜单中选择一个值后立即重置地理编码器 - 因此应该清除输入字段并删除标记。
在文档中描述了清除功能，并且默认输入字段中还有一个清除按钮，但是如果我从更改事件中调用它，则此功能不起作用。
这是我的尝试到目前为止的样子：
const select = $('#select');
const control = $('#geocoder');
const geocoder = new MapboxGeocoder({
accessToken: accessToken,
mapboxgl: mapboxgl
});
//Add the geocoder
document.getElementById(control).appendChild(geocoder.onAdd(map));
//Now reset the geocoder if the user selects something
select.change(function() {
geocoder.clear();
});
我希望重置输入字段并删除标记，但实际输出是“geocoder.clear is not a function”