Mapbox入门教程

环境：Vue2.x项目

安装依赖

cnpm  i  mapbox-gl  --save
cnpm  i  @mapbox/mapbox-gl-geocoder  --save
cnpm  i  mapbox-gl-controls  --save
cnpm  i  @mapbox/mapbox-gl-draw  --save

初始化地图

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

<script>
// 引入mapbox-gl
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

// 引入标绘工具
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'

// 地图控件
import {
    RulerControl,
    StylesControl,
    CompassControl,
    ZoomControl,
    InspectControl,
    TooltipControl,
    LanguageControl,
    ImageControl
} from 'mapbox-gl-controls'

// 地理编码控件
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';

export default {
    name: "mapbox1",
    data() {
        return {
            map: null,
            draw: null
        };
    },
    mounted() {
        this.initMap();

        this.addDraw();

        this.addScale();
        this.addGeocoder();

        this.addRulerControl();
        this.addStyleChangeControl();
        this.addCompassControl();
        this.addZoomControl();
        this.addLanguageControl();
        this.addInspectControl();
        this.addTooltipControl();
    },
    methods: {
        // 初始化地图
        initMap() {
            mapboxgl.accessToken =
                "your token";
            this.map = new mapboxgl.Map({
                container: "map",
                style: "mapbox://styles/mapbox/streets-v11",
                center: [115, 35],
                zoom: 5,
            });
            this.map.addControl(new mapboxgl.FullscreenControl(), 'bottom-right');
        },
        // 增加点线面绘制工具
        addDraw(){
            this.draw = new MapboxDraw();
            this.map.addControl(this.draw, 'top-right');
            this.map.on('draw-create', this.updateArea);
            this.map.on('draw-delete', this.updateArea);
            this.map.on('draw-update', this.updateArea);
        },
        updateArea(e){
            console.log(e);
            let data = this.draw.getAll()
            let answer = document.getElementById('calculated-area')
            if (data.features.length > 0) {
                let area = turf.area(data)
                let rounded_area = Math.round(area * 100) / 100
                answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>'
            } else {
                answer.innerHTML = ''
                if (e.type !== 'draw.delete') alert('Use the draw tools to draw a polygon!')
            }
        },
        // 增加长度测量控件
        addRulerControl(){
            this.map.addControl(new RulerControl(), 'top-right');
            this.map.on('ruler.on', ()=>{
                console.log('ruler.on');
            })
            this.map.on('ruler.off', ()=>{
                console.log('ruler.off');
            })
        },
        // 增加地图风格切换控件
        addStyleChangeControl(){
            this.map.addControl(new StylesControl({
                styles: [
                    {
                        label: 'Streets',
                        styleName: 'Mapbox Streets',
                        styleUrl: 'mapbox://styles/mapbox/streets-v9',
                    }, {
                        label: 'Satellite',
                        styleName: 'Satellite',
                        styleUrl: 'mapbox://styles/mapbox/satellite-v9',
                    },
                ],
                onChange: (style) => console.log(style),
            }), 'top-left');
        },
        // 增加指北针控件
        addCompassControl(){
            this.map.addControl(new CompassControl(), 'top-right');
        },
        // 增加地图缩放控件
        addZoomControl(){
            this.map.addControl(new ZoomControl(), 'top-right');
        },
        // 增加不同语言标注控件
        addLanguageControl(){
            this.map.addControl(new LanguageControl({
                language: 'chinese'
            }));
        },
        // InspectControl
        addInspectControl(){
            this.map.addControl(new InspectControl(), 'bottom-right');
        },
        // 增加提示控件
        addTooltipControl(){
            this.map.addLayer({
                id: '$fill',
                type: 'fill',
                source: { type: 'geojson', data: polygon },
                paint: { 'fill-opacity': 0.3, 'fill-color': '#4264fb' },
            });
            this.map.addControl(new TooltipControl({
                layer: '$fill'
            }));
        },

        // 增加比例尺控件
        addScale(){
            const scale = new mapboxgl.ScaleControl({
                maxWidth: 80,
                unit: 'metric'
            });
            this.map.addControl(scale);
        },

        // 增加地理编码控件
        addGeocoder() {
            const coordinatesGeocoder = function(query) {
                const 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,
                        place_type: ["coordinate"],
                        properties: {},
                        type: "Feature",
                    };
                }

                const coord1 = Number(matches[1]);
                const coord2 = Number(matches[2]);
                const geocodes = [];

                if (coord1 < -90 || coord1 > 90) {
                    // must be lng, lat
                    geocodes.push(coordinateFeature(coord1, coord2));
                }

                if (coord2 < -90 || coord2 > 90) {
                    // must be lat, lng
                    geocodes.push(coordinateFeature(coord2, coord1));
                }

                if (geocodes.length === 0) {
                    // else could be either lng, lat or lat, lng
                    geocodes.push(coordinateFeature(coord1, coord2));
                    geocodes.push(coordinateFeature(coord2, coord1));
                }

                return geocodes;
            };
            let geocode = new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                localGeocoder: coordinatesGeocoder,
                zoom: 4,
                placeholder: "Try: -40, 170",
                mapboxgl: mapboxgl,
                reverseGeocode: true,
            });
            this.map.addControl(geocode, 'top-left');
        }
    },
};
</script>

<style scoped>
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}


</style>


<style>
/* 去掉mapbox的logo和版权声明 */
.mapboxgl-ctrl-logo{
    display:none !important;
}
.mapboxgl-ctrl-attrib-inner{
    display:none !important; 
}
</style>

效果

1646815307(1).png

加载OGC地图服务

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

<script>
// 引入mapbox-gl
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
export default {
    name: "mapbox2",
    data() {
        return {
            map: null
        };
    },
    mounted() {
        this.initMap();
        // this.addWmsLayer();
        // this.addWmtsLayer();
        // this.addTmsLayer();
        this.addTmsLayer2();
    },
    methods: {
        // 初始化地图
        initMap() {
            mapboxgl.accessToken =
                "pk.eyJ1Ijoid2FuZ3poYW9mYW5nIiwiYSI6ImNsMGo1ZTBkYzA5OG8zZG96ZWV3am5xMjMifQ.p3c82gSRyqt5_wdndro8SQ";
            this.map = new mapboxgl.Map({
                container: "map",
                style: "mapbox://styles/mapbox/streets-v11",
                center: [115, 35],
                zoom: 5,
            });
            this.map.addControl(new mapboxgl.FullscreenControl(), 'bottom-right');
        },
        // 加载wms地图服务
        addWmsLayer(){
            let wmsUrl = "http://localhost:8085/geoserver/test/wms?service=WMS&format=image/png&transparent=true&request=GetMap&layers=test:guo&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857";
            this.map.on('load', ()=>{
                this.map.addSource('geoserver-wms-source', {
                    type: "raster",
                    scheme: 'xyz',
                    tiles: [wmsUrl],
                    tileSize: 256
                })
                this.map.addLayer({
                    id: "geoserver-wms-layer",
                    type: "raster",
                    source: "geoserver-wms-source",
                    'source-layer': "test:guo"
                });
            })
            setTimeout(() => {
                this.map.removeLayer('geoserver-wms-layer');
            }, 5000);
        },
        // 加载wmts地图服务
        addWmtsLayer(){
            let wmtsUrl = "http://localhost:8085/geoserver/gwc/rest/wmts/test:guo/line/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/png";
            this.map.on('load', ()=>{
                this.map.addSource('geoserver-wmts-source', {
                    type: "raster",
                    scheme: 'xyz',
                    tiles: [wmtsUrl],
                    tileSize: 256
                })
                this.map.addLayer({
                    id: "geoserver-wmts-layer",
                    type: "raster",
                    source: "geoserver-wmts-source",
                    'source-layer': "test:guo"
                });
            })
            setTimeout(() => {
                this.map.removeLayer('geoserver-wmts-layer');
            }, 5000);
        },
        // 加载tms地图服务
        addTmsLayer(){
            let tmsUrl = "http://localhost:8085/geoserver/gwc/service/tms/1.0.0/test%3Aguo@EPSG%3A900913@png/{z}/{x}/{y}.png";
            this.map.on('load', ()=>{
                this.map.addSource('geoserver-tms-source', {
                    type: "raster",
                    scheme: 'tms',
                    tiles: [tmsUrl],
                    tileSize: 256
                })
                this.map.addLayer({
                    id: "geoserver-tms-layer",
                    type: "raster",
                    source: "geoserver-tms-source",
                    'source-layer': "test:guo"
                });
            })
            setTimeout(() => {
                this.map.removeLayer('geoserver-tms-layer');
            }, 5000);
        },
        // 加载tms矢量瓦片地图服务
        addTmsLayer2(){
            let tmsUrl = "http://localhost:8085/geoserver/gwc/service/tms/1.0.0/test%3Aguo@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";
            this.map.on('load', ()=>{
                this.map.addSource('geoserver-tms-source', {
                    type: "vector",
                    scheme: 'tms',
                    tiles: [tmsUrl]
                })
                this.map.addLayer({
                    id: "geoserver-tms-layer",
                    type: "line",
                    source: "geoserver-tms-source",
                    'source-layer': "guo",
                    paint: {
                        'line-color': '#0000ff',
                        'line-width': 2
                    }
                });
            })
            setTimeout(() => {
                // this.map.removeLayer('geoserver-tms-layer');
            }, 5000);
        }
    },
};
</script>

<style scoped>
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}


</style>


<style>
/* 去掉mapbox的logo和版权声明 */
.mapboxgl-ctrl-logo{
    display:none !important;
}
.mapboxgl-ctrl-attrib-inner{
    display:none !important; 
}
</style>

效果

image.png

增加点线面几何图形

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

<script>
// 引入mapbox-gl
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
export default {
    name: "mapbox3",
    data() {
        return {
            map: null,
        };
    },
    mounted() {
        this.initMap();
        this.addPoint();
        this.addLine();
        this.addPolygon();
    },
    methods: {
        // 初始化地图
        initMap() {
            mapboxgl.accessToken =
                "pk.eyJ1Ijoid2FuZ3poYW9mYW5nIiwiYSI6ImNsMGo1ZTBkYzA5OG8zZG96ZWV3am5xMjMifQ.p3c82gSRyqt5_wdndro8SQ";
            this.map = new mapboxgl.Map({
                container: "map",
                style: "mapbox://styles/mapbox/streets-v11",
                center: [115, 35],
                zoom: 5,
            });
            this.map.addControl(
                new mapboxgl.FullscreenControl(),
                "bottom-right"
            );
        },
        // 增加点
        addPoint() {
            this.map.on("load", () => {
                const marker1 = new mapboxgl.Marker()
                    .setLngLat([123, 30])
                    .addTo(this.map);

                const marker2 = new mapboxgl.Marker({
                    color: "black",
                    rotation: 45,
                })
                    .setLngLat([120, 30])
                    .addTo(this.map);
            });
        },
        // 增加线
        addLine() {
            this.map.on("load", () => {
                this.map.addSource("route", {
                    type: "geojson",
                    data: {
                        type: "Feature",
                        properties: {},
                        geometry: {
                            type: "LineString",
                            coordinates: [
                                [122, 34.18],
                                [122, 35.74],
                                [123, 34],
                                [124, 34]
                            ],
                        },
                    },
                });
                this.map.addLayer({
                    id: "route",
                    type: "line",
                    source: "route",
                    layout: {
                        "line-join": "round",
                        "line-cap": "round",
                    },
                    paint: {
                        "line-color": "#00ff00",
                        "line-width": 8,
                    },
                });
            });
        },
        // 增加面
        addPolygon(){
            this.map.on('load', () => {
                this.map.addSource('maine', {
                    'type': 'geojson',
                    'data': {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Polygon',
                            'coordinates': [
                                [
                                    [117.13734, 25.13745],
                                    [118.96466, 24.8097],
                                    [118.11617, 23.68405],
                                    [117.13734, 25.13745]
                                ]
                            ]
                        }
                    }
                })

                this.map.addLayer({
                    'id': 'maine',
                    'type': 'fill',
                    'source': 'maine', 
                    'layout': {},
                    'paint': {
                        'fill-color': '#0080ff', 
                        'fill-opacity': 0.5
                    }
                });

                this.map.addLayer({
                    'id': 'outline',
                    'type': 'line',
                    'source': 'maine',
                    'layout': {},
                    'paint': {
                        'line-color': '#000',
                        'line-width': 3
                    }
                });
            })
        }
    },
};
</script>

<style scoped>
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
</style>

<style>
/* 去掉mapbox的logo和版权声明 */
.mapboxgl-ctrl-logo {
    display: none !important;
}
.mapboxgl-ctrl-attrib-inner {
    display: none !important;
}
</style>

效果

image.png

最后编辑于：2022.03.13 20:51:07

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,470评论 6赞 501
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,393评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,577评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,176评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,189评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,155评论 1赞 299
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,041评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,903评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,319评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,539评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,703评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,417评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,013评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,664评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,818评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,711评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,601评论 2赞 353

Mapbox入门教程

安装依赖

初始化地图

效果

加载OGC地图服务

效果

增加点线面几何图形

效果

推荐阅读更多精彩内容