vite map

mapbox

@import "/node_modules/mapbox-gl/dist/mapbox-gl.css";

html, body {
  margin: 0;
  height: 100%;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

import './style.css';
import mapboxgl from 'mapbox-gl'; 

mapboxgl.accessToken = 'pk.eyJ1IjoicmFkaTIwMTUiLCJhIjoiY2tzOXpid2hzM25saDJxbXMyaGtvanZ5dyJ9.6jv0s_vChRoNSpQmhawyq';
const map = new mapboxgl.Map({
    container: 'map', 
    style: "/src/mbx/data/style1.json",
    center: [116.3, 40],
    zoom: 10, 
});

{
  "name": "mapbox_baidu",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "version": 8,
  "sources": {
    "aoi_source": {
      "type": "geojson",
      "data": "/src/data/aoi.geojson"
    }
  },
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "pink"
      }
    },
    {
      "id": "landuse_park",
      "type": "fill",
      "source": "aoi_source",
      "paint": {
        "fill-color": "#d8e8c8"
      }
    }
  ]
}

ol

@import "/node_modules/ol/ol.css";

html, body {
  margin: 0;
  height: 100%;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector'
import XYZ from 'ol/source/XYZ'
import VectorSource from 'ol/source/Vector'
import {fromLonLat} from 'ol/proj'
import MapboxVectorLayer from 'ol/layer/MapboxVector'
import GeoJSON from 'ol/format/GeoJSON'
import Polygon from 'ol/geom/Polygon';
import Feature from 'ol/Feature';

let vectorLayer = new VectorLayer({
  source: new VectorSource({
    projection: 'EPSG:4326',
    url: "/src/data/aoi.geojson", 
    format: new GeoJSON()
  })
})

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false
      })
    }),
    vectorLayer
    // new MapboxVectorLayer({
    //   styleUrl: 'mapbox://styles/mapbox/bright-v9',
    //   accessToken: 'pk.eyJ1IjoicmFkaTIwMTUiLCJhIjoiY2tzOXpid2hzM25saDJxbXMyaGtvanZ5dyJ9.6jv0s_vChRoNSpQmhawyqw',
    // })
  ],
  view: new View({
    // projection: 'EPSG:4326',
    center: fromLonLat([116.283, 40.04]),
    // center: [116.3, 40],
    zoom: 12
  })
});


map.on("click", function (ev) {
  // 获取像素
  let pixel = ev.pixel;
  // 获取坐标
  let coordinate = ev.coordinate;
  let feature = map.forEachFeatureAtPixel(pixel, function (feature) {
    let source = vectorLayer.getSource()
    console.log(feature)
    source.clear()
    source.addFeature(feature)

  });
});

// import {applyStyle} from 'ol-mapbox-style';
// const layer = new VectorLayer();
// applyStyle(layer, 'style4.json');
// new Map({
//   target: 'map',
//   layers: [layer],
//   view: new View({
//     center: fromLonLat([116, 40.920367528011525]),
//     zoom: 3,
//   }),
// });