mapboxgl 加载矢量、影像、geojson等图层及添加专题图层（热力图、唯一值）汇总

1.加载常用图层
- 1.1 wmts服务
- 1.2 矢量服务
- - 1.2.1 加载矢量切片数据源
  - 1.2.2 加载geojson数据源
  - 1.2.3 加载点
  - 1.2.4 加载线
  - 1.2.5 加载面
  - 1.2.6 添加注记图层（富文本标签）
- 1.3 地图交互
- - 1.3.1点击查看属性
2.专题图层
- 2.1 常用专题图
- - 2.1 热力图
  - 2.2 唯一值渲染图
  - 2.3 重分类渲染图

初始化地图对象：

<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />

  this.map = new mapboxgl.Map({//地图容器div的idcontainer: "mapDiv",style: style,// 地图styleminZoom: 0,maxZoom:17,center: [114,32],// 地图中心点// zoom: 0, // 地图当前缩放级数});

1.加载常用图层

1.1 wmts服务

function addRasterLayer({ url, id, minzoom = 0, maxzoom = 22, visible = true }) {if (this.map.getLayer(id)) return;this.map.addLayer({id: id,type: "raster",source: {type: "raster",tiles: [url],tileSize: 256,zoomOffset: 1,},layout: {visibility: visible ? "visible" : "none",},minzoom, // 限制加载最小级别的服务，当小于该级别时只显示该级别的地图服务maxzoom,// 限制加载最大级别的服务，当大于该级别只显示该级别的地图服务});}

1.2 矢量服务

首先需要加载数据源，然后加载图层通过source、source-layer指定数据源与图层。

1.2.1 加载矢量切片数据源

   this.map.addSource("source-id", {type: "vector",tiles: ["https://testurl/{z}/{x}/{y}.mvt?code=&tablename=&cjrid=&dwmc=&yhlx=0&sfdw=&shzt=&queryCode=&hczt=&gids=&querytype=2&pid=&tag=2",]});

1.2.2 加载geojson数据源

   let json="http://url//xxx.json"; // json可以是geojson对象或者返回goejson的服务this.map.addSource("source-id", {type: "geojson",data: json,  });

1.2.3 加载点

    // 加载点layerthis.map.addLayer({id: "drawpointlayer",type: "circle",layout: {visibility: "visible",},source: "source-id","source-layer": "mvt",paint: {"circle-radius": 10,"circle-color": "#ff0000"},filter: ["all",["==","$type", "Point"],["==","dwmc","莒县龙山镇花崖小学"],["has","dwmc"]],// minzoom:4,// maxzoom:20});

1.2.4 加载线

 // 加载线layerthis.map.addLayer({id: "drawRoadlayer",type: "line",source: "source-id","source-layer": "mvt",layout: {visibility: "visible",},paint: {"line-width": 2,"line-color": "#DAC9F0","line-opacity": 1,},filter: ["==", "$type", "LineString"],});

1.2.5 加载面

 // 加载面layerthis.map.addLayer({id: "drawLakelayer",layout: {visibility: "visible",},type: "fill",source: "source-id","source-layer": "mvt",paint: {"fill-color": "#ABC6EF","fill-outline-color": "#3bb2d0","fill-opacity": 0.6,},filter: ["==", "$type", "Polygon"],});

1.2.6 添加注记图层（富文本标签）

支持富文本标签（多个注记标签）的渲染方式，效果如图：

  this.map.addLayer({'id': 'thematic_shiPolygonlayer-ano','source': 'source-id','type': 'symbol','minzoom': 1,'maxzoom': 20,'layout': {'text-size': 10,'symbol-placement': 'point',//'text-field': '{qzcount}', // 显示注记字段 "text-field": ['format',['get', 'dwmc'],{ 'font-scale': 1.5 },'\n',{},['get', 'id'],{'font-scale': 1.0,'text-font': ['literal',['DIN Offc Pro Italic', 'Arial Unicode MS Regular']],'text-color': 'red',}]'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'], // 默认使用mapbox官网字体库'text-offset': [0, 0.6],'text-anchor': 'top'},  "paint": {"text-color": "#202","text-halo-color": "#fff",   // 晕"text-halo-width": 2  }})

1.3 地图交互

1.3.1点击查看属性

   this.map.on('click', (e) => {// var positionMess = {}var div = document.createElement('div')var clickBounds = [[e.point.x - 1, e.point.y - 1],[e.point.x + 1, e.point.y + 1]]var features = this.map.queryRenderedFeatures(clickBounds) // 前台查询-通过点击的地图屏幕坐标(左上角[0,0])查询显示的地图要素let clickLayer = []for (let featureItem of features) {var sourceLayer = featureItem.layer['source-layer'] // 矢量切片地图服务名var properties = featureItem.properties // 属性值的对象clickLayer.push({sourceLayer, properties})}// clickLayer中id一样的数据可能是同一要素数据，只是被切片分开了，需要去重下。new window.compassengine.Popup().setLngLat(e.lngLat).setHTML(`${JSON.stringify(clickLayer)}`).addTo(this.map)})

2.专题图层

2.1 常用专题图

2.1 热力图

  this.map.addSource("source-id", {type: "vector",tiles: ["http://ip:9005/qgzhdc/dataManage/api/v1/queryListCommonMvt/{z}/{x}/{y}.mvt?code=0",],});}this.map.addLayer({id: "trees-heat",type: "heatmap",source: "source-id","source-layer": "mvt",maxzoom: 15,paint: {"heatmap-radius": ["interpolate",["linear"],["zoom"],// zoom is 5 (or less) -> circle radius will be 1px5,10,// zoom is 10 (or greater) -> circle radius will be 5px8,20,],"heatmap-weight": 1,"heatmap-intensity": 1,"heatmap-color": ["interpolate",["linear"],["heatmap-density"],0,"rgba(33,102,172,0)",0.1,"#4169e1",0.3,"#00ffff",0.5,"#00ff00",0.7,"#ffff00",1,"#ff0000",],"heatmap-opacity": 1,},});

2.2 唯一值渲染图

let expression= ['match', ['get', 'adcode'],110111, '#FFFFE0',110112,'#FFEBCD','rgba(255,255,255,1)'];
// 属性字段 adcode  默认值  rgba(255,255,255,1)
//                 值为110111 的渲染为  #FFFFE0
//                 值为110112  的渲染为 #FFEBCD
//
this.map.addSource('thematic_source_oneShiPolygon', { type: 'geojson', data:"geojsonurl" });
this.map.addLayer({'id': 'thematic_fenjiOneShilayer','type': 'fill','source': 'thematic_source_oneShiPolygon','paint': {'fill-color': expression}});

2.3 重分类渲染图

let  expression = ['step', ['get', 'gid'], '#FF0000', 40, '#00FF00', 70, 'rgba(255,255,255,1)'] // 属性字段
// 属性渲染字段 gid
// 当 gid < 40，渲染成 #FF0000
// 当 gid<=40<70 #00FF00
this.map.addSource('thematic_source_oneShiPolygon', { type: 'geojson', data:"geojsonurl" });
this.map.addLayer({'id': 'thematic_fenjiOneShilayer','type': 'fill','source': 'thematic_source_oneShiPolygon','paint': {'fill-color': expression}}
);

显示瓦片网格（调试使用）：
map.showTileBoundaries=true;

待完善。

mapboxgl 加载常用图层汇总相关推荐

openlayers添加按钮_OpenLayers3加载常用控件使用方法详解
本文实例为大家分享了OpenLayers3加载常用控件使用的具体代码,供大家参考,具体内容如下 1. 前言地图控件就是对地图的缩放.全屏.坐标显示控件等,方便我们对地图进行操作.OpenLayers ...
esri-leaflet入门教程（4）-加载各类图层
esri-leaflet入门教程(4)-加载各类图层 by 李远祥在leaflet中图层一般分为底图(Basemap)和叠加图层(Overlay).前面章节已经介绍过底图其实也是实现了TileLay ...
【Arcgis Engine开发】AE开发把影像或者矢量加载到图层
AE开发把影像或者加载到图层 1.创建一个类工厂 2.使用类工厂创建一个要使用的工作区 3.使用工作区打开并得到图层的dataset 4.把dataset装入到新建的图层实例 5.把图层加载到MapC ...
mapboxgl加载tiff
缘起近期在项目中遇到这么一个需求,需要在地图上展示一组格网数据,格网大小为2m*2m,地图api用的mapboxgl.起初拿到这个需要感觉很easy,在地图上添加一个fill图层就好啦.把格网面数据 ...
mapboxgl加载google地图、高德地图的在线切片地图
mapboxgl加载google地图.高德地图的在线切片地图 1.加载google地图,只需将将style换为如下内容,并根据需要更换地图类型(注释部分)即可. style: {"versi ...
C#+AE加载shape图层
今天学了下用AE+C#加载shapefile图层文件,其实网上已经有很多资源了,我试了两种方法,看了很多代码,但只有一种代码能用,其他都出现问题,然而我也并不知道什么问题以下是我参考的两个网站: 在 ...
QGIS加载天地图图层
使用GDAL驱动加载TMS方式完成.配置文件内容如下(tdt-vecw.xml): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <GDA ...
leaflet加载各类图层
leaflet.js本身大小只有33k,它能加载的图层种类是有限的,不过可以借助esri-leaflet.js这个插件加载其他的图层,如果需要加载wmts(地图瓦片服务)可以引用leaflet-til ...
超图js版 iclient 基本开发 - 加载基本图层（以天地图示例）和基本地图控件
以超图的在线示例来学习:运行之后如下: 原网址代码比较长一些:先把多的去掉:看一下基本的加载图层和地图控件的概念: <script type="text/javascript" ...

mapboxgl 加载常用图层汇总

mapboxgl 加载矢量、影像、geojson等图层及添加专题图层（热力图、唯一值）汇总

1.加载常用图层

1.1 wmts服务

1.2 矢量服务

1.2.1 加载矢量切片数据源

1.2.2 加载geojson数据源

1.2.3 加载点

1.2.4 加载线

1.2.5 加载面

1.2.6 添加注记图层（富文本标签）

1.3 地图交互

1.3.1点击查看属性

2.专题图层

2.1 常用专题图

2.1 热力图

2.2 唯一值渲染图

2.3 重分类渲染图

mapboxgl 加载常用图层汇总相关推荐

最新文章

热门文章