程序地带

react+typescript项目安装leaflet,以及使用leaflet请求失败报401unauthorized错误的解决


在react+ts项目中安装leaflet

参考文档 1.安装leaflet:


npm install leaflet --save

2.安装**@types/leaflet**( 如果不是typescript项目则安装react-leaflet)


npm install -D @types/leaflet 3.初次使用:


import React, { Component } from 'react'
import L from 'leaflet'
import './Fristmap.css'
export default class Firstmap extends Component {
componentDidMount(){
const mymap = L.map('firstmap').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
}
render() {
return (
<div id='firstmap' >
</div>
)
}
}

效果:报错了 在这里插入图片描述 查看官网文档: 在这里插入图片描述 在使用前需要先有一个access token,可以注册一个mapbox账号获取对应token,注册账号的地址再官网中。注册好后可以看到一个默认的公共的token 在这里插入图片描述 使用这个token在这里插入图片描述 在这里插入图片描述 和预期结果不太一样,而且无法准确缩放: 原因:没有引入css: 在index.html中加入:


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

或者将css文件下载到本地后引入。 最终效果: 在这里插入图片描述


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lingliu0824/article/details/112689510

随机推荐

innovus dbGet命令的使用

innovus dbGet命令的使用

dbGet是基于一种树状的结构图,如下图所示。head是最原始的parent,然后我们需要寻找的object就藏在这每一个一级一级的分支下。selected和top其实也属...

杰出的胡兵 阅读(544)

Flutter实现网易音乐登录页的波纹效果

介绍来自仿网易云音乐App预览图分析经过观察,可以发现,这是一个相对简单的动画,由两部分组成:logo:自身没有任何动画效果波纹&...

静水流深zz 阅读(112)

table表格customRender的使用

1.使用customRender引入插槽scopedSlots:{customRender:'action'}2.使用customRender指定渲染内容columns:[{title...

gyuei 阅读(420)

调用接口,直接导致服务器挂了

1,这个问题找了好久,以为是内存溢出导致的------》结果不是2,你全局搜索一下,既然看到 System.exit(-1)----》业务是禁用...

liuxianwen1990 阅读(305)

node代理请求 vue_vue使用代理解决请求跨域问题详解

在日常开发中,我们前端必不可少的需要像后端请求数据。但是一般前后端分离,所以域名、端口等肯定不尽相同,这样就不可避免的会遇到浏览器的同源策略限制。在一般情况下...

weixin_39908758 阅读(781)

hosts文件无法编辑的问题

说一下windows的hosts文件无法修改的问题由于要在本地搭建eureka集群,想着用hosts映射几个虚拟的域名到localhost,可是无论我如何修改hosts文件...

嗨!你好啊 阅读(743)