mapbox + tdt + vue 实现天地图基本地图添加

最新推荐文章于 2024-06-11 00:21:13 发布
最新推荐文章于 2024-06-11 00:21:13 发布
阅读量1.9k 收藏 5
点赞数
分类专栏： vue CSS mapbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34870529/article/details/104348332
版权
mapbox 同时被 3 个专栏收录
22 篇文章 5 订阅
订阅专栏
vue
15 篇文章 0 订阅
订阅专栏
CSS
14 篇文章 0 订阅
订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1634082_fc7stux6chb.css">
    <title>mapbox、天地图、vue</title>
    <script>
        window.TDT_CONFIG = {
          // 当前项目域名:http://www.tianditu.gov.cn
          HOME_URL:'http://192.168.0.106:8080',
          // 矢量瓦片地址
          VECTOR_URL: 'http://gisserver.tianditu.com',
          // 地图属性配置
          MAP:{
            // 图幅号
            SHEET_NUMBER:'GS(2019)1719号 - 甲测资字1100471',
            // 底图地址
            URL: 'http://t{s}.tianditu.gov.cn/',
            // 级别
            ZOOM: 2,
            // 中心点
            CENTER: [104.09215287988154, 40.277052933991797],
            // 底图key
            TOKEN: '66c315d7235737b75bef98fbb3fb0c00'
          }
        }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 

BaseMap.vue

<template>
  <div class="visual-map" :class="`visual-map-${device}`">
    <div id="map-container"></div>
    <VisualLayer v-if="loaded" :legends="legends" />
    <Legend :legends="legends" />
    <Regional />
  </div>
</template>

<script>
import { mapState } from "vuex";
import "mapbox-gl/dist/mapbox-gl.css";
import MapboxGl from "mapbox-gl";

import VisualLayer from './VisualLayer.vue'
import Legend from './Legend.vue'
import Regional from './Regional.vue'

import chinaJson from '../../json/china.json'

import config from "../../config";

const {
  HOME_URL,
  MAP: { ZOOM, URL, CENTER, TOKEN, SHEET_NUMBER }
} = window.TDT_CONFIG;

const { projectDir } = config;

const MAP_TYPES = [
  {
    mapType: "vec",
    active: true
  },
  {
    mapType: "cva",
    active: true
  }
];

let map = null;

export default {
  name:"BaseMap",
  components: {
    VisualLayer,
    Legend,
    Regional
  },
  props:{
    loaded:{
      type:Boolean
    }
  },
  data () {
    return {
      legends:{
        province:{
          total:[
            {
              color:'#792A19',
              grade:['10000']
            },
            {
              color:'#A94D34',
              grade:['5000','9999']
            },{
              color:'#CA613E',
              grade:['1000','4999']
            },{
              color:'#F18334',
              grade:['500','999']
            },{
              color:'#FFC54D',
              grade:['100','499']
            },{
              color:'#f9d892',
              grade:['10','99']
            },{
              color:'#fdf7b9',
              grade:['1','9']
            },{
              color:'#FEFEFE',
              grade:['0']
            },
          ],
          today:[
            {
              color:'#792A19',
              grade:['200']
            },
            {
              color:'#A94D34',
              grade:['100','199']
            },{
              color:'#CA613E',
              grade:['50','99']
            },{
              color:'#F18334',
              grade:['20','49']
            },{
              color:'#FFC54D',
              grade:['10','19']
            },{
              color:'#FDF7B9',
              grade:['1','9']
            },{
              color:'#FEFEFE',
              grade:['0']
            },
          ]
        },
        city:{
          total:[
            {
              color:'#792A19',
              grade:['1000']
            },
            {
              color:'#A94D34',
              grade:['500','999']
            },
            {
              color:'#CA613E',
              grade:['100','499']
            },{
              color:'#F18334',
              grade:['50','99']
            },{
              color:'#FFC54D',
              grade:['20','49']
            },{
              color:'#f9d892',
              grade:['10','19']
            },{
              color:'#fdf7b9',
              grade:['1','9']
            },{
              color:'#FEFEFE',
              grade:['0']
            },
          ],
          today:[
            {
              color:'#792A19',
              grade:['500']
            },
            {
              color:'#A94D34',
              grade:['100','499']
            },
            {
              color:'#CA613E',
              grade:['50','99']
            },{
              color:'#F18334',
              grade:['20','49']
            },{
              color:'#FFC54D',
              grade:['10','19']
            },{
              color:'#f9d892',
              grade:['5','9']
            },{
              color:'#fdf7b9',
              grade:['1','4']
            },{
              color:'#FEFEFE',
              grade:['0']
            },
          ]
        }
      }
    }
  },
  computed:{
    ...mapState([
      'device'
    ])
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 获取底图的数据源和对应的图层
      const { sources, layers } = this.getBaseMap(MAP_TYPES);

      // mapbox 样式
      let style = {
        version: 8,
        sprite: `${HOME_URL}${projectDir}/mapbox/sprite/sprite`,
        glyphs: `${HOME_URL}${projectDir}/mapbox/font/{fontstack}/{range}.pbf`,
        sources,
        layers
      };

      map = new MapboxGl.Map({
        container: "map-container",
        center: CENTER,
        zoom: ZOOM,
        minZoom: 1,
        maxZoom: 18,
        style,
        transformRequest: (url, resourceType) => {
          if (resourceType === "Tile" && url.indexOf("DataServer") > -1) {
            let random = Math.floor(Math.random() * 7);
            return {
              url: url.replace("{s}", random)
            };
          }
        }
      });

      // 添加审图号
        let control = this.getSheetNumberControl();
        map.addControl(control, 'bottom-left');

      // 底图加载完毕
      map.on("style.load", () => {
        this.$emit("map-loaded", map);
        // 添加国界数据
        this.addChinaBorder();
      });
    },
    /**
     * 添加中国国界图层
     * */
    addChinaBorder() {
      map.addSource('china_border_source', {
          'type': 'geojson',
          'data': chinaJson
      });
 
      map.addLayer({
        'id': 'china_border_layer',
        'type': 'line',
        'source': 'china_border_source',
        'layout': {
        'line-join': 'round',
        'line-cap': 'round'
        },
        'paint': {
          'line-color': 'red',
          'line-width': 3,
          'line-opacity':0.5
        }
      });
    },
    /**
     * 获取数据源和底图图层
     * */
    getBaseMap(mapTypes) {
      let sources = {},
        layers = [];
      mapTypes.forEach(type => {
        let active = true;
        // 底图
        if (typeof type === "object") {
          active = type.active;
          type = type.mapType;
        }

        let sourceId = "osm-" + type + "-tiles";
        sources[sourceId] = {
          type: "raster",
          tiles: [`${URL}DataServer?T=${type}_w&x={x}&y={y}&l={z}&tk=${TOKEN}`],
          tileSize: 256
        };

        let layerId = "tdt-" + type + "-tiles";
        let layer = {
          id: layerId,
          type: "raster",
          source: sourceId,
          minZoom: 1,
          maxZoom: 18,
          layout: {
            visibility: active ? "visible" : "none"
          }
        };
        layers.push(layer);
      });

      return {
        sources,
        layers
      };
    },
    /**
     * 添加审图号
     */

    getSheetNumberControl () {
        function SheetNumberControl() { }

        SheetNumberControl.prototype.onAdd = function(map) {
          this._map = map;
          this._container = document.createElement('div');
          this._container.className = 'mapboxgl-ctrl';
          this._container.innerHTML = '<img src="http://api.tianditu.gov.cn/v4.0/image/logo.png" style="position: absolute;bottom: 5px;" width="53px" height="22px" opacity="0"><div class="sheetNumber" style="position:absolute;bottom:2px;left:70px;white-space:nowrap;">'+SHEET_NUMBER+'</div>';
          return this._container;
        };

        SheetNumberControl.prototype.onRemove = function () {
          this._container.parentNode.removeChild(this._container);
          this._map = undefined;
        };

        return new SheetNumberControl();
      }
  }
};
</script>


<style scoped lang="scss">
.visual-map{
  position:relative;
  width: 100vw;
  height: 100vh;
}
#map-container {
  width: 100%;
  height: 100%;
}
.visual-map-mobile{
  height: 50vh;
}
</style>

 

炉火纯青-旺
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
001：Mapbox GL加载基础的地图
大剑师兰特的GIS世界
04-12 1420
第001个本示例的目的是介绍演示如何在vue+mapbox中加载最基础的 Mapbox GL地图。
Mapbox加载天地图CGCS2000瓦片地图服务
05-06
通过对mapbox GL JS进行改造，使其能够加载天地图CGCS2000瓦片地图服务。
mapbox加载天地图
yGIS
08-23 1784
【代码】mapbox加载天地图。
mapboxgl加载天地图
最新发布
OctoberSun 的博客
06-11 263
mapboxgl加载天地图
Mapbox加载天地图CGCS2000矢量瓦片地图
weixin_42562567的博客
08-10 2097
最近在做天地图的项目，要基于MapBox添加CGCS2000矢量切片数据，但是 Mapbox 只支持web 墨卡托（3857）坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码，支持CGCS2000的切片数据加载，并且修改了相关的mapbox-gl的配套代码，详情请见github网址。将geoserver部署到tomcat之后，打开tomcat下webapps\geoserver\WEB-INF目录下的web.xml文件，添加一下内容，重启tomcat即可。//配置矢量切片图层样式。
mapboxwms天地图，高德地图，谷歌地图
04-28
mapboxwms天地图，高德地图，谷歌地图，使用最新mapbox，基类封装
Antv L7 + mapbox 实现简单地图场景
07-18
在"Antv L7 + mapbox 实现简单地图场景"的项目中，开发者可能会经历以下几个步骤： 1. **设置地图基础视图**：首先，需要引入Antv L7库，并配置地图的基本参数，如中心点坐标、缩放级别和地图源。Mapbox作为地图...
vue+mapboxgl 鹰眼展示
05-25
运用vue加mapboxgl,编写的鹰眼图，全局视图，通过小图查看大图的展示功能 1、首先要有两个地图 大图，小图，鹰眼范围图（简称鹰眼） 2、大图移动，放大缩小的时候要相应的放大和缩小 3、小图不动，鹰眼图放大和缩小...
vue+mapboxgl 添加点，添加注记
06-14
vue+mapboxgl 添加点，添加注记
v-mapbox-docs：使用Vue 3构建的v-mapbox v2.0的文档站点
02-22
v-mapbox的文档网站 设置 安装依赖项： npm run install 发展 npm run dev 静态生成 这将创建dist/目录以发布到静态主机： npm run generate 要预览静态生成的应用，请运行npm run start 有关工作原理的详细说明...
2021 ARCGIS 在线加载天地图影像、注记、矢量、注记成果
03-04
2021 ARCGIS 在线加载天地图影像、注记、矢量、注记成果，4个文件可直接使用
vue集成天地图
Z-NOTE
08-27 4265
文章目录Vue集成天地图一、前言二、正文 Vue集成天地图 一、前言 开发环境 Vue.js：2.9.6 天地图 JavaScript API：4.0 参考： Vue.js官网：https://cn.vuejs.org/ 天地图官网：https://www.tianditu.gov.cn/ 天地图入门指导：http://lbs.tianditu.gov.cn/api/js4.0/guide.html vue集成cesium：https://blog.csdn.net/u011424614
Vue Tmap地图上传组件
qq_43681850的博客
09-01 1196
这里有一个需求就是在图片上传的时候要求用地图来选择位置，所以这里写了一个Tmap 是基于腾讯地图来使用的 组件部分 //.vue <template> <div class="map"> <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置" clearable style="margin-bottom:20px;margin-left: 40px;">
（Inside Out） Web地图坐标系——TDT的神奇
盛政(kisssy)的专栏
07-03 2680
一个GIS科班出生的研究生，把已还到课本的基础GIS知识，准备重新学习，并结合这几年下来自身在行业中GIS的应用，总结一些实用的GIS知识点。一备不时之需，二为积累沉淀，三则是年龄越大，记性越差，加上脑子和计算机一样，一重启，内存清空。 首先来看坐标系，实用一点，Web地图坐标系，在这里我把它们划分为三类： 1.谷歌地图、高德地图、腾讯地图，Web Mercator（3857）  + 中国坐标
vue+openlayers学习：加载天地图
p1758133202的博客
10-19 1343
vue+openlayers学习：加载天地图创建项目1.创建webpack2.安装openlayers的依赖写代码更改App.vue运行 笔者本人是纯新手，学习的过程记录一下，也可以给像我一样学习openlayers的同学一些思路，欢迎各位大佬前来指正 创建项目 在创建项目之前，需安装node js和vue-cli，可以直接百度，上面介绍的安装很细 1.创建webpack 推荐使用vscode 打开vscode，然后【文件】>【打开文件夹】打开需要创建项目的文件夹 打开【终端】，在终端输入界面里
mapbox 添加天地图影像瓦片
qq_34870529的博客
07-18 6902
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Add a raster tile source</title> <meta name='viewport' content='initial-scale=1,maximu...
vue3+腾讯地图TMap
yangxiaoman123的博客
11-22 9091
在vue3中使用腾讯地图TMap 前提：在使用前 需要到腾讯地图官网去注册申请 申请通过官方会给一个key值作为标识； 使用腾讯地图目的是获取位置信息也就是经纬度，下面来看下腾讯地图的使用 一、功能分析 可以根据关键字模糊搜索 点击地图可以获取到具体的位置也就是经纬度 刚进入地图获取到当前的地址位置 知道了具体需要哪些功能了 就开始代码了 1.要在项目下的public中的index.html中引入腾讯地图 这个是因为腾讯地图没有同步vue 所以在index.html中引入 其中的key 是上面说的 申
Mapbox之sprite精灵图
u012551120的博客
06-03 1823
一、 sprite精灵图组成要素 1. 一张排满了小图标的.png图片 mapbox为android提供的样式有如下几种: // 街道图 public static final String MAPBOX_STREETS = "mapbox://styles/mapbox/streets-v11"; // 户外图 public static final String OUTDOORS = "mapbox://styles/mapbox/outdoors-v11"; // 高亮图 public static
MapboxGL+Vue3加载高德地图实例
07-15
你可以使用MapboxGL和Vue3来加载高德地图实例。首先，确保你已经安装了MapboxGL和Vue3的依赖。 接下来，你可以创建一个Vue组件来加载地图。在这个组件中，你需要先引入MapboxGL和高德地图的JavaScript库： ```javascript import mapboxgl from 'mapbox-gl'; import AMapLoader from '@amap/amap-jsapi-loader'; export default { mounted() { // 加载高德地图 AMapLoader.load({ key: 'your-amap-api-key', version: '2.0', plugins: ['AMap.Geocoder'] }).then(() => { // 初始化MapboxGL mapboxgl.accessToken = 'your-mapbox-access-token'; // 创建地图实例 const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], zoom: 12 }); // 在地图上添加高德地图瓦片图层 const amapLayer = new AMap.TileLayer(); map.addLayer(amapLayer); // 在地图上添加其他图层、标记等 // ... }); } } ``` 在上面的代码中，你需要替换`your-amap-api-key`为你的高德地图API密钥，以及`your-mapbox-access-token`为你的Mapbox访问令牌。你还可以根据需要设置地图的中心点和缩放级别。 最后，将地图容器添加到你的Vue模板中： ```html <template> <div id="map"></div> </template> <script> import mapComponent from '@/components/MapComponent.vue'; export default { components: { mapComponent } } </script> ``` 通过这种方式，你可以在Vue组件中使用MapboxGL和高德地图来加载地图实例。记得替换你的API密钥和访问令牌，以及根据需要自定义地图样式和添加其他图层。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值