1.百度地図APIの導入
//index.html中
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak值"></script>
2. echart をインストールする
npm install echarts --save
3. マップを作成する必要があるコンポーネントに以下を導入します。
import echarts from "echarts";
require("echarts/extension/bmap/bmap");
const CUSTOM_MAP_CONFIG = require("../../../static/custom_map_config.json");
このcustom_map_config.jsonはBaidu地図スタイルの設定ファイルです。記事の下部にechartが推奨する設定があります。Baidu Mapにアクセスして入手することもできます(Baidu Map—》Console—->>注目のサービスプラットフォーム----》パーソナライゼーションマップ)リンク
4. オプションの準備
{
title: {
text: "应急资源统计分散图",
left: "center",
textStyle: {
color: "#fff"
}
},
tooltip: {
triggerOn: "click",
show:false
},
bmap: { //百度地图配制
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: CUSTOM_MAP_CONFIG //地图样式配制
}
},
series: []
}
5. マップをインスタンス化する
let mapDiv = document.getElementById("material_map_box");
let myChart = echarts.init(mapDiv);
myChart.setOption(this.options);
Custom_map_config.json ファイル
[
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
},
{
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
]
ここでの準備はできるだけechartsの公式デモを使用する必要があります 百度地図を用意した理由がわかりません 導入後地図が表示されなくなりました 具体的な問題は見つかりませんでした理由はメッセージを残してください。( echarts 公式デモ)
6. 地図上でのデータのマーキング
一般的に、散乱、プッシュを使用して系列に入れると次のようになります。
{
type: "scatter",
coordinateSystem: "bmap", symbol:'circle',
symbolSize: 70,
label: {
normal: {
position: "inside",
fontSize: 14,
color: "#000000",
lineHeight: 20,
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: "#fff"
}
},
data: []
}