Mapbox-gl（not ready）

最新推荐文章于 2024-05-26 15:28:20 发布

大聂不优秀

最新推荐文章于 2024-05-26 15:28:20 发布

阅读量788

点赞数 1

分类专栏：笔记

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习mapbox博文传输带
vue上使用mapbox
初始化第一个mapbox
geoserve
geojson
canvas
Mapbox-GL样式 -->sources（数据来源）和layers（界面呈现的样子）
绘制点
绘制线
设置点的样式
解决点重合问题
设置线的样式
线随点的移动改变
3D地图的实现

mapbox博文传输带

-1、初学了解mapbox，里面有sources（数据来源）和layers（界面呈现的样子）概念的理解，source和layer的1->n关系
 0、mapbox非常全的实例
 1、通过介绍mapbox的一些实际应用与概念，来记录学习路程与经验分享。（从点到线，系统简介，推荐！！！！！）
2、Mapbox-GL样式参考
 3、MAPBOX本地离线部署。讲解：layers,sources 图层本地化、sprite 图标本地化、glyphs 字体本地化
 4、mapbox更深度的离线部署。
结合Mapbox GL JS和Vue.js的强大功能-------vuemapbox(我没能上手，感觉mapbox版本太老了)

geoserve
Mapbox 添加WMS服务
 使用mapbox加载由geoserver发布的矢量切片

geojson
GeoJSON详细讲解
 GeoJSON详解（带图）

canvas
canvas实例
 canvas入门到入坑，哈哈哈哈学习教程

vue上mapbox的使用

cnpm i -S mapbox-gl
//安装自定义点线面工具的依赖包
npm install --save mapbox-gl-draw
npm install --save turf

初始化第一个mapbox

一个就是地图在html中的容器，即装载地图div的ID。
另一个就是地图的样式，地图样式一般包括渲染地图的资源以及缩放，中心点等地图配置信息。

<template>
  <div>
    <div id="map" ref="basicMapbox" :style="mapSize"></div>
  </div>
</template>
<script>

import mapboxgl from "mapbox-gl";

    // 初始化创建地图
createMap() {
 mapboxgl.accessToken = this.mapConfig.accessToken;
      // 设置地图展示范围 lng: 经度  lat:纬度
      /*var bounds = new mapboxgl.LngLatBounds(
		        new mapboxgl.LngLat(65, 15),
		        new mapboxgl.LngLat(140, 55)
		    );*/
      var map = new mapboxgl.Map({
        container: "map",
        style: this.mapConfig.mapStyle, // 设置地图风格
        center: [110.499992, 21.052744], // 中心点，
        zoom: 16, // 缩放级别
        pitch: 45, // 倾斜角度，默认值为0
        bearing: -17.6, // 旋转角度，默认值为0
        container: "map" // 地图容器
        //antialias: true,
        //maxBounds: bounds // 约束到给定边界
      });
      }

//地图风格
data() {
    return {
      mapConfig: {
        accessToken:
          "token值",
        mapStyle: {
          version: 8,
          name: "BlankMap",
          sources: {},
          glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", //mapbox地图使用的标注字体。
          darck: {				//地图对应的颜色
            anchor: "viewport",
            color: "blue",
            intensity: 0.5
          },

          layers: []
        }
      },
      }
      }

以上地图初始化完成

geoserver简介及mapbox中的使用

这里不涉及到geoserver发布地图。在geoserver发布地图使用需要依赖java环境，即按照jdk和配置jdk环境变量。

使用 http://地址:jdk端口/geoserver/web 访问geoserver对应网页地址

在我们项目中使用到geoserver发布地图，以下是geoserve发布的地图渲染到mapbox中

 drawMap() {
      let map = this.map;
      map.on("load", () => {
        let ironSource = this.getIronSource(); //见下图
        //  数据来源
        map.addSource("iron", ironSource);
        // 线路
        map.addLayer({
          id: "my-road",
          layout: {},
          paint: { "line-color": "pink" },
          source: "iron",
          "source-layer": "1023",
          type: "line"
        });
      });
    },

 // 将map绘制到地图上数据来源
    getIronSource() {
      var resp = {
        type: "vector", //不同于raster通过像素点绘制，因此不会出现放大后地图变模糊的情况。
        scheme: "tms",
        tiles: [
          "geoserve发布的地址.pbf"
        ]
      };
      return resp;
    },

geojson的学习

geojson 在线生成测试链接
 在线经纬度查询

理解geojson是什么？
GeoJSON是一种用于编码各种地理数据结构的格式。GeoJSON对象可以表示几何形状，特征或特征集合。

GeoJSON通常是由单个对象组成。此GeoJSON对象表示几何，要素或要素集合。

GeoJSON对象必须是名为“type”的成员。此成员的值是由GeoJSON对象的类型所确定的字符串。
type成员的值必须是下面之一： Point ， MultiPoint ， LineString ， MultiLineString ， Polygon ， MultiPolygon ， GeometryCollection ， Feature 或 FeatureCollection
对应中译：点、多点、线串、多线串、多边形、多多边形、几何集合、要素集合
GeoJSON对象可能有一个可选的“crs”成员，其值必须是坐标参考系统对象。（没搞懂，坐标参考系统对象）
GeoJSON对象可能有一个“bbox”成员，其值必须是边界框数组。

GeoJSON几何对象

几何体是一种GeoJSON对象，其中类型（type）成员的值是以下字符串之一： Point ， MultiPoint ， LineString ， MultiLineString ， Polygon ， MultiPolygon ， GeometryCollection ， Feature 或 FeatureCollection 。

除“GeometryCollection”外的其他任何类型的GeoJSON几何对象必须有一个名为“coordinates”的成员。“coordinates”成员的值总是一个数组。此数组中元素的结构由几何的类型来确定。

例如：Point时coordinates对应坐标点（数组）。
coordinates:位置由数字数组表示。至少有两个元素，可以有更多元素。元素的顺序必须遵循x，y，z顺序（东坐标，北坐标，投影坐标系中坐标的高度，或地理坐标系中坐标的经度，纬度，高度）

//在mapbox对应数据来源中引用geojson
map.addSource(idnanme, {
        type: "geojson", //geojson中常用到表示地理信息的数据格式，对于点线面等基本图形，都有其标准的表示方法。
        data: this.geoData(lng, lat)
      });
geoData(lng, lat) {
      let geo = {
        type: "FeatureCollection", //特征集，包含所有type 哈哈哈哈 流氓！
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point", //点
              coordinates: [lng, lat] //位置由数字数组表示。至少有两个元素，可以有更多元素。元素的顺序必须遵循x，y，z顺序（东坐标，北坐标，投影坐标系中坐标的高度，或地理坐标系中坐标的经度，纬度，高度）
            }
          }
        ]
      };
      return geo;
    },

类型	coordinates值
点（Point）	点坐标为x，y顺序{“coordinates”: [-115.81, 37.24], “type”: “Point”}
点集合（MultiPoint）	位置数组
线（LineString）	“coordinates”成员必须是两个或多个位置的数组 geometry: { type: “LineString”,coordinates: tmpRoute}
线集合（MultiLineString）	“coordinates”成员必须是线坐标数组的数组
多边形（Polygon）	“coordinates”成员必须是线环坐标数组的数组。对拥有多个环的多边形来说，第一个必须是外部环，其他任何环必须是内部环或孔。
多边形集合（MultiPolygon）	“coordinates”成员必须是多边形坐标数组的数组
几何集合（GeometryCollection）	GeometryCollection的geometry数组中的每个元素是上述几何对象之一 {“geometries”: [{“coordinates”: [23.532, -63.12], “type”: “Point”}, {“coordinates”: [[-152.62, 51.21], [5.21, 10.69]], “type”: “LineString”}], “type”: “GeometryCollection”}
要素对象（Feature）	没看懂== {“geometry”: {“coordinates”: [-3.68, 40.41], “type”: “Point”}, “id”: 27, “properties”: {}, “type”: “Feature”}
要素集合对象（FeatureCollection）	类型为“FeatureCollection”的GeoJSON对象是要素集合对象

geojson在mapbox中的使用
source的类型：
1.type: “geojson” （点（circle）线（line）面（fill）图标（symbol））【map.getSource(‘geojson’).setData(geojson)给数据源赋值】

2.type: “image” （图片）【map.getSource(“radar”).updateImage({ url: getPath() });】

3.type: ‘canvas’,

4.type: “raster”, （瓦片WMS 服务加载）

getRoute(tmpRoute) { //路线渲染的方法，传入路线坐标
      let map = this.map; 
      map.addSource("drowlines", {  //设置数据来源
        type: "geojson", //type定义为geojson
        data: this.geo_routerDate(tmpRoute) //外接方法传入
      });

      map.addLayer({
        id: "drowlineslayer",
        type: "line",
        source: "drowlines", //对应数据来源
        paint: {   //线路样式
          "line-width": 1,
          "line-color": ["get", "color"]
        }
      });
    },

geojson:

geo_routerDate(tmpRoute) {
      let geo = {
        type: "FeatureCollection", 
        //type:"GeometryCollection"//是多种基本地理要素的集合，就是里面可以包含点、线、面要素。GeometryCollection不需要放在FeatureCollection里："geometries": []
        features: [ //地理要素放在features的列表里
          {
            type: "Feature",
            properties: {  //properties里面可以封装各种属性，例如名称、标识颜色等等。
              color: "#000" 
            },
            geometry: { //首先是将这些要素封装到单个的geometry里，然后作为一个个的Feature（也就是要素）；要素放到一个要素集合里，从树状结构来理解FeatureCollection就是根节点
              type: "LineString",//type，具体表述了数据的类型，可以是点，线，以及面。具体有：“Point”, “MultiPoint”, “LineString”, “MultiLineString”, “Polygon”, “MultiPolygon” “点”、“多点”、“线串”、“多线串”、“多边形”、“多多边形”
              coordinates: tmpRoute //并且不同的type会有不同的coordinates值
            }
          }
        ]
      };
      return geo;
    },

Mapbox-GL样式 -->sources（数据来源）和layers（界面呈现的样子）

sources （地图的数据）

Sources属性提供地图数据，数据的格式由“type”指定，目前支持vector、raster、geojson、video四种.
瓦片数据（矢量瓦片和栅格瓦片）必须指定对应的TileJSON文件，并在TileJSON中指定数据详情，有两种方式指定：
1、直接在属性中通过”tiles”,”minzoom”,”maxzoom”指定。
2、通过url引入外部json文件

   getIronSource() {
      var resp = {
        type: "vector", //因为不同于raster通过像素点绘制，因此不会出现放大后地图变模糊的情况。
        scheme: "tms",
        //url:'',//可灵活，直接引入json文件
        tiles: [
          "http://geoserver发布的地址：端口/geoserver/gwc/service/tms/1.0.0/地址信息.pbf"
        ],
        minzoom: 10,
        maxzoom: 14
      };
      return resp;
    },

Sources的type值	对应意义
vector	矢量瓦片数据源，必须为Mapbox矢量瓦片格式
raster	栅格瓦片数据源
geojson	Geojson数据源，数据通过一个”data”属性指定，值可以为url，也可以为geojson对象。
video	视频数据源，url是一个字符串数组，为了保证不同浏览器的兼容性，每个url都会创建一个视频元素的数据源。

 map.addSource("Routpoin", {
        type: "geojson",
        data: this.getIronSource() //引入geojson对象
      });

Layers （界面呈现的样子）

Layers的每个style layer都必须制定一个”type”属性，”type”属性的取值包括background, fill, line, symbol, raster，每个层有两种属性指定那些数据应该怎样渲染，分别是”layout”属性和”paint”属性。
layout属性会先于paint属性被处理，其定义了该层应该怎样传到GPU，某一层可以通过”ref”属性共享其它层layout。并且这是推荐的做法，因为这样可以减少处理时间，并且节省GPU存储空间。
两个参考其他层的layout属性的层可以有相互独立的paint属性。每个层的paint属性还能指定一个或多个class。
————————————————

background类型的layer不需要绑定source之外。其他的都需要有source。fill类型的layer只负责填充；line类型的layer只负责线条；symbol类型的layer会处理sprite，文字等；raster类型的layer就只负责图片， circle类型的layer是更高一层的业务处理需要。

背景：background
填充：fill
线：line
处理sprite/文字：symbol
图片：raster

大聂不优秀

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
Mapbox-gl（not ready）

学习mapbox博文传输带vue上使用mapbox初始化第一个mapboxgeoservegeojson绘制点绘制线设置点的样式解决点重合问题设置线的样式线随点的移动改变3D地图的实现mapbox博文传输带-1、初学了解mapbox，里面有sources（数据来源）和layers（界面呈现的样子）概念的理解，source和layer的1->n关系0、mapbo...
复制链接

扫一扫

专栏目录