zoukankan      html  css  js  c++  java
  • mapbox01

    1、mapbox框架简单实例:安装并在页面显示地图

    1)cnpm安装mapbox-gl : 

    cnpm i mapbox-gl --save

    2)导入js

    import mapbox-gl from 'mapbox-gl

    3)设置地图容器元素宽高,并实例化一个地图:

    1   mounted() {
    2     mapboxgl.accessToken = 'pk.eyJ1IjoidGVxdWlsYTMiLCJhIjoiY2tnMXVzbnppMDF6ZzJ3bXduaDdodXMwdyJ9.1uKrNBTz55P-YAYYR0omhQ';
    3     var map = new mapboxgl.Map({
    4     container: 'map',
    5     style: 'mapbox://styles/mapbox/streets-v11' // 地图样式
    6     })
    7   },

    2、Map

    Map 对象代表页面上的地图。它暴露了一系列的方法和属性使得用户可以通过编程开发对地图进行修改,并在用户与地图交互时触发一系列的事件

    实例化时对象可供配置的属性有new Map(options: Object)

    container(地图容器(id))

    style(地图样式)

    minZoom/maxZoom (最小、最大缩放比例)

    hash:若为true,地图状态将与url哈希匹配(缩放层级、中心纬度、中心经度、方位角和倾角)

    interactive:若为false,地图将不再响应任何的鼠标事件

    trackResize:若为true,地图将自适应窗口变化

    center:地图初始化时所定位到的坐标,[经度,纬度],需配合zoom

    zoom:地图初始化时的缩放比例

    bounds:地图初始化的限制范围。参数为一个LngLatBounds对象,或者是一个LngLatLike对象的数组以[西南,东北]为顺序, 也可以是一个数字组成的数组以[西,南,东,北]为顺序。

    renderWorldCopies:若为false,地图缩小时将不平铺渲染地图
     
  • 相关阅读:
    Android 使用 DownloadManager 管理系统下载任务的方法
    移动互联网时代:你的厕所文学是什么?
    zoj 3777 Problem Arrangement(壮压+背包)
    25个增强iOS应用程序性能的提示和技巧(0基础篇)
    Oracle 同义词
    Oracle loop、while、for循环
    Oracle 序列
    Oracle 视图
    Oracle 集合操作
    Oracle 伪列
  • 原文地址:https://www.cnblogs.com/Tanqurey/p/13792275.html
Copyright © 2011-2022 走看看