【地图设计】我想隐藏中国以外的板块，但是我目前只能用geoJson给中国板块加一个蒙层。

YangPengFe1 commented 4 years ago

我遇到的问题

我想在项目中实现只有中国版图的地图，或者隐藏其他国家的版图、

 _this_.map.addSource('province_geoJson', {
        'type': 'geojson',
        'data': 这里是中国板块geoJson
      })
      // 添加图层
      _this_.map.addLayer({
        'id': 'province_geoJson-fills',
        'type': 'fill',
        'source': 'province_geoJson',
        'layout': {},
        'paint': {
          'fill-color': '#627BC1',
          'fill-opacity': 0.3
        }
      })

效果大概是这样，但是这是错误的需求。中国的`geoJson`也挺大。性能上肯定不行

1578017409(1)

能不能通过 studio 上的操作解决这个问题呢？

我遇到的问题截图

2ab3b6b920fda9d003b9ca8c97cd64e 就像这样中国版图以外的隐藏或者设置成很淡的颜色

该问题的类别

地图设计

YangPengFe1 commented 4 years ago

@Jing-flyloveyin 求解答 - - 。

goldenlimit commented 4 years ago

@YangPengFe1 我是隔壁iOS的小助手，看到你這個問題試著給點思路。既然只想要中國版圖的底圖，想把其他國家過濾掉是不行的，如果是在用官方的basemap的情況下。但是你可以考慮試用限制地圖zoom out的區域來達到“屏蔽”中國以外的區域。 map.setMaxBounds

這裏同時有一個官方的demo，你可以參考下，限制zoom out 只能在紐約曼哈頓的區域： https://docs.mapbox.com/mapbox-gl-js/example/restrict-bounds/ 主要實現的代碼就是通過定義西南和東北兩個點，從而把maxbounds 鎖定在這個區域內

**var bounds = [
[-74.04728500751165, 40.68392799015035], // Southwest coordinates
[-73.91058699000139, 40.87764500765852] // Northeast coordinates
];**

var map = new mapboxgl.Map({
...
**maxBounds: bounds // Sets bounds as max**
});

There is the possibility to restrict the map to a certain (rectangular) bounds, with the map.setMaxBounds method (https://www.mapbox.com/mapbox-gl-js/api/#Map#setMaxBounds). This might work reasonably well since you want to restrict the view to the China, but might not be suitable depending on the geometry you want to restrict the view to.

希望對你有所幫助。

baoluojian123 commented 4 years ago

@YangPengFe1 你好，看到你这个问题，正好之前有通过stdio筛选国家范围的一些思路首先呢，你在studio上处理这个需求的时候，你需要找到一个合适的全球范围的数据瓦片，提供两个思路：1.上传只有中国范围的矢量数据作为瓦片数据 2.通过这个瓦片数据对国家进行函数筛选
然后进行样式处理，可以实现你说的1.只是显示中国 2.中国高亮，其他国家作为辅助信息使用这个瓦片数据需要你把这个地图添加到你的studio地图库里，下边是地图地址 https://api.mapbox.com/styles/v1/baoluojian123/ck1lttz690dry1cquuelrwut9.html?fresh=true&title=copy&access_token=pk.eyJ1IjoiYmFvbHVvamlhbjEyMyIsImEiOiJjanhvOGtzNHUwNGJnM2NwNDU5bmk3OXk0In0.jGFjCag32jVYPoHgoX_GBA

mapbox-developer-group / Mapbox-Tech-Q-A