林珞

林珞 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

林珞 赞了回答 · 1月16日

Vue的单向数据流和双向数据绑定不是冲突的吗?

单向绑定 vs 双向绑定

单双向绑定,指的是View层和Model层之间的映射关系。

react采取单向绑定,如图所示:

图片描述
用户访问View,用户发出交互到Actions中进行处理,Actions中通过setState对State进行更新,State更新后触发View更新。可以看出,View层不能直接修改State,必须要通过Actions来进行操作,这样更加清晰可控

vue支持单向绑定和双向绑定

  • 单向绑定:插值形式{{data}},v-bind也是单向绑定
  • 双向绑定:表单的v-model,用户对View层的更改会直接同步到Model层

实际上v-model只是v-bind:value 和 v-on:input的语法糖,我们也可以采取类似react的单向绑定。
vue的v-model在操作表单是,显得很简单,我们不用去写繁琐的onChange事件去处理每个表单数据的变化,但是双向绑定也会导致数据变化不透明,不清晰可控。优点和缺点共存,有时候一个人的优点也是一个人的缺点,道理都是相通的。

单向数据流 vs 双向数据流

数据流指的是组件之间的数据流动。

vue和react仅单向数据流

虽然vue有双向绑定v-model,但是vue和react父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改,如图所示:
图片描述
优点是所有状态的改变可记录、可跟踪,源头易追溯; 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性

angularJs可以双向数据流

相比之下,元老级框架AngularJS却不一样,它允许在子组件中直接更新父组件的值

数据流与绑定

准确来说两者并不是一回事。单向数据流也可有双向绑定,双向数据流也可以 有双向绑定
但是很多资料混为一谈
image.png

关注 3 回答 2

林珞 赞了文章 · 2019-09-30

JavaScript中的堆栈

  • 栈(stack) 栈stack为自动分配的内存空间,它由系统自动释放;
  • 堆(heap) 堆heap是动态分配的内存,大小不定也不会自动释放。
JavaScript 中的变量分为基本类型和引用类型。
  • 基本类型 (Undefined、Null、Boolean、Number和String)
    基本类型在内存中占据空间小、大小固定 ,他们的值保存在栈(stack)空间,是按值来访问
  • 引用类型 (对象、数组、函数)
    引用类型占据空间大、大小不固定, 栈内存中存放地址指向堆(heap)内存中的对象。是按引用访问的

如下图所示:栈内存中存放的只是该对象的访问地址, 在堆内存中为这个值分配空间 。 由于这种值的大小不固定,因此不能把它们保存到栈内存中。但内存地址大小的固定的,因此可以将内存地址保存在栈内存中。 这样,当查询引用类型的变量时, 先从栈中读取内存地址, 然后再通过地址找到堆中的值。

image

当我们看到一个变量类型是已知的,就分配在栈里面,比如INT,Double等。其他未知的类型,比如自定义的类型,因为系统不知道需要多大,所以程序自己申请,这样就分配在堆里面。

栈内存&堆内存

为了使程序运行时占用的内存最小,通常要实现垃圾回收机制。

当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会逐个放入这块栈存里,随着方法的执行结束,这个方法的栈存也将自然销毁了。因此,所有在方法中定义的变量都是放在栈内存中的;

当我们在程序中创建一个对象时,这个对象将被保存到运行时数据区中,以便反复利用(因为对象的创建成本开销较大),这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁,即使方法结束后,这个对象还可能被另一个引用变量所引用(方法的参数传递时很常见),则这个对象依然不会被销毁,只有当一个对象没有任何引用变量引用它时,系统的垃圾回收机制才会在核实的时候回收它。

思考问题

demo1.
var a = 1;
var b = a;
b = 2;

// 这时a是?

demo1中在变量对象中的数据发生复制行为时,系统会自动为新的变量分配一个新值。var b = a执行之后,b虽然重新赋值为2,但是他们其实已经是相互独立互不影响的值了。

demo2.
var m = { a: 1, b: 2 }
var n = m;
n.a = 2;

// 这时m.a的值呢?

demo2中我们通过var n = m执行一次复制引用类型的操作。引用类型的复制同样也会为新的变量自动分配一个新的值保存在变量对象中,但不同的是,这个新的值,仅仅只是引用类型的一个地址指针。当地址指针相同时,尽管他们相互独立,但是在变量对象中访问到的具体对象实际上是同一个。因此当我改变n时,m也发生了变化。这就是引用类型的特性。

查看原文

赞 8 收藏 1 评论 3

林珞 发布了文章 · 2019-09-28

postgressql+geoserver实现路径分析

整体思路是用geoserver发布图层,图层为 sql,视图是利用存储过程分析出的路径结果,

shp导入数据库

路网一般为shp数据,如果有多个图层,建议利用arcgis或其他工具合并为一个图层,方便处理

数据库空间扩展

使用paAdmin3连接PostgreSQL,并执行以下语句,在新的空间数据库里添加空间扩展:

CREATE EXTENSION postgis;
CREATE EXTENSION pgrouting;
CREATE EXTENSION postgis_topology;
CREATE EXTENSION fuzzystrmatch;
CREATE EXTENSION postgis_tiger_geocoder;
CREATE EXTENSION address_standardizer;

使用shp2pgsql-gui.exe导入

添加路网数据,设置表名,并设置SRID为:4326
需要使用GBK编码,并勾选最下面一个选项。

表结构进行修改

1.修改表结构

--添加起点id
ALTER TABLE lproad ADD COLUMN source integer;

--添加终点id
ALTER TABLE lproad  ADD COLUMN target integer;

--添加道路权重值
ALTER TABLE lproad  ADD COLUMN length double precision

2.创建拓扑结构                  

--为lproad表创建拓扑布局,即为source和target字段赋值
SELECT pgr_createTopology('lproad ',0.0001, 'geom', 'gid');

3.创建索引

--为source和target字段创建索引
CREATE INDEX source_idx ON lproad ("source");
CREATE INDEX target_idx ON lproad ("target");

4.给长度赋值

--为length赋值
update lproad set length =st_length(geom);

--为lproad 表添加reverse_cost字段并用length的值赋值
ALTER TABLE lproad ADD COLUMN reverse_cost double precision;
UPDATE lproad SET reverse_cost =length;

创建最短路径函数


-- DROP FUNCTION public.pgr_fromatoe(double precision, double precision, double precision, double precision);
 
CREATE OR REPLACE FUNCTION pgr_fromatoe(
    tbl varchar,
    startx double precision,
    starty double precision,
    endx double precision,
    endy double precision)
    RETURNS geometry
    LANGUAGE 'plpgsql'
 
    COST 100
    VOLATILE STRICT 
AS $BODY$
    
declare   
    v_startLine geometry;--离起点最近的线   
    v_endLine geometry;--离终点最近的线   
    v_startTarget integer;--距离起点最近线的终点   
    v_startSource integer;   
    v_endSource integer;--距离终点最近线的起点    
    v_endTarget integer;    
    v_statpoint geometry;--在v_startLine上距离起点最近的点   
    v_endpoint geometry;--在v_endLine上距离终点最近的点   
    v_res geometry;--最短路径分析结果 
    
    v_res_a geometry;  
    v_res_b geometry;  
    v_res_c geometry;  
    v_res_d geometry;
    
    v_start_temp geometry;
    v_start_temp1 geometry;
    v_start_temp2 geometry;
    v_end_temp geometry;
    v_end_temp1 geometry;
    v_end_temp2 geometry;
  
    v_perStart float;--v_statpoint在v_res上的百分比   
    v_perEnd float;--v_endpoint在v_res上的百分比   
  
    v_shPath_se geometry;--开始到结束  
    v_shPath_es geometry;--结束到开始  
    v_shPath geometry;--最终结果  
  
    tempnode float;    
      
    startpoint geometry;  
    endpoint geometry;  
  
    v_shPath1 geometry;--一次结果  
    v_shPath2 geometry;--二次结果  
    star_line geometry; --起点到最近点的线  
    end_line geometry; --终点到最近点的线  
    geoARR geometry[];  
  
begin  
  
    --查询离起点最近的线   
    --4326坐标系  
    --找起点15米范围内的最近线  
  
    execute 'select geom, source, target  from  '|| tbl ||
        ' where ST_DWithin(geom,ST_Geometryfromtext(''point('|| startx ||' ' || starty||')'',4326),3000)  
         order by ST_Distance(geom,ST_GeometryFromText(''point('|| startx ||' '|| starty ||')'',4326))  limit 1'  
        into v_startLine, v_startSource ,v_startTarget;   
  
raise notice '%',  v_startSource;  
raise notice '%', v_startTarget;  
  
    --查询离终点最近的线   
    --找终点15米范围内的最近线  
  
    execute 'select geom, source, target from '|| tbl || 
        ' where ST_DWithin(geom,ST_Geometryfromtext(''point('|| endx || ' ' || endy ||')'',4326),3000)    
        order by ST_Distance(geom,ST_GeometryFromText(''point('|| endx ||' ' || endy ||')'',4326))  limit 1'   
        into v_endLine, v_endSource,v_endTarget;   
raise notice '%',  v_endSource;  
raise notice '%', v_endTarget;  
   
    --如果没找到最近的线,就返回null    
    if (v_startLine is null) or (v_endLine is null) then     
        return null;     
    end if ;   
  
    select  ST_ClosestPoint(v_startLine, ST_Geometryfromtext('point('|| startx ||' ' || starty ||')',4326)) into v_statpoint;     
    select  ST_ClosestPoint(v_endLine, ST_GeometryFromText('point('|| endx ||' ' || endy ||')',4326)) into v_endpoint;   
  
   -- ST_Distance   
  
    --从开始的起点到结束的起点最短路径  
  
    execute 'SELECT st_linemerge(st_union(b.geom)) ' ||  
    'FROM pgr_kdijkstraPath(   
    ''SELECT gid as id, source, target, length as cost FROM '|| tbl ||' '','   
    ||v_startSource || ', ' ||'array['||v_endSource||'] , false, false   
    ) a, lproad b   
    WHERE a.id3=b.gid     
    GROUP by id1     
    ORDER by id1' into v_res ;  
  
    --从开始的终点到结束的起点最短路径  
  
    execute 'SELECT st_linemerge(st_union(b.geom)) ' ||    
    'FROM pgr_kdijkstraPath(    
    ''SELECT gid as id, source, target, length as cost FROM '|| tbl ||' '','    
    ||v_startTarget || ', ' ||'array['||v_endSource||'] , false, false     
    ) a, lproad b     
    WHERE a.id3=b.gid    
    GROUP by id1      
    ORDER by id1' into v_res_b ;     
  
    --从开始的起点到结束的终点最短路径  
  
    execute 'SELECT st_linemerge(st_union(b.geom)) ' ||   
    'FROM pgr_kdijkstraPath(    
    ''SELECT gid as id, source, target, length as cost FROM '|| tbl ||' '','    
    ||v_startSource || ', ' ||'array['||v_endTarget||'] , false, false    
    ) a, lproad b    
    WHERE a.id3=b.gid       
    GROUP by id1       
    ORDER by id1' into v_res_c ;   
  
    --从开始的终点到结束的终点最短路径  
  
    execute 'SELECT st_linemerge(st_union(b.geom)) ' ||    
    'FROM pgr_kdijkstraPath(     
    ''SELECT gid as id, source, target, length as cost FROM '|| tbl ||' '','     
    ||v_startTarget || ', ' ||'array['||v_endTarget||'] , false, false     
    ) a, lproad b     
    WHERE a.id3=b.gid    
    GROUP by id1       
    ORDER by id1' into v_res_d ;  
                                                           
    if(ST_Length(v_res) > ST_Length(v_res_b)) then  
       v_res = v_res_b;  
    end if;  
                                    
    if(ST_Length(v_res) > ST_Length(v_res_c)) then  
       v_res = v_res_c;  
    end if;       
  
    if(ST_Length(v_res) > ST_Length(v_res_d)) then  
       v_res = v_res_d;  
    end if;  
  
    --如果找不到最短路径,就返回null   
  
    if(v_res is null) then   
        return null;   
    end if;   
   
    --将v_res,v_startLine,v_endLine进行拼接   
  
    --select  st_linemerge(ST_Union(array[v_startLine,v_res,v_endLine])) into v_res;  
  
     select  ST_LineLocatePoint(v_startLine, v_statpoint) into v_perStart; 
     select  ST_LineLocatePoint(v_endLine, v_endpoint) into v_perEnd;
     
     SELECT ST_Line_SubString(v_startLine,v_perStart, 1) into v_start_temp1;
     SELECT ST_Line_SubString(v_startLine,0,v_perStart) into v_start_temp2;
     
     SELECT ST_Line_SubString(v_endLine,v_perEnd, 1) into v_end_temp1;
     SELECT ST_Line_SubString(v_endLine,0,v_perEnd) into v_end_temp2;
     
     raise notice '%',  v_perStart;  
     raise notice '%', v_perEnd;
     
     raise notice '%', ST_Distance(v_res,v_start_temp1);
     raise notice '%', ST_Distance(v_res,v_start_temp2);
     raise notice '%', ST_Distance(v_res,v_end_temp2);
     raise notice '%', ST_Distance(v_res,v_end_temp1);
     
     v_start_temp=v_start_temp1;
     if(ST_Distance(v_res,v_start_temp1) > ST_Distance(v_res,v_start_temp2)) then   
      v_start_temp=v_start_temp2; 
    end if;  
     v_end_temp=v_end_temp1;
     if(ST_Distance(v_res,v_end_temp1) > ST_Distance(v_res,v_end_temp2)) then   
      v_end_temp=v_end_temp2; 
    end if;  
    --return ST_AsGeoJSON(v_res); 
    --return v_res;
                                                     
   -- select  ST_LineLocatePoint(v_res, v_statpoint) into v_perStart;   
   -- select  ST_LineLocatePoint(v_res, v_endpoint) into v_perEnd;   
  
    --if(v_perStart > v_perEnd) then   
    --    tempnode =  v_perStart;  
    --   v_perStart = v_perEnd;  
    --    v_perEnd = tempnode;  
  
    --end if;  
  
    --截取v_res   
    --拼接线  
  
    --SELECT ST_Line_SubString(v_res,v_perStart, v_perEnd) into v_shPath1; 
    select  st_linemerge(ST_Union(array[v_start_temp,v_res,v_end_temp])) into v_shPath1;
                                        
    return v_shPath1; 
  
 --后续为将起点终点与路网连接起来,因发布时有点问题,暂不使用 
 --找线的端点  
 select ST_SetSRID( ST_MakePoint(startx , starty),4326 )into startpoint;  
 select ST_SetSRID( ST_MakePoint(endx , endy),4326 )into endpoint;  
 select ST_MakeLine( v_statpoint,startpoint) into star_line;   
 select ST_MakeLine( v_endpoint,endpoint) into end_line;    
 
geoARR :=array[end_line,v_shPath1,star_line];  
select st_union(geoARR) into v_shPath;  
   
   raise notice '%', '返回数据';  
   --raise notice '%', ST_AsGeoJSON(v_shPath);
    
    return v_shPath; 

end;  
                                        
$BODY$;
  

数据发布

数据准备完成后,就需要用GeoServer来进行发布:

启动GeoServer,在浏览器中输入,http://localhost:8080/geoserver/web/,登录到GeoServer。

1.创建工作区

clipboard.png

2.添加数据存储

配置数据库连接

clipboard.png

3.添加图层

选择“配置新的SQL视图”,输入SQL语句:

SELECT * FROM pgr_fromAtoB('road_xblk', %x1%, %y1%, %x2%, %y2%)

验证的正则表达式:^-?[d.]+$

类型:LingString

SRID:4326

点击保存后,填入SRS,并自动计算范围

结果展示

1、wms方式加载

var viewparams = [
  'x1:' + startCoord[0], 'y1:' + startCoord[1],
  'x2:' + destCoord[0], 'y2:' + destCoord[1] 
];
params.viewparams = viewparams.join(';'); 
result = new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: ServerUrl + '/geoserver/Routing/wms',
    params: params
  })
}); 
map.addLayer(result);

2、wfs方式加载

var vectorSource = new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: function (extent) {
    return ServerUrl + '/geoserver/wfs?service=WFS&' + 
    'version=1.1.0&request=GetFeature&typename=Routing:lproute&' +
    'outputFormat=application/json&srsname=EPSG:4326&' + 
    'bbox=' + extent.join(',') + ',EPSG:4326&' +
    'viewparams=' + viewparams.join(';');
  },
  strategy: ol.loadingstrategy.bbox
}); 
var vector = new ol.layer.Vector({
  source: vectorSource, 
}); 
map.addLayer(vector);

3、直接请求服务

var wfsurl = ServerUrl + '/geoserver/wfs?service=WFS&' +
  'version=1.1.0&request=GetFeature&typename=Routing:lproute&' +
  'outputFormat=application/json&srsname=EPSG:4326&' +
  'viewparams=' + viewparams.join(';');
$.ajax({
  url: wfsurl,
  success: function (result) {
    console.log(result);
  }
});

效果如图:
clipboard.png

查看原文

赞 0 收藏 0 评论 2

林珞 发布了文章 · 2019-09-28

geoserver跨域设置2.15.0版本

geoserver默认不开启跨域设置,开启步骤如下:

1、修改配置文件web.xml

\webapps\geoserver\WEB-INF\web.xml

搜索:cross-origin,将注释的部分解注。

   <!-- Uncomment following filter to enable CORS -->
   <filter>
        <filter-name>cross-origin</filter-name>
        <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
       <init-param>
           <param-name>chainPreflight</param-name>
           <param-value>false</param-value>
       </init-param>
       <init-param>
           <param-name>allowedOrigins</param-name>
           <param-value>*</param-value>
       </init-param>
       <init-param>
           <param-name>allowedMethods</param-name>
           <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
       </init-param>
       <init-param>
           <param-name>allowedHeaders</param-name>
           <param-value>*</param-value>
       </init-param>
    </filter>
    
    
    <!-- Uncomment following filter to enable CORS  -->
    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

2、下载 jetty-servlets jar包,2.15.0对应的版本是 jetty-servlets-9.4.12.v20180830.jar,放在

\geoserver\WEB-INF\lib

3、重启geoserver,如果报错,再下载对应 jetty-httpjetty-util jar包,放在lib目录,再次重启即可

查看原文

赞 0 收藏 0 评论 0

林珞 关注了标签 · 2019-09-24

关注 21

林珞 关注了标签 · 2019-09-24

关注 17

林珞 关注了标签 · 2019-09-24

gis

地理资讯系统(GIS,Geographic Information System)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入、存储、查询、分析和显示地理数据的计算机系统。

关注 56

林珞 关注了标签 · 2019-09-24

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 132832

林珞 关注了标签 · 2019-09-24

关注 68

林珞 发布了文章 · 2019-09-24

cesium 标注文字模糊问题处理

cesium下使用LabelGraphics给Entity显示文字的时候,会出现模糊问题
采用以下方式解决:

1、关闭fxaa ;

viewer.scene.postProcessStages.fxaa.enabled = false;

2、将字体大小设置大一倍,再用scale缩小

label={
    show:true,
    showBackground:true,
    backgroundColor:Cesium.Color.fromCssColorString('#000'),
    scale:0.5, //这里非常巧妙的先将字体大小放大一倍在缩小一倍
    font:'normal 32px MicroSoft YaHei',
    text:`blabla~~`,
    pixelOffset :new Cesium.Cartesian2(-120, -100),
    horizontalOrigin:Cesium.HorizontalOrigin.LEFT
}

参考博文:

https://blog.csdn.net/iamthek...
查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 0 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-06-03
个人主页被 129 人浏览