x

package.json

@@ -17,6 +17,7 @@
     "history": "^4.10.1",
     "ol": "4.3.3",
     "react": "^16.12.0",
+    "react-app-rewired": "^2.1.5",
     "react-dom": "^16.12.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",

public/index.html

@@ -41,5 +41,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
+    <script src="%PUBLIC_URL%/static/js/ol.js"></script>
   </body>
 </html>

src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
-import {Route, Router, Redirect} from 'react-router'
+import {Route, Router} from 'react-router'
 import { createHashHistory } from 'history'
 import Home from './page/Home'
 import StyleEdit from './page/StyleEdit'

src/page/List/grent.tsx

@@ -68,11 +68,9 @@ export default function GrentReducer({ getUrl, delUrl, zipUrl, sectionUrl, trans
     return referItem(model)
   }
 
+  // updateAction(modelState.paging.current)
   useEffect(() => { updateAction(modelState.paging.current) }, [referCount])
 
-  
-
-
   const Element = (
     <ListItems
       list={models}

src/page/StyleEdit/index.tsx

@@ -1,6 +1,6 @@
 import React, { useReducer, useEffect, useState, Fragment } from 'react'
 import { RouteComponentProps } from 'react-router'
-import { reducer, initialState, getLayersAction, updateLayerAction, Item } from './reducer'
+import { reducer, initialState, getLayersAction, updateLayerAction, saveLayersAction, Item } from './reducer'
 import VectorShow from '../components/VectorShow'
 
 type Attr = 'lineColor' | 'lineWidth' | 'fillColor'
@@ -12,15 +12,13 @@ function StyleEdit(props: RouteComponentProps) {
   let params = props.match.params as any
   let style = (layer && state[layer]) as Item
 
-  useEffect(() => { getLayersAction(dispatch, params.id) }, [0])
-  useEffect(() => { layer || setLayer(layers[0]) }, [state])
+  useEffect(() => { getLayersAction(dispatch, params.id) }, [params.id])
+  useEffect(() => { layer || setLayer(layers[0]) }, [layer, layers])
 
   const changeHandle = (attr: Attr) => (ev: React.ChangeEvent<HTMLInputElement>) => {
-    updateLayerAction(dispatch, layer, {
-      ...style,
-      [attr]: ev.target.value
-    })
+    updateLayerAction(dispatch, layer, { ...style, [attr]: ev.target.value })
   }
+  const saveHandle = () => { saveLayersAction(style, params.id) }
 
   return (
     <div>
@@ -32,9 +30,10 @@ function StyleEdit(props: RouteComponentProps) {
           <input type="color" value={style.fillColor} onChange={changeHandle('fillColor')} />
           <input type="color" value={style.lineColor} onChange={changeHandle('lineColor')} />
           <input type="number" value={style.lineWidth} onChange={changeHandle('lineWidth')} />
+          <button onClick={saveHandle}>保存</button>
         </Fragment>
       )}
-      {style && <VectorShow {...style} height={3000} />}
+      {style && <VectorShow {...style} height={2500} />}
     </div>
   )
 }

src/page/StyleEdit/reducer.ts

@@ -88,12 +88,30 @@ export const delLayerAction: ActionFun = (dispatch, layer) => dispatch({ type: D
 
 export const getLayersAction = async (dispatch: Dispatch, id: number) => {
   let res = await http.get('/vector/style/get/' + id + '/')
-  if (!res.data.data) return;
-  let layer = JSON.parse(res.data.data.layer)
+  let data = res.data.data
+  if (!data) return;
+
+  let layer = data.content ? JSON.parse(data.content) : JSON.parse(data.layer)
   let style = {
     ...defaultLayerStyle(),
-    ...layer
+    ...layer,
+    lat: Number(data.latitude),
+    lng: Number(data.longitude),
+    url: layer.url
+  }
+  // url: "../data/mvt/wuyi/{z}/{x}/{y}.pbf",
+
+  addLayerAction(dispatch, layer.name, style)
+}
+
+export const saveLayersAction = async (style: Item, id: number) => {
+  try {
+    let res = await http.post('/vector/style/save/', {
+      outputFileId: id,
+      content: JSON.stringify(style)
+    })
+    return res.data.status === 200
+  } catch {
+    return false
   }
-  addLayerAction(dispatch, layer.id, style)
-  console.log(style)
 }

src/page/components/VectorShow/index.tsx

@@ -1,17 +1,17 @@
-import React, {useEffect, useState} from 'react'
+import React from 'react'
 import { Color } from "csstype"
 import * as Cesium from 'cesium'
-import { WebMapTileServiceImageryProvider, GeographicTilingScheme } from 'cesium'
-import * as Ol from 'ol'
 import createMVTWithStyle from './mvt'
 import style from './style.module.css'
 
 declare global {
-  interface Window { CESIUM_BASE_URL: any; }
+  interface Window { CESIUM_BASE_URL: any; ol: any }
 }
 
 window.CESIUM_BASE_URL = './'
 
+const ol = window.ol
+
 export interface LayerStyle {
   lineColor: Color,
   lineWidth: number,
@@ -25,8 +25,11 @@ interface Props extends LayerStyle {
   height: number
 }
 
+interface State {
+  viewer: any
+}
+
 function createStyle (style: LayerStyle) {
-  let ol = Ol as any
   return new ol.style.Style({
     fill: new ol.style.Fill({
       color: style.fillColor,
@@ -36,33 +39,34 @@ function createStyle (style: LayerStyle) {
       color: style.lineColor,
       width: style.lineWidth,
       lineCap: "round",
-
     }),
   });
 }
 
-//天地图影像服务
-const tdtImagerLayerProvider = new WebMapTileServiceImageryProvider({
-  url: "http://{s}.tianditu.gov.cn/img_c/wmts?tk=463a3e5ee4e35c17ae02564f18f95655&service=wmts&request=GetTile&version=1.0.0" +
-    "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
-    "&style=default&format=tiles",
-  layer: "tdtImg_c",
-  style: "default",
-  format: "tiles",
-  tileMatrixSetID: "c",
-  subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
-  tilingScheme: new GeographicTilingScheme(),
-  tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
-  maximumLevel: 50
-})
-
-function VectorView(props: Props) {
-  const initViewer = void 0 as unknown as Cesium.Viewer
-  const [viewer, setViewer] = useState(initViewer)
-
-
-  useEffect(() => {
-    let lviewer = new Cesium.Viewer('cesiumContainer', {
+class VectorView extends React.Component<Props, State> {
+  clipLayer: any
+
+  constructor(props: Props) {
+    super(props)
+    this.state = { viewer: null }
+  }
+
+  componentDidUpdate () {
+    if (!this.state.viewer) return;
+    if (this.clipLayer) {
+      this.state.viewer.imageryLayers.remove(this.clipLayer, true)
+    }
+
+    this.clipLayer = createMVTWithStyle(Cesium, ol, {
+      url: this.props.url,
+      style: createStyle(this.props)
+    }) as any;
+
+    this.state.viewer.imageryLayers.addImageryProvider(this.clipLayer);
+  }
+
+  componentDidMount () {
+    let viewer = new Cesium.Viewer('cesiumContainer', {
       baseLayerPicker: false,
       geocoder: false,
       homeButton: false,
@@ -70,36 +74,25 @@ function VectorView(props: Props) {
       timeline: false,
       animation: false,
       navigationHelpButton: false,
-      imageryProvider: tdtImagerLayerProvider
     });
-    lviewer.camera.flyTo({
+    viewer.camera.flyTo({
       duration: 1,
-      destination: Cesium.Cartesian3.fromDegrees(props.lng, props.lat, props.height)
+      destination: Cesium.Cartesian3.fromDegrees(this.props.lng, this.props.lat, this.props.height)
     });
-    lviewer.scene.globe.baseColor = new Cesium.Color(1.0, 1.0, 1.0, 1.0);
-    setViewer(lviewer)
-  }, [1])
-
-
-  useEffect(() => {
-    if (!viewer) return;
-
-    return;
-    const clipLayer = createMVTWithStyle(Cesium, Ol, {
-      url: props.url,
-      style: createStyle(props)
-    }) as any;
-
-    viewer.imageryLayers.addImageryProvider(clipLayer);
-
-    return () => {
-      viewer.imageryLayers.remove(clipLayer, true)
+    viewer.scene.globe.baseColor = new Cesium.Color(1.0, 1.0, 1.0, 1.0);
+    this.setState({ viewer })
+  }
+
+  componentWillUnmount() {
+    if (this.state.viewer) {
+      this.state.viewer.imageryLayers.remove(this.clipLayer, true)
+      this.state.viewer.destroy()
     }
-  })
+  }
 
-  return (
-    <div id="cesiumContainer" className={style.layer}></div>
-  )
+  render() {
+    return <div id="cesiumContainer" className={style.layer}></div>
+  }
 }
 
 export default VectorView

src/page/components/VectorShow/mvt.js

@@ -114,7 +114,7 @@ function createMVTWithStyle(Cesium, ol, options) {
 
   function findTileInQueue(x, y, level, tileQueue) {
     var item = tileQueue.head;
-    while (item != undefined && !(item.xMvt == x && item.yMvt == y && item.zMvt == level)) {
+    while (item !== undefined && !(item.xMvt === x && item.yMvt === y && item.zMvt === level)) {
       item = item.replacementNext;
     }
     return item;
@@ -161,7 +161,7 @@ function createMVTWithStyle(Cesium, ol, options) {
 
   MVTProvider.prototype.requestImage = function (x, y, level, request) {
     var cacheTile = findTileInQueue(x, y, level, this._tileQueue);
-    if (cacheTile != undefined) {
+    if (cacheTile !== undefined) {
       return cacheTile;
     }
     else {
@@ -171,7 +171,6 @@ function createMVTWithStyle(Cesium, ol, options) {
       // url = url.replace('{x}', 106709).replace('{y}', 57087).replace('{z}', 17).replace('{k}', this._key);
       var tilerequest = function (x, y, z) {
         var resource = Cesium.Resource.createIfNeeded(url);
-        console.log(url);
         return resource.fetchArrayBuffer().then(function (arrayBuffer) {
           var canvas = document.createElement('canvas');
           canvas.width = 512;
@@ -190,7 +189,7 @@ function createMVTWithStyle(Cesium, ol, options) {
             var feature = features[i];
             // var styles = styleFun(features[i],that._resolutions[level]);
 
-            if (options.style == undefined) {
+            if (options.style === undefined) {
               options.style = new ol.style.Style({
                 image: new ol.style.Circle({
                   radius: 1,

src/setupProxy.js

@@ -11,4 +11,15 @@ module.exports = app => {
       }
     })
   )
+
+  app.use(
+    proxy('/test', {
+      // target: 'http://192.168.0.10:8082',
+      target: 'http://192.168.0.41:8087',
+      changeOrigin: true,
+      pathRewrite: {
+        "^/test": "/"
+      }
+    })
+  )
 }