htoooth / leaflet.chinesetmsproviders Goto Github PK

View Code? Open in Web Editor NEW

947.0 38.0 299.0 139 KB

Provider for Chinese Tms Service

Home Page: https://htoooth.github.io/Leaflet.ChineseTmsProviders/

License: MIT License

JavaScript 100.00%

tile-provider epsg leaflet javascript tilelayer

leaflet.chinesetmsproviders's Introduction

Leaflet.ChineseTmsProviders

An extension to Leaflet that contains configurations for various Chinese tile providers.

Usage

npm i leaflet.chinatmsproviders

Leaflet-ChineseTmsProviders providers are refered to with a provider.<variant>.<type> -string. Let's say you want to add the nice Normal.Map base layers from www.tianditu.com to your map, you pass TianDiTu.Normal.Map to the L.tileLayer.chinaProvider-constructor, which will return a L.TileLayer instance for TianDiTu Normal Map tile layer.

//add TianDiTu Normal Map Layer to map.
L.tileLayer.chinaProvider('TianDiTu.Normal.Map').addTo(map);

Example

var map = L.map('map', {
    center: [31.59, 120.29],
    zoom: 12
});

L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);
L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion',{maxZoom:18,minZoom:5}).addTo(map);

There are more examples at the examples folder like below.

./examples/indexTianDiTu.html

./examples/indexGaoDe.html

./examples/indexGoogle.html

./examples/indexGeoq.html

./examples/indexOSM.html

./examples/indexBaidu.html

./examples/indexTencent.html

Above all maps use Coordinate Reference Systems (CRS), which are EPSG:3857.

Providers

Current options suitable for tile layers are:

TianDiTu
- TianDiTu.Normal.Map
- TianDiTu.Normal.Annotion
- TianDiTu.Satellite.Map
- TianDiTu.Satellite.Annotion
- TianDiTu.Terrain.Map
- TianDiTu.Terrain.Annotion
GaoDe
- GaoDe.Normal.Map (include Annotion)
- GaoDe.Satellite.Map
- GaoDe.Satellite.Annotion
Google
- Google.Normal.Map (include Annotion)
- Google.Satellite.Map (exclude Annotion)
- Google.Satellite.Map (include Annotion)
Geoq
- Geoq.Normal.Map
- Geoq.Normal.PurplishBlue
- Geoq.Normal.Gray
- Geoq.Normal.Warm
- Geoq.Normal.Hydro
OSM
- OSM.Normal.Map
Baidu
- Baidu.Normal.Map
- Baidu.Satellite.Map (exclude Annotion)
- Baidu.Satellite.Annotion
Tencent
- Tencent.Normal.Map
- Tencent.Satellite.Map
- Tencent.Terrain.Map

Options

key

If you're using TianDiTu, please apply the key and config it in the option, like this:

L.tileLayer.chinaProvider(
    'TianDiTu.Normal.Map',
    {
        key: 'Your key',
        maxZoom:18,
        minZoom:5,
    }).addTo(map);

I added a key to the source code, but this key should only be used for testing.

Please note

If you want to use Baidu provider，please install Proj4Leaflet in your project.

About

This work was inspired from https://github.com/tontita/Leaflet.KoreanTmsProviders, https://github.com/leaflet-extras/leaflet-providers, and https://github.com/muyao1987/leaflet-tileLayer-baidugaode.

leaflet.chinesetmsproviders's People

Contributors

Stargazers

Watchers

Forkers

hooface zzpwelkin a1c2n3g4w5 kyip hotoo yhyuan wandergis gongzk kingron guanml wzl4022561 parselife pyt5208 luxiaolin gujieye lidi100 thdtjsdn dfy167 lexlooworks maxsl yangqiang5156 vein-yan xcymorningsun blazingsiyan constlhq huyongbin lanxy88 sureleo macross1303 ailong naichaozhang picnic-yu tokkiu tbergman mrjeff578575 scottww wuh christophschubert ferlycreator gisonjourney dlandau bianjunjie1981 mingning67 jean1024 lsh382510118 liuzhenglian mickeycharles zhuzhucode yangdengxian gateslu herogui dodolooking ertian leono1 wanke15 hppyyung okworld26 56hide yinxd v-cat 1340456760 351531104 zhangziyi123 woliqiang bailihua93 luodaxiao wkke liubaiye a150808 mingkof tingken nanfengdashen yankai12 xcorg xiaodaner gofferdoxu zjffun zhensherlock huangliyuanli gzbaohano giserliuhuan hensonberglee xw4jb popo1221 biack519 victorcheney zhiqiangcheng wobushizhima dreacatcher kgloveyou sqlcyi2008 zhairuihao gitsunww zqgu2016 jzhangjie gishome jacktang yangkf1985 kaka10te xingdavis

leaflet.chinesetmsproviders's Issues

Can I directly add points with WGS84 coordinates ?

Can I directly add points with WGS84 coordinates on the gaode basemap using this plugin ?

会增加百度地图吗？

纯新手好奇为啥没有百度，可能是百度不提供TMS？
另外，似乎天地图官网的在线地图更新得比使用API获取的要新？我公司旁边的一个大楼，天地图官网在线地图里能看到已经建好了，用这个api看到的还是一片空地。。。

可以支持百度地图吗？

升级插件后地图加载失败，请问是什么问题，谢谢

百度地图报错：Cannot read property 'latLngToPoint' of undefined；发现是实例化时crs: L.CRS.Baidu参数的问题；
其他地图：降级leaflet1.51 就能正常打开

求助，有缩放层级最大20多层的高德地图normal底图么？

代码中多了几个逗号 ie8兼容性模式下会报错

行23，27，31 ...

为什么不把http/https前缀加上呢？

否则的话在electron或者webview中默认会去加载本地文件

地图有时加载不出来，看network，地图图片请求到了，但是不显示，测试几种地图都有这种情况

天地图加载图片失败

如图，加载失败，显示状态为418

版本问题

在https://www.npmjs.com/只能查到2年前1.0.22版本，不是最新。

高德地图支持WMTS吗？

大哥，高德地图支持WMTS吗？

how to use the provider in vue2leaflt

I am now using vue2-leaflet, could you tell me use the provider in vue2leaflt. It confused me for a long time. Thank you!

GaoDe Map doesn't display clearly on retina screen..

When I open the example/indexGaoDe.html in iPhone6, the map becomes a little ugly and blurred. Maybe it doesn't support retina screen currently..

地图易支持么

dituyi.com 这个请问是否支持

Some of provider can add the https support

[Suggest]: Some of provider can add the https support.

请高手做一下高德的搜索

把高德的搜索做进去，太实用了。
我自己没搞成功。期待。
是高德官网的这个：https://lbs.amap.com/api/javascript-api/example/poi-search/search-after-enter-prompt

`<!doctype html>

<title>输入提示后查询</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

请输入关键字：

Should violate the ToS of Google Maps

According to the FAQ and the ToS of Google Maps, it should violate the ToS of Google Maps to direct access the tiles.

But I also notice that mafengwo uses it by the undocumented way (even tho they leave their API key in the source code). It's really confusing...

地图初始化时设置crs为4326，加载高德底图不正确

Google图层在Google浏览器加载不出来，Firefox and Safari正常

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x=3417&y=1666&z=12 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

之前没有出现这种现象呀，查了很久不知道怎么解

为什么只有谷歌的卫星地图没有线路啊？

网上找到的参数填y，可以展示线路，http://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}

Hi, leaflet 基础图层中，既支持百度地图又支持Google地图怎么写？

百度地图的CRS和Google的不一样，单纯的支持百度或者google都可以。但是想同时切换这两种地图应该怎么写？leaflet支持动态切换CRS么？

Error in Default Funtion call

L.tileLayer.chinaProvider('TianDiTu.Normal.Map').addTo(map); is throwing an error because options is empty, this works:

L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{}).addTo(map);

Open Google Chinese Layer failed

Open Google Chinese Layer failed suddenly, what happend? We opend it a few days ago, but today we can not open it

Is it possible to add tencent map support?

天地图的地址请升级下，在https 下是访问不了的。目前的地址不支持https协议。

怎么加载天地图4490的坐标系？

天地图更新后需要申请key才能使用，我修改了一下源码

    在后面增加&tk=你申请的key即可使用天地图服务

Normal: {
            Map:'http://t{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&tk=你的key',
            Annotion: "http://t{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&tk=你的key"
        },
        Satellite: {
            Map: "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&tk=你的key",
            Annotion: "http://t{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&tk=你的key"
        },
        Terrain: {
            Map: "http://t{s}.tianditu.gov.cn/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&tk=你的key",
            Annotion: "http://t{s}.tianditu.gov.cn/cta_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cta&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&tk=你的key"
        },
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    },

放在Android assets文件中WebView加载不出

天地图，高德，百度，OSM都不能加载，只有MapBox能正常加载

TianDitu didn't suit your code?

From 2019.1.1. TianDitu need key for developers

修改经纬度，无法显示地图问题，求帮助

我第一使用leaflet，例子是能工作的，我尝试修改，用其他城市的经纬度，但是地图就不能显示出来，不知道是哪里不对，请帮我看下：
下面这个，用例子里面的[31.59, 120.29]，就可以出来，用其他国外的，或者国内的经纬度，就无法显示

例如：[116.38,39.93] [-77.04,38.91]

let map = L.map('mapid', {
center: [-77.04,38.91],
zoom: 12
})

    L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
      maxZoom: 12,
      minZoom: 5,
      key: '我自己申请的key'
    }).addTo(map);

我用了其他的百度，高德也存在这样的问题。

请帮忙看下，非常感谢。

不能再DIV中添加多个地图

只能在<div id="map"才能使用，除了<div id="map1" 或者别的就都不可以这大神如何解决

如何与vue2-leaftlet集成使用呢？

l-tile-layer如何替换成chinatms？如果有多个图层，如何使用v-for加载？如果还需要layer-group，如何加载？
l-control-layers能否直接识别出加载的tile-layers?
谢谢。

One row of tiles doesn't display every 16 rows on Tencent Satellite map

Open the page https://htoooth.github.io/Leaflet.ChineseTmsProviders/examples/indexTencent.html
The Tencent Satellite map is shown, leave all the settings as default,
Do not change the default zoom level also,
Hold down the left mouse button and pan the map one page up.

Then you will see one gray row on the map, the tiles on the row does't display correctly, by continue to pan the map up or down, you will see more gray rows, it seems that there have one row of tiles doesn't display every 16 rows.
This issure only occurs on the Tentcent Satellite map.

在vue项目中使用为什么openstreetmap的偏差还是没有解决

在main.js中引入import "leaflet.chinatmsproviders"
在vue文件中使用：
L.tileLayer.chinaProvider('OSM.Normal.Map', {
maxZoom: 18,
minZoom: 3,
// openstreetmap归因
attribution: '© OpenStreetMap contributors'
})

可是位置还是出现了偏差，请问是哪里有问题吗，在vue中要怎么使用

天地图即将升级

今天访问了天地图官网时有提示说即将升级服务并且升级后会需要密钥。密钥肯定是各个开发者来获得但是好像有部分服务连接也会变，具体怎么变我不清楚。

天地图加了key还是不行

你好,我的项目中用到了天地图的地形图层.
本地测试的时候没有问题,但是发布到网上后地图没有加载出来.
我看网上说tk需要写在参数列表里,不能直接加载url里.不知道是不是真的

这是我在本地测试时候的效果(可以看到地形是显示出来的)

这是我发布到网上后:

麻烦看一下是否能修复这个问题
如果方便的话,这是我的网页网址,谢谢!
https://zssanguo.com/html/map.html

请问如何显示地名

卫星模式下现在没有地名，另外增加搜索功能怎么做？
谢谢。

天地图底图叠加水平偏移了一点点

与示例中高德、geoq底图对比。

leaflet in cordvoa

leaflet in cordvoa with button and attribution , but no map display, osm is ok

Cannot read property 'CRS' of undefined

Getting 404 errors for google.cn/maps

Leaflet.ChineseTmsProviders/src/leaflet.ChineseTmsProviders.js

Line 75 in d37298c

Map: "//www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"

Eg:
http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x=12&y=6&z=4

I'm sure this used to work... Has google changed the URL format?

腾讯矢量图可以显示，但是点位置还是差了不少

矢量图在y前面加个负号就行

Originally posted by @huangsinan in #44 (comment)

How to modify the style of the tile layer of the AutoNavi map

Such as the official custom dark blue, gray, etc.

切换底图，坐标偏差

使用了天地图和高德地图，切换后地图覆盖物位置有偏移，请问这个要怎么处理？

Baidu maps broken on the example?

Maybe it's just for me but the Baidu maps do not work it's grey all around.

Also noted that for the geog map and the gaode map, you can zoom in to higher zoom levels (18) around/in China and you get a lot of detail but when you zoom in elsewhere around the world you tiles stop appearing when you reach a certain zoom level and you just get grey. Is that always the case? Could one get a key from gaode/geog to avoid this?

Any help is greatly appreciated. Thanks

腾讯地图的切片方式好像和天地图、高德这些不一样，不知道怎么在这个插件的基础上进行扩展，希望作者能帮帮忙
矢量图Url：https://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=2
卫星图Url：http://p{s}.map.gtimg.com/sateTiles/{z}/{r}/{c}/{x}_{y}.jpg
地形图Url：http://p{s}.map.gtimg.com/demTiles/{z}/{r}/{c}/{x}_{y}.jpg

在移动端加载不显示问题

在移动端加载的时候是不显示的, 是有其他的配置还是不支持吗