高德地图绘制纯文本、绘制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", } ] }
