私たちは、ビジュアル開発を行う場合には、多くの場合、関連するデータは、もちろん、我々が達成するために、GIS技術を使用することができますレンダリングするようechartsを使用して、地図データの量の一部をダウンロードする必要がありますが、私たちの比較的単純なニーズと比較して、GISはので、あまりにも多くのビットがかかりますあなたは地図作成、登録、解除を必要とし、その後、前項を開発するために、これは良いよりも少し害です。
だから、時々私達はちょうど私たちは「鳳翔」を示す必要があるなど、国境郡を必要とする管理境界我々は今、そうすることができます
ステップ1
オープンリンク：百度地図API>>例をカバーする管理部門の追加lbsyun.baidu.com/jsdemo.htm番号を...次のインターフェイスを参照してください。
function getBoundary(){
var bdary = new BMap.Boundary();
bdary.get("北京市海淀区", function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
……
复制代码GET取得要求北京市海淀区の境界を、私たちは、あなたがこれを行うことができ、それをプリントアウトし、次を参照してください。
function getBoundary(){
var bdary = new BMap.Boundary();
bdary.get("北京市海淀区", function(rs){ //获取行政区域
//--------------------
console.log(rs)
//--------------------
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
……
复制代码コンソールで見られた結果：
- この結果はローカルに保存されている
Local Storage内部、そのコピーの内側に行きます。 - 見て
Step 2
ステップ2
上記のコード変換getBoundary()、次のように関数です。
function getBoundary(){
var bdary = new BMap.Boundary();
bdary.get("凤翔县", function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
console.log(rs.boundaries);
var content = rs.boundaries
var fileName = '凤翔县.txt'
var aLink = document.createElement('a');
var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
aLink.click();
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
addlabel();
});
}
复制代码クリック运行2Sを待つようにボタンを自動的にダウンロードする凤翔县.txtファイルを、次のように内部が読み込み開きます
107.653733, 34.657435;107.648513, 34.661217;107.625176, 34.705117;107.609942, 34.707262;107.594553, 34.736579;107.584968, 34.730437;107.579062, 34.745847;107.573426, 34.745894;……
复制代码私たちはされる方法を切断jsの文字列を使用することができ';'、その後、2次元配列に変換カットした後、使用convas、svgに似ている、プロット点を引き出す技術を107.653733x座標用のjsのこと经纬度转墨卡托算法（もちろん、あなたも直接レンダリングをすることができますが、マップ上の保証ポイントは、あなたが、当然のことながら、何も、我々はレンダリング結果の全体的なサイズを変更することができ、共通の要因に加えて、大きな価値が来ることができ、平面直交座標系を座標メルカトルに変換における緯度及び経度）でありますこれは、マウスイベントをバインドするために使用することができます。
座標はメルカトルアルゴリズムを回します
いいえ接触GISの学生は、おおよそ次のように、これが何を意味するのか知らないことがあります。
我々はすべて知っているように、地球は球体であり、緯度と経度の有意な発現が、直接特定の変形面を持っていないパターンをプロットし、度であり、科学者ので、
墨卡托一貫したシナリオの円筒形カットの接地軸方向または土に切り込み、プレス等尺性条件は、目盛は、円筒面に投影され、平面展開の円筒形表面が、それは投影されました。円筒形切断突起を切断円筒形のメルカトル図法は、最も早いおよび最も一般的には、接線方向の円筒状突起です。下記のアルゴリズム式：
function _getMercator(poi) {//[114.32894, 30.585748]
var mercator = {};
var earthRad = 6378137.0;//赤道周长
mercator.x = poi.lng * Math.PI / 180 * earthRad;
var a = poi.lat * Math.PI / 180;
mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
return mercator; //[12727039.383734727, 3579066.6894065146]
}
复制代码オリジナル住所
ます。https：//juejin.im/post/5d031a7ef265da1bc64bbea7で再現