mapBox使用笔记

项目需要，以mapBox为基础开发地图相关大屏展示，记录开发与学习。
基础的地图渲染熟悉一些以后还是比较容易的，就是刚开始不熟一脸懵，先附上文档地址
英文地址：https://www.mapbox.com/maps/
中文文档：http://www.mapbox.cn/ 中文文档里里还是会有很多英文只是简单的介绍为中文了
简单样例：
效果展示

<!--dom部分-->
<div :id="mapID" class="s-map" />

// js部分
import mapboxGL from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'data() {return {mapStyle: {version: 8,glyphs: 'url', // 天地图或mapbox  .pdf文件sources: {'raster-base-tiles': {type: 'raster',tiles: ['url'], // 此为城市底图tileSize: 256,zoomOffset: -1},'raster-tiles': {type: 'raster',tiles: ['http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的秘钥'],tileSize: 256,zoomOffset: -1},'raster-label-tiles': {type: 'raster',tiles: ['url'], // 此为城市标注tileSize: 256,zoomOffset: -1}},layers: [{id: 'tdt-base-tiles',type: 'raster',source: 'raster-base-tiles',minzoom: 0,maxzoom: 22},{id: 'tdt-img-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22},{id: 'tdt-label-tiles',type: 'raster',source: 'raster-label-tiles',minzoom: 0,maxzoom: 22}]}}
}methods: {initMap() {var hoveredStateId = nulllet self = this// 初始化地图mapboxGL.accessToken ='你的秘钥'self.map = new mapboxGL.Map({style: self.mapStyle,center: {lng: 107.6,lat: 34.655},zoom: 5.8,pitch: 15,minZoom: 5,maxZoom: 17,container: self.mapID// pitchWithRotate: false // 将不会在"拖拽进行地图旋转"的同时控制地图的倾斜。})// 加载指北针图表// self.map.addControl(new mapboxGL.NavigationControl());// 加载地图比例尺self.map.addControl(new mapboxGL.ScaleControl({maxWidth: 80,unit: 'metric'}),'bottom-left')self.map.on('click', function (e) {})self.map.on('load', function () {self.map.addSource('states', {type: 'geojson',data: self.baseUrl + '/static/json/610000_full.geojson'})// 覆盖的高亮显示self.map.addLayer({id: 'state-fills',type: 'fill',source: 'states',layout: {},paint: {'fill-color': 'rgba(135, 250, 254, 0.3)','fill-opacity': ['case',['boolean', ['feature-state', 'hover'], false],1,0.5]}})// 覆盖的高亮描边self.map.addLayer({id: 'state-lines',type: 'line',source: 'states',layout: {},paint: {'line-color': 'rgba(135, 250, 254, 1)','line-width': 2}})})// 地图初始化完成后，调用父组件的回调方法self.$emit('onMapLoaded', self.map)},// 定位到指定经纬度addPointFn(cityObj) {cityObj.num = cityObj.num === undefined ? '' : cityObj.numconst self = this// 时间戳const timestamp = new Date().valueOf()let currEventColor = ''if (this.currColors && this.currColors.length > 0) {this.currColors.forEach(element => {if (element.id === feature.properties.featurecode.replace('.', '')) {currEventColor = element.color + '91'}})}const x = cityObj.pos[0]const y = cityObj.pos[1]// 添加动态图标const size = 200const pulsingDot = {width: size,height: size,data: new Uint8Array(size * size * 4),onAdd: function () {const canvas = document.createElement('canvas')canvas.width = this.widthcanvas.height = this.heightthis.context = canvas.getContext('2d')},render: function () {const duration = 1000const t = (performance.now() % duration) / durationconst radius = (size / 2) * 0.3const outerRadius = (size / 2) * 0.7 * t + radiusconst context = this.contextcontext.clearRect(0, 0, this.width, this.height)context.beginPath()context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2)context.fillStyle = 'rgba(51, 102, 204,' + (1 - t) + ')'context.fill()context.beginPath()context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2)// context.fillStyle = 'rgba(255, 100, 100, 1)'context.fillStyle = currEventColorcontext.strokeStyle = 'white'context.lineWidth = 2 + 4 * (1 - t)context.fill()context.font = '28px Arial'context.textAlign = 'center'context.textBaseline = 'middle'context.fillStyle = '#e6b600'context.stroke()context.fillText(cityObj.num, this.width / 2, this.height / 2)this.data = context.getImageData(0, 0, this.width, this.height).dataself.map.triggerRepaint() // 闪动效果return true}}this.mapImageIdList.push('a-' + cityObj.code + timestamp + 'positionimg') // 保存下已有的id 便于之后删除this.mapLayerIdList.push('a-' + cityObj.code + timestamp + 'positionpoints')self.map.addImage('a-' + cityObj.code + timestamp + 'positionimg', pulsingDot, {pixelRatio: 2})self.map.addLayer({id: 'a-' + cityObj.code + timestamp + 'positionpoints',type: 'symbol',source: {type: 'geojson',data: {type: 'FeatureCollection',features: [{type: 'Feature',geometry: {type: 'Point',coordinates: [x, y]}}]}},layout: {'icon-image': 'a-' + cityObj.code + timestamp + 'positionimg','icon-ignore-placement': true}})self.map.on('mouseenter', 'a-' + cityObj.code + timestamp + 'positionpoints', function () {self.map.getCanvas().style.cursor = 'pointer'})self.map.on('mouseleave', 'a-' + cityObj.code + timestamp + 'positionpoints', function () {self.map.getCanvas().style.cursor = ''})// 记录上一个点位的点位层名// this.eventPointTimestamp.push('a-' + timestamp)// console.log(this.eventPointTimestamp)},addPop(obj) { // 地图图层上插入自定义内容const self = thislet str = ''const content = `<div class="map-pop-style">${str}</div>`self.popup = new mapboxGL.Popup({ closeButton: true }).setLngLat(obj.pos).setHTML(content).addTo(self.map)},
}

简单的示例就完成了。其中addSource里的data属性值geojson为阿里云获取
阿里云geojson获取地址DataV.GeoAtlas地理小工具系列
另echarts geojson获取地址
echarts-china-cities-js/geojson/shape-only at master · echarts-maps/echarts-china-cities-js · GitHub

从echarts资源列表里也可以查到

https://github.com/ecomfe/awesome-echarts

点击地图高亮展示也是类似的操作
1. 捕获地图点击事件
2. 通过地图坐标获取相应市或区县 geoJson文件
3. 调用地图addSource方法加载图层，paint属性内配置相应线或面的颜色。

mapbox属性内配置项文档在style分类里地址为
http://www.mapbox.cn/mapbox-gl-js/style-spec/

后续更新地图上标记地点

mapBox使用笔记相关推荐

Mapbox学习笔记（1）——style
目录改变一个地图的样式改变一个地图的样式地图样式:map的style属性 mapbox://styles/mapbox/streets-v10 mapbox://styles/mapbox/ou ...
Mapbox Android学习笔记（8）离线地图
Offline 通常,您可能会发现您的用户群大部分时间都不在网格上.Maps SDK允许您下载和存储预先选择的区域,以便在设备脱机时使用.下载地图的结果是使用下载区域内的style.tile和其他资源 ...
Unity中使用Real World Terrain插件下载Mapbox真实游戏地图场景的地形数据经验笔记
上文记录了在unity中使用WorldComposer下载,本文继续整理一篇Unity资源商店上比较优质的地形插件"Real World Terrain". 附上商店上官网链接: ...
Mapbox 笔记1（Mapbox 是如何工作的）
文章目录 Mapbox 是如何工作的 Access Token Token的使用范围 URL 限制创建和管理 access token 创建新数据 geojson数据格式创建数据集数据集转换为 ...
Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...
初识mapbox GL
一.概述最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发.有 ...
使用 Mapbox 在 Vue 中开发一个地理信息定位应用
⭐️ 本文首发自前端修罗场(点击加入),是一个由资深开发者独立运行的专业技术社区,我专注 Web 技术.Web3.区块链.答疑解惑.面试辅导以及职业发展.博主创作的 <前端面试复习笔记& ...
Mapbox特效(3D飞线)
时间不早了.不说废话了.先上效果原理: Mapbox的customLayer+ three.js的QuadraticBezierCurve3.把线进行分段,每次只显示一部分,动态更改显示的部分就可以 ...
ConvNeXt V2 论文笔记
ConvNeXt V2: Co-designing and Scaling ConvNets with Masked Autoencoders(2023.1.2-v1) 链接: paper ...

mapBox使用笔记

mapBox使用笔记相关推荐

最新文章

热门文章