知道如何使用 Mapbox 实现这种效果吗?
http://www.juwai.com/USproperty/v-1
我需要在美国地图上显示 140 万个点。集群对我们来说是一个不错的选择,我在https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-markercluster/尝试使用 Mapbox 的集群示例, 但是当浏览器超过传递了 200,000 个纬度/经度对。
我试过这个:
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?
当我使用 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, /vendor/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) 我正在寻找更改用户位置注释的外观.我知道现在可以使用MGLUserLocationAnnotationView,但是,我不确定如何实现它.任何人都可以提供一个如何做到这一点的简单例子吗?
谢谢
Mapbox 提供了关于自定义注释图像和自定义注释视图的便捷文档:
https://www.mapbox.com/ios-sdk/examples/annotation-views/ https://www.mapbox.com/ios-sdk/examples/marker-image/
然而,将这些想法结合起来并自定义注释视图的图像似乎是不可能的。基本上我希望做的是有一张照片的注释(用户选择),其中还有一个可以在点击时动画的寄宿生。
有没有人也遇到过这个限制?
我在 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 次,依此类推。所以我想我必须删除点击事件但是如何?谢谢
我有一个矩形,需要用正方形填充它。我找到了中心线并想沿着这条线放置正方形。但是有没有什么简单的方法可以在 mapboxgl 中使用任何其他库(如 turfjs)绘制正方形?像设置正方形的中心和边长并获得正方形的坐标?有任何想法吗?因为用 geojson 放置圆圈不是问题,但对我来说方形似乎是个问题,因为我必须计算 4 个坐标。
我的传单项目上有一个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个不同的堆栈中.
在遵循 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)使用 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: '© <a href="http://mapbox.com">Mapbox</a>, © <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)