前言

uniapp读取本地json数据文件，有下面两种方式可以实现：

• 文件后缀为.json类型
• 文件后缀为.js类型

这里展示后缀为.js类型的处理方式

1、在static中创建后缀为.js的文件存储json数据。

注意使用export导出

2、在要使用的页面导入

<template>  
<view class="map-wrap">  
    <!-- #ifdef APP-PLUS || H5 -->  
    <view id="map-box">  
    <!-- 这里是mapbox的地图容器 -->  
    </view>  
    <!-- #endif -->  
</view>  
</template>  

<script module="mapbox" lang="renderjs">
	const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
	import 'mapbox-gl/dist/mapbox-gl.css';
	import {point} from '../../static/point.js'
	//let map = null //地图实例  
	let dataPoint={
		type: 'FeatureCollection',
		features:[
			 {
			            type: 'Feature',
			            properties: {
			              size: 20,
			              name: '武汉'
			            },
			            geometry: {
			              type: 'Point',
			              coordinates: [114.30122, 30.598213]
			            }
			          }
		]
	}
	export default {  
	    data:{  
	        return(){  
	            map: null//地图实例  
	        }  
	    },  
	    mounted() { 
			
	        this.createdMap()  
			this.map.addControl(new mapboxgl.FullscreenControl(), 'top-left')
			this.map.on('click',e=>{
				console.log(e)
				console.log(this.map)
			})
			
			if(this.map){
				this.map.on('style.load',()=>{
					this.map.addSource('source', {
					         type: 'geojson',
					         data: point
					       })
					      this.map.addLayer({
					         id: 'layer',
					         type: 'circle',
					         source: 'source',
					         paint: {
					           'circle-radius': 20,
					           'circle-color': '#ff0000'
					         }
					       }) 
				})
				this.map.on('click','layer',(e)=>{
					console.log(e.features[0])
					this.map.setPaintProperty('layer','circle-color','green')
				})
			}
	    },  
	    methods: {  
	        createdMap() { //创建地图                 
	            mapboxgl.accessToken = '你的token';  
	            this.map = new mapboxgl.Map({  
	                container: 'map-box', // container ID  
	                style:  {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }, // style URL  
	                center: [114.124064, 30.463405], // starting position [lng, lat]  
	                zoom: 9 // starting zoom  
	            });  
	        },
	    }  
	}  
</script>

<style>
	.map-wrap {  
	    position: relative;  
	    min-width: 100vw;  
	    min-height: 100vh;  
	}  
	
	#map-box {  
	
	    top: 0;  
	    left: 0;  
	    bottom: 0;  
	    right: 0;  
	    position: absolute;  
	}  
	
	#map-box /deep/ .mapboxgl-ctrl-geocoder {  
	    min-width: 140px;  
	}  
	
	#map-box /deep/ .mapboxgl-ctrl-geocoder input[type="text"] {  
	    height: 30px;  
	}  
	
	#map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-icon-search {  
	    top: 5px;  
	}  
	
	#map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-pin-right * {  
	    top: 5px;  
	}  
	
	.control-box {  
	    padding: 10rpx 30rpx;  
	    background-color: #00AAFF;  
	    position: absolute;  
	    right: 0;  
	    top: 0;  
	    z-index: 999px;  
	}  
</style>