带有无偏移国内图源的folium

本文介绍了一种解决Folium在国内使用时地图偏移问题的方法。通过修改GridLayer方法并引入新的JS文件,实现了加载无偏移的国内地图。支持高德、百度等地图源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题

folium是一个Python的绘制地图神器,基于leaflet映射。目前有非常多的瓦片图源可以选择,如自带有OpenStreetMapMapbox BrightMapbox Control RoomStamen (Terrain, Toner, and Watercolor)CloudmadeMapboxCartoDB。以及可以通过这里接入更多的基础地图。但是存在的问题是其中带有的地图都是国外的地图,虽然如OSM等数据多效果好,在国界上都存在问题;而国内的高德、腾讯等地图都存在偏移的问题,天地图虽然没有偏移,但有key的限制。所以在国内使用folium总是不容易两全其美。

解决

参考leaflet中如何优雅的解决百度、高德地图的偏移问题,想到既然folium是基于leaflet的,能不能把这个方法引入修改folium来加载无偏的国内的地图。终于搞定了,参考foliume

  1. 目前网上能方便找到的国内的瓦片有高德、百度、腾讯和GeoQ。
  2. 首先根据网上的开源的坐标转换代码,修改GridLayer的方法,加入判断(是否是国内地图)和坐标转换,得到一个js文件。通过jsDelivr + Github 实现免费CDN加速:https://cdn.jsdelivr.net/gh/geoyee/lccjs@v0.2/leaflet_china_correction.js。其中由于百度地图的特殊性,需要构造一个CRS,否则无法显示。
  3. 为folium添加上述的选项,并把上述的js引入。
  4. 修改了下setup的名字发了一个pypi包方便使用,可以通过pip install foliume下载。

使用

与foliume相同,只需要在指定tiles的地方选择GeoQ China CommunityGeoQ China Street即可。

由于pypi不能重名,所以安装是叫foliume,使用和folium一模一样

import folium

m = folium.Map(
    location=[39.90681115817056, 116.39123825186597],  # 天安门外金水桥
    zoom_start=16,
    tiles='GeoQ China Community'  # 'AMAP China', 'TencentMap China', 'BaiduMaps China'
)

m

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<think>好的,我现在需要帮用户总结通用的前后端分离项目启动命令。用户提到他们想查找这方面的信息,所以我得先理清楚前后端项目常见的框架和启动方式。 首先,前端项目通常使用Vue、React或Angular这些框架。根据引用[3],前端项目开发环境下一般用`npm run serve`或者`npm start`来启动,而生产环境则是`npm run build`生成静态文件,然后通过Nginx部署。比如在Django和Vue整合的项目中,构建后会生成dist目录,需要配置到后端或Web服务器中[^3]。 后端方面,Spring Boot是Java常用的框架,启动命令是`mvn spring-boot:run`或者用jar包运行[^1][^4]。Django则是`python manage.py runserver`,而Node.js的Express使用`npm start`或者`node app.js`[^3]。 用户可能需要了解不同环境的启动方式,比如开发和生产环境的区别。比如前端开发时用`npm run serve`,生产用build;后端Spring Boot打包成jar后运行。此外,部署时前后端分离项目通常前端由Nginx托管,后端API独立运行,可能需要配置跨域。 还要考虑一些常见问题,比如依赖安装`npm install`和`mvn install`,以及端口配置。例如,前端Vue默认8080,React 3000,后端Spring Boot默认8080,可能需要修改避免冲突。 用户提供的引用中提到了Spring Boot和Vue项目结构,以及部署到服务器的注意事项。这些信息帮助确认了启动命令的正确性,比如后端打包后的jar运行命令,前端构建后的部署步骤。 总结起来,应该分前端、后端、部署三个部分,列举常见框架的启动命令,并说明开发和生产环境的区别。同时加入注意事项,如依赖安装、端口配置和跨域处理,这样用户能全面了解启动流程。</think>### 通用前后端分离项目启动命令总结 #### 一、前端项目通用启动命令 1. **Vue.js 项目** - 开发环境启动: ```bash npm install # 安装依赖 npm run serve # 启动开发服务器(默认端口8080) ``` - 生产环境构建: ```bash npm run build # 生成静态文件到dist目录[^3] ``` - 本地预览生产包: ```bash npm install -g serve # 安装静态服务器 serve -s dist # 启动服务(默认端口3000) ``` 2. **React 项目** - 开发环境启动: ```bash npm install npm start # 默认端口3000 ``` - 生产环境构建: ```bash npm run build ``` 3. **Angular 项目** ```bash npm install ng serve # 默认端口4200 ``` --- #### 二、后端项目通用启动命令 1. **Spring Boot (Java)** - 开发环境启动: ```bash mvn spring-boot:run # 直接运行 ``` - 打包与生产启动: ```bash mvn clean package # 生成jar包 java -jar target/*.jar # 运行jar包 ``` 2. **Django (Python)** ```bash python manage.py runserver # 默认端口8000 ``` 3. **Node.js (Express)** ```bash npm install npm start # 或 node app.js(需配置package.json)[^3] ``` --- #### 三、前后端联调与部署 1. **本地联调** - 前端代理配置(以Vue为例): ```javascript // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 后端地址 changeOrigin: true } } } } ``` 2. **服务器部署** - 前端:使用Nginx托管`dist`目录[^4] ```nginx server { listen 80; location / { root /path/to/dist; try_files $uri $uri/ /index.html; } } ``` - 后端:独立运行(如Spring Boot jar包)或通过容器部署[^4] --- #### 四、注意事项 1. **依赖安装** - 首次启动项目前必须执行`npm install`或`mvn install`安装依赖 2. **端口冲突** - 修改端口示例(Vue): ```bash npm run serve -- --port 3000 ``` 3. **跨域问题** - 后端需配置CORS,或前端通过代理解决[^3] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值