Home | Li Kejia
0%

发表于
  1. QGIS打开geojson，转换坐标系，4326转为3857，导出为geojson。
  2. 网站https://mapshaper.org/将geojson转为shp导出。
  3. geoserver发布图层，修改SRS，边界，样式。
  4. geoserver预览png图层，复制地址mapbox通过raster图层加载即可。

mapbox加载代码示例：（注意：bbox={bbox-epsg-3857}）

1
2
3
4
5
6
7
8
9
10
11
12
map.addSource('wms-source', {
  'type': 'raster',
  'tiles': [
    'http://localhost:8080/geoserver/webgis/wms?service=WMS&version=1.1.0&request=GetMap&layers=webgis:province&styles=&bbox={bbox-epsg-3857}&width=768&height=553&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
  ],
  'tileSize': 256
});
map.addLayer({
    'id': 'wms-layer',
    'type': 'raster',
    'source': 'wms-source'
});

发表于 更新于

EPSG 4326

  1. 地理坐标系，EPSG 4326是WGS 84坐标系统，也称为全球地球坐标系统（GCS），是一种广泛使用的地理坐标系统。

  2. 这个坐标系统使用经度（longitude）和纬度（latitude）来定义地球上的位置，其中经度的范围是-180到+180，纬度的范围是-90到+90。坐标单位是度（°）。

  3. EPSG 4326使用的是大地测量学参考椭球WGS 84。

  4. 国际上广泛使用的坐标系统。

EPSG 4490

  1. 地理坐标系，EPSG 4490是CGCS2000坐标系统，也称为中国2000大地坐标系（CGCS2000），是中国国家测绘局于2007年发布的地理坐标系统。
  2. 这个坐标系统同样使用经度和纬度来定义地球上的位置，其范围也分别是-180到+180的经度和-90到+90的纬度。坐标单位是度（°）。
  3. 专门用于中国地区的地理信息系统应用。

EPSG 3857

  1. 投影坐标系（平面墨卡托投影），将地球表面投影到平面，用米作为单位。常用于网页地图（Google Maps、Mapbox、Leaflet、ArcGIS Online 都默认用 3857）。
  2. 坐标值范围大概是 X: -20037508.34 ~ 20037508.34 米，Y: -20037508.34 ~ 20037508.34 米。坐标单位是米。

发表于

转自：https://www.panyanbin.com/article/7ecb5744.html

在现在互联网上，大多数的网站都是使用HTTPS协议。如果在HTTPS协议的页面中，请求了HTTP的资源，就被浏览器识别为HTTPS安全内容和HTTP不安全内容混合在一起，这种情况浏览器可能会阻止页面显示或显示一个警告信息。

比较旧版本的浏览器可能只是一个提示，不允许在https页面中使用http资源，但是现在大多数高版本的浏览器都直接报错Mixed Content，这就导致页面内容无法加载和显示。

iframe 嵌入

iframe 嵌入

什么是Mixed Content

首先，我们来了解一下MDN关于Mixed Content的解释：

When a user visits a page served over HTTPS, their connection with the web server is encrypted with TLS and is therefore safeguarded from most sniffers and man-in-the-middle attacks. An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. That leaves the pages unsafe.

用谷歌翻译一下其意思如下：

当用户访问通过HTTPS提供的页面时，他们与 Web 服务器的连接使用TLS 进行加密，因此可以防止大多数嗅探器和中间人攻击。包含使用明文 HTTP 获取的内容的 HTTPS 页面称为混合内容页面。像这样的页面只是部分加密，使嗅探器和中间人攻击者可以访问未加密的内容。这使页面不安全。

不过也不是页面中所有http资源都被会禁用，大致分为两种：mixed passive content和mixed active content。

类型 常用的几个使用场景
mixed passive content <img>、<audio>、<video>、<object>
mixed active content <script>、 <link> 、<iframe> 、XMLHttpquest 、fetch()

两者不同主要是根据其对用户威胁程度不同：，在mixed passive content威胁较低（页面可能包含误导性内容，或者用户的 cookie 可能被盗）。mixed active content ，威胁可能导致网络钓鱼、敏感数据泄露、重定向到恶意站点等。

大多少浏览器直接阻止mixed active content，有部分浏览器会阻止mixed passive content。

如何解决？

考虑到安全问题，浏览器禁止这样使用是很正常的。为了能正常使用，我们还是需要把网站中的所有资源都升级到https。但是，有些资源是第三方提供，我们无法控制时，这种情况我们怎么处理呢。

以下将结合网上的一些解决办法对这种情况进行说明。

1. 页面中添加meta

在html页面头部添加以下meta信息

1
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

这个meta是用于定义浏览器在本页面中的内容安全策略（CSP），值upgrade-insecure-requests的作用表示对页面中资源请求自动升级为https。比较适合页面中有太多资源的url是http协议。

注意：如果本身js/css等资源不支持https，添加该项meta并不会生效。

2. 浏览器启用Mixed Content混合内容

假如这个第三方资源只提供http的请求，并不支持https进行请求时。我们可以通过浏览器的设置进行允许混入内容，这样就可以支持第三方http资源正常执行和显示。不过不同浏览器设置有所不同，以下根据谷歌浏览器，火狐浏览器和Edge浏览器进行说明。

谷歌浏览器设置方式1

首先，点击地址栏上的小锁，在弹出的小窗选择网站设置

image-20210717222046583

image-20210717222046583

然后，在“不安全内容”配置项选择“允许”，重新刷新页面后就iframe嵌入的页面内容就显示出来。

image-20210717223026890

image-20210717223026890

刷新后结果如下：

image-20210717224322171

image-20210717224322171

大的问题暂时是解决了，起码页面已经显示出来，交互也没有障碍，不过还存在几个小问题需要注意：

  1. 左上角的绿色小锁已经变成红色叹号警告，说明是不安全
  2. 控制台输出很多警告，也就是之前错误阻止变成输出警告
  3. 这个设置仅针对当前网站的页面，如果换另一个网站，还需要再针对那个网站设置一次

谷歌浏览器设置方式2

谷歌浏览器还有另一种设置方式，通过给定谷歌浏览器启动参数进行设置。

首先，退出浏览器，即关闭浏览器的所有窗口。

然后，右击桌面谷歌浏览器图标选择“属性”，并在目标这一项中，追加启动参数--allow-running-insecure-content。

注意：参数与前一项启动参数有空格隔开，而且是追加该参数，如果有其他启动参数也不要删除

如下图所示，图中是没有其他的启动参数的情况

image-20210717230756141

image-20210717230756141

配置完成点击确定后，重新打开网站进入就可以显示出来，也都不需要去网站配置中允许”不安全内容”。因为这一项已经在启动参数中

火狐浏览器

首先，在 Firefox 的地址栏中输入 about:config并回车

然后，在搜索栏中，输入mixed进行过滤，本地没有火狐浏览器，借用一下网上的图

about:config

about:config

然后双击列表中的写着security.mixed_content.block_active_content的项，让其值显示为false即可。

重新刷新页面就可以显示正常。

Edge浏览器

Edge浏览器的设置方式与谷歌浏览器设置方式1基本类似，选择此网站的权限后，在“不安全内容”配置项选择“允许”即可。

image-20210717233100413

image-20210717233100413

浏览器修改配置固然可以解决https页面中允许http请求，但是浏览器都在用户电脑上，我们不可能让每个用户在访问网站前都按照以上设置操作一遍先。因此，修改浏览器配置可以用作临时方案，但不能作为长久方案。

3. 后台服务器代理

既然不能在浏览器解决，那就只能在服务器端去解决。

我们把第三方资源请求做特殊处理并替换host为本站的host，当这个请求发送到我们的服务器后，再处理url代理转发到第三方站点。这样用户也无须考虑浏览器配置问题，同样页面也不会出现用浏览器方式解决后还出现的几个小问题。

以远程代理服务器使用nginx为例

1
2
3
location /fanyi/ {
	proxy_pass  http://fanyi-pro.baidu.com/;
}

修改页面地址为https://www.panyanbin.com/fanyi/?from=bdmore。

这样总体逻辑是走通了，来看一下页面结果如下：

image-20210718001419681

image-20210718001419681

内容是返回了，不过其他资源却是404失败，这是由于页面内的其他js资源不是使用相对当前页面路径，而是使用网站根路径。

因此不能使用目录/fanyi/进行代理，必须使用根路径/，但是我这个域名本身也有资源，所以最佳方式是换用另一个支持https的域名进行/代理即可，之后就不调试了，大致逻辑是没问题的。

小结

大概总结一下以上几种方式

  • meta方式必须资源支持https才行，因为此功能仅是自动升级为https请求
  • 浏览器配置方式比较适合解决临时紧急的解决方案，不适应让站点用户来配置使用
  • 代理方式比较推荐使用，基本与正常站点访问没差别

无论那种方式都好，最好的解决办法是站点资源和第三方资源都支持https，这样就不会出Mixed Content错误。

发表于 更新于

使用arcgis js 4.33

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// TDTLayer.js
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import TileInfo from "@arcgis/core/layers/support/TileInfo";
import Extent from "@arcgis/core/geometry/Extent";

const token = "你的天地图token";

// 天地图 TileInfo 统一定义
const tileInfo = new TileInfo({
  dpi: 90.71428571427429,
  rows: 256,
  cols: 256,
  format: "png",
  compressionQuality: 0,
  origin: {
    x: -180,
    y: 90,
  },
  spatialReference: { wkid: 4326 },
  lods: [
  	{ level: 2, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502 },
    { level: 3, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508 },
    { level: 4, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754 },
    { level: 5, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877 },
    { level: 6, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385 },
    { level: 7, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693 },
    { level: 8, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 },
    { level: 9, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 },
    { level: 10, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116 },
    { level: 11, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 },
    { level: 12, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 },
    { level: 13, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 },
    { level: 14, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447 },
    { level: 15, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724 },
    { level: 16, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619 },
    { level: 17, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309 },
    { level: 18, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655 },
    { level: 19, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
    { level: 20, levelValue: 2, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
  ],
});

// 创建天地图图层
/**
 * @param {Object} options 选项
 * @param {string} [options.layerType=vec] 底图类型，行政——vec，影像——img，地形——ter
 * @param {string} [options.projType=c] 坐标系类型，c为经纬度坐标系，w为墨卡托坐标系
 * @param {string} [options.title] 图层名称
 * @param {string} [options.id] 图层id
 * @returns {WebTileLayer} 天地图图层
 */
export function createTDTLayer({
  layerType = "vec",
  projType = "c",
  title = "",
  id = "",
} = {}) {
  const urlTemplate =
    `http://{subDomain}.tianditu.com/${layerType}_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0` +
    `&LAYER=${layerType}&STYLE=default&TILEMATRIXSET=${projType}&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&FORMAT=tiles` +
    `&tk=${token}`;

  return new WebTileLayer({
    urlTemplate,
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    tileInfo: tileInfo,
    // 坐标系
    spatialReference: { wkid: 4326 },
    // 图层的全局范围
    fullExtent: new Extent({
      xmin: -180,
      ymin: -90,
      xmax: 180,
      ymax: 90,
      spatialReference: { wkid: 4326 },
    }),
    // 图层id
    id: id || `tdt_${layerType}`,
    // 图层名称
    title: title || `天地图-${layerType}`,
    // // 版权信息
    // copyright: "天地图",
  });
}

调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
initMap() {
    const baseLayer = createTDTLayer({
      layerType: "vec",
      projType: "c",
      title: "行政底图",
    });
    const baseAnnoLayer = createTDTLayer({
      layerType: "cva",
      projType: "c",
      title: "行政标注",
    });
    const map = new Map({
      basemap: {
        baseLayers: [baseLayer, baseAnnoLayer],
      },
    });
    new MapView({
      container: "mapView",
      map,
      zoom: 4, //缩放值
      center: [114, 38.5], // 经度, 纬度
      spatialReference: {
        wkid: 4326,
      },
    });
 }