标签：20 name type lnglat 高德 AMap new 绘制 maker
我们常需要利用高德地图在地图图层上面绘制文本、maker等内容，有必要小结一下；
情形一：绘制纯文本
封装方法如下：
addText(
textData,
style = {
"font-size": "12px",
color: "#fff",
backgroundColor: "transparent",
border: "none",
}
) {
if (!textData.length) return;
for (const [keys, values] of textData.entries()) {
var text = new AMap.Text({
text: values.name,
style,
position: values.position,
});
text.setMap(this.map);
}
}
使用方法：
this.addText([
{
name: "潇河产业园区",
position: [112.51776, 37.619499],
},
{
name: "阳曲产业园",
position: [112.690353, 38.05569],
}]
);
注意：此封装方法，将经纬度已经默认组装在一个数组里面，这里根据实际情况可以将经纬度自行拆开封装也行；
情形二：绘制maker及绑定事件弹出信息窗口
封装方法如下：
/**
* @description: 绘制maker的方法及添加事件
* @param {*} markerList 坐标的集合[{lang:'',lat:''}]
* @param {*} icon = new AMap.Icon({
size: new AMap.Size(20, 20), // 图标尺寸
image:
"data:"base64格式", // Icon的图像
imageSize: new AMap.Size(20, 20), // 根据所设置的大小拉伸或压缩图片
});
* @param {*} myhtml 弹框infowindow的样式函数
* @return {*}
* @author: George Zhang
*/
addCommonMarkerFun(markerList = [], icon = "", myHtml = "") {
let that = this;
if (!markerList.length) return;
for (const [keys, values] of markerList.entries()) {
let marker = new AMap.Marker({
position: new AMap.LngLat(values.longitude, values.latitude),
offset: new AMap.Pixel(-5, -5),
icon,
label: {
content: values.name || "",
direction: "bottom",
offset: new AMap.Pixel(5, 5),
},
});
marker.on("click", async function(e) {
if (!myHtml) return;
const html = myHtml(values);
that.addInfoWindow(html, [e.lnglat.lng, e.lnglat.lat]);
that.map.setCenter([e.lnglat.lng, e.lnglat.lat - 0.1]);
});
that.map.add(marker);
}
},
使用方法如下：
此处我们也将 qiyeHtml 这个弹框信息封装为方法，当然此方法根据你具体的需求需要自定义，有时间还需要异步请求 ！！！
// 绘制企业及文字
this.addCommonMarkerFun(
[
{
name: 'xxxx', //该字段根据实际情况来定
longitude:112.23,
latitude: 37.56,
}
],
new AMap.Icon({
size: new AMap.Size(20, 20), // 图标尺寸
image:
"data:", // Icon的图像
imageSize: new AMap.Size(20, 20), // 根据所设置的大小拉伸或压缩图片
}),
this.qiyeHtml
);
qiyeHtml(e) {
// 此处可能会有异步请求，可加入await async 来进行处理！！！
const html = `<div style="width:2.6667rem;padding: 0.1rem;">
<p style="color: #fff;font-size: 0.16rem;font-weight: bold;">
${e.name}
</p>
<div class='flex-start' style='margin:0.1rem 0;'> <span>碳排放量：</span> <span>${e.yearTotal}吨</span> </div>
</div>`;
return html;
},
情形三：绘制区域
此需要需要给出具体的坐标闭合区域。
封装方法：
/**
* @description:
* @param {*} geoJsonData
* @param {*} type 1代表企业 2代表园区 3 绿地
* @return {*}
* @author: George Zhang
*/
drawGeoJson(geoJsonData, type = 1) {
let that = this;
let geoJson = new AMap.GeoJSON({
geoJSON: geoJsonData, // GeoJSON对象
getPolygon: function(geojson, lnglats) {
return new AMap.Polygon({
path: lnglats,
fillOpacity: 0.8,
fillColor: that.fillColor(geojson.properties.name, type),
fillOpacity: that.fillOpacity(geojson.properties.name, type),
strokeColor: "#B0E8C8",
name: geojson.properties.name,
borderWeight: 1,
strokeOpacity: 0.4,
});
},
});
geoJson.eachOverlay((e) => {
let that = this;
if (e.w.name) {
let fillColor = e.w.fillColor;
let fillOpacity = e.w.fillOpacity;
e.on("click", async (params) => {
that.map.setCenter([params.lnglat.lng, params.lnglat.lat - 0.1]);
const html = await that.myYuanquHtml(e.w.name);
that.addInfoWindow(html, [params.lnglat.lng, params.lnglat.lat]);
});
e.on("mouseover", () => {
e.setOptions({
fillColor: "#CB7F1F",
fillOpacity: 1,
});
});
e.on("mouseout", () => {
e.setOptions({
fillColor,
fillOpacity,
});
});
}
});
this.map.add(geoJson);
},
使用方法：
geoJsonData 的格式为如下的内容 （GeoJSON格式的数据）
{
type: "FeatureCollection",
features: [
{
geometry: {
coordinates: [
[
[112.5443997335351, 37.78031618392991],
[112.5442467093464, 37.78441214392258],
[112.5445342759263, 37.78764893351841],
[112.5454687381043, 37.79001597508982],
[112.5492412801307, 37.79962551542971],
[112.549960054558, 37.81383739056211],
[112.5756339657377, 37.8137928084111],
[112.5755981477979, 37.78834534929788],
[112.5762988222724, 37.78356866754082],
[112.5676752511216, 37.78371218538219],
[112.5675673829111, 37.78046084890205],
[112.5443997335351, 37.78031618392991],
],
],
type: "Polygon",
},
properties: {
UserID: 0,
name: "学府产业园区",
},
type: "Feature",
},
{
geometry: {
coordinates: [
[
[112.6109310562599, 37.87825393162834],
[112.6186623445191, 37.87869114011654],
[112.6189318724017, 37.87931788497126],
[112.624070428042, 37.87995845543765],
[112.6241242070624, 37.88068460933729],
[112.6256154928961, 37.88086962235363],
[112.624767353892, 37.87093242989624],
[112.6259708884497, 37.87093104681709],
[112.6265676816104, 37.87302248249204],
[112.6274839536567, 37.87386269388013],
[112.6288452775488, 37.87545787923099],
[112.631704201473, 37.87542930170126],
[112.6288580153967, 37.86517743047393],
[112.626195737938, 37.86462876720404],
[112.625556153919, 37.86023124021069],
[112.6225792253824, 37.86065965899524],
[112.6139553814875, 37.86068877083186],
[112.6114535000939, 37.86118773077254],
[112.6109279246743, 37.8777373512381],
[112.6109310562599, 37.87825393162834],
],
],
type: "Polygon",
},
properties: {
UserID: 0,
name: "阳曲产业园",
},
type: "Feature",
}
]
}
标签：20,name,type,lnglat,高德,AMap,new,绘制,maker 来源： https://www.cnblogs.com/teamemory/p/15342746.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。