伦教九江网站建设,如何使wordpress先登录再显示,专业网站设计制作过程,wordpress无法创建目录.高德地图插件引入省略。。。样式和vue基础组件省略。。。
如果每个标点没有数值#xff0c;则可以用点聚合来实现功能下面例子#xff0c;每个标点会有按市统计的数值#xff0c;而且缩放一定程度时#xff0c;需要展示按省统计的标点#xff0c;因此需要自定义标点样式和…高德地图插件引入省略。。。样式和vue基础组件省略。。。
如果每个标点没有数值则可以用点聚合来实现功能下面例子每个标点会有按市统计的数值而且缩放一定程度时需要展示按省统计的标点因此需要自定义标点样式和监听地图缩放时间来实现这个功能
效果图
1.1初始化时按省进行统计 1.2地图放大一定程度时按市进行统计
同一个经纬点可支持展示两个数据 代码实现
templatediv classinfringement-mapdiv styleheight: 100%; classcard-styleRow styleheight: 100% :gutter16Col span24 styleborder-left:1px solid #E5E5E5;height: calc(100% - 30px);Row classdetail-header stylebackground-color: #fff;span高德热力图/span/RowRow classbg-white top-border stylepadding: 5px 10px;height: 100% :gutter22Col styleheight: 100%; span24div classbox-wrapdiv idtort-map/div/div/Col/Row/Col/Row/div/div
/templatescript
export default {data() {return {map: null,cityCoordinateList: [],provinceCoordinateList: [],listData: [],markersList: [],totalPoints: null,isLoadedProvince: false,isLoadedCity: false}},mounted() {this.initMap()this.searchHandler()},beforeDestroy() {this.map this.map.destroy()this.zoomOff()},methods: {searchHandler() {const res {code: 0,message: ,data: {cityCoordinateList: [{latitude: 116.405285,longitude: 39.904989,name: 北京,sellerQty: 14,mfrsQty: null},{latitude: 114.352482,longitude: 36.103442,name: 安阳市,sellerQty: null,mfrsQty: 1},{latitude: 113.051227,longitude: 23.685022,name: 清远市,sellerQty: 9,mfrsQty: null},{latitude: 116.587245,longitude: 35.415393,name: 济宁市,sellerQty: 2,mfrsQty: null},{latitude: 102.712251,longitude: 25.040609,name: 昆明市,sellerQty: null,mfrsQty: 4},{latitude: 111.975107,longitude: 21.859222,name: 阳江市,sellerQty: 2,mfrsQty: null},{latitude: 119.649506,longitude: 29.089524,name: 金华市,sellerQty: 1,mfrsQty: null},{latitude: 120.153576,longitude: 30.287459,name: 杭州市,sellerQty: 1,mfrsQty: null},{latitude: 114.412599,longitude: 23.079404,name: 惠州市,sellerQty: 1,mfrsQty: null},{latitude: 113.442973,longitude: 30.328407,name: 仙桃市,sellerQty: 4,mfrsQty: null},{latitude: 121.472644,longitude: 31.231706,name: 上海,sellerQty: 3,mfrsQty: null},{latitude: 111.134335,longitude: 37.524366,name: 吕梁市,sellerQty: 1,mfrsQty: null},{latitude: 108.948024,longitude: 34.263161,name: 西安市,sellerQty: 1,mfrsQty: null},{latitude: 117.043551,longitude: 30.50883,name: 安庆市,sellerQty: 1,mfrsQty: null},{latitude: 117.190182,longitude: 39.125596,name: 天津,sellerQty: null,mfrsQty: 1},{latitude: 117.283042,longitude: 31.86119,name: 合肥市,sellerQty: null,mfrsQty: 1},{latitude: 118.275162,longitude: 33.963008,name: 宿迁市,sellerQty: 1,mfrsQty: null},{latitude: 119.452753,longitude: 32.204402,name: 镇江市,sellerQty: 1,mfrsQty: null},{latitude: 119.527082,longitude: 26.65924,name: 宁德市,sellerQty: 1,mfrsQty: null},{latitude: 113.132855,longitude: 29.37029,name: 岳阳市,sellerQty: 1,mfrsQty: null},{latitude: 118.175393,longitude: 39.635113,name: 唐山市,sellerQty: 1,mfrsQty: null},{latitude: 110.364977,longitude: 21.274898,name: 湛江市,sellerQty: 1,mfrsQty: null},{latitude: 87.617733,longitude: 43.792818,name: 乌鲁木齐市,sellerQty: 1,mfrsQty: null},{latitude: 118.11022,longitude: 24.490474,name: 厦门市,sellerQty: 2,mfrsQty: null},{latitude: 114.085947,longitude: 22.547,name: 深圳市,sellerQty: 4,mfrsQty: null},{latitude: 82.074778,longitude: 44.903258,name: 博尔塔拉蒙古自治州,sellerQty: 1,mfrsQty: null},{latitude: 116.632301,longitude: 23.661701,name: 潮州市,sellerQty: 1,mfrsQty: null},{latitude: 113.280637,longitude: 23.125178,name: 广州市,sellerQty: 1,mfrsQty: 1},{latitude: 115.469381,longitude: 35.246531,name: 菏泽市,sellerQty: null,mfrsQty: 1},{latitude: 109.702392,longitude: 18.638189,name: 保亭黎族苗族自治县,sellerQty: 1,mfrsQty: null},{latitude: 126.427839,longitude: 41.942505,name: 白山市,sellerQty: 1,mfrsQty: null},{latitude: 106.504962,longitude: 29.533155,name: 重庆,sellerQty: 1,mfrsQty: 1},{latitude: 126.642464,longitude: 45.756967,name: 哈尔滨市,sellerQty: 1,mfrsQty: null},{latitude: 110.299121,longitude: 25.274215,name: 桂林市,sellerQty: 1,mfrsQty: null},{latitude: 114.391136,longitude: 27.8043,name: 宜春市,sellerQty: 1,mfrsQty: null},{latitude: 113.665412,longitude: 34.757975,name: 郑州市,sellerQty: 1,mfrsQty: null},{latitude: 105.724998,longitude: 34.578529,name: 天水市,sellerQty: 1,mfrsQty: null},{latitude: 108.320004,longitude: 22.82402,name: 南宁市,sellerQty: 1,mfrsQty: null},{latitude: 120.301663,longitude: 31.574729,name: 无锡市,sellerQty: 2,mfrsQty: null}],provinceCoordinateList: [{latitude: 103.823557,longitude: 36.058039,name: 甘肃省,sellerQty: 1,mfrsQty: null},{latitude: 114.502461,longitude: 38.045474,name: 河北省,sellerQty: 1,mfrsQty: null},{latitude: 117.000923,longitude: 36.675807,name: 山东省,sellerQty: 2,mfrsQty: 1},{latitude: 118.767413,longitude: 32.041544,name: 江苏省,sellerQty: 4,mfrsQty: null},{latitude: 116.405285,longitude: 39.904989,name: 北京,sellerQty: 14,mfrsQty: null},{latitude: 102.712251,longitude: 25.040609,name: 云南省,sellerQty: null,mfrsQty: 4},{latitude: 110.33119,longitude: 20.031971,name: 海南省,sellerQty: 1,mfrsQty: null},{latitude: 125.3245,longitude: 43.886841,name: 吉林省,sellerQty: 1,mfrsQty: null},{latitude: 119.306239,longitude: 26.075302,name: 福建省,sellerQty: 3,mfrsQty: null},{latitude: 120.153576,longitude: 30.287459,name: 浙江省,sellerQty: 2,mfrsQty: null},{latitude: 114.298572,longitude: 30.584355,name: 湖北省,sellerQty: 4,mfrsQty: null},{latitude: 121.472644,longitude: 31.231706,name: 上海,sellerQty: 3,mfrsQty: null},{latitude: 113.280637,longitude: 23.125178,name: 广东省,sellerQty: 19,mfrsQty: 1},{latitude: 106.504962,longitude: 29.533155,name: 重庆,sellerQty: 1,mfrsQty: 1},{latitude: 112.549248,longitude: 37.857014,name: 山西省,sellerQty: 1,mfrsQty: null},{latitude: 117.190182,longitude: 39.125596,name: 天津,sellerQty: null,mfrsQty: 1},{latitude: 115.892151,longitude: 28.676493,name: 江西省,sellerQty: 1,mfrsQty: null},{latitude: 108.948024,longitude: 34.263161,name: 陕西省,sellerQty: 1,mfrsQty: null},{latitude: 126.642464,longitude: 45.756967,name: 黑龙江省,sellerQty: 1,mfrsQty: null},{latitude: 113.665412,longitude: 34.757975,name: 河南省,sellerQty: 1,mfrsQty: 1},{latitude: 87.617733,longitude: 43.792818,name: 新疆维吾尔自治区,sellerQty: 2,mfrsQty: null},{latitude: 117.283042,longitude: 31.86119,name: 安徽省,sellerQty: 1,mfrsQty: 1},{latitude: 108.320004,longitude: 22.82402,name: 广西壮族自治区,sellerQty: 2,mfrsQty: null},{latitude: 112.982279,longitude: 28.19409,name: 湖南省,sellerQty: 1,mfrsQty: null}]}}this.removeMarkers()// 按市统计的数据this.cityCoordinateList res.data res.data.cityCoordinateList || []// 按省统计的数据this.provinceCoordinateList res.data res.data.provinceCoordinateList || []// 默认按省进行标点按省汇总标点总数this.totalPoints this.provinceCoordinateList.lengththis.addPoint(province)},/** ****** 地图 start ********/// 初始化地图initMap() {this.map new AMap.Map(tort-map, {zoom: 4, // 级别mapStyle: amap://styles/grey,center: [116.397428, 39.90923], // 中心点坐标viewMode: 3D // 使用3D视图})this.map.on(complete, () {console.log(地图渲染完成)this.zoomOn()})},addPoint(type) {const pointList type province ? this.provinceCoordinateList : this.cityCoordinateListpointList.forEach(item {const marker new AMap.Marker({position: [item.latitude, item.longitude], // 位置// 将 html 传给 contentcontent: this.preRenderMarker(item)})this.map.add(marker) // 添加到地图// 记录地图上的标点移除时需要this.markersList.push(marker)})},preRenderMarker(item) {// item.mfrsQtyM数据 item.sellerQtyS数据const { mfrsQty, sellerQty } itemif (mfrsQty sellerQty) {// M数据和S数据都有值则渲染复合的标记return this.renderClusterMarkerBoth(mfrsQty, sellerQty)} else if (mfrsQty) {// 只有M数据有值渲染M数据的标点return this.renderClusterMarker(mfrsQty, mfrsQty)} else if (sellerQty) {// 只有S数据有值渲染S数据的标点return this.renderClusterMarker(sellerQty, sellerQty)}},getBgColorByType (clusterCount, type) {let bgColor null// 聚合点配色const defaultColor type mfrsQty ? [253,187,187,247,162,162,237,127,127,228,93,93,219,60,60]: [195,252,195,178,240,178,153,222,154,130,205,131,120,198,121]if (clusterCount 0 clusterCount 10) {bgColor defaultColor[0]} else if (clusterCount 10 clusterCount 50) {bgColor defaultColor[1]} else if (clusterCount 50 clusterCount 100) {bgColor defaultColor[2]} else if (clusterCount 100 clusterCount 200) {bgColor defaultColor[3]} else if (clusterCount 200) {bgColor defaultColor[4]}return bgColor},// 单种类型的标点自定义样式renderClusterMarker (count, type) {// 聚合中点个数const clusterCount countconst bgColor this.getBgColorByType(count, type)const div document.createElement(div)div.style.backgroundColor rgba( bgColor ,.5)const size Math.round(10 Math.pow(clusterCount / this.totalPoints, 1 / 10) * 20)div.style.width div.style.height size pxdiv.style.border solid 1px rgba( bgColor ,1)div.style.borderRadius size / 2 pxdiv.innerHTML clusterCountdiv.style.lineHeight size pxdiv.style.color #ffffffdiv.style.fontSize 12pxdiv.style.textAlign centerreturn div},// 两种类型的标点自定义样式renderClusterMarkerBoth (mfrsQty, sellerQty) {const bgColorS this.getBgColorByType(sellerQty, sellerQty)const bgColorM this.getBgColorByType(mfrsQty, mfrsQty)const divDom document.createElement(div)const divS document.createElement(div)const divM document.createElement(div)divDom.style.display flexdivS.style.backgroundColor rgba( bgColorS ,.5)divS.style.width 30 pxdivS.style.height 20 pxdivS.style.lineHeight 20 pxdivS.style.border solid 1px rgba( bgColorS ,1)divS.style.borderRadius 30px 0 0 30pxdivS.innerHTML sellerQtydivS.style.color #ffffffdivS.style.fontSize 12pxdivS.style.textAlign centerdivM.style.backgroundColor rgba( bgColorM ,.5)divM.style.width 30 pxdivM.style.height 20 pxdivM.style.lineHeight 20 pxdivM.style.border solid 1px rgba( bgColorM ,1)divM.style.borderRadius 0 30px 30px 0divM.innerHTML mfrsQtydivM.style.color #ffffffdivM.style.fontSize 12pxdivM.style.textAlign centerdivDom.append(divS)divDom.append(divM)return divDom},removeMarkers() {this.map this.map.remove(this.markersList)},// 地图缩放等级改变mapZoom() {const currentZoom this.map.getZoom() // 获取当前地图级别if (currentZoom 4 !this.isLoadedProvince) {// 按省来渲染标记this.totalPoints this.provinceCoordinateList.lengththis.isLoadedProvince truethis.isLoadedCity falsethis.removeMarkers()this.addPoint(province)} else if (currentZoom 4 !this.isLoadedCity) {// 按市渲染标记this.totalPoints this.cityCoordinateList.lengththis.isLoadedCity truethis.isLoadedProvince falsethis.removeMarkers()this.addPoint(city)}},// 地图缩放事件绑定zoomOn() {this.map this.map.on(zoomchange, this.mapZoom)},// 地图缩放事件解绑zoomOff() {this.map this.map.off(zoomchange, this.mapZoom)}}
}/scriptstyle scoped langscss
.infringement-map {height: 100%;margin-top: -35px;.box-wrap {height: 100%;#tort-map {width: 100%;height: 100%;.citylist_popup_main {.city_content_top {box-sizing: content-box;}}}}
}
/style
