使用Mapbox GL JS加载geojson数据

使用Mapbox GL JS加载geojson数据

1 引入mapbox-gl.js文件

方式一:

可以通过官方的地址引入。

html 复制代码
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js"></script>

</head>

方式二:

如果是vue项目可以用npm install mapbox-gl,然后main.js里面引入。

js 复制代码
import mapboxgl from '!mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

2 显示底图

mapbox官方提供了多种底图,选择一种加载出来即可。

html 复制代码
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiYXl1MjM4OSIsImEiOiJjbGU2dTJtc2IwOHplM3JtcnljODZqNWszIn0.iszjybKhsIp0AYyfu8sQmg'
    const map = new mapboxgl.Map({
      container: 'map',
      // You can add layers to the predetermined slots within the Standard style basemap.
      style: 'mapbox://styles/mapbox/streets-v11', // mapbox官方给出了几种底图可以选择
      center: [104.6826114635814, 28.82097174542686], // 默认地图中心位置
      zoom: 17 // 地图缩放级别
    })
  </script>

mapbox框架使用现在需要一个token,这个可以用它官方文档例子里面的,或者自己去注册一个mapbox账号(注册账户需要一个国外的银行账户,这个可以在淘宝上想办法)

官方给了多种底图供选择,选一个自己想要的就好

1.mapbox://styles/mapbox/standard

2.mapbox://styles/mapbox/streets-v12

3.mapbox://styles/mapbox/outdoors-v12

4.mapbox://styles/mapbox/light-v11

5.mapbox://styles/mapbox/dark-v11

6.mapbox://styles/mapbox/satellite-v9

7.mapbox://styles/mapbox/satellite-streets-v12

8.mapbox://styles/mapbox/navigation-day-v1

9.mapbox://styles/mapbox/navigation-night-v1

docs.mapbox.com/mapbox-gl-j...

加载geojson格式数据到图层上

js 复制代码
    map.on('style.load', () => {
      // 先向mapbox加入源数据(geojson数据格式  urban-areas为ID,唯一标记该源数据)
      map.addSource('urban-areas', {
        'type': 'geojson',
        'data': {
          'type': 'FeatureCollection',
          'features': [
            {
              "type": "Feature",
              "geometry": {
                "coordinates": [
                  [
                    [
                      104.68224393266865,
                      28.820825119811616
                    ],
                    [
                      104.68237853175276,
                      28.820806143131804
                    ],
                    [
                      104.68253324334302,
                      28.820821053380044
                    ],
                    [
                      104.68263999433981,
                      28.820854940301558
                    ],
                    [
                      104.68275912226375,
                      28.820936268867015
                    ],
                    [
                      104.68286742037816,
                      28.82104877327741
                    ],
                    [
                      104.68289526846553,
                      28.82113416811103
                    ],
                    [
                      104.68287515595705,
                      28.821333422448802
                    ],
                    [
                      104.68282255401743,
                      28.82143237174087
                    ],
                    [
                      104.68183509950171,
                      28.822183326112793
                    ],
                    [
                      104.68168404453667,
                      28.822164945238
                    ],
                    [
                      104.68153298957174,
                      28.82207426620606
                    ],
                    [
                      104.68144627283152,
                      28.82203015205387
                    ],
                    [
                      104.68134696817822,
                      28.821940698298548
                    ],
                    [
                      104.68130504534406,
                      28.82174906388728
                    ],
                    [
                      104.68130581736818,
                      28.821644899952986
                    ],
                    [
                      104.68134441858416,
                      28.821514356693072
                    ],
                    [
                      104.68200651171475,
                      28.820943623997778
                    ],
                    [
                      104.68224393266865,
                      28.820825119811616
                    ]
                  ]
                ],
                "type": "Polygon"
              },
              "properties": {
                'color': '#FF0000',
                'height': 20
              }
            },
            {
              "geometry": {
                "coordinates": [
                  [
                    [
                      104.68249981776768,
                      28.822209737427144
                    ],
                    [
                      104.68327453745434,
                      28.82160047562293
                    ],
                    [
                      104.68299946596244,
                      28.82133219016545
                    ],
                    [
                      104.6822274898658,
                      28.821938871178958
                    ],
                    [
                      104.68249981776768,
                      28.822209737427144
                    ]
                  ]
                ],
                "type": "Polygon"
              },
              "type": "Feature",
              "properties": {
                'color': '#9f5f9f',
                'height': 40
              }
            }
          ]
        }
      })

      // urban-areas源数据加入图层,通过geojson数据里的properties获取color和height实现颜色高度自定义
      map.addLayer({
        'id': 'urban-areas-fill',
        'type': 'fill-extrusion',
        'source': "urban-areas",
        'paint': {
          'fill-extrusion-color': ['get', 'color'], // 获取properties里面的color属性值
          'fill-extrusion-height': ['get', 'height'], // 获取properties里面的height属性值
          'fill-extrusion-opacity': 0.9, // 透明度
          'fill-extrusion-base': 0, // 距离底层地图的距离
        }
      })
    });

需要先addSource添加源数据(也就是geojson格式数据),然后再向地图添加图层addLayer

这样图层就显示在了地图上,可以设置其颜色、高度等。

上面的geojson数据是博主在mapbox studio上随意画的。

mapbox studio是官方用来制作地图的一个在线网站,很好用,需要注册mapbox账号才能使用!

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟9 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站