Mapbox-gl（not ready）

news/2024/11/24 4:46:34/
  • 学习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详解（带图）

点线相关
绘制line且颜色渐变
Mapbox GL JS 根据指定的点在地图上标记一个指定半径（KM）的圆形区域

3D相关
《权力的游戏》3d地图-基于Mapbox customlayer
mapbox、three.js添加自定义3d模型。注：官网案例也不错

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, // 倾斜角度，默认值为0bearing: -17.6, // 旋转角度，默认值为0container: "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对象表示几何，要素或要素集合。

  1. GeoJSON对象必须是名为“type”的成员。 此成员的值是由GeoJSON对象的类型所确定的字符串。
  2. type成员的值必须是下面之一： Point ， MultiPoint ， LineString ， MultiLineString ， Polygon ， MultiPolygon ， GeometryCollection ， Feature 或 FeatureCollection
    对应中译：点、多点、线串、多线串、多边形、多多边形、几何集合、要素集合
  3. GeoJSON对象可能有一个可选的“crs”成员，其值必须是坐标参考系统对象。（没搞懂，坐标参考系统对象）
  4. 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定义为geojsondata: 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栅格瓦片数据源
geojsonGeojson数据源，数据通过一个”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


http://www.ppmy.cn/news/168612.html

相关文章

public interface GL10 extends GL

public interface GL10 extends GL

官方注释&#xff1a;https://www.khronos.org/registry/OpenGL-Refpages/ 有一点要注意的是 GL10 意味着 这个借口遵从 OpenGL ES 1.0 规范。(以此类推) 本片文章参考 OpenGL ES 1.1 完成 以下为私人注释。请以官方为准。 好多方法直接百度就可以找到前人的经验 /* //de…
阅读更多...
GL线程

GL线程

1 public class MiniLauncher extends AndroidApplication implements MenuActionListener {2 3 public View glView null;4 public DesktopListener mListener;5 Override6 public void onCreate(Bundle savedInstanceState) {7 8 //得到的是一个s…
阅读更多...
Open GL的渲染流程

Open GL的渲染流程

OpenGL渲染流程 </h1><div class"clear"></div><div class"postBody">一.什么是openGL OpenGL被定义为“图形硬件的一种软件接口”。从本质上说&#xff0c;它是一个3D图形和模型库&#xff0c;具有高度的可移植性&#xff0c;具有…
阅读更多...
记录：微星 GE63 屏轴断裂 之后。。。

记录：微星 GE63 屏轴断裂 之后。。。

2022/11/25 记录 微星 GE63 1070 笔记本&#xff0c;使用的第三年&#xff0c;已过保了一年&#xff0c;上周使用时&#xff0c;准备合上笔记本盖。啪一下&#xff0c;左侧屏轴断裂&#xff0c;B面翘起&#xff0c;A面左下角轴盖断了一截。 网上好多人都有类似的情况&#xff…
阅读更多...
## 微星gl63笔记本安装ubuntu18.04双系统

## 微星gl63笔记本安装ubuntu18.04双系统

微星gl63笔记本安装ubuntu18.04双系统 List item 笔记本安装ubuntu18.04双系统&#xff0c;windows10本身是自带的&#xff0c;想再安装一个Ubuntu18.04构成双系统。 首先&#xff0c;利用UltralSO做好ubuntu18.04启动盘。U盘内存4g以上就可以。 Ubuntu下载地址 https://ubun…
阅读更多...
记录微星gl63的ubuntu 18.04重装rtl8821ce驱动，重获wifi

记录微星gl63的ubuntu 18.04重装rtl8821ce驱动，重获wifi

由于不知是windows更新还是其他原因&#xff0c;双系统的Ubuntu 18.04在一次重启后就没有WiFi功能了。没办法只能重新安装rtl8821ce驱动&#xff0c;我的系统内核是5.4.0-53-generic&#xff0c; 1.打开rtl8821ce文件夹&#xff0c;再打开makefile文件夹&#xff0c;找到如下图…
阅读更多...
STM32F4_SPI协议详解

STM32F4_SPI协议详解

目录 1. 什么是SPI 2. SPI物理层 3. SPI协议层 3.1 SPI基本通讯过程 3.2 数据有效性 3.3 CPOL/CPHA及通讯模式 4. SPI框图及通讯过程 4.1 SPI框图 4.2 通讯过程 5. SPI初始化结构体 6. Flash芯片(W25Q128)简介 7. 库函数配置SPI1的主模式 8. 实验程序 8.1 实验程…
阅读更多...
联想笔记本触控版双指手势

联想笔记本触控版双指手势

使用范围&#xff1a;synaptics定点装置的联想笔记本电脑&#xff0c; 亲测yoga710&#xff0c;小新潮5000适用。 一、按winR输入regedit回车打开注册表。 二、定位到&#xff1a;计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Synaptics\SynTP\Win10修改值 三、定位到&#xff1a;计算机…
阅读更多...
最新文章

Copyright @ 2022~2023