高德地图自定义省界样式

⚡️ 由于高德api省界描边样式与ui差别很大，所以尝试自定义省界线样式
⚡️ vue2、vue3实现方式一致，本篇记录vue3实现方式

效果图（河北省为例）

vue3设置了高德地图安全密钥

简述主要实现方式

新建图片图层覆盖到所要展示的省份之上，高德图层 apiAMap.ImageLayer,图层图片由ui提供
AMap.Bounds([poitn1,poitn2],[poitn3,poitn4])四个点位置控制图层宽高与其地图实际大小重叠

高德地图获取key、密钥不再叙述

完整代码（vue3+vite）

mapConfig.js

// 高德Key Web端(JS API)export const MapKey='你申请的key'
// 高德安全密钥 Web端(JS API)export const MapSecretKey='你的密钥'

组件代码

<!-- 省界自定义样式 -->
<template><div class="box"><!-- 高德地图容器 --><div id="container"></div></div>
</template><script setup>import { MapKey, MapSecretKey } from "../config/mapConfig";//设置安全密钥
window._AMapSecurityConfig = {securityJsCode: `${MapSecretKey}`,
};//高德API加载器 安装命令： npm i @amap/amap-jsapi-loader
import AMapLoader from "@amap/amap-jsapi-loader";import { onBeforeMount, onMounted, ref } from "vue";onBeforeMount(() => {initMap.then((ok) => {//加载行政区查询插件initDistrictSearch();//绘制默认地区边界// searchAndBounds("河北省");}).catch((err) => {console.log(err);});
});// 地图容器
var map;//行政区查询容器
var district;
//行政区边界数据暂存
var polygons = [];// 初始化地图函数
const initMap = new Promise((resolve, reject) => {AMapLoader.load({key: `${MapKey}`, // 申请好的Web端开发者Key，首次调用 load 时必填version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15。 2.0地图加载慢，地图上下留有网格空白，本人小白找不到原因plugins: [],}).then((AMap) => {map = new AMap.Map("container", {viewMode: "3D", //是否为3D地图模式zoom: 7, //初始化地图级别center: [116.418261, 39.921984], //初始化地图中心点位置mapStyle: "amap://styles/1ab4919ee8d46968b49d9127e873d767",});map.setFeatures(["road", "bg"]);//获取Bounds四个点位置let southwest = getLnglatByDistAndAngle(652,[116.468664, 39.537057],227);let northeast = getLnglatByDistAndAngle(652, [116.468664, 39.537057], 43);//四个点控制图层位置与省界重合let bounds = new AMap.Bounds([southwest[0], southwest[1]],[northeast[0], northeast[1]]);//设置区域控制，移出区域后自动返回到范围区域map.setLimitBounds(new AMap.Bounds(southwest, northeast));var imageLayer = new AMap.ImageLayer({//vue2版本使用require url: require("./bbg.png"),url: new URL("./bbg.jpg", import.meta.url).href,//vue3+vite使用这种方式获取图片bounds: bounds ,//图片图层zooms: [2, 20],// opacity: 0.5,});map.add(imageLayer);//打点的数据let cityData = [{title: "唐山市",position: [117.611242, 39.778112],},{title: "张家口市",position: [114.885895, 40.768931],},{title: "承德市",position: [116.798254, 41.198462],},{title: "秦皇岛市",position: [118.830725, 40.039356],},{title: "保定市",position: [114.480139, 39.039631],},{title: "廊坊市",position: [116.064916, 39.303664],},{title: "衡水市",position: [115.668987, 37.739367],},{title: "沧州市",position: [116.838715, 38.304676],},{title: "石家庄市",position: [114.514976, 38.042007],},{title: "邯郸市",position: [114.53915, 36.6258497],},{title: "邢台市",position: [114.765783, 37.548025],},];//调用封装的打点方法createPoints(cityData, true);//操作成功resolve();}).catch((e) => {//操作失败reject(e);});
});//传入需要打点的数组-arr,type判断是否带title
function createPoints(arr, type) {let cityArr = [];if (type) {arr.map((city) => {let markerObj = city;var markerContent ='<div class="custom-content-marker">' + city.title + "</div>";markerObj.content = markerContent;var mark = new AMap.Marker(markerObj);cityArr.push(mark);});} else {arr.map((city) => {let markerObj = city;var markerContent = '<div class="custom-content-marker">' + "</div>";markerObj.content = markerContent;let mark = new AMap.Marker(markerObj);cityArr.push(mark);});}map.add(cityArr);
}
//计算点的位置
function getLnglatByDistAndAngle(dist, lnglat, angle) {let dealDist = dist / Math.sin((45 * Math.PI) / 180);const currlng = lnglat[0];const currlat = lnglat[1];const lng =currlng +(dealDist * Math.sin((angle * Math.PI) / 180)) /(111 * Math.cos((currlat * Math.PI) / 180));const lat =currlat +(dealDist * Math.sin((angle * Math.PI) / 180)) /(130 * Math.cos((currlat * Math.PI) / 180));return [lng, lat];
}//行政区查询插件加载
function initDistrictSearch() {AMap.plugin(["AMap.DistrictSearch"], function () {//加载行政区划插件if (!district) {//实例化DistrictSearchlet opts = {subdistrict: 0, //获取边界不需要返回下级行政区extensions: "all", //返回行政区边界坐标组等具体信息level: "district", //查询行政级别为 区};district = new AMap.DistrictSearch(opts);}});
}//边界查询并绘制
function searchAndBounds(dis) {district.search(dis, function (status, result) {// 获取边界信息let bounds = result.districtList[0].boundaries;map.remove(polygons); //清除上次结果polygons = [];if (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygonlet polygon = new AMap.Polygon({map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0,fillColor: "red",strokeColor: "#031d44",});polygons.push(polygon);}// 地图自适应map.setFitView();}});
}
</script><style scoped>
.box {width: 60%;margin-left: 20%;height: 100%;
}#container {width: 100%;height: 100%;
}
:deep(.custom-content-marker) {word-break: keep-all;color: #2ddcce;font-size: 16px;position: relative;padding-left: 25px;font-weight: 900;
}
:deep(.custom-content-marker::before) {content: ".";width: 6px;height: 6px;position: absolute;text-indent: -9999px;background: #fff;display: block;top: 3px;left: 0;border-radius: 10px;border: 6px solid #00deff;-webkit-box-shadow: 0px 0px 12px #fff;box-shadow: 0px 0px 12px #fff;
}
#controller {position: absolute;z-index: 99;top: 20px;left: 100px;background: white;list-style-type: none;width: 120px;
}
</style>

案例中UI图片，`背景图`与`省界线`图分开效果更好

分开实现方式：

容器区域单独设置背景图片
高德地图个人中心自定义高德地图样式，使其陆地背景样式不透明度为0
代码定义只显示一个省份，将省界线图与展示身份重叠

这样拖动地图不会超出背景图范围

github源代码：点击跳转到 gitHub 有用点个star吧~

高德地图自定义省界样式相关推荐

Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...
Android高德地图自定义Mark并实现聚合效果
Android高德地图自定义Mark并实现聚合效果起因:公司本来项目里面用到了高德地图,然后最近老板看见别人的APP里面有个聚合的这个功能,老板:"这个效果能不能实现,我也要!" ...
Android高德地图自定义Markers的例子
下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...
vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
高德地图自定义图标的点标记Marker--初体验（二）
点标记Marker 创建一个默认图标的点标记: 创建一个自定义图标的点标记: new AMap.Marker({}) 参数说明本文以Marker为主,其他点标记方法大差不差通过上两篇文章我们已经了 ...
vue+antv L7实现高德地图自定义样式和自定义marker
实现思路 1.在index.html中引入antv L7和高德地图 <script src="https://gw.alipayobjects.com/os/antv/pkg/_ant ...
高德地图自定义地图样式失效
记录一下自定义地图失效的问题~~ 正常引用: index:html: <script src="https://webapi.amap.com/maps?v=1.4.4&key ...
Android之高德地图自定义样式
安卓集成地图是常见需求,很多时候都需要进行地图样式进行设置,官方提供了一些可选择的样式,可以进行设置. 最新的配置样式方法请参考: 高德官方文档中:开发 > Android 地图SDK > ...
android高德地图自定义地图,Android实现高德地图自定义样式
放置Android工程下的assets文件夹,在assets文件夹里面创建了一个styleMap子文件夹.将里面的文件写到sd卡中. 写出文件代码: try { // 先获取系统默认的文档存放根目录 ...

高德地图自定义省界样式

效果图（河北省为例）

vue3设置了高德地图安全密钥

简述主要实现方式

高德地图获取key、密钥不再叙述

完整代码（vue3+vite）

案例中UI图片，`背景图`与`省界线`图分开效果更好

高德地图自定义省界样式相关推荐

最新文章

热门文章

高德地图自定义省界样式

效果图（河北省为例）

vue3设置了高德地图安全密钥

简述主要实现方式

高德地图获取key、密钥不再叙述

完整代码（vue3+vite）

案例中UI图片，背景图与省界线图分开效果更好

高德地图自定义省界样式相关推荐

最新文章

热门文章

案例中UI图片，`背景图`与`省界线`图分开效果更好