Giter Club home page Giter Club logo

leaflet-baidu's Introduction

#leaflet-baidu: This plugin in no longer maintained nor enchanced#

An on-going plugin for leaflet with Baidu Map.

##Why this plugin?## Baidu map is using a different coordinate system and a different algorithm to calculate tile coordinate. Inspired by another leaflet plugin by Pavel Shramov and Bruno B. It is dedicated for Google, Bing, and Yandex map.

##Contributing to the code## I have created several tickets in the issue list with "help wanted" labels. If you have any idea, please do not hesitate leave a comment or make a pull request. All advices are appreciated.
It would be great if you create the branch accordingly: fix_number of issue.
It would also be great if you create commit message accordingly: re #number of issue: your commit message

##How Does Baidu Map Work?## Basically, there are 4 kinds of coordinate need to know: Longitude and Latitude, point coordinate, pixel coordiante, tile coordinate. In the following demostration, I will use the coordinate of Tian'an Men(116.404, 39.915) in Baidu coordinate system.

###Longitude and Latitude### The coordinate Baidu Map using is different from WGS84, which is general international standards. One layer encryption is required by the Chinese goverment, which is called GCJ-02. Moreover, Baidu Map encrypts another layer called BD-09 based on GCJ-02. Here's an interface to convert those coordinates.

###Point Coordinate### Baidu Map uses Mercator projection. The difference between Baidu Map and other maps in projection is the range of latitude. Google map will project the earth to a square, latitude is roughly from -85 to 85; whereas baidu map projects the earth from -71.988531 to 74.000022. This coordinate convertion is managed by a class called BMap from Baidu.

var projection = new BMap.MercatorProjection();
var point = projection.lngLatToPoint(new BMap.Point(116.404, 39.915));
alert(point.x + ", " + point.y);
//results: 12958175, 4825923.77

An image to show point coordinate:
point coordinate

###Pixel Coordinate### Formula: pixel_coordinate = |point_coordinate * 2^(zoom-18)|. If you how to make math equation in markdown feel free to make a pull request.
18 is the Max Zoom level of Baidu map. The pixel coordinate of Tian'an Men in Zoom Level 4 in Baidu Map is 790, 294.
pixel coordinate

###Tile Coordinate### Formula: tile_coordinate = |pixel_coordinate/256|
256 is the size of the tile height and width in Baidu Map. For instance, the tile coordinate of Tian'an Men in zoom level 4 is 3,1, and 50617, 18851 in zoom level 18.
tile coordinate

###Chinese Documentation### The coordinate system is cited from Here. Here's more details in Chinese.

##Contact## My email is [email protected]. Again, all advices are appreciated.

leaflet-baidu's People

Contributors

sureleo avatar facetothefate avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.