标签: mapbox

使用 Mapbox 在地图上显示数百万个点

知道如何使用 Mapbox 实现这种效果吗?

http://www.juwai.com/USproperty/v-1

我需要在美国地图上显示 140 万个点。集群对我们来说是一个不错的选择,我在https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-markercluster/尝试使用 Mapbox 的集群示例, 但是当浏览器超过传递了 200,000 个纬度/经度对。

mapbox

3
推荐指数
1
解决办法
1304
查看次数

在leaflet/mapbox 中,为什么我不能设置`map.fitBounds` 的持续时间?

我试过这个:

map.fitBounds(L.polyline([L.latLng(40,9), L.latLng(1,2)]).getBounds(), {
  padding: [50, 50],
  maxZoom: 17,
  animate: true,
  duration: 10
});
Run Code Online (Sandbox Code Playgroud)

我希望动画需要 10 秒才能完成,但它完成得非常快.. 有没有人有关于如何延长持续时间的想法fitBounds

gis leaflet mapbox

3
推荐指数
1
解决办法
583
查看次数

Android MapBox 膨胀错误。没有找到类 MapView

当我使用 MapBox 库启动 android 应用程序时,出现异常:

“android.view.InflateException:二进制 XML 文件第 9 行:错误膨胀类 com.mapbox.mapboxsdk.views.MapView”

字段“原因”包含以下文本:

java.lang.ClassNotFoundException:在路径上找不到类“com.mapbox.mapboxsdk.views.MapView”:DexPathList[[zip 文件“/data/app/com.example.my.mymapbox-2/base.apk” ],nativeLibraryDirectories=[/data/app/com.example.my.mymapbox-2/lib/arm, /v​​endor/lib, /system/lib]]

请帮忙

这是我的代码:

构建.gradle

apply plugin: 'com.android.application'

android {
compileSdkVersion 23
buildToolsVersion "23.0.2"

defaultConfig {
    applicationId "com.example.my.mymapbox"
    minSdkVersion 19
    targetSdkVersion 23
    versionCode 1
    versionName "1.0"
}
buildTypes {
    release {
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
}
}

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.1.1'
compile ('com.mapbox.mapboxsdk:mapbox-android-sdk:4.0.0-beta.2@aar'){
    transitive=true
}
}
Run Code Online (Sandbox Code Playgroud)

主活动.java

package com.example.my.mymapbox;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity …
Run Code Online (Sandbox Code Playgroud)

android inflate-exception mapbox

3
推荐指数
2
解决办法
5954
查看次数

Swift 3 - Mapbox - 自定义用户位置注释

我正在寻找更改用户位置注释的外观.我知道现在可以使用MGLUserLocationAnnotationView,但是,我不确定如何实现它.任何人都可以提供一个如何做到这一点的简单例子吗?

谢谢

ios mapbox swift

3
推荐指数
1
解决办法
2009
查看次数

是否可以将图像添加到 MapBox(iOS、Swift)中的自定义 MGLAnnotationView

Mapbox 提供了关于自定义注释图像和自定义注释视图的便捷文档:

https://www.mapbox.com/ios-sdk/examples/annotation-views/ https://www.mapbox.com/ios-sdk/examples/marker-image/

然而,将这些想法结合起来并自定义注释视图的图像似乎是不可能的。基本上我希望做的是有一张照片的注释(用户选择),其中还有一个可以在点击时动画的寄宿生。

有没有人也遇到过这个限制?

xcode ios mapbox swift

3
推荐指数
1
解决办法
2750
查看次数

使用 mapbox gl 双击单击事件

我在 style.load 事件上重绘图层并删除图层

        map.on('style.load', function() {
           loadByBounds(tempBounds)              
        });

        function loadByBounds(b) {
          if (map.getLayer("cluster-count")) {
            map.removeLayer("cluster-count");
          }
          ...
          map.on('click', 'unclustered-point', function(e) {

            var popup = new mapboxgl.Popup()
              .setLngLat(e.features[0].geometry.coordinates)
              .setHTML(text)
              .addTo(map);
          })}
Run Code Online (Sandbox Code Playgroud)

但是如何删除 map.on('click') 事件?当我单击该点时, Popup() 显示 2 次。当我再次更改图层时,onclick 事件会触发 3 次,依此类推。所以我想我必须删除点击事件但是如何?谢谢

mapbox mapbox-gl mapbox-gl-js

3
推荐指数
1
解决办法
2955
查看次数

如何沿线放置正方形?(Geojson+地图框)

我有一个矩形,需要用正方形填充它。我找到了中心线并想沿着这条线放置正方形。但是有没有什么简单的方法可以在 mapboxgl 中使用任何其他库(如 turfjs)绘制正方形?像设置正方形的中心和边长并获得正方形的坐标?有任何想法吗?因为用 geojson 放置圆圈不是问题,但对我来说方形似乎是个问题,因为我必须计算 4 个坐标。

在此处输入图片说明

geojson mapbox turfjs mapbox-gl-js

3
推荐指数
1
解决办法
1032
查看次数

宣传单将图片叠加在地图下方

我的传单项目上有一个mapbox地图和一个Image Overlay.我需要将图像放在地图下方(有透明区域),但我也尝试使用bringToBack()而没有运气.

这是代码:

mymap = new L.Map('map').setView([41.69906, 12.39258],5);

    L.tileLayer('https://api.mapbox.com/styles/v1/.....',
    {zIndex:90}).addTo(mymap);

var bounds = new L.LatLngBounds (
  new L.LatLng(30,-10),
  new L.LatLng(50,36));
mymap.fitBounds(bounds);


var overlay = new L.ImageOverlay("image.png" ,
  bounds, {  
  attribution: "E.U Copernicus Marine Environment Monitoring Service"
});
mymap.addLayer(overlay);
overlay.bringToBack();
Run Code Online (Sandbox Code Playgroud)

传单文档允许将toToBack带到ImageOverlay,但我认为叠加层和地图位于2个不同的堆栈中.

javascript leaflet mapbox

3
推荐指数
1
解决办法
1589
查看次数

Mapbox 自定义标记旋转

在遵循 mapbox 教程之后,我设法在地图上显示了一架无人机。我唯一的问题是:如何在我的代码中添加旋转参数(以不同角度显示无人机标记)?我花了几个小时寻找例子,但没有一个与我已经写的相对应......

谢谢 !

这是脚本:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    
      }
      
      .marker {
          background-image: url('MQ-1_Predator_silhouette.svg.png');
          background-size: cover;
          width: 61px;
          height: 35px;
          border-radius: 50%;
          cursor: pointer;
        
        }
        
    </style>
</head>
<body>

<div id='map'></div>

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoibWF0dGhpZXU2MyIsImEiOiJjamNob3I3cmgxam1kMzFzNzdja2ZvNmhuIn0.AyFos9o0afaaBU21CgrxXg';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: …
Run Code Online (Sandbox Code Playgroud)

html angle rotation marker mapbox

3
推荐指数
1
解决办法
5346
查看次数

模态中的传单和 Mapbox 显示不正确

使用 Leaflet 的 Mapbox 无法在模态中正确显示时遇到问题。

地图和标记位于左上角,其余图块为空白。

我已经直接在页面中尝试了代码而不是模式,它可以工作......

<style>
    #mapid { height: 300px; }
</style>
<div id="mapid"></div>
<script>
    var mymap = L.map('mapid').setView([<?= $return['latitude']; ?>, <?= $return['longitude']; ?>], 13);
    //var mymap  =  L.Map('mapid', { center: new L.LatLng(<?= $return['latitude']; ?>, <?= $return['longitude']; ?>]), zoom: 15, layers: [nexrad], zoomControl: true });
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=<?= $MapBoxToken ?>', {
        attribution: '&copy; <a href="http://mapbox.com">Mapbox</a>, &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
        maxZoom: 20,
        id: 'mapbox.streets',
        accessToken: '<?= $MapBoxToken ?>'
    }).addTo(mymap);    
    var marker = L.marker([<?= $return['latitude']; ?>, <?= $return['longitude']; ?>]).addTo(mymap);
</script>
Run Code Online (Sandbox Code Playgroud)

模态和地图的屏幕截图

模式和地图的屏幕截图,在地图上删除了显示样式以显示实际地图。

leaflet mapbox bootstrap-modal twitter-bootstrap-3

3
推荐指数
1
解决办法
3195
查看次数