标签: maplibre-gl

带有地形层的 MapLibre GL JS:如何将水平面固定到特定高度?

我基于“添加 3D 模型”示例的一些代码来仅在地图上绘制水平面,用于setTerrain添加地形图层。我的目的是在海拔高度绘制半透明图层,并使它们与山脉相交,有点类似于等高线。

我在海拔 0 处创建了一个 1 公里宽的正方形。海拔 0 是可见地图区域中心地形的高度。当我拖动地图并释放鼠标时,高度 0 会重置为中心地形的新高度 0,从而使飞机改变其相对高度:

问题飞机搬迁

为了更好地说明问题,夸大了海拔。

如何指定飞机的高度(以米为单位)并在拖动地图时将其固定在该高度?我想我需要获取中心地形的高度,然后从平面的 z 位置添加/减去它,但是如何在自定义图层的渲染函数中执行此操作?

terrain three.js mapbox-gl-js maplibre-gl

7
推荐指数
1
解决办法
512
查看次数

如何在本机反应中使用 MapLibre GL Js

我正在寻找一种在我的反应本机应用程序中使用 OpenStreetMap 数据的方法。在我最近的研究中,我发现了MapLibre,它是基于 MapBox GL 旧版本的免费选项。我面临的问题是,除了@react-native-mapbox-gl/maps之外,我找不到任何插件可以在 React Native 中使用它。因此,在他们的文档中说:“我们现在也支持 Mapbox SDK 的 MapLibre 风格”,但他们提出的示例如下:

import { StyleSheet, View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";

MapboxGL.setAccessToken("<YOUR_ACCESSTOKEN>");

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: "tomato"
  },
  map: {
    flex: 1
  }
});

export default class App extends Component {
  render() {
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView style={styles.map} />
        </View>
      </View> …
Run Code Online (Sandbox Code Playgroud)

javascript openstreetmap react-native mapbox-gl-js maplibre-gl

5
推荐指数
1
解决办法
3971
查看次数

如何使用mapbox-gl-js/maplibre-gl中的表达式根据缩放级别显示/隐藏标签?

我有一个带有图标的点图层,我想仅从特定的缩放级别(9)显示除图标之外的标签。我想避免创建专用的标签层。查看表达式文档,StetZoom应该给我想要的结果,但它不起作用。

按照这个答案,我尝试根据缩放级别更改文本的大小,但无论缩放如何,文本将始终具有默认大小(此处 7)我是否遗漏了某些内容还是一个错误?我正在使用 Maplibre

layout: {
          "icon-image": "border_crossing",
          "icon-size": 0.5,
          "icon-allow-overlap": true,
          'text-field': ['get', 'loc_type'],
          'text-variable-anchor': ['top'],
          'text-radial-offset': 0.5,
          'text-justify': 'auto',
          "text-size": [ "step", 
              ["zoom"], 
              0,0,
              9,15,
              7
            ]
        }
Run Code Online (Sandbox Code Playgroud)

mapbox-gl-js maplibre-gl

5
推荐指数
1
解决办法
1785
查看次数