位置: IT常识 - 正文

mapbox使用教程(mapbox wms)

编辑:rootadmin
mapbox使用教程 文章目录mapbox前期准备创建,显影,删除图层,图层样式layers-type常用类型sources-type常用类型地图创建点地图创建图片、图标地图创建文字标注(标题)地图创建面,线给指定图层添加自定义弹出框地图创建容器绘制echarts/hightcharts图表地图平滑缩放显示所有boundarymapbox前期准备

推荐整理分享mapbox使用教程(mapbox wms),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:如何使用mapbox,如何使用mapbox,mapboxapi,mapbox wms,mapbox简易入门教程,mapbox怎么使用,mapbox简易入门教程,mapbox简易入门教程,内容如对您有帮助,希望把文章链接给更多的朋友!

mapbox 官网https://www.mapbox.com/ mapbox 教程 http://www.mapbox.cn/mapbox-gl-js/api/ mapbox可用图表类型-SuperMapiClient(客户端GIS程序开发工具)https://iclient.supermap.io/examples/mapboxgl/examples.html#viz-graphicLayer

填入申请的access token mapboxgl.accessToken =‘ ’

1.打开官网 注册登录

(填写个人信息,账单信息)

2.注册成功后 点击自己头像 account 接着会进入邮箱验证页面,显示一封包含验证说明的电子邮件已发送到刚刚注册时所填写的邮箱地址 3.验证完成以后去点击account

在前端加载js和css文件(html 文件中)

<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />//1.引入cdn js<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script> //或者2.安装依赖 获取js z插件npm install --save mapbox-gl

地图初始化

//导入mapbox-gl<div id='map'></div>mapboxgl.accessToken = '<your token>';const map = new mapboxgl.Map({container: 'map', //idstyle: 'mapbox://styles/mapbox/streets-v11', // mapbox官方的底图和样式文件preserveDrawingBuffer: true//允许地图导出为图片,center: [-74.5, 40], zoom: 9 });</script>创建,显影,删除图层,图层样式

创建

先创建数据源

//sourceId为用户自定义的数据源Id,为唯一值map.addSource('sourceId', {type: 'geojson',data: data,});

再创建图层

map.addLayer({ id: 'mapLayerId', type: "line" ,//设置当前图层类型 此为边 source: 'sourceId,//创建的数据源id layout: { visibility: "visible"//是否显影 }, paint: {//设置属性 'line-color': borderStyle.color, }},

显影图层

map.setLayoutProperty(‘操作的图层Id’, ‘visibility’, ‘设置的属性’);

map.setLayoutProperty(pointId, 'visibility', 'visible');map.setLayoutProperty(pointId, 'visibility', 'none');

重新创建图片图层(清除图层)

如果想用同样的id再次创建图层,需要清除当前图片图层以及图片id,数据id 注意:sourse必须最后移除,否则会报错

//判断存在才移除//图层Idif (map.getLayer(layerId)) {map.removeLayer(layerId);} //图片Idif (map.hasImage(pictrueId)) {map.removeImage(pictrueId);}if (map.getSource(sourceId)) {map.removeSource(sourceId);}

修改图层样式

map.setPaintProperty(’图层id‘,‘图层属性’, ’设置的属性值‘);

map.setPaintProperty(pointId,'circle-color', 12);map.setPaintProperty(pointId,'circle-radius', '#000000');layers-type常用类型mapbox使用教程(mapbox wms)

circle(圆点) symbol(符号) line(线) heatmap(热力图) fill(填充) fill-extrusion(三维填充) background(背景) raster(栅格) hillshade(坡面阴影)

sources-type常用类型

vector: 矢量 raster:影像 geojson:geojson格式数据 image:图像 video: 视频

地图创建点

const sourceId = 'typeId'; const pointId= 'pointId'; map.addSource(sourceId, {type: 'geojson',data: data,});//设置原点默认值 map.addLayer({id: pointId,type: 'circle',source: sourceId,// filter: ["!", ["has", "point_count"]],paint: { 'circle-color': ['get', 'color'], //多个点渲染不同的颜色 'circle-radius': ['get', 'size'], //多个点渲染不同的大小 //'circle-color':'#000', //'circle-radius':10, 'circle-stroke-width': 1,//边框 'circle-stroke-color': '#fff',//边框颜色 }, layout: { // 布局类属性 visibility: 'visible', // 可见性(可选值为 none、visible,默认值visible)},});

重新设置点样式

每个点一样的样式

//点id,属性名字,属性值map.setPaintProperty(pointId,'circle-color', 12);map.setPaintProperty(pointId,'circle-radius', '#000000');

每个点大小,颜色不一致

data.features.map((o) => {// color为传入的颜色数组// size为传入的大小数组// num为选择的某一个大分类// list为当前大分类下所有的点分类// indens为当前循环点属于该点分类的位置 其对应传入的color size位置data.features.map((o) => {if (list.indexOf(o.properties[num]) == -1) {list.push(o.properties[num]);}});data.features.map((o) => {var indexs = list.indexOf(o.properties[num]);o.properties.color = color[indexs];o.properties.size = size[indexs];});map.getSource(sourceId).setData(data);地图创建图片、图标

map.loadImage(imageUrl, function (error, image) { //imageUrl 图片地址 (http://线上图片、database图片格式地址)if (error) throw error; var pictrueId = 'pictrueId'; const sourceId = 'typeId'; const imgId= 'imgId'; map.addSource(sourceId, {type: 'geojson',data: data, });map.addImage(pictrueId, image);map.addLayer({id: imgId,type: 'symbol',source: sourceId,filter: ['!', ['has', 'point_count']],layout: {'icon-image': pictrueId,'icon-size': 10,'visibility': 'visible','icon-allow-overlap': true, // 是否允许图片重叠(可选,默认值为 false},});});});

updateImage图片

map.updataImage(pictrueId ,image)

此方法如果更新图片,必须要求更新的图片与原图片尺寸一致,否则会报错。

设置图片默认大小

map.loadImage(imageUrl, function (error, image) { 、、、image.height = 80image.width = 80、、、})地图创建文字标注(标题)

const sourceId = 'typeId';const textId= 'textId';map.addSource(sourceId, {type: 'geojson',data: data,});// 标注图层map.addLayer({id: textId,type: 'symbol',source: sourceId,filter: ['!', ['has', 'point_count']],layout: {'icon-image': '',visibility: 'none','text-field': '{time}',//此属性为需要显示的字段'text-size': 12,'text-offset': [0, 2],'text-allow-overlap': true, // 是否允许文本重叠(可选,默认值为 false。'text-anchor': 'top',},paint: {// 绘制类属性// 文本类属性(需要设置 text-field)样式才生效'text-color': '#000000', // 文本的颜色'text-translate': [0, 0], // 文本的平移(可选,通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]'text-translate-anchor': 'map', // 文本的平移锚点,即相对的参考物(可选,可选值为 map、viewport,默认为 map)},});

改变文字显示属性

//修改要显示的文字字段//name为传入要改变的文字字段//必须用{}包住哦!map.setLayoutProperty(textId, 'text-field', `{${name}}`);

注意

使用此方法创建的标注或标题字段无法添加改变边框

地图创建面,线

map.addLayer({//绘制面 id: 'mapLayerId', type: "fill" //fill类型一般用来表示一个面,一般较大 , source: sourceId, layout: { visibility: "visible" }, paint: { 'fill-color': '#000', "fill-opacity": 1 /* 透明度 */ } } map.addLayer({//绘制边 id: 'sourceId', type: "line" , source: mapLayerId+index, layout: { visibility: "visible" }, paint: { 'line-color': '#000', "line-width":1 } },给指定图层添加自定义弹出框

//鼠标移动时当前图层显示弹出框 popup: "",//弹窗 map.on('mousemove', 'layerId', function (e) {let feature = e.features[0]; if (that.popup) { //此id弹出框如果存在则移除他 that.popup.remove(); } //创建新的弹出框that.popup = new mapboxgl.Popup({ closeButton: false }); //setLngLat给弹出框设置坐标 //setHTML设置自定义显示的内容 //addTo将弹出框加到当前地图上 that.popup.setLngLat(e.lngLat) .setHTML(`<span>${feature.properties.QH_NAME}</span><br/><span>${key.label}</span>:<span>${feature.properties.value.toString().indexOf('.')==-1?feature.properties.value:Number(feature.properties.value).toFixed(1)}</span>`).addTo(map); //给弹出框设置自定义类 样式 //弹出框加类名 const popup = that.popup.getElement(); popup.classList.add('popupSelf') //弹出框子元素加类名 const popupElement = that.popup.getElement().children; popupElement[0].classList.add('set-popup-tip') popupElement[1].classList.add('set-popup-content') } //鼠标离开时去掉弹出框 map.on('mouseout', mapLayerId+index, function (e) { if (that.popup) { that.popup.remove(); that.popup = ""; } });地图创建容器绘制echarts/hightcharts图表

eCharts引用

<script src="http://www.echartsjs.com/dist/echarts-gl.min.js"></script>

//data为要绘制的对象数组,我们对他进行遍历,一次添加一个mapbox容器let donutList = [];data.forEach((item, itemIndex) => { let param = {map: map,data: item,itemIndex:itemIndex,} let marker = this.createDonut(param); // 创建好所有markerdonutList.push(marker);})createDonut({ data, itemIndex, map }) { let group = document.createElement("div"); group.className = "StackPictograph" ; group.style ='width:200px;'; let chartMarker = new mapboxgl.Marker(group).setLngLat([data.X, data.Y]).addTo(map);let myChart = echarts.init(group)let option = {backgroundColor: 'transparent',tooltip: {},xAxis: {},yAxis: {},series: []}; option && myChart.setOption(option); return chartMarker;}地图平滑缩放显示所有boundary

将边界设在视口中心,使用最大的缩放级别使其适应该视口

let boundaryFeatures = turf.bbox(layerObj.updeData.data); //boundaryFeatures =[ "103.23621", "30.222122", "104.76852", "31.232473"]// 地图平滑缩放显示所有boundarymap.fitBounds(//这两组坐标指的是区域的东南角的点和西北角的点。//写一个值就是定到一个点 [[-79, 43], [-73, 45]];[[boundaryFeatures[0], boundaryFeatures[1]],[boundaryFeatures[2], boundaryFeatures[3]]],{padding: 100 //以给定边界添加的以像素为单位的填充量。},{moveend: "mapFitBoundEnd"});

其中的moveend是自定义的属性,会在fitBounds中使用。 通过在fitBounds里传入参数就可以实现缩放结束的回调 回调mapFitBoundEnd表示缩放结束

本文链接地址:https://www.jiuchutong.com/zhishi/288823.html 转载请保留说明!

上一篇:一只栖息在树上的白喉三趾树懒,圭亚那埃塞奎博河树懒岛 (© Suzi Eszterhas/Minden Pictures)(栖息在树林中)

下一篇:Yolov5/Yolov7加入Yolov8 c2f模块,涨点(yolov教程)

  • 把握用户的四个心理,做好短信营销(把握用户的四个基本要求)

    把握用户的四个心理,做好短信营销(把握用户的四个基本要求)

  • 网络安全的软件有哪些(网络安全软件排行)

    网络安全的软件有哪些(网络安全软件排行)

  • iphone11可以无线充吗(iphone11可以无线充电的机型)

    iphone11可以无线充吗(iphone11可以无线充电的机型)

  • 华为点谷歌登录无反应(华为谷歌登录无法连接到网络)

    华为点谷歌登录无反应(华为谷歌登录无法连接到网络)

  • 华为手机字体怎么设置(华为手机字体怎么改成楷体)

    华为手机字体怎么设置(华为手机字体怎么改成楷体)

  • word出现问题弹窗关不掉(word出现问题弹窗关不掉 没有自动保存)

    word出现问题弹窗关不掉(word出现问题弹窗关不掉 没有自动保存)

  • 苹果6触屏失灵修复方法(苹果6触屏失灵乱跳怎么办)

    苹果6触屏失灵修复方法(苹果6触屏失灵乱跳怎么办)

  • 淘宝公益宝贝一般设置多少(淘宝公益宝贝一般捐赠多少合适)

    淘宝公益宝贝一般设置多少(淘宝公益宝贝一般捐赠多少合适)

  • 拼多多申请退款商家不处理,多久可以到账(拼多多申请退款后不寄回商品会怎样)

    拼多多申请退款商家不处理,多久可以到账(拼多多申请退款后不寄回商品会怎样)

  • 显示器一个坏点要退吗(显示器一个坏点能忍吗)

    显示器一个坏点要退吗(显示器一个坏点能忍吗)

  • 升降式全面屏什么意思(升降全面屏手机汇总)

    升降式全面屏什么意思(升降全面屏手机汇总)

  • 手机突然黑白色怎么回事(手机突然黑白色怎么解决方法)

    手机突然黑白色怎么回事(手机突然黑白色怎么解决方法)

  • 华为荣耀20怎么拍全景(华为荣耀20怎么开空调遥控器)

    华为荣耀20怎么拍全景(华为荣耀20怎么开空调遥控器)

  • 手机照片删不了怎么回事(苹果手机照片删不了)

    手机照片删不了怎么回事(苹果手机照片删不了)

  • 手机电池温度45度正常吗(手机电池温度45度)

    手机电池温度45度正常吗(手机电池温度45度)

  • 京东申请退款后优惠券和红包还会返回吗(京东申请退款后多久会自动退款)

    京东申请退款后优惠券和红包还会返回吗(京东申请退款后多久会自动退款)

  • 微信指纹支付怎么开启(微信指纹支付怎么在系统中录入指纹)

    微信指纹支付怎么开启(微信指纹支付怎么在系统中录入指纹)

  • 苹果xsmax面容坏了可以修吗(苹果xsmax面容坏了能卖多少钱)

    苹果xsmax面容坏了可以修吗(苹果xsmax面容坏了能卖多少钱)

  • 手机删除的软件怎么恢复(怎么看手机删除的软件)

    手机删除的软件怎么恢复(怎么看手机删除的软件)

  • word多了一页怎么删(word多了一页删不掉怎么办)

    word多了一页怎么删(word多了一页删不掉怎么办)

  • 电脑微信提示操作频率过快请稍后再试(电脑版微信提示)

    电脑微信提示操作频率过快请稍后再试(电脑版微信提示)

  • flyme6卸载自带应用(flyme8卸载系统应用)

    flyme6卸载自带应用(flyme8卸载系统应用)

  • vivoz3i处理器相当于骁龙多少(vivoz3i处理器相当于天玑多少)

    vivoz3i处理器相当于骁龙多少(vivoz3i处理器相当于天玑多少)

  • 苹果手机不用id的后果(苹果手机不用id号怎么下载软件)

    苹果手机不用id的后果(苹果手机不用id号怎么下载软件)

  • qq可以群发消息吗(消息群发app)

    qq可以群发消息吗(消息群发app)

  • qq申诉怎么改成英文(qq申诉怎么改成微信号)

    qq申诉怎么改成英文(qq申诉怎么改成微信号)

  • myfastupdate.exe - myfastupdate是什么进程文件 有什么用

    myfastupdate.exe - myfastupdate是什么进程文件 有什么用

  • c语言中realloc函数是什么(c语言realloc函数的用法)

    c语言中realloc函数是什么(c语言realloc函数的用法)

  • 公司注销章要销毁吗
  • 个人所得税分摊方式月扣除金额修改
  • 小规模差额征税会计分录实例
  • 售后维修收入怎么入账
  • 清算报告与清算方案区别
  • 会计凭证可分为哪三类
  • 城市生活垃圾处理收费管理办法
  • 以汽车出资
  • 安装工程通常有哪些工种
  • 期初未交增值税借方余额
  • 营业收入包括其收入吗
  • 非金融机构借款计入什么科目
  • 外购产品赠送他人合法吗
  • 营改增建筑业税率是多少
  • 如何开具红字专用发票信息表
  • 工程款填入申报表应税服务还是应税劳务一栏?
  • 其他应收款在资产负债表中是负数
  • 一般纳税人企业要交哪些税
  • 冲销暂估购入原材料的账务处理?
  • 税务发票原件
  • 以前年度未分配利润属于什么科目
  • 企业的银行存款日记账属于
  • 债券溢价发行会计分录举例
  • 在win10系统中,如何限制孩子玩原神游戏
  • win11重置系统保留我的文件
  • dolby audio设置
  • PHP:mb_stristr()的用法_mbstring函数
  • Chat GPT实用案例——VUE+Chat GPT实现聊天功能教程
  • 公司向股东借款多久必须归还
  • 土地转让注意事项有哪些
  • 先收票后收货
  • json解析漏洞
  • 前端开发常见的兼容性问题
  • 麻雀优化算法和鲸鱼算法哪个好
  • 不计提工资直接发放可以吗
  • 费用化支出需要摊销吗
  • 闭包怎么求
  • mysql有几种
  • 收到税务局退税怎么入账
  • 企业代收水电费算不算收入
  • 不征税收入和免税收入有哪些项目
  • 非定额备用金的使用范围
  • 国税里货币资金怎么算
  • 公司收取的门禁费用
  • 车保险名称
  • 防伪码显示查询次数和时间
  • 个体户与公司的差别
  • 员工工资可以当月计提当月发放吗
  • 企业的承兑汇票会计分录
  • 佣金支付给谁
  • 消防劳保
  • 跨两年的发票可以冲红吗
  • 预付卡发票如何做分录
  • 如何查询公司的营业执照照片
  • 债权投资和其他应收款的区别
  • 零售商品购进的核算需要设置什么科目
  • mysql8.0存储过程
  • centos6.4下mysql5.7.18安装配置方法图文教程
  • 阿里云ecs centos sysctl
  • SQL 中sp_executesql存储过程的使用帮助
  • guest怎么用
  • issch.exe
  • ubuntu网页打开很慢
  • linux 网站备份
  • linux shell awk 流程控制语句(if,for,while,do)详细介绍
  • win7怎么让系统更加快
  • liunx改时间命令
  • linux跨服务器调用shell脚本
  • Shell正则表达式获取指定字符串
  • cocos 2d x
  • javascript中数组
  • linux ls-l命令详解
  • unityxlua热更新方案
  • jQuery dataTables与jQuery UI 对话框dialog的使用教程
  • [置顶] 安卓手机连接IP100蓝牙打印机实现打印功能
  • 陕西国税电子税务局端还可以登录吗
  • 进口商品的消费税计入成本吗
  • 上海2023年个人所得税计算
  • 出口退税收入怎么做账
  • 云南省国家税务局网上办税服务厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设