mapbox
关注
分享
扫一扫
aganliang
不能记录一下吗
展开
-
openstreetmap 系列开源框架
OpenStreetMap框架简介原创 2024-06-13 17:54:46 · 221 阅读 · 0 评论 -
QGIS把矢量图层分割为N个图层
1原创 2022-06-01 21:56:49 · 2622 阅读 · 1 评论 -
windows 10 安装postgresql-14.2-2
下载：Download PostgreSQL如果选择中文，安装最后容易出现问题原创 2022-04-24 23:01:11 · 2194 阅读 · 0 评论 -
QGIS输出地图图片操作指引
矢量地图调用osm 在线xyz服务影像地图调用mapbox在线xyz服务点位数据地图输出用默认的新建打印布局工具输出地图首先明确范围和地图分辨率（比例尺）这两个用户需求，它确定了画布的大小，当然，有时候用户会提出打印大小（画布的大小），这个时候就是通过地图范围+画布大小---反推适当的地图分辨率（比例尺）。简单讲：地图范围—地图分辨率（比例尺）--画布，三个函数由其中两个确定另外一个。1.数据可视化编辑用例是一批点位数据标注设置如下：单一标注，文本默认，描边用白色填充原创 2022-04-19 23:48:06 · 14852 阅读 · 0 评论 -
mbtileserver 安装和使用
mbtileserver github:https://github.com/consbio/mbtileserver1.安装mbtileserver基于go ，需要先安装GO：https://blog.csdn.net/aganliang/article/details/122157358go get github.com/consbio/mbtileservergo get: installing executables with 'go get' in module mode is..原创 2021-12-26 17:26:01 · 1054 阅读 · 0 评论 -
瓦片坐标系、经纬度、像素坐标的转换
参考：国内主要地图瓦片坐标系定义及计算原理Slippy map tilenamescoordtransform 坐标转换点击查询瓦片信息node-canvas实现百度地图个性化底图绘制原创 2021-10-18 23:07:27 · 1295 阅读 · 0 评论 -
几个免费下载地理数据的国外网站
1.Natural Earth 是由北美制图信息协会（North American Cartographic Information Society，简称NACIS）支持的全球公共领域地图数据集获取网站，提供了1:10m、1:50m和1:110m三种尺度的全球基础矢量和栅格数据，其中1:10m的数据中有全球各国精确到省级的行政区划数据。https://www.naturalearthdata.com/2.GADM 是一个高精度的全球行政区划数据库，包含了全球所有国家和地区的国界、省界和区界等多原创 2021-09-02 18:30:23 · 4758 阅读 · 0 评论 -
China Coordinate Convertor
https://pypi.org/project/coord-convert/pip install coord-convertgit clone https://github.com/sshuair/coord-convert.gitpip install -r requirements.txtpython setup.py installfrom coord_convert.transform import wgs2gcj, wgs2bd, gcj2wgs, gcj2bd..原创 2021-07-14 23:02:42 · 422 阅读 · 0 评论 -
nodejs 把CSV转换成trip geojson
const path = require('path');const fs = require('fs');const http = require('http')// 构造geojson对象，features为空列表var myCoordinates = [];var myGeoJson = { "type": "FeatureCollection", "name": "poi", "crs": { "type": "name", "properties": { .原创 2021-07-14 14:55:57 · 371 阅读 · 0 评论 -
日期、时间与时间戳的转换
处理时空数据总是遇到时间、日期与时间戳的转换，下面记录一下相关的工具。参考相关工具：https://tool.lu/timestamp/1.excel表中日期、时间与时间戳的转换：# excel 表的日期、时间字段自定义格式是：yyyy-m-d h:mm:ss# 日期、时间转为时间戳B2=(A2-70*365-19)*86400-8*3600# 时间戳转为日期、时间A6=(B6+8*3600)/86400+70*365+19...原创 2021-07-08 22:18:23 · 343 阅读 · 0 评论 -
PostGIS 函数
1.ST_MakeEnvelope— Creates a rectangular Polygon from minimum and maximum coordinates.geometry ST_MakeEnvelope(float xmin, float ymin, float xmax, float ymax, integer srid=unknown);Creates a rectangular Polygon from the minimum and maximum values for.原创 2021-06-15 23:16:42 · 995 阅读 · 0 评论 -
编程导航--工具聚类
https://home.code-nav.cn/原创 2021-06-15 22:17:24 · 161 阅读 · 0 评论 -
mapbox-gl 鼠标事件解读
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Create a draggable point</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbo...原创 2021-06-12 22:56:55 · 2527 阅读 · 0 评论 -
基于mapbox-gl 开发类似于高德地图的经纬度拾取器
1.index.html页面<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>坐标拾取器</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> </head><body>&原创 2021-06-06 18:13:12 · 895 阅读 · 0 评论 -
mapbox-gl 通过websocket 展示实时GPS轨迹数据
1.后端基于nodejs，通过http模块定期向后端接口请求数据，组装成geojson。通过websocket向客户端定期连续发送数据。2.前端通过mapbox-gl.js原创 2021-06-06 16:47:10 · 1291 阅读 · 0 评论 -
页面上隐藏mapbox logo 办法
使用mapbox js和css开发，默认在页面左下角是mapbox的logo，可以把它隐藏，办法如下：1.node_modules---mapbox-gl--原创 2021-06-06 10:16:38 · 1114 阅读 · 0 评论 -
spritezero 安装和简单使用（基于centos7）
参考 github :https://github.com/mapbox/spritezero在centos中：mkdir spritezeronpm install -g @mapbox/spritezero-cli// 可以拷贝到其他机器运行zip -q -r spritezero.zip ./spritezero/unzip spritezero.zip准备好svgs：// spritezero 目录下，添加input 目录，里面是svgoutpu...原创 2021-05-10 11:49:09 · 749 阅读 · 0 评论 -
PostGIS 计算长度和面积
参考官网：http://postgis.net/docs/manual-3.0/using_postgis_dbmanagement.htmlThe basis for the PostGIS geometry type is a plane. The shortest path between two points on the plane is a straight line. That means calculations on geometries (areas, distances.原创 2020-11-15 22:15:29 · 6062 阅读 · 0 评论 -
HTML 、JS、CSS 添加控制面板例子---02
<div class='map-overlay-2' id='features'> <h2>US population density</h2> <div id='pd'> <p>Hover over a state!</p> </div></div><div class='map-overlay-2' id='legend'> <div> <sp...原创 2020-09-12 23:09:06 · 379 阅读 · 0 评论 -
mapbox style specification Expressions 具体例子
参考官网：https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/The value for any layout property, paint property, or filter may be specified as an expression.An expression defines a formula for computing the value of the property using the opera...原创 2020-09-12 21:29:27 · 722 阅读 · 0 评论 -
HTML 、JS、CSS 添加控制面板例子---01
h1 { font-size: 20px; line-height: 30px;};h2 { font-size: 14px; line-height: 20px; margin-bottom: 10px;}a { text-decoration: none; color: #2dc4b2;};#console { position: absolute; width: 300px; top: 30px; marg.原创 2020-09-12 21:26:22 · 670 阅读 · 0 评论 -
tegola 安装和使用
#官网：https://tegola.io/github：https://github.com/go-spatial/tegola直接下载二进制文件.zip，解压即可运行./tegola serve --config=tegola_config.toml1.配置文件 config.toml参考：https://tegola.io/documentation/2.查看自动生成的样式http://192.168.10.103:8882/3.HTTP Endpoints原创 2020-08-06 21:32:30 · 879 阅读 · 0 评论 -
GeoServer 简单介绍
官网：http://geoserver.org/1.相关历史GeoServer was started in 2001 by The Open Planning Project (TOPP), a non-profit technology incubator based in New York.基本核心工具：Those involved with GeoServer founded the GeoTools project, an open source GIS Java toolkit. .原创 2020-07-19 13:28:43 · 1019 阅读 · 0 评论 -
Canvas、 SVG 和 WebGl三者之间的区别
参考：Canvas、 SVG 和 WebGl三者之间的区别转载 2020-07-18 13:25:45 · 1196 阅读 · 0 评论 -
leaflet.js 简单使用
leaflet.js官网：https://leafletjs.com/index.htmlmapbox-gl.js 与 leaflet.js的主要区别mapbox-gl使用浏览器的WebGL技术，因此它需要足够现代的浏览器并使用更多的客户端计算能力。优点是它可以原生处理矢量图块并以您喜欢的任何方式渲染（旋转，倾斜，自定义样式等）Leaflet使用普通格式DOM操作，旨在支持IE8之类的旧浏览器。对于这种旧的浏览器来说，它非常有效，并且由于这种轻量级的计算空间，它还对移动设备友好。优点..原创 2020-07-18 10:29:50 · 2648 阅读 · 0 评论 -
d3读取json，实现路径的跟踪
d3.json的用法：d3.json(datauri).then(function(data){ do someting here }).catch(function(error){something wrong})1.d3.json异步读取json2.json是一个geojson，类型是linestring3.数据源从只有一个coordinate，每10毫秒增加一个coordinate，layer自动绘制数据源。4.使用了map.jumpto({})，map.panto()成员变量。原创 2020-07-13 23:09:20 · 2354 阅读 · 0 评论 -
mapbox-gl 展示 撒点 图层
基本流程：1.map load的时候 添加vocter图层；2.设置layer，并添加，默认隐藏；3.menu动态添加一个图层，添加点击事件，回调函数设置图层的显示和隐藏；4.var一个popup，设置其基本属性；5.设置mouseenter, mouseleave回调函数；map.on('load', function() { map.addSource('spjks-2', { type: 'vector', url: 'http:...原创 2020-07-08 22:14:58 · 1498 阅读 · 0 评论 -
mapbox-gl 展示 cluster图层
基本流程是：1.添加 geojson数据源，设置cluster的参数2.添加cluster layer，采用step expressions，设置颜色和大小3.添加标注symbol layer，在cluster图标里面显示数字4.添加没有 cluster layer，设置颜色和大小5.添加点击事件6.添加鼠标移动事件map.on('load', function() { // Add a new source from our GeoJSON data and // set原创 2020-07-07 22:32:03 · 1443 阅读 · 0 评论 -
mapbox-gl js Customize camera animations例子 （CSS、DOM、JS 传值和交互）
在地图上显示一个控制面板，可以输入各种参数，JS或者参数值，点击按钮，实现地图的交互。html的dom如下：<div class="map-overlay top"> <div class="map-overlay-inner"> <fieldset> <label>Select easing function</label> <select id="easing" name="easing">.原创 2020-07-05 19:04:37 · 301 阅读 · 0 评论 -
node-fontnik 部署安装和简单使用（基于Centos 7）
node-fontnik是mapbox开源的制作.pbf字体的工具，其官网：https://github.com/mapbox/node-fontnik1.下载.tar.gz格式，解压，cdnpm install2.测试npm testAPI:https://github.com/mapbox/node-fontnik/blob/master/API.md3.编写代码进行转换： my_test.jsvar fontnik = require('.');v.......原创 2020-07-04 11:54:37 · 1345 阅读 · 1 评论 -
mapbox-gl 使用turf计算距离（代码片段）
参考：geojson对象的说明：(以后添加)HTML DOM CURSOR :https://www.w3school.com.cn/jsref/prop_style_cursor.asp基本思路是：1.定义geojson对象，包括point和linestring；2.map.on就启动回调函数，回调函数做以下几件事：2.1添加数据源，添加图层2.2 监听鼠标点击事件2.3 如果点击在点图层，进行删除，如果不是，那么就是添加；2.4 添加点、添加线2.5对...原创 2020-06-28 22:57:35 · 1881 阅读 · 1 评论 -
@mapbox/mapbox-gl-geocoder 简单使用
参考：https://github.com/mapbox/mapbox-gl-geocoderhttps://github.com/mapbox/carmen/blob/master/carmen-geojson.md使用nodejs环境，用webpack打包1.项目结构：2.package.json{ "name": "demo001", "version": "1.0.0", "description": "20200623", "main": "i..原创 2020-06-27 13:46:56 · 2204 阅读 · 0 评论 -
webpack 使用样例（以mapbox-gl为例）
webpack参考：https://www.webpackjs.com/ 和https://webpack.github.io/windows 10提前安装好node环境，node自带npm包管理器。1.建立项目文件夹，在此文件夹里面进行项目初始化cd 项目文件夹npm init -y # 不添加参数 -y 的话，可以个性化填写各类项目信息初始化后，自动生成package.json文件2.安装 webpaacknpm install --save-dev...原创 2020-06-21 15:10:09 · 1035 阅读 · 0 评论 -
mapnik 3.0.23 和python-mapnik-3.0.16 安装部署
源码安装部署：https://github.com/mapnik/mapnik/blob/master/INSTALL.md安装相关的依赖，自己安装部署的过程中发现几个问题，是因为两个依赖没有安装好：1.boosthttps://www.boost.org/users/download/boost安装前要先删除就版本，一般安装在/usr目录下，把这里相关的boost文件删除即可。./bootstrap.sh --with-libraries=all --with-toolset=gcc原创 2020-06-18 09:53:44 · 2025 阅读 · 3 评论 -
osm2pgsql 工具安装和使用
OSM数据的介绍：OpenStreetMap数据下载和使用osm2pgsql 工具：https://github.com/openstreetmap/osm2pgsqlpostgresql安装：PostgreSQL在centos7的安装和手动安装扩展从github下载其源代码.tar.gz安装依赖：sudo yum install cmake make gcc-c++ boost-devel expat-devel zlib-devel \ bzip2-devel post..原创 2020-06-16 23:52:45 · 3130 阅读 · 0 评论 -
mapbox-gl 添加arcgis rest动态地图服务
arcgis rest地图服务采用 CGC-WGS-1984地理坐标系mapbox的地图一般是3857// 添加argis rest 动态地图服务map.on('load',function() { map.addSource( 'gz',{ 'type':'raster', 'tiles':['http://ip:port/arcgis/rest/services/test/china/MapServer/expo..原创 2020-06-10 10:53:54 · 2745 阅读 · 1 评论 -
React-mapbox-gl 开发
参考：alex3165 / react-mapbox-gl一个简单的例子:import React,{Component} from 'react';import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';import './mapbox-gl.css'; const Map = ReactMapboxGl({ accessToken:'your token'}); class MapGl ext.原创 2020-06-08 23:07:05 · 937 阅读 · 0 评论 -
TileServer-GL + Nginx 部署
关于tileserver-gl的基本安装，参考：tileserver-gl基于docker的安装和运行命令关于tileserver-gl的配置文件语句，参考：TileServer-GL Configuration file 的使用方法参考官网的部署指引，采用TileServer-GL + Nginx部署方案，tileserver-gl隐藏在后端，Nginx在前端，做负载、反向代理、权限控制...原创 2020-03-26 23:09:30 · 845 阅读 · 1 评论 -
docker 容器端口与宿主机端口的映射
参考：Docker容器内部端口映射到外部宿主机端口 1.容器内部一个端口，可以映射到宿主机多个端口；2.容器的端口可以运行时映射到宿主机；3.容器的端口可以随机映射到宿主机。...原创 2020-03-25 21:39:23 · 5392 阅读 · 0 评论 -
Centos 安装部署Maputnik
官网：https://github.com/maputnik/editor下载linux二进制版本直接放到/usr/local/bin目录下，修改运行权限即可运行# 运行命令maputnik_linux默认访问地址是：http://localhost:8000如果需要开放使用，需要用nginx代理一下。...原创 2020-03-25 14:42:00 · 994 阅读 · 0 评论