1、引入所需的库
因为个人开发习惯,习惯在已有的mapbox地图实例中添加scene,所以需引入mapboxgl。个人也非常推荐这样使用。减少两者互相影响
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { Scene, LineLayer } from "@antv/l7";
import { Mapbox } from "@antv/l7-maps";
2、初始化地图
mapboxgl.accessToken = "你的accessToken";
map = new mapboxgl.Map({
container: "mapContainer",
style: style,
bearing: -22.89500000000021,
pitch: 55.8895833333333,
zoom: 7.659498853604053,
minZoom: 6,
maxZoom: 19,
scene = new Scene({
id: "mapContainer",
map: new Mapbox({
mapInstance: map,
// 关闭默认 L7 Logo
logoVisible: false,
二、添加发光边界
1、准备所需geojson数据
2、添加图层
scene.on("loaded", () => {
scene.addLayer(layer);
const wallLayer = new LineLayer({}).source(GeoJson_Source).size(40).shape("wall").style({
heightfixed: true,
opacity: "testOpacity",
sourceColor: "#0DCCFF",
targetColor: "rbga(255,255,255, 0)",
scene.addLayer(wallLayer);
ok,到这里我们就添加好啦
Mapbox GL路线
使用功能齐全的路线插件。 快速添加用户界面,以在地图上显示行车,骑车或步行的路线。 Mapbox Directions API由路由引擎提供支持,并从项目中打开数据。
有关本机移动和桌面应用程序中的路线功能,请参阅, 和 。
var mapboxgl = require ( 'mapbox-gl' ) ;
var MapboxDirections = require ( '@mapbox/mapbox-gl-directions' ) ;
var directions = new MapboxDirections ( {
accessToken : 'YOUR-MAPBOX-ACCESS-TOKEN' ,
unit : 'metric' ,
profile : 'mapbox/cycling'
} ) ;
var map = new mapbox
要在基于npm开发环境的应用程序中使用该库,请使用
npm install ol-mapbox-style
以这种方式安装后,只需导入ol-mapbox样式的模块,如下面的用法示例中所示。 要使用ol-mapbox样式的独立版本,只需在HTML页面上包含“ dist / olms.js”,然后访问全局olms对象即可。
下面的代码根据Mapbox的Bright v9样式创建一个OpenLayers映射:
import olms from 'ol-mapbox-style' ;
var key = 'Your Mapbox Access Token here' ;
olms ( 'map' , 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=' +
这种
效果如何实现的
这个是我由两个
图层做出
效果 颜色之类的可以修改 (如果想
发光更亮就可以用更多
图层,更低的透明度,加上模糊程度,最关键的白线色
图层要最后再加)
1:先创建一个颜色为绿色 宽度为8的
图层 模糊程度可以设置为3
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
使用OpenStreetMap,Mapbox和Turf进行SPHERE映射
难民营中的水分配是良好营地管理的关键部分,并且受到强制要求,该设定了人道主义行动的标准,以提高质量和问责制。 SPHERE手册规定了标准,例如营地居民应获得多少水,以及取水必须行进的最大距离:少于500米()。 然后,对难民营中的水可及性进行实用的GIS分析,可以确保该难民营的所有部分都在某种水分配点的500米之内。
在本练习中,我们将构建一个交互式地图,该地图允许用户通过单击地图来确定哪些点落在指定的距离或半径内。 这种类型的分析也称为缓冲液分析。 目的是提供一种工具,营地管理人员可以使用该工具来识别营地中没有足够水源的部分。 有多种方法可以做到这一点。 我们将使用来自OpenStreetMap(或“ OSM”),Mapbox和。 我们的最终地图将允许用户在地图上的任意位置单击,并找到位于所单击点半径500米以