0%

安装 Geoserver

下载geoserver并解压

1
2
cd /geoserver/bin/
./startup.bat

访问geoServer 初始账号:admin 密码:geoserver

geoServer 默认端口为 8080,其值对应文件 start.ini 里的 jetty.port,可修改

Geoserver 数据源

PostGis

ubuntu 16.04 安装教程

Postgresql 设置默认用户 postgres 的密码

1
2
3
4
5
6
7
8
// 登录到 postgresql 窗口
sudo -u postgres psql postgres

// 用下面的命令为用户 postgres 设置密码:
postgres=# \password postgres
Enter new password:
Enter it again:
postgres=# \q

Postgresql 开启远程链接

1
2
3
4
// 找到pg_hba.conf文件,加入
host all all 0.0.0.0/0 trust
// 重启postgresql
sudo service postgresql reload

安装 osm2pgsql

1
2
3
4
5
cd ~
git clone git://github.com/openstreetmap/osm2pgsql.git
cmake ..
make
sudo make install

也可以参考 github 上面的步骤,少什么依赖就装什么

导入 osm 数据(不包含 openstreetmap-carto 样式)

下载OpenStreetMap

为 postgresql 安装以下扩展

1
2
3
4
CREATE EXTENSION postgis;
CREATE EXTENSION postgis_topology;
CREATE EXTENSION ogr_fdw;
CREATE EXTENSION hstore;

正式导入数据

1
osm2pgsql -s -U postgres -H 127.0.0.1 -P 5432 -W -d chinaosmgisdb /tmp/china-latest.osm.pbf

用户,数据库,文件地址按实际情况变动即可

导入 openstreetmap-carto 样式

下载openstreetmap-carto

正式导入数据

1
2
3
su postgres

osm2pgsql -s -U postgres -H 127.0.0.1 -P 5432 -W -d chinaosmgisdb /tmp/china-latest.osm.pbf --style /home/hldev/openstreetmap-carto-master/openstreetmap-carto.style

shapefile

curl -v -u admin:@pp$4boundleSS -XPOST -d@layergroup.xml -H “Content-type: text/xml” http://apps.opengeo.org/geoserver/rest/workspaces/osm/layergroups

GeoServer 创建图层

创建图层数据表

下载osmsld.zip

1
2
3
4
5
6
7
wget -O osmsld.zip http://files.cnblogs.com/files/think8848/osmsld.zip

unzip osmsld.zip

su postgres

psql -U think8848 -W -d chinaosmgisdb -a -f /tmp/osmsld/create_tables.sql

在 GeoServer 中创建工作空间和数据源(postgis)

创建样式和图表

将之前我们下载的 osmsld.zip 文件中的 sld.zip 解压开 unzip sld.zip ,然后稍修改下 SLD_create.sh 文件,主要是修改 GeoServer 的 REST API 相关参数

在本文件的最下面,将最后两行暂不用的命令注释掉

然后进入刚才解压 sld.zip 形成的 sld 目录 cd sld ,然后调用以下命令

sudo sh /tmp/osmsld/SLD_create.sh

创建图层组

打开 osmsld.zip 包中的 layergroup.xml 文件,将 ocean 这一节给删掉,因为并没有导入海图数据

打开 SLD_create.sh,参照刚刚注释掉的 2 行命令创建图层组

1
curl -v -u admin:geoserver -XPOST -d@layergroup.xml -H "Content-type: text/xml" http://localhost:8080/geoserver/rest/workspaces/china/layergroups

地图乱码问题

安装一个支持中文的字体,如微软雅黑

1
2
3
4
5
6
7
8
9
10
11
12
13
// 创建字体目录,并且将msyh.ttf和msyhbd.ttf复制到字体目录中
sudo mkdir -p /usr/share/fonts/win

sudo mv msyh.ttf msyhbd.ttf /usr/share/fonts/win

// 建立字体索引信息,更新字体缓存
cd /usr/share/fonts/win

sudo mkfontscale

sudo mkfontdir

fc-cache

然后把 style 里面的字体替换

导入 OpenStreetMap 海图数据,并在 GeoServer 上发布

下载OpenStreetMap 海图数据

因为下载的 OpenStreetMap 的中国数据是 Mercator 投影坐标系,SRID 为 3857,s 所以下载第二个

将 shp 文件导入到 PostGis 中

1
2
3
su postgres

shp2pgsql -s 3857 -I -D /tmp/water-polygons-split-3857/water_polygons.shp ocean_all | psql -d chinaosmgisdb -U postgres

将发布的地图范围所在区域(bounds)海图从完整的海图中切出来

1
2
3
4
5
6
7
8
9
10
psql -U postgres -d chinaosmgisdb -W

CREATE TABLE ocean AS
WITH bounds AS (
SELECT ST_SetSRID(ST_Extent(way)::geometry,3857) AS geom
FROM planet_osm_line
)
SELECT 1 AS id, ST_Intersection(b.geom, o.geom) AS geom
FROM bounds b, ocean_all o
WHERE ST_Intersects(b.geom, o.geom);

在 GeoServer 中创建 ocean 图层

直接在 GeoServer 建图层即可,唯一要注意的就是在图层样式中选择 chinaosm:ocean 样式

Openlayers

Openlayers 比较简单,主要难点在于对 API 的熟练度。官网提供了大量例子来参考


参考think8848 的博客

彻底删除 nginx(Ubuntu)

罗列出与 nginx 相关的软件

1
2
dpkg --get- selections|grep nginx
sudo apt-get remove ... //删除

nginx 配置 http2 模块(待完成)

安装

先去官网下载源码

1
2
3
4
5
6
7
8
9
10
//首先确保系统安装来python,gcc,g++,如果没有则安装:
sudo apt-get install python
sudo apt-get install build-essential
sudo apt-get install gcc
sudo apt-get install g++

//默认安装:
./configure //可以指定路径 ./configure –prefix=/opt/local/node
make
sudo make install

npm 升级

1
2
3
curl -0 -L https://npmjs.com/install.sh | sudo sh
//或者
curl -L https://npmjs.org/install.sh | sh

npm 国内镜像源

1
2
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

也可以配置 cnpm,具体可取npm官网查看

node 升级

node 有一个模块叫 n,是专门用来管理 node.js 的版本的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//首先安装n模块:
npm install -g n

//修改n的配置文件N_PREFIX为你的安装路径
N_PREFIX=${N_PREFIX-/opt/local/node/lib}

//使用或安装最新的官方发布:
n latest

//使用或安装稳定的正式版本:
n stable

//使用或安装最新的LTS正式版本:
n lts

搭建一个 Vue 项目 (node >= 6)

ElementUI 是一个基于 Vue 的组件库,并提供了一个Vue 项目模板

1
2
3
npm install
npm run dev //ElementUI使用的是webpack2.0,所有本地编写代码直接运行 npm run dev 默认在http://localhost:8010上
npm run build //若需发布编译打包以后的代码直接运行 npm run build

可以根据自己的习惯修改模板中文件的结构,在这里不再赘述

webpack2.0 还有一个新功能就是热加载,不需要刷新页面就可以看到你修改后的效果

本次使用的是 Intellig IDEA,并下载了 Vue.js 插件

vue-devtools

推荐安装 vue-devtools,可以清楚的看清 vue 的整体结构

在 Chrome 网上应用店中获取(需要翻墙)

vue-router 的安装使用

1
npm install vue-router --save

下面是一个 route 的例子,Test.vue 是一个简单的测试 route 的组件

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
/**
* Created by hldev on 17-3-8.
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
import Todo from '../components/todo/Todo.vue'
import Hello from '../components/Hello.vue'

//注册插件
Vue.use(VueRouter);

const routes = [{
path: "/",
component: Hello
}, {
path: '/todo',
component: Todo,
children: [
{
path: 'baidu',
component: Hello,
children: [{
path: 'news',
component: Hello,
}]
},
{
path: 'weibo',
component: Hello
}
]
}];

const router = new VueRouter({
mode: 'history',
routes
});

export default router;

然后在入口文件中引用 router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import router from '../routes/route'
import Menu from '../components/home/Menu.vue'

//注册插件
Vue.use(ElementUI);
Vue.use(VueRouter);

new Vue({
el: '#root',
router,
render: h => h(Menu)
});

vue-router 还可以监听$route,只要它发生变化你可以在 method 里面写一个函数来触发

1
2
3
4
5
6
7
8
9
10
11
12
{
...
watch: {
'$route.query': 'getData'
},
methods: {
getData(){
this.$store.dispatch('findPage', {...this.$route.query})
}
}
...
}

组件

下面是一个简单的组件 FirstComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//这是一个.vue格式的文件
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
export default {
data() {
return {msg: this.$route.fullPath}
},
mounted(){
console.log(this.$route.fullPath);
}
}
</script>

在其它组件中引入组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>
<p>{{ msg }}</p>
<first-component></first-component>
<router-view></router-view>//是路由变化展示的地方
</div>
</template>

<script>
import FirstComponent from '../home/FirstComponent.vue.vue';
export default {
data() {
msg: "组件的引用"
},
//注册组件
components: {'first-component': FirstComponent}
}
}
</script>

组件的生命周期

下面是一个写的一个运用生命周期的简单引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
export default {
data() {
return {msg: this.$route.fullPath}
},
mounted(){
console.log(`mounted`);
},
beforeDestroy(){
console.log(`beforeDestroy`);
},
}
</script>

组件之间的通信

父组件

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
<template>
<div>
<h1>{{msg}}</h1>
<el-input v-model="input" placeholder="请输入您要传给子组件的内容"></el-input>
<h2>{{total}}</h2>
<p>子组件</p>
<child :message="input" @increment="incrementTotal"></child>
</div>
</template>

<script>
import Child from './Child.vue'
export default {
data() {
return {msg: this.$route.fullPath, input: '', total: 0}
},
methods: {
incrementTotal: function () {
this.total += 1
}
},
components: {'child': Child},
mounted(){
console.log(`mounted`);
},
beforeDestroy(){
console.log(`beforeDestroy`);
},
}
</script>

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div>
<p>{{message}}</p>
<el-button @click="increment">+1</el-button>
</div>
</template>
<script>
export default {
props: ['message'],
data() {
return {input: ``,count: 0}
},
methods: {
increment: function () {
this.count += 1;
//$emit(eventName) 触发事件
this.$emit('increment')
}
}
}
</script>

父组件向子组件通信

  • 使用 Prop 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 prop 是父组件用来传递数据的一个自定义属性。子组件应显式地用 props

也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件: prop 是单向绑定的:只能从父组件传向子组件,prop 还可以验证

子组件向父组件通信

  • 父组件是使用 props 传递数据给子组件,子组件要把数据传递回去,应该自定义事件

如上面的 demo,子组件监听 button 的 click 事件并执行 increment 方法(@:click=’increment’)后触发 increment 事件父组件中监听到 increment 事件触发 incrementTotal 方法(@increment=”incrementTotal”)

Vuex 的安装和使用

1
npm install vuex --save

Vuex 概念与 Redux 相似,一个 store 主要由 state,mutations,actions.getters 组成

大概流程是我们在程序里使用 dispatch 分发 action(可异步),action 提交(commit)一个 mutation(不能异步)进而改变 state 具体写法求看vuex 文档

如果项目太大,state 比较多就可以使用 Moludes,其实就是很多个小的 store 再在根节点上

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
modules: {
...//引入你分好的小模块store
},
})

Vue 的 js 写法(render 函数)

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
import Vue from 'vue'

Vue.component('todo', {
mounted(){
},
render: function (createElement) {
return createElement(
'div',
{},
[createElement(
'h1',
{
attrs: {
id: 'test'
},
},
'hello'
), createElement(
'button',
{
},
'+1'
)]
)
},
});

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment