mapbox
侧耳倾听...
这个作者很懒,什么都没留下…
展开
-
mapbox-gl-draw 绘制态势标绘-分队战斗行动
mapbox-gl-draw 绘制态势标绘-分队战斗行动原创 2023-02-14 16:01:03 · 934 阅读 · 0 评论 -
mapboxgl 拖拽切换图层顺序
通过dragstart,dragenter,dragend方法来获取到他的id。dragenter方法实现他在移动过程中的样式。首先获取到他的列表先遍历加载他的图层。原创 2023-02-14 15:50:39 · 604 阅读 · 0 评论 -
mapbox展现地图
https://docs.mapbox.com/mapbox-gl-js/api/这个mapbox的官网,现在举个例子,展现地图直接上图<template> <div class="hello"> <div id="map" style="width: 2400px; height: 1000px;"></div> ...原创 2019-03-20 09:18:14 · 1088 阅读 · 0 评论 -
mapbox-gl-draw 绘制态势标绘-进攻方向(尾巴)
代码】mapbox-gl-draw绘制态势标绘-进攻方向(尾巴)原创 2022-07-15 17:07:36 · 932 阅读 · 1 评论 -
mapbox-gl-draw 绘制态势标绘-进攻方向
mapbox-gl-draw 绘制态势标绘-进攻方向原创 2022-06-29 09:56:51 · 1088 阅读 · 3 评论 -
mapbox-gl-draw 绘制态势标绘-双箭头
mapbox-gl-draw 绘制态势标绘-双箭头原创 2022-06-23 10:32:15 · 1519 阅读 · 1 评论 -
vue 使用mapboxgl 添加本地sprite雪碧图并且展示
文件放到public下面,运行后前面端口加上public下的位置在初始化的地方获取sprite.json文件 let request = new XMLHttpRequest(); request.open("get", window.location.origin + "/icons/sprite.json", true); request.onload = (oEvent) => { this.spriteJson = JSON.parse(re...原创 2022-04-18 13:34:27 · 2400 阅读 · 0 评论 -
mapboxgl-minimap
var map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v8", center: [-73.94656812952897, 40.72912351406106], zoom: 7});map.on("style.load", function () { // Possible position values are 'bottom-left', 'bott...原创 2022-01-06 13:35:29 · 787 阅读 · 0 评论 -
mapbox 分屏对比2
这个是纯手写https://blog.csdn.net/xm_w_xm/article/details/103843217mapboxglhttps://github.com/mapbox/mapbox-gl-sync-move<template> <div class="hello" style="height: 100%; width: 100%; position: relative"> <div class="map1" ..原创 2021-09-08 17:51:32 · 427 阅读 · 1 评论 -
mabox-gl 展示制定区域的影像,其他则有模态框
原理一、利用turf.mask将你想要的展示的geojson截取出来,这样就变成了一个中间镂空的geojsonturf.mask( ‘高亮数据’, ‘全球数据(这里用的正负180 和正负90)’);二、用中间镂空的geojson,颜色设置成你想要的模态框的颜色三、绘制一个高亮的位置,颜色设置成你想要的颜色就可以了zhegai() { if (map.getLayer("blueMask-line")) { map.removeLayer("blue...原创 2021-07-05 10:40:36 · 406 阅读 · 0 评论 -
MultiPolygon MultiLineString MultiPoint geometry数据格式
目录一、MutiPolygon1.1、MutiPolygon-相交2.2、MutiPolygon-不相交2.3 MutiPolygon-中间镂空2.4 MutiPolygon-中间镂空在嵌套二、MultiLineString三、MultiPoint一、MutiPolygon1.1、MutiPolygon-相交{ "type": "FeatureCollection", "features": [{ "type": "Feat.原创 2021-04-01 11:27:43 · 4299 阅读 · 0 评论 -
vue+mapbox-gl-draw 绘制矩形并添加第一个点
添加draw组件 let modes = MapboxDraw.modes; modes.draw_rectangle = DrawRectangle; //添加工具 this.draw = new MapboxDraw({ modes: modes, displayControlsDefault: false, }); map.addControl(this.draw, "top-right")..原创 2021-03-25 17:52:13 · 3658 阅读 · 4 评论 -
vue+mapboxgl 运行轨迹循环
最终的样子+mapboxgl 官网的例子 :https://docs.mapbox.com/mapbox-gl-js/example/animate-a-line/turf.js 官网:http://turfjs.org/requestAnimationFrame 详解 我觉得写的很好:https://www.jianshu.com/p/fa5512dfb4f5一、实现思路1、绘制线2、绘制一个点,将线的第一个点赋值给点3、将geometry中线的每个节点值 ...原创 2020-12-11 18:00:36 · 1847 阅读 · 0 评论 -
mapboxg 散点图
// 散点图 addScatterPlot() { console.log("加载散点图"); let source = { type: "vector", tiles: [ "后台服务/queryListCommonMvt/{z}/{x}/{y}.mvt?code=0" ] }; let inFoLayerscatterplot = { id: "scatt...原创 2020-08-20 09:31:35 · 617 阅读 · 0 评论 -
mapboxgl 点击矢量高亮显示
要求,点击乡镇的模块的数据让他的边界变成蓝色的,我们这里用了filter一、初始化加载矢量图层let inFoLayerfenpei = { id: "uuidfenpei", type: "fill", source: { type: "geojson", data: `${CONFIG.Service10}/qgzhdc/task/api/v1原创 2020-08-17 10:28:58 · 2470 阅读 · 0 评论 -
mapboxgl filter 筛选人员点位
通过对yhcsl 这个字段进行筛选 ! = null 的展示出来// 分配人员点位信息 let inFoLayerfenpeiry = { id: "uuidfenpeiry", type: "symbol", source: { type: "geojson", data: `${CONFIG.Service10}/qgzh...原创 2020-08-17 10:18:50 · 2341 阅读 · 2 评论 -
mapoxgl expressions paint 筛选内容和颜色分区
一、根据是否分配来查看,这个是判断布尔值paint: { "fill-outline-color": "#fff", "fill-color": [ "case", ["boolean", ["==", ["get", "zxr"], null], false], "#ff0000", "#6原创 2020-08-17 10:13:13 · 532 阅读 · 0 评论 -
vue+mapboxgl 鹰眼展示
一、实现效果话不多说直接上图,查看了 这个博主地址,https://blog.csdn.net/u014529917/article/details/62216130 他是用openlayer 写的二、什么是鹰眼1、首先要有两个地图 大图,小图,鹰眼范围图(简称鹰眼)2、大图移动,放大缩小的时候要相应的放大和缩小3、小图不动,鹰眼图放大和缩小时,大图展示相应的位置三、实现思路1、小图比大图的层级小4(我这边设置的是小4,也可以是2和3看需要)2、获取大图的屏幕四点坐标.原创 2020-06-10 17:51:15 · 1698 阅读 · 4 评论 -
mapbox 卷帘
画布多说直接上图,就是简单的卷帘功能首先的看官网的例子已经有啦,https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/所以改良一下就是这样的了<template> <div class="hello" style="height:100%;width:100%;position:rela...原创 2020-01-07 11:06:58 · 1386 阅读 · 5 评论 -
mapbox 分屏对比
我们要做的的是左右分屏后两张地图同步对比,而且可以切换数据,实现的效果图是这样的<template> <div class="hello" style="height:100%;width:100%;position:relative;"> <div class="map1" id="map1"></div> <d...转载 2020-01-05 14:57:02 · 1130 阅读 · 0 评论 -
mapbox 聚合图
话不多说先看效果图要实现的功能就是按照根据省份展示出各省上传的数据量首先我们可以查看mapboxgl官网有一个例子地址如下:https://docs.mapbox.com/mapbox-gl-js/example/cluster/可以复制过来直接查看是否有聚合图是这样的之后我想把数据的颜色变得有些透明的颜色,将字体的颜色改成白色的https://docs.mapbox....原创 2019-12-19 16:31:40 · 4876 阅读 · 4 评论 -
mapbox 实现draw 点击事件的更改
直接上图,相从右侧换到左侧的点击事件上面原始的添加一个点的方式是这样的,刚开始通过更改他的css发现不能实现,//添加工具 draw = new MapboxDraw({ displayControlsDefault: false, controls: { point: true // line_string: tru...原创 2020-06-18 14:25:36 · 3224 阅读 · 4 评论 -
mapbox 向地图添加Marker
方法有很多种一、var coordinates = document.getElementById("coordinates"); var map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", center: [0, 0],...原创 2019-04-15 11:22:15 · 8363 阅读 · 5 评论 -
mapbox FullscreenControl 全屏展示出现底部留黑
这个是我用天地图公司写的但是出现了全屏展示的时候出现了底部流黑,查看流黑是因为他默认给了900多的高度,我们加上这两句就可以了document.getElementsByClassName("mapboxgl-canvas")[0].style.height = "100%"; document.getElementsByClassName("mapboxgl-canvas")......原创 2019-03-28 14:45:24 · 746 阅读 · 0 评论 -
mapbox中常用的addControl组件
一、全屏map.addControl(new mapboxgl.FullscreenControl(), "top-left");二、放大缩小map.addControl(new mapboxgl.NavigationControl(), "top-right");原创 2019-03-22 17:01:04 · 3879 阅读 · 1 评论 -
mapbox常用的方法
一、setPitch设置地图的俯仰(倾斜)。相当于jumpTo({pitch: pitch})。参数pitch 要设置的音高,以度数为单位,远离屏幕平面(0-60)。(number)eventData 要添加到此方法触发的事件的事件对象的其他属性。(Object)返回Map:this二、jumpTo在没有动画过渡的情况下更改中心,缩放,方位和音高的任意组...原创 2019-03-22 16:55:11 · 2730 阅读 · 0 评论 -
mapbox setLayoutProperty 实现地图切换
上两篇分别写了地图的展示,和百度下标的样式,要求做一个可以切换地图的,先来个图片这个实现了线和点在地图中的切换https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/这个根据官网的例子做了处理,setLayoutProperty设置指定样式图层中布局属性的值。参数layer 要设置布局属性的图层的ID。(s...原创 2019-03-22 15:28:48 · 4862 阅读 · 0 评论