Leaflet地图初始化地图（谷歌+天地图混合图层）

一些关于leaflet地图比较基础的知识代码

注意map这个div宽高一定要给的，天地图key可以去天地图官网申请

<template><div><div id="map" style="width：1200px; height:800px "></div></div>
</template>
<script>
//引入一些leafelt相关文件
import L from 'leaflet'
import 'leaflet/dist/leaflet.css' //关键，不引入会错位
import LChinaTilelayer from 'vue2-leaflet-chinatilelayer' //关键，
require('@/utils/Leaflet.fullscreen.js') //全屏
import 'leaflet-easybutton'
import 'leaflet.pm' //leafletmp插件
import 'leaflet.pm/dist/leaflet.pm.css'
import axios from 'axios'methods:{initMap() {var that = thisvar p1 = [39.90553, 116.391305] //天安门var yxmap1 = L.tileLayer.chinaProvider('Google.Satellite.Map', {//卫星图谷歌id: 'layer_tiandi',detectRetina: true,zIndex: 3,maxZoom: 21,minZoom: 19})var yxmap2 = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {//卫星图天地id: 'layer_tiandi',detectRetina: true,zIndex: 4,maxZoom: 18,minZoom: 2,key: '天地图key'})var yxmap_group = L.layerGroup([yxmap2, yxmap1]) //卫星图天地+谷歌创建为一个图层组var slmap = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {//矢量图天地id: 'layer_tiandi2',detectRetina: true,zIndex: 3,maxZoom: 21,minZoom: 2,key: '天地图key'})var bzmap = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {//标注天地id: 'layer_tiandi',detectRetina: true,zIndex: 3,maxZoom: 21,minZoom: 5,key: '天地图key'})//卫星影像地图，矢量地图var baseMaps = {影像地图: yxmap_group,矢量地图: slmap}var ygMaps = {标注: bzmap}this.map = L.map('map', {center: p1,zoom: 9,layers: yxmap_group,zoomControl: false,attributionControl: true,dragging: true,touchZoom: true,scrollWheelZoom: true,doubleClickZoom: true,boxZoom: true,tap: true,keyboard: true,attributionControl: false // 右下角leaflet标识})L.control.layers(baseMaps, ygMaps).addTo(this.map) //右上角的切换地图this.map.setVies(p1,12)                     //初始化地图中心经纬度，缩放级别},
}
</script>

leaflet位置跳转动态效果

    leafeltFly() { //fly效果this.map.flyTo([39.61103, 108.46267])},

Leaflet地图初始化地图（谷歌+天地图混合图层）相关推荐

高德地图-初始化地图
1.问题背景利用高德地图的接口,创建一个以武汉为中心点的地图,放大级别是18 2.实现源码 <!DOCTYPE html> <html><head><tit ...
使用高德JS-API进行基于LBS的开发-地图初始化地图控件
框架代码: <!DOCTYPE html> <html style="width:100%;height:100%;"> <head><m ...
腾讯地图初始化以及解析和逆解析
腾讯地图: 开发文档: JavaScript API | 腾讯位置服务 index.html中引入老版地图进行初始化,并根据定位打点: <div id="container" ...
史上最全第三方地图服务汇总【天地图/高德/百度/腾讯/谷歌地图等】
Webgis开发过程中,我们一般使用第三方地图服务作为底图.本篇博文给大家介绍市面上常用的第三方地图服务,应该算的上是史上最全. 如果需要转载,请注明转载出处:https://blog.csdn.ne ...
leaflet调用高德地图和百度地图的实时路况瓦片图层
1.leaflet调用高德地图实时路况 <html><head><meta charset="utf-8"><title>实时路况& ...
5张对比图告诉你,天地图,高德地图,百度地图,谷歌地图区别
先来看看传说中最争议的天地图吧. 最大放大距离,每厘米25米. 我们用这个体育场和下面的大厦做对比..其实还有大厦下的车..(这张图上的车看不清,真有,没骗你们....) 再上一张高德的, 最大50M ...
openlayers地图初始化
1.安装ol(官网ol已更新到openlayers7版本,我所用的是v6.14.1) yarn add ol //安装openlayers 2.初始化openlayer地图先创建一个容器来存放map ...
使用 Leaflet.js 创建地图的入门指南
Leaflet.js 是目前最流行的映射库之一.它是一个灵活.轻量级的开源 JavaScript 库,用于创建交互式地图. Leaflet 是一个用于呈现地图数据的框架.数据以及底图图层必须由开发人员 ...
Leaflet.MiniMap 切换地图
在项目中使用leaflet来实现地图的相关效果,其中就有容器地图(大地图)需要切换电子地图和卫星地图: 当然这部分最后是实现了,但是发现我们右下角使用leaflet.minimap实现的鹰眼地图(小地 ...
百度离线地图示例之十一：混合图(街道图、卫星图)实现
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),实现 ...

Leaflet地图初始化地图（谷歌+天地图混合图层）

Leaflet地图初始化地图（谷歌+天地图混合图层）相关推荐

最新文章

热门文章