我试图保持我的代码(服务器端和客户端)尽可能模块化,这需要大量的导入和导出,但我有一个未解答的问题.

我试图从这里搜索,我阅读了热门的博客文章,甚至看了几个YT视频,但它仍然没有完全解释.我希望现在避免犯这个错误,避免以后重写我的逻辑.

文件1

import React from 'react';

// do something

文件2

import React from 'react';

// do something else

文件3

import File1 from './file1';
import File2 from './file2';

// do something with both

• 它够聪明吗？我可以根据需要导入相同的模块,只导入一次吗？
• 如果我需要什么import React,以FILE3呢？是否仍然足够聪明来处理这种情况？

我使用Node,Babel和Webpack.

HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it.
(XHR): GET - https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/less/normalize.less

HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it.
(XHR): GET - https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/less/print.less

HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it.
(XHR): GET - https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/dist/css/bootstrap.css

HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it.
(XHR): GET - https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/less/glyphicons.less

HTTP403: FORBIDDEN - The server understood the request, …

你为什么需要以及如何viewer在Relay.js中正确使用？

我花了一周时间尝试了解Relay.js.我现在对GraphQL很好,我理解得很好但是我在同一个应用程序中将GraphQL和Relay.js联合起来有些问题.

第一步可能是理解viewer.我已经看过许多使用它的示例和教程,但它从未被解释过,而且它的确切内容和用途是什么并不十分清楚.

中继文档提到了viewer几次,但是甚至没有一个单词解释它.

我希望我能为这个问题做点什么,但我担心网上没有解释.它只在代码中使用,并且脱离上下文没有任何意义.无论如何,回答这个问题需要一些关于Realy.js/GraphQL的知识.

根据我研究的无数例子,我最好的猜测是它与用户有某种关系？如果用户是匿名或登录？根据登录状态或用户级别授予对数据的不同访问权限？

如何检查用户是否有权查看或查询内容？我不知道该怎么做.

• 在args？怎么会这样呢？
• 在resolve()？看看用户是否有权限并以某种方式消除/更改某些args？

例:

如果用户是"访客",他只能看到公开帖子,"管理员"可以看到一切.

const userRole = 'admin';  // Let's say this could be "admin" or "visitor"

const Query = new GraphQLObjectType({
    name: 'Query',
    fields: () => {
        return {
            posts: {
                type: new GraphQLList(Post),
                args: {
                    id: {
                        type: GraphQLString
                    },
                    title: {
                        type: GraphQLString
                    },
                    content: {
                        type: GraphQLString
                    },
                    status: {
                        type: GraphQLInt  // 0 means "private", 1 means "public"
                    },
                },

                // MongoDB / Mongoose magic happens …

我已经拼命寻找能够处理多达50 000个标记的正确解决方案(如果服务器可以处理它,为什么不能更多),同时在我的服务器上很容易,而且我已经这样做了好几天了.

概念是这样的:

• 集群服务器端的最佳解决方案/语言是什么？我不是在寻找一个巨大的工作代码,但我需要被推向正确的方向.
• 如何"缓存"或"标记"已加载的群集/标记,以便在地图放大/缩小或平移时不会重新加载已加载的标记/群集？

理论:

正确的方式似乎与此类似:

• 如果地图缩小并且有很多标记,请在服务器中处理群集
• 如果地图放大到所有标记不再适合视口的点,则仅聚类视口中的标记 - 也是服务器
• 如果缩放变得如此之大以至于视口中的标记数量变小(例如<500),则通过JS在浏览器中进行集群

我可以在服务器端使用的数据,我也可以通过JSON发送到浏览器:

• 在发出请求时,通过ajax将映射边界映射到服务器
• 数据库查询中的标记总数
• 来自数据库查询的标记坐标
• 可能是我目前没有意识到的其他重要/有用的东西

两者之间是否存在显着差异？我对从运行时和启动性能到功能和工作流差异的任何事情感兴趣.文档在解释差异方面做得不好,何时应该使用其中一个.

两个版本中的示例:

buildSchema

const { graphql, buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

const root = { hello: () => 'Hello world!' };

graphql(schema, '{ hello }', root).then((response) => {
  console.log(response);
});

GraphQLSchema

const { graphql, GraphQLSchema, GraphQLObjectType, GraphQLString } = require('graphql');

const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: () => ({
      hello: {
        type: GraphQLString,
        resolve: () => 'Hello world!'
      }
    })
  })
});

graphql(schema, '{ hello …

浏览器控制台警告:

bundle.js:1警告:看起来你正在使用React的开发版本的缩小副本.在将React应用程序部署到生产环境时,请确保使用生成构建,该构建会跳过开发警告并且速度更快.有关详细信息,请参阅http://facebook.github.io/react/downloads.html.

package.json中的脚本:

  "scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback",
    "start:prod": "webpack && node server.js"
  },

Git Bash中的命令:

NODE_ENV=production npm start

如果我使用console.log(process.env.NODE_ENV)的server.js,我得到production.

• React 通过 npm 安装
• 最新版本:15.0.2
• 我使用Webpack UglifyJs插件

知道什么可能是错的吗？

从第一个blockquote中的链接:

注意:默认情况下,React将处​​于开发模式.要在生产模式下使用React,请将环境变量NODE_ENV设置为production(使用envify或webpack的DefinePlugin).建议使用UglifyJS执行死代码消除的minifier,以完全删除开发模式中存在的额外代码.

我错过了什么吗？我真的需要某种第三方软件包或插件来设置变量吗？但它已经在生产环境中控制日志.对我来说似乎不合逻辑.

更新:当前的webpack.config.js

var webpack = require('webpack')

module.exports = {
  entry: './index.js',

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: '/'
  },

  plugins: process.env.NODE_ENV === 'production' ? …

是否可以获得瓷砖 LngLat 边界框？（如果可能的话还有中心/宽度）

即给定任何图块“id”（例如6/33/24），计算所需的坐标。我非常渴望得到答案，我什至不在乎它是用什么语言写的。

语境

磁贴“id”有 3 个部分：( 6/33/24) z/x/y。

zx/y从左/上原点开始进行地板缩放 (0-24) 和图块编号。

当缩放为 1 时，整个地图被分为 4 个相等的图块（如图所示）。每次缩放 ( z) 增加时，每个图块都会细分为 4 个相等的图块（例如，缩放 2 = 16 个图块）。

 _______________________
|          |           |
|  1/0/0   |   1/1/0   |
|          |           |
|__________|___________|
|          |           |
|  1/0/1   |   1/1/1   |
|          |           |
|__________|___________|

为什么？

我想实现客户端标记缓存并将它们绑定到图块似乎是最合理的解决方案。我知道如何获取图块（循环sourceCaches图块或使用几种transform方法），但我不知道如何从图块矩阵或图块 ID 获取 LngLat 数据。

标记缓存的超级基本 JavaScript 概念（用于上下文）：

 _______________________
|          |           |
|  1/0/0   |   1/1/0 …

我有许多复杂的多边形,有些有750+点.是否有快速有效的方法来获得边界框？我不想在每个点上循环并扩展边界框.

解决方案应该是javascript或者可能是我错过的Google Maps API v3功能.

或者我应该硬编码边界框的坐标并使用这些来减少客户端的负载？

如何制作多边形:

//Coordinates
var coordinates = [ 
    new google.maps.LatLng(11,22),
    new google.maps.LatLng(11,22),
    new google.maps.LatLng(11,22),

    //etc up to 200, 500 or even 800 points
]

//Options
var options = {
    path: coordinates,
    strokeColor: "#222",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "#000",
    fillOpacity: 0,
    zIndex: 0
}

//Create polygon
var polygon = new google.maps.Polygon( options );

//Show it on map
polygon.setMap( map );

我需要做我的作业,因为实时计算被排除在外.我可能需要以艰难的方式去做,但也许你们中的一些人知道一些方便的在线工具,根据插入的坐标计算边界框？

我需要尽可能简单的形状,因为我需要检查我的多边形是否在视口中,它可能是一个800点的噩梦,因为除了循环所有点之外我不知道任何其他方式.

这是我的示例代码:

#parent {
  display: flex;
  height: 350px;
  background: yellow;
}
#wrapper {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  margin: 0 10%;
  background: #999;
}

#top {
  flex: 1 100%;
  height: 50px;
  margin-top: 10px;
  background: red;
}

#left {
  width: 30%;
  height: 150px;
  margin: 10px 10px 0 0;
  background: blue;
}

#right {
  flex: 1;
  margin: 10px 0 0 0;
  background: green;
}

<div id="parent">
  <div id="wrapper">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</div>

如您所见,top(红色)和left/ …