离线Mapbox地图 windows方式本地部署GeoServer windows Linux

下载geoserver 及Vector Tiles扩展

 下载地址:Download - GeoServer

解压geoserver以及Vector Tiles扩展

解压Vector Tiles 里面会有4个 .jar的文件

下载跨域的.jar包以及web.xml配置

链接：https://pan.baidu.com/s/1989QvzwLqUXol6bwrvDuWg 
提取码：kye8

设置跨域 是为了方便本地访问

把Vector Tiles 里的jar文件和跨域的两个jar文件丢到

 配置跨域 还需更改一下web.xml文件

目前用的是这个版本2.21.1版本 新版本没差

此文件在geoserver-2.21.1-bin\webapps\geoserver\WEB-INF\

根据层级 复制到对应的位置 

 <!-- Uncomment following filter to enable CORS -->
   <filter>
        <filter-name>cross-origin</filter-name>
        <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
       <init-param>
           <param-name>chainPreflight</param-name>
           <param-value>false</param-value>
       </init-param>
       <init-param>
           <param-name>allowedOrigins</param-name>
           <param-value>*</param-value>
       </init-param>
       <init-param>
           <param-name>allowedMethods</param-name>
           <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
       </init-param>
       <init-param>
           <param-name>allowedHeaders</param-name>
           <param-value>*</param-value>
       </init-param>
    </filter>
     <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

下载离线地图的shp文件

BBBike extracts OpenStreetMap (OSM, Garmin, Shapefile etc.) Format 选择Shapefile(Esri) 点击 or serch 出现搜索框 输入 你要的城市

框选完你要的范围后 extract 即可 大约2-3分钟左右 到你填写的邮箱中

下载后会有一个shape文件 解压后 进去会有shape文件

把整个shape文件夹目录 拉进 geoserver-2.21.1-bin/data_dir 文件下

尽量在名字面前加个a 方便后续找到

进入\geoserver-2.21.1-bin\bin 目录下 启动startup.bat

更改端口号

找到jetty.http.port  然后改成你设置的端口号 保存即可 更改后要重启

我这边改了端口8003 默认端口8080 具体看CMD

页面操作

然后在浏览器输入http://127.0.0.1:8003/geoserver/web/?0

默认帐号admin 密码geosrver 然后点击登录

点击左侧工作空间

点击添加新的工作空间 名字任意 BEIMAP之类的

点击存储仓库-添加新的存储仓库

点击 Directory of spatial files (shapefiles) 

点击浏览-找到刚刚存在这个目录的shape文件目录

然后点击确定即可

注意字符集的格式位UTF-8格式-然后点击保存即可

保存后会自动跳转到发布图层界面-全部都要发布

点击发布

滚到下面 点击从数据中计算  和 Compute from native bounds 然后即可点保存 其他信息无需填写

保存后会自动跳转到图层界面-此时还没发布完其他的图层的 点击添加新的资源

选择你刚刚创建的工作区的名字

然后接着发布剩下的图层 发布成功会有绿色打勾的

所有图层发布完后 点击侧边栏的图层组-添加新图层组

根据红框输入 和 选择 

点击添加图层

添加完8个图层后点击 生成边界 然后点击保存即可

点击侧边栏图层预览 找到CSDNMAP 点击 OpenLayers

出现这样的效果就是发布好啦 

点击GeoServer 点击TMS 1.0.0

按键盘ctrl+F 搜 title="CSDNMAP"  (你创建的工作区的名字)

找到@pbf后缀的 复制下来

注意：复制的地址后面要加/{z}/{x}/{y}.pbf

代码处理

下载字体  地图回显的地点道路名称等

链接: https://pan.baidu.com/s/1lNzuWwyAzmB5_72xr8Pp-A?pwd=p6sg 提取码: p6sg

解压放到

style会用到

样式可以自定义 改线条颜色 背景色等

​
  init(mapElement) {
    let style = {
      version: 8,
      //我使用的这个版本sprite要写全路径
      //字体.pbf文件获取
      glyphs: '/fonts/{fontstack}/{range}.pbf',

      sources: {
        china: {
          //矢量类型
          type: 'vector',
          //服务类型 tms，要使用wmts服务请换成wmts
          scheme: 'tms',
          tiles: [
            //获取GeoServer 矢量切片服务,可以是一下几种方式
       'http://127.0.0.1:8003/geoserver/gwc/service/tms/1.0.0/CSDNMAP%3ACSDNMAP@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf'
          ]
        }
      },

      layers: [
        //背景
        {
          id: 'background',
          type: 'background',
          // "source": "",
          // "source-layer": "",
          layout: {},
          paint: {
            'background-color': 'hsl(217°, 37.5%, 9.4%)'
            // 'background-color': 'hsl(217°, 55.6%, 21.2%)'
          }
        },
        //road
        {
          id: 'road_major',
          type: 'line',
          source: 'china',
          'source-layer': 'roads',
          minzoom: 7,
          maxzoom: 24,
          layout: {
            'line-cap': 'round',
            'line-join': 'round'
          },
          paint: {
            'line-width': {
              base: 1.5,
              stops: [
                [5, 0.75],
                [18, 32],
                [20, 0.5]
              ]
            },
            'line-color': {
              base: 1,
              stops: [
                [7, 'hsl(214°, 21.9%, 28.6%)'],
                [12, 'hsl(214°, 21.9%, 28.6%)']
              ]
            }
          }
        },
        //river
        {
          id: 'river-line',
          type: 'line',
          source: 'china',
          'source-layer': 'waterways',
          minzoom: 6,
          maxzoom: 18,
          paint: {
            'line-color': 'hsl(197, 48%, 6%)',

            'line-width': {
              base: 1,
              stops: [
                [6, 0.5],
                [20, 15]
              ]
            }
          }
        },
        //Border
        {
          id: 'Border-line',
          type: 'line',
          source: 'china',
          'source-layer': 'Border',
          layout: {},
          paint: {
            'line-color': 'hsl(0, 0%, 0%)',
            'line-width': 2
          }
        },
        //province
        {
          id: 'province-fill',
          type: 'fill',
          source: 'china',
          'source-layer': 'province',
          layout: {},
          paint: {
            'fill-color': 'hsl(75, 62%, 81%)'
          },
          maxzoom: 24
        },
        // {
        //   id: 'province-line',
        //   type: 'line',
        //   source: 'china',
        //   'source-layer': 'railways',
        //   layout: {},
        //   paint: {
        //     'line-color': 'hsl(216, 20%, 97%)',
        //     'line-width': 1
        //   },
        //   minzoom: 5,
        //   maxzoom: 24
        // },
        //city
        {
          id: 'city-fill',
          type: 'fill',
          source: 'china',
          'source-layer': 'city',
          layout: {},
          paint: {
            'fill-color': 'hsl(216, 20%, 97%)'
          },
          minzoom: 5,
          maxzoom: 24
        },

        {
          id: 'city-line',
          type: 'line',
          source: 'china',
          'source-layer': 'city',
          layout: {},
          paint: {
            'line-color': 'hsl(216, 20%, 97%)',
            'line-width': 1
          },
          minzoom: 5,
          maxzoom: 24
        },
        //citypoint
        {
          id: 'citypoint-symbol',
          type: 'symbol',
          source: 'china',
          'source-layer': 'places',
          layout: {
            'text-field': '{name}',
            'text-size': 10,
            'text-font': ['Microsoft YaHei'],
            'text-offset': [0, 0.75]
          },
          paint: {
            // 'text-color': 'hsl(0, 0%, 13%)'
            'text-color': 'hsl(220, 20%, 97%)'
          },
          minzoom: 5,
          maxzoom: 24
        },
        {
          id: 'citypoint-symbol2',
          type: 'symbol',
          source: 'china',
          'source-layer': 'points',
          layout: {
            'text-size': 10,
            'text-field': '{name}',
            'text-font': ['Microsoft YaHei']
            // 'text-offset': [0, 0.75]
          },
          paint: {
            // 'text-color': 'hsl(0, 0%, 13%)'
            'text-color': 'hsl(220, 20%, 97%)'
          },
          minzoom: 5,
          maxzoom: 24
        },
        //lake
        {
          id: 'lake-fill',
          type: 'fill',
          source: 'china',
          'source-layer': 'lake',
          paint: {
            'fill-color': 'hsl(195, 50%, 75%)'
          },
          minzoom: 4
        }
      ],

      _ssl: true
    }
 var mapTarget = new mapboxgl.Map({
      container: mapElement,
      style: style,
      center: ['113.13237', '22.984763', 0],
      zoom: 15
    })
}

​

大致的效果

Linux

如果在windows部署过 可以直接压缩整个geoserver-2.21.1-bin文件 到linux上解压即可

进入 目录下

cd etc/geoserver-2.21.1-bin/bin

启动 

nohup sh startup.sh &

出现同种格式 [1]122984 说明启动成功  

注意：启动后 需要大致等20~30秒 在访问地址

成功后输入 http://服务器IP:8003/geoserver/web/?0 步骤与页面操作一致