来自 geojson 的 Amchart 地图,只显示一个矩形
Amchart map from geojson, just show a rectangle
我的输出
这是我的输出,只是一个矩形,不像我在 geojson.io or mapshapper 上尝试时的地图,而且我的浏览器控制台没有错误..
我的 Geojson
我已经在 features 对象中使用了 "id",这是我的示例 geoJson :
{type: "FeatureCollection", features: Array(14)}
features: Array(14)
0:
geometry: {type: "Polygon", coordinates: Array(1)}
properties:{
id: 332112
kabupaten: "DEMAK"
kecamatan: "Bonang"
provinsi: "JAWA TENGAH"
__proto__: Object
type: "Feature"
__proto__: Object
}
1: {type: "Feature", geometry: {…}, properties: {…}}
2: {type: "Feature", geometry: {…}, properties: {…}}
AmChart 代码
我加载amcharts地图的vue js代码
import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
import robots from "./assets/demak"
export default {
mounted() {
let map = am4core.create("chartdiv", am4maps.MapChart)
map.geodata = robots
console.log(robots);
map.projection = new am4maps.projections.Miller()
var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
polygonSeries.useGeodata = true
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.fill = am4core.color("#74B266");
polygonTemplate.tooltipText = "{KABUPATEN}";
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");
// Add zoom control
map.zoomControl = new am4maps.ZoomControl();
},
beforeDestroy() {
if (this.map) {
this.map.dispose()
}
}
}
问题是 mapshaper 正在逆时针方向重新排列您的地图坐标,而 Amharts 假设它是顺时针排列的。
您可以阅读解释并尝试 python 代码将其重新排列在:
https://www.wemcouncil.org/wp/how-to-make-mapshaper-output-compatible-with-amcharts4-using-python
它适用于我的情况。
我的输出
这是我的输出,只是一个矩形,不像我在 geojson.io or mapshapper 上尝试时的地图,而且我的浏览器控制台没有错误..
我的 Geojson
我已经在 features 对象中使用了 "id",这是我的示例 geoJson :
{type: "FeatureCollection", features: Array(14)}
features: Array(14)
0:
geometry: {type: "Polygon", coordinates: Array(1)}
properties:{
id: 332112
kabupaten: "DEMAK"
kecamatan: "Bonang"
provinsi: "JAWA TENGAH"
__proto__: Object
type: "Feature"
__proto__: Object
}
1: {type: "Feature", geometry: {…}, properties: {…}}
2: {type: "Feature", geometry: {…}, properties: {…}}
AmChart 代码
我加载amcharts地图的vue js代码
import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
import robots from "./assets/demak"
export default {
mounted() {
let map = am4core.create("chartdiv", am4maps.MapChart)
map.geodata = robots
console.log(robots);
map.projection = new am4maps.projections.Miller()
var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
polygonSeries.useGeodata = true
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.fill = am4core.color("#74B266");
polygonTemplate.tooltipText = "{KABUPATEN}";
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");
// Add zoom control
map.zoomControl = new am4maps.ZoomControl();
},
beforeDestroy() {
if (this.map) {
this.map.dispose()
}
}
}
问题是 mapshaper 正在逆时针方向重新排列您的地图坐标,而 Amharts 假设它是顺时针排列的。
您可以阅读解释并尝试 python 代码将其重新排列在:
https://www.wemcouncil.org/wp/how-to-make-mapshaper-output-compatible-with-amcharts4-using-python
它适用于我的情况。