vue3+viteにGaodeオープンプラットフォームAPIを導入し、境界範囲ポリゴンの描画を実現
1. まず、Gaode マップ オープン プラットフォームにアクセスしてアカウント登録プロセスを申請します。詳細については説明しません。
2. アプリケーションでキーを作成し、Web 側の Js を選択し、[送信] をクリックして生成します;
3. 生成後に独自のキーを確認できます。
4. プロジェクトに入り、npm を使用して依存関係をダウンロードします。
npm i @amap/amap-jsapi-loader --save
5. ダウンロード完了後、ページコンポーネントにインポートされます。
import AMapLoader from '@amap/amap-jsapi-loader';
6. インポートが完了したらマップを初期化します。
//这里是数据
import {
HAILINGdata, JIANGYANdata, GAOXINdata } from './map.js';
const map = ref<any>(null);
const mapZoom = ref<number>(10.5);
//初始化地图
AMapLoader.load({
key: '***', //填入你申请的key
version: '1.4.15', //高德版本 可以不填
plugins: [ //需要的地图插件
"AMap.ToolBar",
"AMap.Driving",
"AMap.PolygonEditor",
"AMap.PlaceSearch",
]
}).then(v => {
//对地图进行赋值 “container”为div盒子的id
//<div class="map" id="container"></div>
map.value = new v.Map("container", {
resizeEnable: true, //调整大小启用
center: [114.573471, 25.128443], //地图中心点坐标
zoom: 1 //缩放(可能失效)
});
//因为我这里是需要三个区切换显示所以我做了判断 如果只有一个可以直接赋值;
var path1 = active.value == 0 ? HAILINGdata : (active.value == 1 ? JIANGYANdata : GAOXINdata);
//重新创建边界范围对象
var polygon = new v.Polygon({
path: path1, //边界的所有坐标
fillColor: '#0070EF', //覆盖颜色
strokeOpacity: 1, //边界透明度
fillOpacity: 0.2, //覆盖颜色后的透明度
strokeColor: '#0070EF', //边界线条颜色
strokeWeight: 1, //边界线条宽度
strokeStyle: 'dashed', //边界线条
strokeDasharray: [5, 5], //阵列
});
map.value.add([polygon]); //将范围对象add到地图中
map.value.setFitView(); //重新绘制
map.value.setZoom(mapZoom.value); //注意我这里因为上面zoom缩放失效我这里重新进行set 可以将值写死 也可以写成动态的根据自己项目情况
})
7. 境界データ (つまり、私の HAILINGdata / JIANGYANdata / GAOXINdata) をダウンロードする方法
Ali の dataV にアクセスしてダウンロードすることも、github で境界範囲を見つけて Excel をダウンロードしてプロジェクトにインポートすることもできます。
公式ドームでは、データ形式を確認して変更できるのは上海と蘇州だけです。
github で自分で見つけました、自分で見つけることができます
良いと思ったら、ご覧になった後、質問、コメント、またはプライベートメッセージをいただければ幸いです。すぐに返信します〜ありがとう