mapbox隐去地名文字 #353

lingdeyiyicifang · 2022-12-12T14:27:58Z

为了隐私需求，我找人修改了代码，把地图上显示的地名文字隐去了
但是我不会使用github push（本人非科班菜鸟），所以修改后的代码放下面了，改的是index.jsx ，如有需要yihong可以合并

import MapboxLanguage from '@mapbox/mapbox-gl-language';
import React, { useRef, useCallback } from 'react';
import ReactMapGL, { Layer, Source } from 'react-map-gl';
import useActivities from 'src/hooks/useActivities';
import {
  IS_CHINESE,
  MAIN_COLOR,
  MAPBOX_TOKEN,
  PROVINCE_FILL_COLOR,
  USE_DASH_LINE,
  LINE_OPACITY,
} from 'src/utils/const';
import { geoJsonForMap } from 'src/utils/utils';
import RunMarker from './RunMaker';
import RunMapButtons from './RunMapButtons';
import styles from './style.module.scss';

const layerList=['road-label',  'waterway-label',  'natural-line-label',  'natural-point-label',  'water-line-label',  'water-point-label',  'poi-label',  'airport-label',  'settlement-subdivision-label',  'settlement-label',  'state-label',  'country-label'];


const RunMap = ({
  title,
  viewport,
  setViewport,
  changeYear,
  geoData,
  thisYear,
  mapButtonYear,
}) => {
  const { provinces } = useActivities();
  const mapRef = useRef();
  const mapRefCallback = useCallback(
    (ref) => {
      if (ref !== null) {
        mapRef.current = ref;
        const map = ref.getMap();
        if (map && IS_CHINESE) {
          map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));

          // todo delete layers
          map.on('load', () => {
            for(let layerId of layerList){
              map.removeLayer(layerId);
            }
          });
          
        }
      }
    },
    [mapRef]
  );
  const filterProvinces = provinces.slice();
  // for geojson format
  filterProvinces.unshift('in', 'name');

  const isBigMap = viewport.zoom <= 3;
  if (isBigMap && IS_CHINESE) {
    geoData = geoJsonForMap();
  }

  const isSingleRun =
    geoData.features.length === 1 &&
    geoData.features[0].geometry.coordinates.length;
  let startLon;
  let startLat;
  let endLon;
  let endLat;
  if (isSingleRun) {
    const points = geoData.features[0].geometry.coordinates;
    [startLon, startLat] = points[0];
    [endLon, endLat] = points[points.length - 1];
  }
  let dash = USE_DASH_LINE && !isSingleRun ? [2, 2] : [2, 0];

  return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapbox://styles/mapbox/dark-v10"
      onViewportChange={setViewport}
      ref={mapRefCallback}
      mapboxApiAccessToken={MAPBOX_TOKEN}
    >
      <RunMapButtons
        changeYear={changeYear}
        thisYear={thisYear}
        mapButtonYear={mapButtonYear}
      />
      <Source id="data" type="geojson" data={geoData}>
        <Layer
          id="province"
          type="fill"
          paint={{
            'fill-color': PROVINCE_FILL_COLOR,
          }}
          filter={filterProvinces}
        />
        <Layer
          id="runs2"
          type="line"
          paint={{
            'line-color': MAIN_COLOR,
            'line-width': isBigMap ? 1 : 2,
            'line-dasharray': dash,
            'line-opacity': isSingleRun ? 1 : LINE_OPACITY,
          }}
          layout={{
            'line-join': 'round',
            'line-cap': 'round',
          }}
        />
      </Source>
      {isSingleRun && (
        <RunMarker
          startLat={startLat}
          startLon={startLon}
          endLat={endLat}
          endLon={endLon}
        />
      )}
      <span className={styles.runTitle}>{title}</span>
    </ReactMapGL>
  );
};

export default RunMap;

yihong0618 · 2022-12-13T00:25:03Z

谢谢，我看一下

Loongphy · 2023-01-18T13:34:48Z

只是把地图去掉了，但是年份、热力图也没了，想要隐私可以把仓库设置为private，然后把地图隐藏

修改高度 src/utils/const.js

const MAP_HEIGHT=100;

src/components/RunMap/index.jsx

import MapboxLanguage from '@mapbox/mapbox-gl-language';
import React, { useRef, useCallback } from 'react';
import ReactMapGL, { Layer, Source, FullscreenControl } from 'react-map-gl';
import useActivities from 'src/hooks/useActivities';
import {
  IS_CHINESE,
  MAIN_COLOR,
  PROVINCE_FILL_COLOR,
  USE_DASH_LINE,
  LINE_OPACITY,
  MAP_HEIGHT,
} from 'src/utils/const';
import { geoJsonForMap } from 'src/utils/utils';
import RunMapButtons from './RunMapButtons';
import styles from './style.module.scss';

const RunMap = ({
  title,
  viewport,
  setViewport,
  changeYear,
  geoData,
  thisYear,
  mapButtonYear,
}) => {
  const { provinces } = useActivities();
  const mapRef = useRef();
  const mapRefCallback = useCallback(
    (ref) => {
      if (ref !== null) {
        mapRef.current = ref;
        const map = ref.getMap();
        if (map && IS_CHINESE) {
          map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
        }
      }
    },
    [mapRef]
  );
  const filterProvinces = provinces.slice();
  // for geojson format
  filterProvinces.unshift('in', 'name');

  const isBigMap = viewport.zoom <= 3;
  if (isBigMap && IS_CHINESE) {
    geoData = geoJsonForMap();
  }

  const isSingleRun =
    geoData.features.length === 1 &&
    geoData.features[0].geometry.coordinates.length;
  let startLon;
  let startLat;
  let endLon;
  let endLat;
  if (isSingleRun) {
    const points = geoData.features[0].geometry.coordinates;
    [startLon, startLat] = points[0];
    [endLon, endLat] = points[points.length - 1];
  }
  let dash = USE_DASH_LINE && !isSingleRun ? [2, 2] : [2, 0];

  return (
    <ReactMapGL
      {...viewport}
      width='100%'
      height={MAP_HEIGHT}
      mapStyle="mapbox://styles/mapbox/dark-v10"
      onViewportChange={setViewport}
      ref={mapRefCallback}
    >
      <RunMapButtons
        changeYear={changeYear}
        thisYear={thisYear}
        mapButtonYear={mapButtonYear}
      />
      <Source id="data" type="geojson" data={geoData}>
        <Layer
          id="province"
          type="fill"
          paint={{
            'fill-color': PROVINCE_FILL_COLOR,
          }}
          filter={filterProvinces}
        />
        <Layer
          id="runs2"
          type="line"
          paint={{
            'line-color': MAIN_COLOR,
            'line-width': isBigMap ? 1 : 2,
            'line-dasharray': dash,
            'line-opacity': isSingleRun ? 1 : LINE_OPACITY,
          }}
          layout={{
            'line-join': 'round',
            'line-cap': 'round',
          }}
        />
      </Source>

      <span className={styles.runTitle}>{title}</span>
    </ReactMapGL>
  );
};

export default RunMap;

yihong0618 · 2023-01-18T13:48:20Z

其实大家可以把数据传到 strava 然后利用 strava 的几公里内隐藏来隐藏自己的位置

lingdeyiyicifang · 2023-01-20T03:35:45Z

年份，热力图还在的，详情可以看，我觉得实现的还算完美https://lingdeyiyicifang.github.io/running_page/

yihong0618 · 2023-01-20T04:21:39Z

年份，热力图还在的，详情可以看，我觉得实现的还算完美https://lingdeyiyicifang.github.io/running_page/

感兴趣可以提个 pr 需要做成开关，默认是关(^-^)

lingdeyiyicifang · 2023-01-20T12:00:59Z

年份，热力图还在的，详情可以看，我觉得实现的还算完美https://lingdeyiyicifang.github.io/running_page/

感兴趣可以提个 pr 需要做成开关，默认是关(^-^)

过完年回去看看，学习一下怎么提pr😆

aimdotsh · 2023-04-04T14:21:05Z

年份，热力图还在的，详情可以看，我觉得实现的还算完美https://lingdeyiyicifang.github.io/running_page/

就是上面的代码么？为什么我的地图不展示了呢？

Loongphy · 2023-04-09T09:08:59Z

年份，热力图还在的，详情可以看，我觉得实现的还算完美https://lingdeyiyicifang.github.io/running_page/

就是上面的代码么？为什么我的地图不展示了呢？

最新代码已经增加了隐去地名的配置了，但效果不是太好，地名还会一闪而过，代码见376bc5b

aimdotsh · 2023-04-16T11:31:05Z

年份，热力图还在的，详情可以看，我觉得实现的还算完美https://lingdeyiyicifang.github.io/running_page/

就是上面的代码么？为什么我的地图不展示了呢？

最新代码已经增加了隐去地名的配置了，但效果不是太好，地名还会一闪而过，代码见376bc5b

可以了，搞定。确实刚进入页面的时候会一闪而过。感谢。

aimdotsh · 2023-05-17T09:13:36Z

年份，热力图还在的，详情可以看，我觉得实现的还算完美https://lingdeyiyicifang.github.io/running_page/

就是上面的代码么？为什么我的地图不展示了呢？

最新代码已经增加了隐去地名的配置了，但效果不是太好，地名还会一闪而过，代码见376bc5b

发现一个彻底隐去地名文字的方法：

地图样式设置成这样就可以了，但是就是图案有点low哈。。

aimdotsh · 2023-05-17T09:14:41Z

这样的样式。

yihong0618 · 2023-05-17T09:24:35Z

这形式很帅呀

aimdotsh · 2023-05-17T10:04:06Z

哈哈，https://docs.mapbox.com/api/maps/styles/ 这个页面有很多样式可以选择。

YeWeihong · 2023-08-26T11:09:33Z

年份，热力图还在的，详情可以看，我觉得实现的还算完美https://lingdeyiyicifang.github.io/running_page/

就是上面的代码么？为什么我的地图不展示了呢？

最新代码已经增加了隐去地名的配置了，但效果不是太好，地名还会一闪而过，代码见376bc5b

发现一个彻底隐去地名文字的方法：地图样式设置成这样就可以了，但是就是图案有点low哈。。

请问这个代码在哪能修改，谢谢。

aimdotsh · 2023-08-27T00:16:00Z

修改地图的样式：

src/components/RunMap/index.jsx

      // mapStyle="mapbox://styles/mapbox/satellite-v9"
      mapStyle="mapbox://styles/mapbox/dark-v10"

隐藏地图名称

src/utils/const.js

//set to `false` if you want to hide the road label characters
const ROAD_LABEL_DISPLAY = true;

YeWeihong · 2023-08-27T00:21:53Z

修改地图的样式：

src/components/RunMap/index.jsx

      // mapStyle="mapbox://styles/mapbox/satellite-v9"
      mapStyle="mapbox://styles/mapbox/dark-v10"

隐藏地图名称

src/utils/const.js

//set to `false` if you want to hide the road label characters
const ROAD_LABEL_DISPLAY = true;

谢谢解答！👍

tianheg closed this as completed Apr 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mapbox隐去地名文字 #353

mapbox隐去地名文字 #353

lingdeyiyicifang commented Dec 12, 2022 •

edited by yihong0618

yihong0618 commented Dec 13, 2022

Loongphy commented Jan 18, 2023

yihong0618 commented Jan 18, 2023

lingdeyiyicifang commented Jan 20, 2023

yihong0618 commented Jan 20, 2023

lingdeyiyicifang commented Jan 20, 2023

aimdotsh commented Apr 4, 2023

Loongphy commented Apr 9, 2023

aimdotsh commented Apr 16, 2023

aimdotsh commented May 17, 2023

aimdotsh commented May 17, 2023

yihong0618 commented May 17, 2023

aimdotsh commented May 17, 2023

YeWeihong commented Aug 26, 2023

aimdotsh commented Aug 27, 2023

YeWeihong commented Aug 27, 2023

mapbox隐去地名文字 #353

mapbox隐去地名文字 #353

Comments

lingdeyiyicifang commented Dec 12, 2022 • edited by yihong0618

yihong0618 commented Dec 13, 2022

Loongphy commented Jan 18, 2023

yihong0618 commented Jan 18, 2023

lingdeyiyicifang commented Jan 20, 2023

yihong0618 commented Jan 20, 2023

lingdeyiyicifang commented Jan 20, 2023

aimdotsh commented Apr 4, 2023

Loongphy commented Apr 9, 2023

aimdotsh commented Apr 16, 2023

aimdotsh commented May 17, 2023

aimdotsh commented May 17, 2023

yihong0618 commented May 17, 2023

aimdotsh commented May 17, 2023

YeWeihong commented Aug 26, 2023

aimdotsh commented Aug 27, 2023

YeWeihong commented Aug 27, 2023

lingdeyiyicifang commented Dec 12, 2022 •

edited by yihong0618