Green GIS JS API

//foo is a canvas
const map = new Map("foo");
map.setView([116.397411,39.909186], 12);
const marker = new SimpleMarkerSymbol();
marker.width = 32;
marker.height = 32;
marker.offsetX = 16;
marker.offsetY = 32;
marker.url = "assets/img/marker.svg";
const point = new Point(116.397411,39.909186);
const graphic = new Graphic(point, marker);
map.addGraphic(graphic);

//foo is a canvas
const map = new Map("foo");
map.setView([116.397411,39.909186], 12);
//lng line 画经线
const lngLayer = new GraphicLayer();
const lngSymbol = new SimpleLineSymbol();
lngSymbol.strokeStyle = "#0000ff";
for (let i = -180; i <= 180; i = i + 10){
    const line = new Polyline([[i, -80], [i, 80]]);
    const graphic = new Graphic(line, lngSymbol);
    lngLayer.add(graphic);
}
map.addLayer(lngLayer);
//lat line 画纬线
const latLayer = new GraphicLayer();
const latSymbol = new SimpleLineSymbol();
lngSymbol.strokeStyle = "#4d9221";
for (let j = -80; j <= 80; j = j + 10){
    const line = new Polyline([[-180, j], [180, j]]);
    const graphic = new Graphic(line, latSymbol);
    latLayer.add(graphic);
}
map.addLayer(latLayer);
//lng lat intersect 画经纬线交点
const pointLayer = new GraphicLayer();
const pointSymbol = new SimplePointSymbol();
pointSymbol.radius = 5;
pointSymbol.fillStyle = "#de77ae";
pointSymbol.strokeStyle = "#c51b7d";
for (let i = -180; i <= 180; i = i + 10){
    for (let j = -90; j <= 90; j = j + 10){
        const point = new Point(i, j);
        const graphic = new Graphic(point, pointSymbol);
        pointLayer.add(graphic);
    }
}
map.addLayer(pointLayer);

//foo is a canvas
const map = new Map("foo");
map.setView([107.411, 29.89], 7);
var req = new XMLHttpRequest();
req.onload = (event) => {
    const featureClass = new FeatureClass();
    featureClass.loadGeoJSON(JSON.parse(req.responseText));
    const featureLayer = new FeatureLayer();
    featureLayer.featureClass = featureClass;
    const field = new Field();
    field.name = "name";
    field.type = FieldType.String;
    const renderer = new CategoryRenderer();
    renderer.generate(featureClass, field);
        /*const renderer = new SimpleRenderer();
        renderer.symbol = new SimpleFillSymbol();*/
    featureLayer.renderer = renderer;
    featureLayer.zoom = [5, 20];
    featureLayer.on("click", (event) => {
        console.log(event.feature.properties["name"], "click");
    });
    featureLayer.on("mouseover", (event) => {
        console.log(event.feature.properties["name"], "mouse over");
    });
    featureLayer.on("mouseover", (event) => {
        console.log(event.feature.properties["name"], "mouse out");
    });
    map.addLayer(featureLayer);
};
req.open("GET", "assets/geojson/chongqing.json", true);
req.send(null);

//amap is a div, foo is a canvas
const amap = new AMap.Map("amap", {
    fadeOnZoom: false,
    navigationMode: 'classic',
    optimizePanAnimation: false,
    animateEnable: false,
    dragEnable: false,
    zoomEnable: false,
    resizeEnable: true,
    doubleClickZoom: false,
    keyboardEnable: false,
    scrollWheel: false,
    expandZoomRange: true,
    zooms: [1, 20],
    mapStyle: 'normal',
    features: ['road', 'point', 'bg'],
    viewMode: '2D'
});
const map = new Map("foo");
map.on("extent", (event) => {
    amap.setZoomAndCenter(event.zoom, event.center);
});
map.setView([107.411, 29.89], 7);