地图框架之mapbox——（四）

最新推荐文章于 2025-04-01 11:50:22 发布
最新推荐文章于 2025-04-01 11:50:22 发布
阅读量699 收藏 11
点赞数 7
分类专栏： mapbox 文章标签： 前端 mapbox webgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45751819/article/details/143593049
版权

今天来波大的，把图形绘制与图层全部说完，这也是我这几天的整理成果。

一、绘制点

1、添加一个点，点击点的样式改变

核心代码，该api用于修改绘制参数

map.on("click", () => {
                  map.setPaintProperty('Point', 'circle-color', '#faafee');
            })
<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" rel="stylesheet">
      <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
      <script src='https://lib.baomitu.com/jquery/2.2.4/jquery.js'></script>
      <style>
            html,
            body {
                  overflow: hidden;
                  margin: 0;
            }

            #map {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  width: 100%;
            }
      </style>
</head>

<body>
      <div id="map"></div>
      <script>
            mapboxgl.accessToken = '你的token';
            const map = new mapboxgl.Map({
                  container: 'map', // container ID
                  style: 'mapbox://styles/mapbox/streets-v12', // style URL
                  center: [114.30, 30.50],
                  zoom: 12,
                  projection: 'globe'
            });
            
            map.on("load", function () {
                  map.addSource('point', {
                        type: 'geojson',
                        data: {
                              "type": "Feature",
                              "geometry": {
                                    "type": 'Point',
                                    "coordinates": [114.30, 30.50]
                              }
                        }
                  })
                  map.addLayer({
                        id: 'Point',
                        type: "circle",
                        //设置数据源
                        source: 'point',
                        //绘制参数
                        paint: {
                              'circle-opacity': 0.8,
                              "circle-radius": 15,
                              "circle-color": "#ff2d51",
                              "circle-stroke-width": 4,
                              //设置边线颜色
                              "circle-stroke-color": '#ffcc33',
                              'circle-opacity':0.5
                        }
                  })
            })
            map.on("click", () => {
                  map.setPaintProperty('Point', 'circle-color', '#faafee');
            })
      </script>
</body>

</html>

2、添加多个点，设置图层点击事件，点击图层上的元素，元素变色

核心逻辑和代码：设置高亮图层，点击元素，将元素获取到并设置到高亮图层中

map.on("click", "Point", evt => {
                  console.log(evt.features[0])
                  let feature = e.features[0]
                 map.getSource('high_point').setData(feature)
            })
<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" rel="stylesheet">
      <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
      <script src='https://lib.baomitu.com/jquery/2.2.4/jquery.js'></script>
      <style>
            html,
            body {
                  overflow: hidden;
                  margin: 0;
            }

            #map {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  width: 100%;
            }
      </style>
</head>

<body>
      <div id="map"></div>
      <script>
            mapboxgl.accessToken = '你的token';
            const map = new mapboxgl.Map({
                  container: 'map', // container ID
                  style: 'mapbox://styles/mapbox/streets-v12', // style URL
                  center: [114.30, 30.50],
                  zoom: 12,
                  projection: 'globe'
            });
            //geojson数据
            const data = {
                  type: "FeatureCollection",
                  features: [
                        {
                              "type": "Feature",
                              "geometry": {
                                    "type": 'Point',
                                    "coordinates": [114.30, 30.50]
                              },
                              properties: {
                                    id: 1001,
                                    name: "武昌"
                              }
                        },
                        {
                              "type": "Feature",
                              "geometry": {
                                    "type": 'Point',
                                    "coordinates": [114.30, 30.520]
                              },
                              properties: {
                                    id: 1001,
                                    name: "蔡甸"
                              }
                        }
                  ]
            }
            map.on("load", function () {
                  map.addSource('point', {
                        generateId: true,
                        type: 'geojson',
                        data
                  })
                  map.addLayer({
                        id: 'Point',
                        type: "circle",
                        //设置数据源
                        source: 'point',
                        //绘制参数
                        paint: {
                              'circle-opacity': 0.8,
                              "circle-radius": 18,
                              "circle-color": "#ff2d51",
                              "circle-stroke-width": 4,
                              //设置边线颜色
                              "circle-stroke-color": '#ffcc33'
                        }
                  })
    //临时高亮图层
                      map.addSource('high_point', {
                        generateId: true,
                        type: 'geojson',
                        data:{
        type: 'FeatureCollection',
        features: []
      }
                  })
                  map.addLayer({
                        id: 'high_Point',
                        type: "circle",
                        //设置数据源
                        source: 'high_point',
                        //绘制参数
                        paint: {
                              'circle-opacity': 0.8,
                              "circle-radius": 18,
                              "circle-color": "red",
                              "circle-stroke-width": 4,
                              //设置边线颜色
                              "circle-stroke-color": '#ffcc33'
                        }
                  })
            })
            map.on("click", "Point", evt => {
                  console.log(evt.features[0])
let feature = e.features[0]
 map.getSource('high_point').setData(feature)
            })
      </script>
</body>

</html>

3、设置鼠标形状

类似mouseenter这周api可以去mapbox官网查询

Map | Mapbox GL JS | Mapbox

map.on("load", function () {
  map.on('mouseenter', 'Point', () => {
    map.getCanvas().style.cursor = 'pointer';
  });

  // Change the cursor back to a pointer
  // when it leaves the states layer.
  map.on('mouseleave', 'Point', () => {
    map.getCanvas().style.cursor = 'default';
  });

})

4、点击事件改变元素位置

核心思路：点击获取坐标，把点击获取的坐标替换掉原来的坐标

map.on("click", (evt) => {
  // console.log(evt.lngLat)
  let { lng, lat } = evt.lngLat;
  let feature = {
    type:"Feature",
    geometry:{
      type:"Point",
      coordinates:[lng,lat]
    }
  }
  map.getSource("point").setData(feature);
})

二、绘制线

1、实线

map.on("load", () => {
  addLine();
})
function addLine() {
  //用geojson创建一条线
  var geometryLine = {
    "type": "Feature",
    "geometry": {
      "type": "LineString",
      "coordinates": [[114.30, 30.50], [116, 30.50]]
    }
  };
  //将线添加到一个图层中，在地图中显示
  map.addLayer({
    //此id可随意设置，但是要唯一
    "id": "Line",
    //指定类型为线
    "type": "line",
    //设置数据来源
    "source": {
      "type": "geojson",
      "data": geometryLine
    },
    //设置绘制参数
    "paint": {
      //设置线颜色
      "line-color": "#1990FF",
      //设置线宽度，像素单位
      "line-width": 4,
      'line-opacity': 0.6
    }
  });
}

2、虚线

<!DOCTYPE html>
  <html>

  <head>
  <meta charset="utf-8">
  <title>Add an ant path animation to a line</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
  <style>
  body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>
  </head>

  <body>
  <div id="map"></div>
  <script>
  mapboxgl.accessToken = '你的token';
const map = new mapboxgl.Map({
  container: 'map', // container ID
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: 'mapbox://styles/mapbox/dark-v11', // style URL
  center: [-73.9709, 40.6712], // starting position [lng, lat]
  zoom: 15.773 // starting zoom
});

const geojson = {
  'type': 'FeatureCollection',
  'features': [
    {
      'type': 'Feature',
      'properties': {},
      'geometry': {
        'coordinates': [
          [-73.97003, 40.67264],
          [-73.96985, 40.67235],
          [-73.96974, 40.67191],
          [-73.96972, 40.67175],
          [-73.96975, 40.67154],
          [-73.96987, 40.67134],
          [-73.97015, 40.67117],
          [-73.97045, 40.67098],
          [-73.97064, 40.67078],
          [-73.97091, 40.67038],
          [-73.97107, 40.67011],
          [-73.97121, 40.66994],
          [-73.97149, 40.66969],
          [-73.97169, 40.66985],
          [-73.97175, 40.66994],
          [-73.97191, 40.66998],
          [-73.97206, 40.66998],
          [-73.97228, 40.67008]
        ],
        'type': 'LineString'
      }
    }
  ]
};

map.on('load', () => {
  map.addSource('line', {
    type: 'geojson',
    data: geojson
  });

  // add a line layer with line-dasharray set to the first value in dashArraySequence
  map.addLayer({
    type: 'line',
    source: 'line',
    id: 'line-dashed',
    paint: {
      'line-color': 'yellow',
      'line-width': 6,
//该属性会将实线打断为虚线
      'line-dasharray': [0,3,1]
    }
  });
});
</script>

  </body>

  </html>

3、点击事件连线

核心思路：就是通过点击事件不断获取新的点坐标，将点坐标push到coordinates中

var geometryLine = {
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [[114.30, 30.50], [114.4, 30.50]]
  }
};
map.on("style.load", () => {
  map.addSource("line-source", {
    "type": "geojson",
    "data": geometryLine
  })
  //将线添加到一个图层中，在地图中显示
  map.addLayer({
    //此id可随意设置，但是要唯一
    "id": "Line",
    //指定类型为线
    "type": "line",
    //设置数据来源
    "source": "line-source",
    //设置绘制参数
    "paint": {
      //设置线颜色
      "line-color": "#1990FF",
      //设置线宽度，像素单位
      "line-width": 4,
      'line-opacity': 0.6
    }
  });
})
map.on("click", (evt) => {
  // console.log(evt.lngLat)
  let { lng, lat } = evt.lngLat;
  geometryLine.geometry.coordinates.push([lng, lat]);
  // console.log(geometryLine);
  map.getSource("line-source").setData(geometryLine)
})

三、绘制圆

通过点画圆

function addCircle() {
    //用geojson创建一个点
    var geometryCircle = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [114, 30]
        }
    };
    //将圆添加到一个图层中，在地图中显示
    map.addLayer({
        //此id可随意设置，但是要唯一
        "id": "Circle",
        //指定类型为circle(圆)
        "type": "circle",
        //设置数据来源
        "source": {
            "type": "geojson",
            "data": geometryCircle
        },
        //设置绘制参数
        "paint": {
            //设置点的半径，像素单位
            "circle-radius": 30,
            //设置点的填充颜色
            "circle-color": 'white',
            //设置边线宽度，像素单位
            "circle-stroke-width": 2,
            //设置边线颜色
            "circle-stroke-color": '#ffcc33'
        }
    });
}

四、绘制矩形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入mapbox的依赖 js+css -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、实例化地图 */
        mapboxgl.accessToken = '你的token';
        const map = new mapboxgl.Map({
            /* 将地图挂载到对应的DOM上 相当于ol的target */
            container: "map",
            /* 相当于ol的layers */
            style: "mapbox://styles/mapbox/streets-v12",
            center: [114.30, 30.50],
            zoom: 6
        })
     
        var data = {
            type: "Feature",
            geometry: {
                type: "Polygon",
                coordinates: [
                    [
                        [114.30, 30.50], [116, 30.50],
                        [116, 28], [114.30, 28], [114.30, 30.50]
                    ]
                ]
            }
        }
        map.on("style.load", () => {
            
            //填充
            map.addLayer({
                id:"box-fill",
                type:"fill",
                source:{
                    type:"geojson",
                    data
                },
                paint:{
                    'fill-color':"red",
                    'fill-opacity':0.5
                }
            })
            /* 描边 line */
            map.addLayer({
                id:"box-stroke",
                type:"line",
                source:{
                    type:"geojson",
                    data
                },
                paint:{
                    'line-color':"#333",
                    'line-width':3
                }
            })

        })
    </script>
</body>

</html>

五、添加多边形

方式一不带描边

function addPolygon() {
  //用geojson创建一个多边形
  var geometryPolygon = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [100, 40],
              [110, 40],
              [115, 35],
              [110, 30],
              [100, 30],
              [95, 35],
            ],
          ],
        },
      },
    ],
  };
  //将多边形添加到一个图层中，在地图中显示
  map.addLayer({
    //此id可随意设置，但是要唯一
    id: "Polygon",
    //指定类型为fill（填充区域）
    type: "fill",
    //设置数据来源
    source: {
      type: "geojson",
      data: geometryPolygon,
    },
    //设置绘制参数
    paint: {
      //设置填充颜色
      "fill-color": "#ffcc33",
      //设置透明度
      "fill-opacity": 0.9,
    },
  });
}

方式二带描边

map.addSource("maine", {
  type: "geojson",
  data: {
    type: "Feature",
    geometry: {
      type: "Polygon",
      // These coordinates outline Maine.
      coordinates: [
        [
          [114, 30],
          [114, 20],
          [130, 20],
          [130, 30],
          [114, 30]
        ],
      ],
    },
  },
});

// Add a new layer to visualize the polygon.
map.addLayer({
  id: "maine",
  type: "fill",
  source: "maine", // reference the data source
  layout: {},
  paint: {
    "fill-color": "#0080ff", // blue color fill
    "fill-opacity": 0.5,
  },
});
// Add a black outline around the polygon.
map.addLayer({
  id: "outline",
  type: "line",
  source: "maine",
  layout: {},
  paint: {
    "line-color": "#000",
    "line-width": 3,
  },
});

MAPBOX制作专题图
吴道简的博客
01-29 1292
最近看了一份人民大学的报告，《中国城市政商关系排行榜2020》，https://new.qq.com/omn/20201230/20201230A0F3MY00.html。 讲的是中国各个城市的政商关系健康指数，决定拿这份报告中的数据，来做一份html的专题图。 数据是使用python脚本从腾讯地图webapi上获取的，前端页面使用的是高德地图瓦片。 效果如下： 一、数据获取 参考腾讯web api：https://lbs.qq.com/service/webService/web...
使用mapbox自定义绘制工具（point，line，polygon，circle，rectangle）
热门推荐
weixin_44539540的博客
04-22 1万+
mapbox自定义绘制工具如何使用mapbox绘制常用的工具需要引入的资源创建div引入mapbox实例设置circle工具创建 point 绘制工具创建line绘制工具创建polygon（多边形）绘制工具创建 rectangle（矩形）绘制工具清除图层（layer）和资源(source) 如何使用mapbox绘制常用的工具 每次在网上查资源，尼玛脑袋疼，好多大神写的啥玩意呀。我们知道，操作地图不外乎就是一些事件，其实mapbox有一些关于绘制工具的一些插件，也可以自己定义绘制工具。 我这里的demo，就是
mapbox api
weixin_35756373的博客
02-10 746
Mapbox API是一个地图开发者工具，可以用来创建、定制和发布地图。它提供了一系列的地图、导航和位置数据API，以满足各种应用程序和网站的地图需求。Mapbox API是基于云计算技术构建的，具有高可用性和可扩展性，可以帮助开发者快速构建功能丰富的地图应用程序。 ...
mapboxapi：R语言中的Mapbox API接口，实现地理数据可视化与分析
最新发布
gitblog_00340的博客
04-01 543
mapboxapi：R语言中的Mapbox API接口，实现地理数据可视化与分析 mapboxapi R interface to Mapbox web services 项目地址: https://gitcode.com/gh_...
Mapbox 添加标记点（二）
不同场景下的水平居中
01-20 6412
mapbox 地图添加标记点：图片预加载、marker打点方式
Mapbox Api
weixin_42112342的博客
04-18 923
mapbox
Mapbox添加多个不同的点图标
ssy001128的博客
06-07 1020
【代码】Mapbox添加多个不同的点图标。
Mapbox4490版，可以加载CGCS2000坐标系数据源
12-03
Mapbox 是一个强大的开源地图渲染库，用于创建交互式、自定义的地图。在这个特定的版本——Mapbox4490，它已经得到了扩展，能够支持加载CGCS2000（中国大地坐标系2000）的数据源。这是一个重要的更新，因为CGCS2000...
MapBox最新得.rar mapbox
11-16
总之，MapBox是一个强大且灵活的地理空间服务框架，通过Unity包的形式，使得开发者能够在Unity项目中轻松地集成复杂的地图功能。MapBox 2.1.1是其最新的版本，提供了丰富的地图服务和定制选项，能够满足各种类型的...
mapbox资源请求流程梳理
02-25
Mapbox是一个功能强大的地图服务工具包，它提供了丰富的API和SDK供开发者使用。本文档将对Mapbox资源请求流程进行深入分析，尤其关注样式(style)加载过程中的网络请求与本地请求。 **1.1 资源请求框架** Mapbox的...
mappa:Mappa——主题地图引擎
06-18
- **地图渲染**：Mappa支持多种地图服务，如OpenStreetMap、Google Maps、Mapbox等，可以轻松加载和展示不同底图。 - **图层管理**：允许用户添加、删除和管理地图上的不同图层，如点、线、面等地理要素。 - **...
实现Android地图应用的Cordova Mapbox SDK插件
1. **Cordova 插件**: Cordova 是一个开源的移动应用开发框架，允许你使用标准的 Web 技术——HTML5、CSS3 和 JavaScript 来开发跨平台的移动应用程序。插件机制是 Cordova 的核心特性之一，它允许开发者通过 ...
Mapbox 添加标记点（一）
不同场景下的水平居中
10-08 3131
效果图： 实现： map组件： <template> <div style="height: 100%; width: 100%; text-align: left"> <div ref="basicMapbox" :style="mapSize" class="mapClass"></div> </div> </template> <script> import mapboxgl from 'mapbox
mapbox基础:绘制点/线/面，以及监听绘制修改
dada914的博客
11-29 6954
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 目录系列文章目录前言一、初始化MapBox1.引入js1.在HTML页面引入js二、使用步骤1.引入库2.读入数据总结 前言 第一次使用mapbox，只是记一下，以免忘记，仅供参考 一、初始化MapBox 1.引入js 由于我是在layui框架内，等同于原生代码里面要新增一个地图，所以要先在对应的页面引入js； 1.在HTML页面引入js 二、使用步骤 1.引入库 代码如下（示例）： import numpy as
mapbox画点、线、面、文字方法封装
weixin_48294772的博客
09-06 876
mapbox画点线面文字方法封装
mapbox api Android,mapbox-android
weixin_34369597的博客
05-28 535
如何使用mapbox方向api通过多个坐标绘制路线，以及如何在方向api调用时传递航路点列表。 旧版本已弃用，现在我无法通过路标列表，并且我也检查了文档，但是没有任何帮助，请告诉我。代码：enter code here@Overridepublic void onMapReady(@NonNull MapboxMap mapboxMap) {mapboxMap.setStyle(Style.MA...
MapBox-gl绘制点及点线
chubu3218的博客
03-15 2231
1.数据来源 setTargets(targets) { this.targets = []//所有目标对象数组 this.tgtID = new Map()//不同ID对应颜色不同 for (let key of this.tgtIdLineData.keys()) { let newArr = [] this.tgtIdLineData.set(key,newArr) }
mapBox地图的打点聚合，多种图标展示/二、导入json文件，添加镇街图层
m0_60827885的博客
11-04 3386
mapBox地图的打点聚合，多种图标展示
mapbox-gl 展示 撒点 图层
aganliang的专栏
07-08 1590
基本流程： 1.map load的时候 添加vocter图层； 2.设置layer，并添加，默认隐藏； 3.menu动态添加一个图层，添加点击事件，回调函数设置图层的显示和隐藏； 4.var一个popup，设置其基本属性； 5.设置mouseenter, mouseleave回调函数； map.on('load', function() { map.addSource('spjks-2', { type: 'vector', url: 'http:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值