Introduce Gaode open platform API in vue3+vite to realize the drawing of boundary range polygons
1. First go to the Gaode map open platform to apply for an account registration process and will not go into details;
2. Create a key in my application, select the web-side Js and click submit to generate;
3. You can see your own key after generation
4, enter the project and use npm to download dependencies
npm i @amap/amap-jsapi-loader --save
5. Imported into the page component after the download is complete
import AMapLoader from '@amap/amap-jsapi-loader';
6. Initialize the map after the import is complete
//这里是数据
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. How to download boundary data (that is, my HAILINGdata / JIANGYANdata / GAOXINdata)
You can go to Ali’s dataV to download, or you can find the boundary range on github to download excel and import it into the project;
In the official dome, only Shanghai and Suzhou can go to see the data format and modify it;
I found it myself on github, and I can find it myself
If you think it’s good, I hope you have any questions, comments or private messages after seeing it, and I will reply in time~ Thank you