位置: 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教程)

  • 出口退税的条件有哪些
  • 社保公积金计提是本月计提下月
  • 社保利息计入什么科目
  • 生产成本月末转到哪里
  • 非破产清算会计案例
  • 工会经费可以支付哪些费用
  • 用于在建工程的原材料进项税额可以抵扣吗
  • 印花税的计税依据怎么算公式
  • 企业清算期间留抵的税额如何做会计处理?
  • 社会保险与个人养老金的区别
  • 收到公司of
  • 个人抬头的通讯费可以做费用吗
  • 外管证的开具与注销流程
  • 广告发布税收编码
  • 什么叫变动费用
  • 园林工程的范围包括哪些?
  • 研发费用归集会计分录
  • 公司低价处理旧汽车涉税账务处理
  • 已核销的应收账款
  • 建账时选择什么会计制度
  • windows11下载后怎么安装
  • 个体工商户经营范围分类目录
  • 代理公司可以开服务费发票吗
  • 更新出现网络异常
  • 打开进程失败
  • 政策性搬迁会计处理案例
  • w10如何设置工作组
  • 公司员工的社保怎么查询
  • 属于工业企业期间费用的是
  • 工程竣工的条件是什么
  • 商贸企业小规模税率是多少
  • thinkphp获取数据库数据
  • 深入理解llvm
  • 进项税额准予抵扣的有哪些
  • 在建工程转无形资产 会计准则
  • php面向对象是什么意思
  • thinkphp5依赖注入
  • 滤波方案
  • php动态语言
  • 承租人经营租赁账务处理
  • 离职补偿金可以拖欠么
  • 内账增值税怎么计提
  • 存货成本费用
  • 以前年度盈余调整对应科目
  • 本年缴纳上年的所得税填年报
  • sqlserver函数语法
  • 主营业务成本的增加在哪一方
  • 储值卡金额算什么资产
  • 购货方发生退货的会计分录
  • 营改增后租金收入交什么税
  • 冲减当期利润
  • 长期待摊费用属于利润表项目吗
  • 应扣未扣税款对纳税人的处理
  • 现金存入银行的会计凭证
  • 产成品入库的单据是什么
  • 长期待摊费用包括增值税吗
  • 餐饮服务属于什么职业
  • win8系统打开软件很慢
  • xp系统 控制面板
  • macbookpro蓝牙找不到
  • micc是什么意思中文
  • rtmservice.exe - rtmservice是什么进程 有什么用
  • linux的newgrp
  • win7网络访问权限
  • win降级10.3.3
  • win7系统打不开设备与打印机
  • cocos2d动画
  • 构造函数中super()的作用
  • jquery遍历radio并选中
  • uploadify上传无反应
  • android开发技术介绍
  • shell脚本计算字符串长度
  • js如何打印服务器图片
  • 在javascript中如果不指明对象直接调用
  • 社保申报后多久缴费
  • 商丘银行几点上班
  • 销售哪些产品需办许可证
  • 厦门税务局发票查询系统
  • 沥青进口需要配额吗
  • 云旅游存在的问题及解决措施
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设