VUE 記一次高德地圖和Echarts（中國地圖）
效果圖
準備工做
- 高德地圖申請key
- 安裝Echarts 中國地圖
高德地圖javascript
- 官方API：點我進入
- 建立AMap.js
export default function MapLoader () {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
// 動態建立script標籤
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'https://webapi.amap.com/maps?v=1.4.9&callback=initAMap&key=Key&plugin=AMap.DistrictSearch,AMap.Circle,AMap.LngLat,AMap.Polyline,AMap.LngLat,AMap.Text,AMap.Geocoder';
// plugin後的是須要的插件
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}
複製代碼
Echarts 中國地圖vue
- 安裝Echarts
npm install echarts -S
複製代碼
開始使用
- 建立組件 distribution.vue
- 寫入Echarts 須要的DOM
<div class="main_wrap" >
<div ref="main" class="main_box"></div>
<div class="Rankingtips">
<p>分佈指數</p>
<div class="color_tip">
<span style="float: left">高</span>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<span style="margin-left: 5px">低</span>
</div>
</div>
</div>
複製代碼
- 寫入高德地圖須要的DOM
<div class="main_wrap" v-show="activeState2">
<div id="container" style="height: 100%"></div>
</div>
複製代碼
- 引入高德地圖、Echarts
import 'echarts/map/js/china'; //中國地圖js
import MapLoader from 'components/home/AMap'
複製代碼
- Echarts方法
generateEcharts() {
var echarts = require('echarts');
var myChart = echarts.init(this.$refs.main); // 基於準備好的dom，初始化echarts實例
this.$ajax.get(this.HOST + "/redesign/home/findEnterpriseistribution").then( (res) => {
// 數據格式
// [
// {name: "北京", value: 3, ranking: 1},
// {name: "河北", value: 2, ranking: 2},
// {name: "上海", value: 1, ranking: 3},
// {name: "廣東", value: 1, ranking: 4}
// ...
// ]
this.homebution = res.data.resultObject;
var data = [];
for (let i = 0; i < res.data.resultObject.length; i++) {
this.homebutionnum += res.data.resultObject[i].value;
let classnum = ""
// 排名顯示樣式
if(res.data.resultObject[i].ranking == 1) {
classnum = "#1669e6"
}else if(res.data.resultObject[i].ranking > 1 && res.data.resultObject[i].ranking <= 4) {
classnum = "#31a4ed"
}else if(res.data.resultObject[i].ranking > 4 && res.data.resultObject[i].ranking <= 10) {
classnum = '#2cccfd'
}else if(res.data.resultObject[i].ranking > 10 && res.data.resultObject[i].ranking <= 20) {
classnum = '#7fe2fd'
}else {
classnum = '#d9f4fe'
}
data.push(
{
name: res.data.resultObject[i].name,
itemStyle: {
normal: {
areaColor: classnum,
// borderWidth: 2
},
emphasis: {//高亮狀態下的多邊形和標籤樣式
borderWidth: 1,
// borderColor: '#d9f4fe',
areaColor: '#d9f4fe',
label: {
shadowColor: '#d9f4fe', //默認透明
shadowBlur: 10,
show: true,
textStyle: {
fontSize: 12,
color: '#3db77f'
}
}
}
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#0d6fb8'
}
},
emphasis: {
show: true,
color: '#3db77f'
}
},
value: res.data.resultObject[i].value ? res.data.resultObject[i].value: "",
ranking: res.data.resultObject[i].ranking ? res.data.resultObject[i].ranking: ""
}
)
}
// 準備提示數據
var option = {
tooltip: {
formatter: (params) => {
var info = "";
if(params.data) {
info = `<div style="width: 60px;height: 60px"> <p style="font-size:12px">${ params.name }</p> <p style="font-size:12px">${ params.data.value }</p> <p style="font-size:12px">排名：${ params.data.ranking }</p> </div>`
}else {
info = `<div style="width: 60px;height: 60px"> <p style="font-size:12px">${ params.name }</p> </div>`
}
return info;
},
backgroundColor: "rgba(0,0,0,.6)",//提示標籤背景顏色
textStyle: { color: "#fff" } //提示標籤字體顏色
},
//配置屬性
series: [{
name: '數據',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: false //省份名稱
},
emphasis: {
show: false
}
},
data: data //數據
}],
};
//使用制定的配置項和數據顯示圖表
myChart.setOption(option);
})
}
複製代碼
- 高德地圖方法
Scottmap() {
let that = this;
that.map = "";
MapLoader().then(AMap => {
console.log('地圖加載成功')
that.map = new AMap.Map('container', {
center: [116.05438, 38.98065],
// center: [116.397428, 39.90923],
zoom: 5
})
// 因爲項目是按雄安地區使用 API暫時還未把雄安劃分 因此決定把安新縣、雄縣、容城縣（三縣合一就是雄安）繪製成高亮
// 繪製高亮
var district = new AMap.DistrictSearch({
// 返回行政區邊界座標等具體信息
extensions: 'all',
// 設置查詢行政區級別爲 區
level: 'district'
})
var polygons=[];
var polygons2=[];
var polygons3=[];
district.search('安新縣', (status, result) => {
if(polygons) {
that.map.remove(polygons)//清除上次結果
}
polygons = [];
let bounds = result.districtList[0].boundaries;
if (bounds) {
for (let i = 0; i < bounds.length; i++) {
//生成行政區劃polygon
var polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.4,
fillColor: '#80d8ff',
strokeColor: '#0091ea'
});
polygons.push(polygon);
}
}
that.map.add(polygons);
});
district.search('雄縣', (status2, result2) => {
if(polygons2) {
that.map.remove(polygons2)//清除上次結果
}
polygons2 = [];
let bounds = result2.districtList[0].boundaries;
if (bounds) {
for (let i = 0; i < bounds.length; i++) {
//生成行政區劃polygon
var polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.4,
fillColor: '#80d8ff',
strokeColor: '#0091ea'
});
polygons2.push(polygon);
}
}
that.map.add(polygons2)
})
district.search('容城縣', (status2, result2) => {
if(polygons3) {
that.map.remove(polygons2)//清除上次結果
}
polygons3 = [];
let bounds = result2.districtList[0].boundaries;
if (bounds) {
for (let i = 0; i < bounds.length; i++) {
//生成行政區劃polygon
var polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.4,
fillColor: '#80d8ff',
strokeColor: '#0091ea'
});
polygons3.push(polygon);
}
}
that.map.add(polygons3)
})
// 構造矢量圓形（圓）
let circle = new AMap.Circle({
center: [116.05438, 38.98065], // 雄安的中心點
radius: that.distance * 1000, //半徑
strokeColor: "#ffffff", //線顏色
strokeOpacity: 1, //線透明度
strokeWeight: 3, //線粗細度
fillColor: "#276cd4", //填充顏色
fillOpacity: 0.2 //填充透明度
});
that.map.add(circle);
that.map.setFitView(circle);
let lnglat = new AMap.LngLat(116.05438, 38.98065) // lng, lat 替換成傳入的座標
let polylinePath = [
new AMap.LngLat(116.05438, 38.98065),
new AMap.LngLat(lnglat.offset(that.distance * 1000,0).lng,38.98065)
];
// 建立線覆蓋物
let polyline = new AMap.Polyline({
path: polylinePath,
strokeColor: "#ffffff", //線顏色
strokeOpacity: 1, //線透明度
strokeWeight: 2, //線寬
strokeStyle: "solid", //線樣式
strokeDasharray: [10, 5] //補充線樣式
});
that.map.add(polyline);
// 繪製字
let textPos = lnglat.offset(that.distance * 500,that.distance * 50);
let text = new AMap.Text({
text: `${ that.distance }千米`,
position: textPos,
map: this.map,
style:{
'background': 'transparent',
'border': '0 none',
'color': '#276cd4',
'font-size':'14px'}
})
that.map.add(text);
// 測試距離
let Centralpoint = [116.05438, 38.98065];
let targetpoint = this.region
// debugger
// 轉經緯度
let geocoder = new AMap.Geocoder({
city: '全國', //城市設爲北京，默認：「全國」
});
let markernum = 0
for (let i = 0; i < targetpoint.length; i++) {
geocoder.getLocation(targetpoint[i], (status, result) => {
if (status === 'complete'&& result.geocodes.length) {
let dis = AMap.GeometryUtil.distance(Centralpoint,result.geocodes[0].location);
// 繪製點標記顯示內容，HTML要素字符串
if(dis <= that.distance * 1000) {
markernum++;
let markerContent = '' +
'<div class="custom-content-marker" style="position: relative;">' +
' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" style="width: 23px;height: 30px">' +
'<div style="width: 23px;position: absolute;left: 0px;top: 0;margin: auto;color: #ffffff;text-align: center">'+ markernum +'</div>'+
'</div>';
this.$ajax.get(this.HOST + "/redesign/home/findCompanyAll").then( (res) => {
this.matchingenterpriseList.push(res.data.resultObject[i])
})
let marker = new AMap.Marker({
content: markerContent,
position: result.geocodes[0].location,
offset: new AMap.Pixel(-13, -30),
extData:{
id: markernum
}
});
that.markers.push(marker);
marker.setMap(this.map);
}
}
})
}
that.matchingenterpriseState = true;
}, e => {
console.log('地圖加載失敗' ,e)
})
},
複製代碼
- 左側企業列表
// 企業鼠標通過
matchingenterprisemouseenter(item,index) {
this.activemetchmouseenter = index;
let targetMarker = {};
for (let i = 0; i < this.markers.length; i++) {
let id = this.markers[i].getExtData().id;
if(id == index){
targetMarker = this.markers[i];
break;
}
}
// 從新替換樣式
let markerContent = '' +
'<div class="custom-content-marker" style="position: relative;">' +
' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width: 25px;height: 34px">' +
'<div style="position: absolute;left: 9px;top: 0;margin: auto;color: #ffffff">'+ index +'</div>'+
'</div>';
// targetMarker.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png');
targetMarker.setContent(markerContent)
let position = targetMarker.getPosition();
this.infoWindow = new AMap.InfoWindow({
position: position,
offset: new AMap.Pixel(0, -35),
content: item.companyName
});
this.infoWindow.open(this.map);
},
複製代碼
// 企業鼠標離開
matchingenterprisemouseleave(item,index) {
this.activemetchmouseenter = "";
let targetMarker = {};
for (let i = 0; i < this.markers.length; i++) {
let id = this.markers[i].getExtData().id;
if(id == index){
targetMarker = this.markers[i];
break;
}
}
let markerContent = '' +
'<div class="custom-content-marker" style="position: relative;">' +
' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" style="width: 25px;height: 34px">' +
'<div style="position: absolute;left: 9px;top: 0;margin: auto;color: #ffffff">'+ index +'</div>'+
'</div>';
// targetMarker.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png');
targetMarker.setContent(markerContent)
this.map.remove(this.infoWindow);
},
複製代碼
// 企業點擊
matchingenterpriseclick(item,index) {
this.activeState3 = true;
this.activeState1 = false;
this.activeState = false;
this.itemList = item;
// this.map.remove(overlayGroups);
let geocoder = new AMap.Geocoder({
city: '全國', //城市設爲北京，默認：「全國」
});
geocoder.getLocation(item.address, (status, result) => {
this.map.setCenter(result.geocodes[0].location); //設置地圖中心點
this.map.setZoom(30); // 縮放級別
})
},
複製代碼
具體代碼java
相關文章
- 1. vue 高德地圖
- 2. vue中使用vue-amap（高德地圖）
- 3. vue 調用高德地圖
- 4. 高德地圖和google地圖適配
- 5. 高德地圖地圖的加載（一）
- 6. 高德地圖
- 7. Vue中高德地圖的使用
- 8. 在Vue中使用高德地圖API
- 9. Vue-Cli 3.0 中配置高德地圖
- 10. vue-cli中使用高德地圖
- 更多相關文章...
- • 物理地址（MAC地址）是什麼？ - TCP/IP教程
- • R 繪圖 - 中文支持 - R 語言教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue 高德地圖
- 2. vue中使用vue-amap（高德地圖）
- 3. vue 調用高德地圖
- 4. 高德地圖和google地圖適配
- 5. 高德地圖地圖的加載（一）
- 6. 高德地圖
- 7. Vue中高德地圖的使用
- 8. 在Vue中使用高德地圖API
- 9. Vue-Cli 3.0 中配置高德地圖
- 10. vue-cli中使用高德地圖