vue+mapbox实现地图3D地图展示效果

其中包括了mapbox各种插件的使用包括了全图模式，定位，地图遮挡层，鹰眼地图，地图标注，测量距离、面积。具体代码示例如下：

<template><el-container><el-header><el-row class="boxoption"><el-select v-model="value" id='menu' clearable><el-option id='streets-v11' label="3D地图" value="streets-v11"></el-option><el-option id='satellite-v9' label="卫星地图" value="satellite-v9"></el-option><el-option id='light-v10' label="平面地图" value="light-v10"></el-option></el-select></el-row></el-header><el-main><div id="map1"></div><div id="distance3" class="distance-container3"><span>单击地图上的点:</span></div><div class="calculation-box3"><p><strong>范围内面积:</strong></p><div id="calculated-area3"></div></div></el-main><div></div></el-container>
</template>
<script>import '@/assets/js/mapboxgl-control-minimap.js'import mapboxgl from 'mapbox-gl'import MapboxLanguage from '@mapbox/mapbox-gl-language'import 'mapbox-gl/dist/mapbox-gl.css'import MapboxGeocoder3 from '@mapbox/mapbox-gl-geocoder'import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'import MapboxDraw3 from '@mapbox/mapbox-gl-draw'import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'import * as turf3 from '@turf/turf'export default {data () {return {value1: 2019,value: 'streets-v11',value2: '全部',value3: '所有源'}},mounted () {this.init()},methods: {// initializationinit () {mapboxgl.accessToken ='pk.eyJ1IjoienpoLTE2OCIsImEiOiJja2R2YmplZDkwZGJjMnFvOHl6M3RuN2JzIn0.vd-XQH5SQI1ht6hkaI7RBQ'// 英文标注转换为中文mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js')let map1 = new mapboxgl.Map({style: 'mapbox://styles/mapbox/streets-v10',center: [117.18, 34.27],zoom: 15.5,pitch: 45,bearing: -17.6,container: 'map1'})map1.on('load', function () {map1.addControl(new mapboxgl.Minimap({center: [117.18, 34.27],zoom: 8,zoomLevels: []}), 'top-left')})// 更换地图类型var inputs = document.querySelectorAll('.el-scrollbar__view >li')function switchLayer (layer) {var layerId = layer.target.idmap1.setStyle('mapbox://styles/mapbox/' + layerId)}for (var i = 0; i < inputs.length; i++) {inputs[i].onclick = switchLayer}// 两点间距离var distanceContainer = document.getElementById('distance3')// GeoJSON object to hold our measurement featuresvar geojson = {'type': 'FeatureCollection','features': []}// Used to draw a line between pointsvar linestring = {'type': 'Feature','geometry': {'type': 'LineString','coordinates': []}}map1.on('load', function () {map1.addSource('geojson', {'type': 'geojson','data': geojson})// Add styles to the map1map1.addLayer({id: 'measure-points',type: 'circle',source: 'geojson',paint: {'circle-radius': 10,'circle-color': '#ff0000'},filter: ['in', '$type', 'Point']})map1.addLayer({id: 'measure-lines',type: 'line',source: 'geojson',layout: {'line-cap': 'round','line-join': 'round'},paint: {'line-color': '#ff0000','line-width': 4.5},filter: ['in', '$type', 'LineString']})map1.on('click', function (e) {var features = map1.queryRenderedFeatures(e.point, {layers: ['measure-points']})// Remove the linestring from the group// So we can redraw it based on the points collectionif (geojson.features.length > 1) geojson.features.pop()// Clear the Distance container to populate it with a new valuedistanceContainer.innerHTML = '选择：起点/终点'// If a feature was clicked, remove it from the mapif (features.length) {var id = features[0].properties.idgeojson.features = geojson.features.filter(function (point) {return point.properties.id !== id})} else {var point = {'type': 'Feature','geometry': {'type': 'Point','coordinates': [e.lngLat.lng, e.lngLat.lat]},'properties': {'id': String(new Date().getTime())}}geojson.features.push(point)}if (geojson.features.length > 1) {linestring.geometry.coordinates = geojson.features.map(function (point) {return point.geometry.coordinates})geojson.features.push(linestring)// Populate the distanceContainer with total distancevar value = document.createElement('pre')value.textContent ='距离: ' + turf3.length(linestring).toLocaleString() +'km'distanceContainer.appendChild(value)}map1.getSource('geojson').setData(geojson)})})//  map1.on('mousemove', function (e) {//    var features = map1.queryRenderedFeatures(e.point, {//      layers: ['measure-points']//    })// // UI indicator for clicking/hovering a point on the map//    map1.getCanvas().style.cursor = features.length//             ? 'pointer'//             : 'crosshair'//  })// 定位搜索var coordinatesGeocoder = function (query) {// match anything which looks like a decimal degrees coordinate pairvar matches = query.match(/^[ ]*(?:Lat: )?(-?\d+\.?\d*)[, ]+(?:Lng: )?(-?\d+\.?\d*)[ ]*$/i)if (!matches) {return null}function coordinateFeature (lng, lat) {return {center: [lng, lat],geometry: {type: 'Point',coordinates: [lng, lat]},place_name: 'Lat: ' + lat + ' Lng: ' + lng, // eslint-disable-line camelcaseplace_type: ['coordinate'], // eslint-disable-line camelcaseproperties: {},type: 'Feature'}}var coord1 = Number(matches[1])var coord2 = Number(matches[2])var geocodes = []if (coord1 < -90 || coord1 > 90) {// must be lng, latgeocodes.push(coordinateFeature(coord1, coord2))}if (coord2 < -90 || coord2 > 90) {// must be lat, lnggeocodes.push(coordinateFeature(coord2, coord1))}if (geocodes.length === 0) {// else could be either lng, lat or lat, lnggeocodes.push(coordinateFeature(coord1, coord2))geocodes.push(coordinateFeature(coord2, coord1))}return geocodes}map1.addControl(new MapboxGeocoder3({accessToken: mapboxgl.accessToken,localGeocoder: coordinatesGeocoder,zoom: 4,placeholder: '搜索',mapboxgl: mapboxgl}))// 设置语言map1.addControl(new MapboxLanguage({defaultLanguage: 'zh'}))// 范围内面积var draw = new MapboxDraw3({displayControlsDefault: false,controls: {polygon: true,trash: true}})map1.addControl(draw)map1.on('draw.create', updateArea)map1.on('draw.delete', updateArea)map1.on('draw.update', updateArea)function updateArea (e) {var data = draw.getAll()var answer = document.getElementById('calculated-area3')if (data.features.length > 0) {var area = turf3.area(data)// restrict to area to 2 decimal pointsvar roundedArea = Math.round(area * 100) / 100answer.innerHTML ='<p style="margin: 5px"><strong>' +roundedArea +'</strong></p><p style="margin: 5px">单位/平方米</p>'} else {answer.innerHTML = ''if (e.type !== 'draw.delete') {alert('Use the draw tools to draw a polygon!')}}}// 定位map1.addControl(new mapboxgl.GeolocateControl({positionOptions: {// true设备能够提供更准确的位置enableHighAccuracy: true,// enableHighAccuracy: false,timeout: 6000},trackUserLocation: true,// 显示用户位置所在点showUserLocation: true}))// 导航控件map1.addControl(new mapboxgl.NavigationControl())// 比例尺let scale = new mapboxgl.ScaleControl({maxWidth: 80,unit: 'imperial'})map1.addControl(scale)scale.setUnit('metric')// 全图map1.addControl(new mapboxgl.FullscreenControl())// The 'building' layer in the mapbox-streets vector source contains building-height// data from OpenStreetMap.map1.on('load', () => {// Insert the layer beneath any symbol layer.let layers = map1.getStyle().layerslet labelLayerIdfor (let i = 0; i < layers.length; i++) {if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {labelLayerId = layers[i].idbreak}}// 增加一个空数据map1.addSource('currentBuildings', {type: 'geojson',data: {'type': 'FeatureCollection','features': []}})// 增加一个图层，由于数据为空，所以不会展示东西。// map1.addLayer({//   'id': 'highlight',//   'source': 'currentBuildings',//   'type': 'line',//   'minzoom': 15,//   'paint': {//     'line-color': '#f00',//     'line-width': 5//   }// }, labelLayerId)// map1.on('click', '3d-buildings', function (e) {//   // 动态的设置 highlight  图层的数据源//   map1.getSource('currentBuildings').setData({//     'type': 'FeatureCollection',//     'features': e.features//   })// })map1.addLayer({'id': 'room-extrusion','type': 'fill-extrusion','source': {'type': 'geojson','data': {'features': [{'type': 'Feature','properties': {'level': 1,'name': 'Bird Exhibit','height': 10,'base_height': 0,'color': 'red'},'geometry': {'coordinates': [[[117.192402, 34.271805],[117.197666, 34.272043],[117.196858, 34.269612],[117.194558, 34.269627]]],'type': 'Polygon'},'id': '08a10ab2bf15c4d14669b588062f7f08'},{'type': 'Feature','properties': {'level': 1,'name': 'Ancient Egypt','height': 30,'base_height': 0,'color': 'blue'},'geometry': {'coordinates': [[[117.192402, 34.271805],[117.197666, 34.272043],[117.196858, 34.269612],[117.194558, 34.269627]]],'type': 'Polygon'}}],'type': 'FeatureCollection'}},'paint': {'fill-extrusion-color': ['get', 'color'],'fill-extrusion-height': ['get', 'height'],'fill-extrusion-base': ['get', 'base_height'],'fill-extrusion-opacity': 0.5}})map1.addLayer({'id': '3d-buildings','source': 'composite','source-layer': 'building','filter': ['==', 'extrude', 'true'],'type': 'fill-extrusion','minzoom': 15,'paint': {'fill-extrusion-color': '#aaa',// use an 'interpolate' expression to add a smooth transition effect to the// buildings as the user zooms in'fill-extrusion-height': ['interpolate', ['linear'],['zoom'],15, 0,15.05, ['get', 'height']],'fill-extrusion-base': ['interpolate', ['linear'],['zoom'],15, 0,15.05, ['get', 'min_height']],'fill-extrusion-opacity': 0.6}}, labelLayerId)})}}}
</script><style  scoped>@import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css");.el-header,.el-footer {color: #333;text-align: left;line-height: 40px;height: 150px;}.el-main {padding: 0;}#map1 {color: #333;text-align: left;min-height: 100vh;width: 100%;overflow: hidden;border: 0;}.body {margin: 0;padding: 0;}.year{width: 100%;display: flex;justify-content: space-between;align-items: center;}.boxoption{margin-top: 10px;}.distance-container3 {position: absolute;top: 50%;left: 4%;z-index: 100;background-color: rgba(0, 0, 0, 0.5);color: #fff;font-size: 14px;line-height: 18px;font-weight: bolder;display: block;margin: 0;padding: 5px 10px;border-radius: 3px;}.calculation-box3 {z-index: 100;border-radius: 3px;/*height: 75px;*/width: 122px;position: absolute;bottom: 50%;left: 4%;background-color: rgba(0, 0, 0, 0.5);padding: 5px;text-align: center;color: #fff;}.calculation-box3 > p {font-family: 'Open Sans';margin: 0;font-size: 13px;}
</style>

vue+mapbox实现地图3D地图展示效果相关推荐

基于vue的echarts北京3D地图
3D地图图表效果如下: 第一步:下载echarts npm install echarts --save-dev //安装echartsnpm install echarts-gl //安装3D,如不 ...
echarts 地图3d+地图下钻
效果图原理使用geo下移叠加地图的阴影效果,通过点击地图获取当前点击的城市编码动态切换地json // 地图数据 (用来标记地图名称的散点图及弹窗数据)let dataset = [{name: ...
echarts实现中国地图记录篇之2D，3D地图
目录 1.实现基础工具和echarts版本的踩坑工具: 版本 -- echarts5.0+和5.0以下版本的差异: 2.实现平面2D地图 -- 有标记点和没有标记点,地图实现的方式不同没有标记点的 ...
你以为高德地图只是地图？它其实是个PPT制作神器啊
相信大家的手机里应该都有高德地图吧?出门在外经常靠它查路线吧?那么你知道吗?高德地图可不仅仅只是一个地图工具哦!它其实是一个PPT制作神器!别不信!你看!像这样高大上的PPT都是用高德地图制作出来的! ...
python三维图形渲染地图_Python地图可视化三大秘密武器
Python地图可视化库有大家熟知的pyecharts.plotly.folium,还有稍低调的bokeh.basemap.geopandas,也是地图可视化利器. 首先介绍下bokeh bokeh擅 ...
python3d相册源代码_js和CSS3炫酷3D相册展示
js和CSS3炫酷3D相册展示 *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overfl ...
vue3.0 使用vue脚手架生成vue项目运行mapbox 3D地图例子
一.脚手架生成vue项目 1.安装脚手架:npm install -g @vue/cli 2.以图形界面创建vue项目 https://cli.vuejs.org/zh/guide/creating- ...
mapbox 视角切换 3d与2d之前的切换，加指南针的旋转，模仿百度地图实现的效果
mapbox 视角切换 3d与2d之前的切换,加指南针的旋转,模仿百度地图实现的效果使用方法附件下载地址:mapbox视角切换,模仿baidu地图的3d与2d的切换,与指南针的旋转-Javascr ...
vue+echarts+3D地图制作大屏
基于3d地图做的一些效果,首先看下效果图准备工作:下载echarts 和3d地图需要用到的依赖包,版本随意就行下载依赖之后,在页面引入,引入网上下载的地图json文 ...

vue+mapbox实现地图3D地图展示效果

vue+mapbox实现地图3D地图展示效果相关推荐

最新文章

热门文章