geoserver vectortile

geoserver -> web.xml

<filter>
    <filter-name>cross-origin</filter-name>
    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
    <init-param>
      <param-name>chainPreflight</param-name>
      <param-value>false</param-value>
    </init-param>
    <init-param>
      <param-name>allowedOrigins</param-name>
      <param-value>*</param-value>
    </init-param>
    <init-param>
      <param-name>allowedMethods</param-name>
      <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
    </init-param>
    <init-param>
      <param-name>allowedHeaders</param-name>
      <param-value>*</param-value>
    </init-param>
  </filter> 
<filter-mapping>
    <filter-name>cross-origin</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

ol

import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ'
import VectorTileSource from 'ol/source/VectorTile'
import {fromLonLat} from 'ol/proj'
import VectorTileLayer from 'ol/layer/VectorTile'
import {createXYZ} from 'ol/tilegrid';
import MVT from 'ol/format/MVT'
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';
import Circle from 'ol/style/Circle';

var pointStyle = new Style({
  image: new Circle({
  radius: 5,//半径
  fill: new Fill({
    color:'red'
  }),   //填充颜色              
  stroke: new Stroke({
    color: 'green',
    width: 1
  })//外环颜色和粗细
})
})

function simpleStyle(feature) {
  return pointStyle;
}
var layer = 'ne:hn';
var projection_epsg_no = '900913';
let vectorLayer = new VectorTileLayer({
  style: simpleStyle,
  source: new VectorTileSource({
    tilePixelRatio: 1, // oversampling when > 1
    tileGrid: createXYZ({maxZoom: 19}),
    format: new MVT(),
    url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' + layer +
        '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'
  })
})

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
  ],
  view: new View({
    // projection: 'EPSG:4326',
    center: fromLonLat([116.283, 40.04]),
    // center: [116.3, 40],
    zoom: 8
  })
});

mapbox

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

mapboxgl.accessToken = 'pk.eyJ1IjoicmFkaTIwMTUiLCJhIjoiY2tzOXpid2hzM25saDJxbXMyaGtvanZ5dyJ9.6jv0s_vChRoNSpQmhawyqw';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v11',
    center: [116.31, 40.05],
    zoom: 16
});
var layer = 'ne:hn';
var projection_epsg_no = '900913';
map.on('load', () => {
   
    map.addSource('hd-hn', {
        'type': 'vector',
        'scheme':'tms',
        "tiles": ['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' + layer +
        '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{y}.pbf']
    });


    map.addLayer(
        {
            'id': 'bj-heat',
            'type': 'heatmap',
            'source': 'hd-hn',
            'source-layer':'hn',
            'maxzoom': 20,
            'paint': {
                
            }
        }
    );  
});