mapbox画点、线、面、文字方法封装

最新推荐文章于 2023-10-11 16:34:15 发布
最新推荐文章于 2023-10-11 16:34:15 发布
阅读量493 收藏 2
点赞数
文章标签： 数据可视化 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48294772/article/details/132710516
版权

目录

前言-地图初始化

map.js 代码如下：

/*
 * @Descripttion: 地图入口文件
 * @version: 
 * @Author: WangMingJun
 * @Date: 2023-08-04 09:11:44
 * @LastEditors: WangMingJun
 * @LastEditTime: 2023-08-05 10:46:31
 */

//id domid  callback
export function  createMap(id='map2d',callback){
    		  /******************************** 参数定义开始 ********************************/
      //定义配置对象
      var Cfg = {}
      //服务名称
      Cfg.mapWMTS_Gauss_Name = 'Gauss WMTS'
      //服务地址
      // Cfg.mapWMTS_Gauss_Url = 'http://158.10.0.219/arcgis/rest/services/PT_07_HP/MapServer/WMTS'
      //瓦片原点
      Cfg.mapWMTS_Gauss_tileOrigin = '-66000.0,75000.0'
      //服务版本
      Cfg.mapWMTS_Gauss_Version = '1.0.0'
      //图层标识
      Cfg.mapWMTS_Gauss_LayerIdentifier = 'PT_07_HP'
      //样式标识
      Cfg.mapWMTS_Gauss_StyleIdentifier = 'default028mm'
      //矩阵集名称
      Cfg.mapWMTS_Gauss_MatrixSet = 'default028mm'
      //比例尺
      // Cfg.mapWMTS_Gauss_Scales =
      //   '967620.9828608917,483810.49143044587,241905.24571522293,120952.62285761147,60476.31142880573,30238.155714402867,15119.077857201433,7559.538928600717,3779.7694643003583,1889.8847321501792,944.9423660750896,472.4711830375448'
     Cfg.mapWMTS_Gauss_Scales ='1024000,512000,256000,128000,64000,32000,16000,8000,4000,2000,1000,500'
		 //数据格式
      Cfg.mapWMTS_Gauss_Format = 'image/png'
      //图层范围 8156.459021,-2166.412666,-17658.940818,1847.769029
      // Cfg.mapWMTS_Gauss_TileFullExtent = '-17658.968247100234,-2166.4719941083636,1847.8231668325498,8156.412449628424'
      Cfg.mapWMTS_Gauss_TileFullExtent ='8156.459021,-2166.412666,-17658.940818,1847.769029'
			//地图级别偏移量
      Cfg.mapWMTS_Gauss_ZoomOffset = 0
      //投影单位
      Cfg.mapWMTS_Gauss_Uints = 'm'
      //投影
      Cfg.mapWMTS_Gauss_Projection = 'EPSG:3857'
      /******************************** 参数定义结束 ********************************/
			  //图层的顶层级别
      var scale = parseFloat(Cfg.mapWMTS_Gauss_Scales.split(',')[0])
      //比例尺转分辨率
      var resolution = GeoGlobe.Util.getResolutionFromScale(
        scale,
        Cfg.mapWMTS_Gauss_Uints
      )
      //最大分辨率
      var maxResolution = resolution * Math.pow(2, Cfg.mapWMTS_Gauss_ZoomOffset)
      //金字塔顶层左上角第一个瓦片的左上角X轴
      const topTileFromX = parseFloat(Cfg.mapWMTS_Gauss_tileOrigin.split(',')[0])
      //金字塔顶层左上角第一个瓦片的左上角Y轴
     const  topTileFromY = parseFloat(Cfg.mapWMTS_Gauss_tileOrigin.split(',')[1])
      //金字塔顶层左上角第一个瓦片的右下角X轴
      const topTileToX = topTileFromX + maxResolution * 512
      //金字塔顶层左上角第一个瓦片的右下角Y轴
      const topTileToY = topTileFromY - maxResolution * 512
      var origin = Cfg.mapWMTS_Gauss_tileOrigin.split(',')
      //高斯瓦片+高斯交互
      var gauss_gauss_mapcrs = {
        topTileExtent: [topTileFromX, topTileToY, topTileToX, topTileFromY],
        coordtransform: 'none',
      }
      var extents = Cfg.mapWMTS_Gauss_TileFullExtent.split(',')
      var x = parseFloat(extents[0]) + parseFloat(extents[2])
      var y = parseFloat(extents[1]) + parseFloat(extents[3])
			const map = new GeoGlobe.Map({
					mapCRS: gauss_gauss_mapcrs,
					container: 'map2d',
					maxZoom: 19, // 最大缩放级别
					minZoom: 4.2, // 最大缩放级别

					zoom: Cfg.mapWMTS_Gauss_ZoomOffset,
					// center: [x / 2, y / 2],
					center:[-7331.732615831789, 1929.152198216229],
					units: 'm',
					renderWorldCopies: false, // 是否创建地图副本
					isConstrain: true, // 设置地图是否在地图边界以内拖动 GeoGlobe
					isIntScrollZoom: false, // 缩放级别是否为整数处理模式
					preserveDrawingBuffer: true,//
					// dragRotate:false,
				
			})
			window.map = map
      map.on('load', () => {
        loadLayer()
        // const drawControl = new window.MapboxDraw({
        //   displayControlsDefault: false,
        //   controls: {},
        //   styles: [
        //     // ACTIVE (being drawn)
        //     // line stroke
        //     {
        //       'id': 'gl-draw-line',
        //       'type': 'line',
        //       'filter': ['all', ['==', '$type', 'LineString'], ['!=', 'mode', 'static']],
        //       'layout': {
        //         'line-cap': 'round',
        //         'line-join': 'round'
        //       },
        //       'paint': {
        //         'line-color': '#D20C0C',
        //         // "line-dasharray": [0.2, 2],
        //         'line-width': 2
        //       }
        //     },
        //     // polygon fill
        //     {
        //       'id': 'gl-draw-polygon-fill',
        //       'type': 'fill',
        //       'filter': ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
        //       'paint': {
        //         'fill-color': '#D20C0C',
        //         'fill-outline-color': '#D20C0C',
        //         'fill-opacity': 0.3
        //       }
        //     },
        //     // polygon mid points
        //     {
        //       'id': 'gl-draw-polygon-midpoint',
        //       'type': 'circle',
        //       'filter': ['all',
        //         ['==', '$type', 'Point'],
        //         ['==', 'meta', 'midpoint']],
        //       'paint': {
        //         'circle-radius': 3,
        //         'circle-color': '#fbb03b'
        //       }
        //     },
        //     // polygon outline stroke
        //     // This doesn't style the first edge of the polygon, which uses the line stroke styling instead
        //     {
        //       'id': 'gl-draw-polygon-stroke-active',
        //       'type': 'line',
        //       'filter': ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
        //       'layout': {
        //         'line-cap': 'round',
        //         'line-join': 'round'
        //       },
        //       'paint': {
        //         'line-color': '#D20C0C',
        //         // "line-dasharray": [0.2, 2],
        //         'line-width': 4
        //       }
        //     },
        //     // vertex point halos
        //     {
        //       'id': 'gl-draw-polygon-and-line-vertex-halo-active',
        //       'type': 'circle',
        //       // "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
        //       'paint': {
        //         'circle-radius': 5,
        //         'circle-color': '#578EFE'
        //       }
        //     },
        //     // vertex points
        //     {
        //       'id': 'gl-draw-polygon-and-line-vertex-active',
        //       'type': 'circle',
        //       'filter': ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
        //       'paint': {
        //         'circle-radius': 7,
        //         'circle-color': '#D20C0C',
        //       }
        //     },
        //   ]
        // })
        // map.$drawControl = drawControl
        // map.addControl(drawControl) //标绘
        // const MeasureControl = new GeoGlobe.Control.Measure({
        //   hasTools: false,
        // })
        // map.$MeasureControl = MeasureControl
        // map.addControl(MeasureControl) //测量
        addImage() 
        map.on('click', (evt)=>{
          const zoom = map.getZoom()
          let prePoint = map.getCenter()
          if (evt && evt.type !== 'zoomend') {
            prePoint = evt.lngLat
            copyUrl(prePoint.lng, prePoint.lat)
            callback&&callback({type:'mapClick',value:prePoint})
          }
      
        })
        map.on('mousemove', logMapinfo)
        map.on('zoomend', logMapinfo)
        callback&&callback({type:'mapLoad'})
      })

}




//获取层级
export function logMapinfo(evt) {
  const zoom = map.getZoom()
  let prePoint = map.getCenter()
  if (evt && evt.type !== 'zoomend') {
    prePoint = evt.lngLat
  }
  
  // this.$store.commit('setZindex', zoom)
  // this.$store.commit('setJwd', { lon: prePoint.lng, lat: prePoint.lat })

}

//复制
export function copyUrl(lon, lat) {
  // 模拟 输入框
  if (process.env.NODE_ENV === 'development') {
    var cInput = document.createElement('input')
    cInput.value = lon + ',' + lat
    document.body.appendChild(cInput)
    cInput.select() // 选取文本框内容
    // 执行浏览器复制命令
    // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
    // Input要在正常的编辑状态下原生复制方法才会生效
    document.execCommand('copy')
    // 复制成功后再将构造的标签 移除
    document.body.removeChild(cInput)
  }
}

//加载pio  落点时需要
export function addImage() {

  //参数：1.路径；2.是否遍历子目录；3.正则表达式
  const files = require.context('@/assets/images', true, /\.*\.jpg|jpeg|png$/).keys()
  const filelist = files.map(e => {
    const temp = e.slice(2).split('.')
    return {
      name: temp[0],
      gs: temp[1]
    }
  })
  console.log('🚀 ~ file: Map2d.vue:283 ~ filelist ~ filelist', filelist)
  filelist.forEach(e => {
    map.loadImage(require(`@/assets/images/${e.name}.${e.gs}`), (error, image) => {
      if (error) throw error
      map.addImage(e.name, image)
    })
  })

}

//loadLayer加载图层
export function loadLayer(){
    
        map.addLayer({
          id: 'map-basic',
          type: 'raster',
          source: {
            type: 'raster',
            tiles: [
              //暗色
              // 'http://158.10.0.219/arcgis/rest/services/PT_07_JCSJ/MapServer/tile/{z}/{y}/{x}?blankTile=false&token=bEbVt7F7-cerWxeIDDwylopxIcrF3BcMafhAdzD9JYwSrR0oH2hU2q8nmOZ-K1SlwK3mO7MWGBZiIOIorqyN76GumXAria4Y8bHjy2rE6z8id2j7XqeHbj-fSZDIy0eI'
              //亮色
              // 'http://158.10.0.219/arcgis/rest/services/PT_07_White/MapServer/tile/{z}/{y}/{x}?blankTile=false&token=bEbVt7F7-cerWxeIDDwylopxIcrF3BcMafhAdzD9JYwSrR0oH2hU2q8nmOZ-K1SlwK3mO7MWGBZiIOIorqyN76GumXAria4Y8bHjy2rE6z8id2j7XqeHbj-fSZDIy0eI'
              //影像图
              `${app_config.yxtMap}token=${app_config.mapToken}`

            ],
            maxzoom: 16,
            tileSize: 512,
            // zoomOffset:10,
          }
        })
        //注记图层
        map.addLayer({
          id: 'map-basic-label',
          type: 'raster',
          source: {
            type: 'raster',
            tiles: [
              `${app_config.yxtLabelMap}token=${app_config.mapToken}`
            ],
            minzoom: 5,
            maxzoom: 16,
            tileSize: 512,
            // zoomOffset:10,
          }
        })
}

使用方法

<template>
	<div id="map2d"></div>
</template>

<script>
	import { mapState } from 'vuex'

	import {
		setLayer,
		setLayerVisible,
		setHightLightLayerVisible,
		setLineLayerAndData,
		setFillLayerAndData,
		setTextLayerAndData
	} from '@/map2d/symbol'
	import { createMap } from '@/map2d/map'
	// import layerClickEvents2d from "@/map2d/layerClick2d";
	// import mapboxgl from '@cgcs2000/mapbox-gl'
	// mapboxgl.accessToken = 'pk.eyJ1Ijoic2FudG9yaW5penp6IiwiYSI6ImNqcWxwdDdsbDAwMHE0OHBpZmR1ZHJiYzQifQ.zz3lWDejAMyHwvsEQ0V4zw'
	export default {
		name: 'Map2d',
		computed: {
			...mapState(['isPoint']),
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				createMap('map2d', (e) => {//回调
					if (e.type == 'mapLoad') {
						//画点
						// setLayer([
						// 	{ lon: -7248.463154571035, lat: 1771.4616940348967, imageName: '楼宇', },
						// 	{ lon: -7248.463154571035, lat: 1871.4616940348967, imageName: 'red_2', },
						// ], { id: 'test', iconSize: 1, located: true }, (e) => {
						// 	console.log('🚀 ~ file: Map2d.vue:437 ~ addImage ~ e:', e)
						// })
					}
					if (e.type == 'mapClick') {
						let res = e.value
						console.log(res.lng, res.lat)
						this.isPoint && this.$emit('pointClick', { x: res.lng, y: res.lat })


						// setLayerVisible({layName:'test',show:false})

						// setHightLightLayerVisible({list:{lon:res.lng,lat:res.lat}},(e) => {
						//   console.log("🚀 ~ file: Map2d.vue:40 ~ setHightLightLayerVisible ~ e:", e)	
						// })

						//画线
						// let arr = [{
						// 	type: 'Feature',
						// 	geometry: {
						// 		"type": "LineString",
						// 		"coordinates": [
						// 			    [-7470.56215241897, 1826.5272490861244],
						// 					[-7314.746004220826, 1806.067982015753],
						// 					[-7202.663154570902, 1771.2616940344014],
						// 					[-7193.234565362647,1812.561690976887],
						// 			    [-7470.56215241897, 1826.5272490861244],
						// 		]
						// 	},
						// 	properties: { name: '24234', type: '测试划线' },
						// }]
						
						// setLineLayerAndData(arr, { lineColor: 'blue' }, (e) => {
						// 	console.log("🚀 ~ file: Map2d.vue:59 ~ setLineLayerAndData ~ e:", e)
						// })
						//画面
						// let arr1 = [
						// 	{
								
						// 		"type": "Feature",
						// 		"properties": { name: '测试画面' ,fillColor: 'red',},
						// 		"geometry": {
						// 			"type": "Polygon",
						// 			"coordinates": [
						// 				[
						// 					[-7470.56215241897, 1826.5272490861244],
						// 					[-7314.746004220826, 1806.067982015753],
						// 					[-7202.663154570902, 1771.2616940344014],
						// 					[-7193.234565362647,1812.561690976887]
						// 				],
						// 			]
						// 		}
						// 	}
						// ]
						// setFillLayerAndData(arr1, { lineColor: 'red',located:true }, (e) => {
						// 	console.log("🚀 ~ file: Map2d.vue:59 ~ setFillLayerAndData ~ e:", e)
						// })
						
						//画文字
						// let arr2 =[
						// 	{
						// 		type: 'Feature',
						// 		geometry: {
						// 			type: 'Point',
						// 			coordinates: [-7148.463154571204,1831.4616940344422]
						// 		},
						// 		properties: {name:'测试'}
						// 	},
						// ]
						// setTextLayerAndData(arr2,{textSize:20},(e)=>{
						// 	console.log(1);
						// })

					}

				})
			},





		},
	}
</script>

<style scoped lang="scss">
	#map2d {
		height: 100%;
		width: 100%;
		background-color: #f5f4ee;
	}
</style>

画点、线、面、文字的相关方法

/*
 * @Descripttion:
 * @version:
 * @Author: WangMingJun
 * @Date: 2023-02-07 10:38:43
 * @LastEditors: WangMingJun
 * @LastEditTime: 2023-08-07 21:13:13
 */
/**
 * @Author zhoucw
 * @Date 2022/6/20
 * @Description
 */

import layerClick2d from '@/map2d/layerClick2d'

//加载图层
/*
使用示例
      setLayer([
        {lon:-26.9875715328385,lat:-8.426351109196744,	imageName: 'poi-marker_1',},
        {lon:-26.9875715328385,lat:-9.426351109196744,	imageName: 'poi-marker_2',}
      ], { id: 'test', iconSize: 1},(e) => {
        console.log('🚀 ~ file: Map2d.vue:437 ~ addImage ~ e:', e)
      })
*/
export function setLayer(list, option = {}, callback) {
  const {
    id, //图层名简称
    iconImage = 'imageName', //图标字段名 list数据里要有这个字段
    iconfs = true,  //是否取本地加载的图标 是则需要执行addImage() 否则需要加载雪碧图
    iconSize = 1,//图标大小
    textField = 'name',//取数据中的文字的字段名
    textSize = 14,	//文字大小
    textColor = '#fff',	//文字颜色
    located = false, //是否定位
    iconIgnorePlacement = true,
    iconAllowOverlap = true,
    visible = 'visible',
    textHaloColor,//文字外边颜色
    click	//点击事件名

  } = option
  add2DPoint(list, { id, iconImage, iconfs, iconSize, textField, textSize, textColor,textHaloColor, located, iconIgnorePlacement, iconAllowOverlap, visible })
  map.on('click', `${id}-layer`, (e) => {
    const properties = e.features[0].properties
    callback && callback(properties)
    click && layerClick2d[click] && layerClick2d[click](properties)
  })
}

//添加点图层及设置数据
export function add2DPoint(data, options) {
  const {
    id, 
    iconImage = 'zdgzry-1',
    iconfs = true,
    iconSize = 1,
    textField = 'name',
    textSize = 12,
    located = false,
    
    iconIgnorePlacement = true,
    iconAllowOverlap = true,
    textColor = '#fff',
    textHaloColor,
    visible = 'visible'
  } = options
  let obj ={}
  if(textHaloColor){
    obj={
      'text-halo-color': textHaloColor || '#fff',
        'text-halo-width': 1,
    }
  }
  const features = getPointFeatures(data, options)
  if (map.getSource(`${id}-source`)) {
    map.getSource(`${id}-source`).setData({
      type: 'FeatureCollection',
      features
    })
  } else {
    map.addSource(`${id}-source`, {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features
      }
    })
    map.addLayer({
      id: `${id}-layer`,
      type: 'symbol',
      source: `${id}-source`,
      layout: {
        // 'icon-image': ['get', iconImage],
        'icon-image': iconfs ? ['get', iconImage] : iconImage,

        'icon-size': iconSize,
        // {
        //   base: iconSize ,
        //   // stops: [
        //   //   [6, iconSize+0.1 ],
        //   //   [7, iconSize+0.2 ],
        //   //   [8, iconSize+0.3],
        //   //   [9, iconSize +0.4],
        //   //   [10, iconSize +0.5]
        //   // ]
        // },
        'text-field': ['get', textField],
        'text-size': textSize,
        'icon-allow-overlap': iconAllowOverlap,
        'icon-ignore-placement': iconIgnorePlacement,
        'visibility': visible,
        'text-offset': [0, 1.8],

      },
      paint: {
        'text-color': textColor || '#568CFE',
        ...obj
      },
    })
  }
  if (located) {
    const bbox = turf.bbox({
      type: 'FeatureCollection',
      features
    })
    map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], {
      padding: {
        top: 50,
        bottom: 250,
        left: 450,
        right: 450
      },
      maxZoom: 10
    })
  }
}

//设置点图层数据
export function setPointLayerData(id, data, options = {}) {
  const features = getPointFeatures(data, options)
  map.getSource(id + '-source').setData({
    type: 'FeatureCollection',
    features
  })
  if (options.located) {
    const bbox = turf.bbox({
      type: 'FeatureCollection',
      features
    })
    map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], {
      padding: {
        top: 50,
        bottom: 250,
        left: 550,
        right: 500
      },
      maxZoom: 17
    })
  }
}

export function getPointFeatures(data, options) {
  const { lonField = 'lon', latField = 'lat' } = options
  return data.map(item => {
    return {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [Number(item[lonField]), Number(item[latField]), 20]
      },
      properties: item
    }
  })
}

//显隐图层
export function setLayerVisible(params) {
  const { layName = "point", show = true } = params
  map.getLayer(layName + '-layer') && map.setLayoutProperty(layName + '-layer', 'visibility', show ? 'visible' : 'none')
}

//设置高亮点以及其相关显隐
export function setHightLightLayerVisible(params, callback) {
  const {
    list = { lon: -7248.463154571035, lat: 1771.4616940348967 }, //数据
    imageName = 'blue_1', //图标名
    layName = "hightLight", //图层民
    show = true, //是否显隐
  } = params
  setLayer([
    { ...list, imageName: imageName }
  ], { id: layName, iconSize: 1, ...params }, (e) => {
    callback && callback(e)
  })
  map.getLayer(layName + '-layer') && map.setLayoutProperty(layName + '-layer', 'visibility', show ? 'visible' : 'none')
}

//设置文字图层及数据
export function setTextLayerAndData(data, options, callback) {
  const {
    id = 'text',
    iconSize = 0.1,
    textField = 'name',
    textSize = 14,
    textColor = '#568CFE',
    textHaloColor = '#fff',
    located = false,
    iconIgnorePlacement = true,
    iconAllowOverlap = true,
    visible = 'visible',
    click
  } = options
  if (map.getSource(`${id}-source`)) {
    map.getSource(`${id}-source`).setData({
      type: 'FeatureCollection',
      features:data

    })
  } else {
    map.addSource(`${id}-source`, {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features:data

      }
    })
    map.addLayer({
      id: `${id}-layer`,
      type: 'symbol',
      source: `${id}-source`,
      layout: {
        'icon-image': 'circle',
        'icon-size': iconSize,
        'text-field': ['get', textField],
        'text-size': textSize,
        'icon-allow-overlap': iconAllowOverlap,
        'icon-ignore-placement': iconIgnorePlacement,
        'visibility': visible,
        'text-offset': [0, 0],
      },
      paint: {
        // 'text-color': '#9E9E9E',
        'text-color': textColor || '#568CFE',
        'text-halo-color': textHaloColor || '#fff',
        'text-halo-width': 1,
      },
    })
    map.on('click', `${id}-layer`, (e) => {
      const properties = e.features[0].properties
      callback && callback(properties)
    })
  }
  if (located) {
    const bbox = turf.bbox({
      type: 'FeatureCollection',
      features: data
    })
    map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], {
      padding: {
        top: 50,
        bottom: 250,
        left: 450,
        right: 450
      },
      maxZoom: 17
    })
  }

}

//设置面图层及数据
export function setFillLayerAndData(data, options, callback) {
  const {
    id = 'fill',
    fillColorName = 'fillColor',
    fillOpacity = 0.5,
    visible = 'visible',
    located = false,
    fillColor,
    click
  } = options
  if (map.getSource(`${id}-source`)) {
    map.getSource(`${id}-source`).setData({
      type: 'FeatureCollection',
      features:data

    })
  } else {
    map.addSource(`${id}-source`, {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features:data

      }
    })
    map.addLayer({
      id: `${id}-layer`,
      type: 'fill',
      source: `${id}-source`,
      layout: {
        'visibility': visible,
      },
      paint: {
        'fill-color': fillColor|| ['get', fillColorName],
        'fill-opacity': fillOpacity
      },
    })
    map.on('click', `${id}-layer`, (e) => {
      const properties = e.features[0].properties
      callback && callback(properties)
    })
  }
  if (located) {
    const bbox = turf.bbox({
      type: 'FeatureCollection',
      features:data
    })
    map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], {
      padding: {
        top: 50,
        bottom: 250,
        left: 450,
        right: 450
      },
      maxZoom: 17
    })
  }

}

//设置线图层及数据
//data 
//[{
//   type: 'Feature',
//   geometry: {
//     "type": "LineString",
//     "coordinates": [[ -7248.463154571035, 1771.4616940348967], [-7248.463154571035, 1871.4616940348967]]
//   },
//   properties: { name: '24234', type: '测试' },
// }]
export function setLineLayerAndData(data, options, callback) {
  const {
    id = 'line',
    lineWidth = 2,
    lineColor = '#66BB6A',
    visible = 'visible',
    click
  } = options
  if (map.getSource(`${id}-source`)) {
    map.getSource(`${id}-source`).setData({
      type: 'FeatureCollection',
      features:data
    })
  } else {
    map.addSource(`${id}-source`, {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features:data

      }
    })
    map.addLayer({
      id: `${id}-layer`,
      type: 'line',
      source: `${id}-source`,
      layout: {
        'visibility': visible,
      },
      paint: {
        'line-width': lineWidth,
        'line-color': lineColor,
      },
    })
    map.on('style.load',e=>{
    })
    
    map.on('click', `${id}-layer`, (e) => {
      const properties = e.features[0].properties
      callback && callback(properties)
    })
    
  }


}

//获取面的中心点
// list:[
//   [1,1],
//   [1,1]
// ]
export function getFillCenter(list){
   
    let arr = list.map(e => {
      	return turf.point(e)
    })
   return turf.center(turf.featureCollection(arr))
}

//关闭图层及数据源

落点点击事件

layerClick2d.js

import VideoPopup from '@/map2d/popup/VideoPopup' //自定义组件
import Vue from 'vue' 
import router from '@/router'
import store from '@/store'
let popup = null
//单纯点击事件
export function clickZdcs(row){
  store.commit('setZdcsInfo', row)
}

//需要加气泡
function clickZdqy(row) {
  const zdqyPopup = Vue.extend(ZdqyPopup)
  removePopup()
  const vm = new zdqyPopup({
    propsData: {row},
    store,
    router
  })
  vm.$mount()
  popup = new GeoGlobe.Popup().setLngLat([row.lon, row.lat]).setDOMContent(vm.$el).addTo(map)
}

function removePopup() {
  popup && popup.remove()
  popup = null
}

const layerClickEvents2d = {
  removePopup,
  clickZdqy
}

export default layerClickEvents2d
前端xw
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MapBox-draw绘制插件的使用教程（含修改样式和方法封装）
lz5211314121的博客
02-15 2862
在这里顺便说一下：draw绘制工具的使用方法是单机一次激活，再单击一次进入编辑，也就是双击进入编辑，因此图形存在三个状态，未激活状态，激活状态和编辑状态。这些样式的id代表了不同的含义，比如第一个id的后缀是.cold并且有inactive字眼他代表的就是绘制结束以后未激活状态下的图形的样式。很多时候我们有这样的需求，比方说我们获得了一个地块，多边形，我们想把这个地块导入到地图中然后对其进行编辑，那该怎么做呢？有些同学觉得mapbox自带的绘制按钮太丑了，但是官方也没有提供可以修改其样式的api。
mapbox 实现点线面的绘制
weixin_50379372的博客
06-07 1689
mapbox
mapbox控件-@mapbox/mapbox-gl-draw使用（vue3）
qq_42038997的博客
02-27 2346
【代码】mapbox控件-@mapbox/mapbox-gl-draw使用（vue3）
mapbox鹰眼地图的二次封装
08-06
mapbox鹰眼地图的二次封装，更方便在vue中使用，使用es6模块化导出
mapbox控制点线面图层，点永远在线上，线永远在面上
Sakura1998gis的博客
05-07 424
mapbox控制点线面图层，点永远在线上，线永远在面上
Mapboxgl实现点animate动画效果
03-24
Mapboxgl实现点animate动画效果
MapboxGL本地化部署方法
01-12
MapboxGL本地化部署方法
vue+mapboxgl 添加点，添加注记
06-14
vue+mapboxgl 添加点，添加注记
mapbox-search:mapbox js查询方法
04-27
映射框搜索 这是用于在mapbox js上查询搜索操作的javascript插件。 **** 必需的 **** mapbox js库。 访问mapbox的令牌。
Mapbox GL JS实现移动端H5实时多边形（涂鸦）绘制
做GIS梦的人
11-11 2405
关于使用MapBox GL进行图形绘制，很多人都在使用mapbox-gl-draw。但是它只是封装了一些简单的点、线、面的绘制功能。最近的一个项目提出了要求在手机上用手指拖动实现多边形涂鸦绘制，要求实时记录点。开始一直使用mapbox-gl-draw来做，但是始终无法实现手指拖动绘制的功能。最后，通过监听touch事件，实时改变source实现了这个效果。效果如下图： 代码如下： 注意，这里使用的监听事件，仅适合移动端使用，或者将Chrome调成移动端模式 <template>
MapboxGLDraw.zip
12-08
mapbox-gl-draw插件改造，新的事件draw.update_polygon，支持多边形绘制时实时回调。通过新的回调，可以实时显示当前的绘制前面
mapbox gl结合turf.js完成绘图工具画线等距平分
荣默默的博客
02-11 1585
1.首先引入对应的sdk插件，以及页面元素，代码如下： <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script> <script src="js/mapbox-gl-draw.js"&gt
mapbox样式规范(style)
Mozifei73的博客
01-16 7791
mapbox样式规范(style)
mapbox 显示数据
最新发布
weixin_46243213的博客
10-11 307
mapbox 显示数据
mapbox添加各种图层
qq_42038997的博客
11-24 395
mapbox加载各种图层
mapbox两点之间线的绘制
haoranyyy的博客
05-02 885
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>绘制两点之间的线</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.m...
mapbox 展示地图 添加点、线、面绘制工具
qq_41186500的博客
12-12 7591
先看一下效果图 官方API地址：https://docs.mapbox.com/mapbox-gl-js/api/ 1、安装依赖包 安装mapbox地图展示时需要用到的依赖 npm install --save mapbox-gl 安装自定义点线面工具的依赖包 npm install --save mapbox-gl-draw 2、html部分准备一个盛放地图的容器 <template...
开源地图mapbox自定义
热门推荐
gongminghbsz的博客
07-13 1万+
mapbox作为一款开源的地图，涵盖地图相关的很多方面，关于mapbox的各种溢美之词，网上有很多就不一一介绍了。很多人使用地图都是使用的百度/高德之类的sdk。高德和百度之类，基本无法实现常见的gis应用，无法自定义数据/服务器。而arcgis很强大，但是贵啊！！！动辄20万的价格，还真不是一般企业能随意负担的起。     自己开发地图，投入还真不是一般大，曾经在某公司从事过导航地图的相关开发
mapbox gl文字标注算法基本介绍
一只小蚂蚁的自白
03-23 2332
Well-placed labels can be the difference between a sloppy map and a beautiful one. Labels need to clearly identify features without obscuring the map. 好的标注位置可以作为潦草的地图和漂亮的地图之间的区别。标签需要清晰地识别要素而不模糊地图。...
mapboxgl画线
09-01
要在Mapbox-GL地图上画线，可以使用Mapbox-GL的API方法来实现。下面是一种可能的方法： 首先，确保你已经引入了Mapbox-GL的库文件，并且创建了一个地图容器。然后，使用Mapbox-GL提供的`addLayer`方法来添加一个线条图层。 在`addLayer`方法中，你可以指定线条的样式和数据源。样式可以定义线条的颜色、宽度和其他属性，数据源可以定义线条的坐标点。 接下来，你可以使用`setData`方法将线条的坐标数据传递给数据源。坐标数据应该是一个包含经纬度信息的数组。 最后，将线条图层添加到地图中。你可以使用`addLayer`方法将图层添加到地图的指定位置。 下面是一个示例代码： ``` // 创建地图容器 var map = new mapboxgl.Map({ container: 'map-container', style: 'mapbox://styles/mapbox/streets-v11', }); // 添加线条图层 map.addLayer({ id: 'line-layer', type: 'line', source: { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: [[lng1, lat1], [lng2, lat2], [lng3, lat3]] // 坐标点数组 } } }, paint: { 'line-color': '#ff0000', // 线条颜色 'line-width': 2 // 线条宽度 } }); // 设置线条图层的数据源 map.getSource('line-layer').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: [[lng1, lat1], [lng2, lat2], [lng3, lat3]] // 坐标点数组 } }); // 将线条图层添加到地图中 map.addLayer({ id: 'line-layer', type: 'line', source: 'line-source', paint: { 'line-color': '#ff0000', // 线条颜色 'line-width': 2 // 线条宽度 } }); ``` 以上就是使用Mapbox-GL画线的方法。你可以根据自己的需求修改样式和坐标数据，以实现不同的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue Mapbox-GL 在地图中增加图标、线条、标记点击弹窗、地图平移](https://blog.csdn.net/weixin_49032614/article/details/125545247)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值