半个GIS半个前端-CSDN博客

原创 react结合typeScript中CSS的模块化开发

前端开发中，正常引用css都是全部引用 import './App.css'，但是在react项目中，倾向于模块化开发，那么如何对css进行模块化开发呢。1、首先在项目src的根目录新建文件名为custom.d.ts的文件，添加css对象模块的配置declare module "*.css" { const css: { [key: string]: string } export default css}2、模块化文件命名：修改App.css文件的文件名为App.module...

2021-03-17 09:37:13 979

原创 sass实现皮肤动态切换

在很多业务场景中，对同一功能应用系统的复用，需要改变UI设计，或者是直接动态皮肤切换。sass的map遍历、函数定义、map存取、混合器等知识为皮肤的切换提供了相应的技术支持。实现的思路就是给html的根标签设置一个“data-theme”属性，通过js控制“data-theme”的属性值，sass根据“data-theme”的属性值来判断使用相应的主题遍历。比如，我们要实现一个系统平台内红色主题“red”和蓝色主题“blue”的切换，具体实现方式如下：1.实现皮肤切换，对应几...

2020-12-01 15:49:01 1275

原创 arcgis api（八）arcgis api for js 3.x 加载热力图图层

热力图（Heat Map）是通过密度分析函数进行可视化用于表示地图中点的密度的热图，它使人们能够独立于缩放因子感知点的密度。热力图是一个城市各个区域人口密度的一种展示模式，可以显示某个地方人员比较集中甚至拥挤程度，颜色越深表示人员越多，颜色浅代表人比较少。现在互联网的百度地图、高德地图、腾讯地图都有热力图的api，应用最广泛的是echarts的热力图api。目前政务系统的离线地图用arcgis的比较多，同时arcgis的API为热力图也提供了相应的HeatmapRenderer的类。 ...

2020-09-14 10:54:14 1301 3

原创 JavaScript实现WGS84坐标系与墨卡托坐标系的转换

1. 地理坐标系地理坐标系统（Geographic Coordinate System），是一种球面坐标，是使用三维球面来定义地球表面位置，以实现通过经纬度对地球表面点位引用的坐标系。表示单位为度；常规叫为东经、西经、南纬、北纬。目前国际上最通用的标准是WGS84坐标系，我国当前最新的标准是国家大地坐标系（CSCS2000）,CSCS2000与WGS84相差几厘米，对于一般的工程测量，可以认为两者是一致的。2. 投影坐标系投影坐标系统（Projection Coordi...

2020-09-12 14:08:37 3220

原创 JavaScript实现百度坐标系、火星坐标系、WGS84坐标系的互相转换

1. WGS84坐标系 WGS-84坐标系是目前最通用的标准地理坐标系，平实我们常说的经纬度、从GPS设备、智能手机中取出的数据的坐标系、国际地图提供商使用的坐标系都是WGS84坐标系。 WGS-84坐标系（World Geodetic System）是一种国际上采用的地心坐标系。坐标原点为地球质心，其地心空间直接坐标系的Z轴指向国际时间局（BIH）1984.0定义的协议地极（CTP）方向，X轴指向BIH1984.0的协议子午面和CTP赤道的交点，Y轴与Z轴、X轴垂直构成右手坐标系，称为1...

2020-09-11 15:54:14 5453 1

原创 arcgis api（七）arcgis api for js 3.x 加载图片图层

在遥感应有中，遥感影像的海量存储一般用arcgis server的镶嵌数据集来实现，但有时候业务需求简单，可以直接通过添加影像图片的方式来实现，即给定一个四角坐标范围，在这个范围内贴影像图片。arcgis api for js 3.x的MapImageLayer、和MapImage很方便地解决了这个问题。 esriLoader .loadModules([ 'esri/layers/MapImageLayer', 'esri/layers/...

2020-09-09 13:52:19 1320

原创 React（五）create-react-app 脚手架配置多页面应用

单页面的应用是目前前端应用的主流方向，react、vue等前端框架在单页面应用上都相对比较适用。但是多页面应用在项目的也必不可少，企业的门户网站因需要百度推广，更加适合用多页面应用来开发。本文将介绍运用create-react-app脚手架来搭建一个简单实用的多页面项目框架。 1.初始化项目创建create-react-app脚手架这边不过多叙述，react开发人员应该都会构建，构建成功后执行以下命令初始化webpack配置；yarn eject 或者 npm run eje...

2020-09-09 10:10:32 2468 7

原创 cesium（一）react项目（webpack）结合cesium配置

cesium是三维可视化地图引擎的代表之作了。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。它可以实现以下功能：全球级别的高精度的地形和影像服务，矢量以及模型数据，基于时态的数据可视化，多种场景模式（3D，2.5D以及2D场景）的支持，真正的二三维一体化。 Cesium简而言之就是将栅格、矢量等二维数据，3dtiles、点云、DEM、倾斜摄影、BIM等三维数据在地球空间范围上可视化展示...

2020-09-07 20:15:45 1800 2

原创 arcgis api（六）arcgis api for js 3.x Dynamic 动态图层各图层的过滤以及点击拾取功能

（1）ArcGISDynamicMapServiceLayer动态图层因涉及到多个子图层，其图层加载的过滤条件需要对每个子图层定义过滤条件。 esriLoader .loadModules([ 'esri/layers/ArcGISDynamicMapServiceLayer', 'esri/tasks/IdentifyTask', 'esri/tasks/IdentifyParameters', 'esri/g...

2020-09-02 22:13:56 1134

原创 arcgis api（五）arcgis api for js 3.x 测量工具

备注：本文的所有的demo都是基于前端react框架编写，为了demo完成性，会尽量完整，其他框架基本页面操作因框架而异。距离测量和面积测量是GIS项目中必不可少的工具，arcgis api 3.x中有对应的接口实现测量的功能。具体的实现方式如下。（1） arcgis api 3.x的测量工具是基于arcgis server 的几何服务(GeometryService)实现的，首先我们得确保服务器安装了arcgis server，并去站点管理页面启动GeometryService...

2020-09-02 17:50:40 1125

原创 geoserver （二）发布矢量切片服务

geoserver矢量切片是webGIS展示的重要服务，矢量切片服务即增加了服务的访问速度，又保留数据本身的属性信息，支持用户的属性选择功能。下载geoserver对应版本的geoserver-2.15.2-vectortiles-plugin的插件包，解压出来拷贝到对应“geoserver-2.15.2\webapps\geoserver\WEB-INF\lib“目...

2019-09-26 16:55:09 1003

原创 arcgis api（四）3.x和4.x 加载geoserver的wmts切片服务

1.arcgis api 3.x 加载wmts服务2.arcgis api 4.x 加载wmts服务arcgis api 3.x 加载geoserver的wmts服务和wms服务都比较简单，有相对比较成熟的api类，但是4.x的WMTSLayer类加载wmts服务会有很多问题，api的示例很简单，但是，用在自己实际的geoserver的切片服务上，会报错，显示title和id未定...

2019-09-24 11:51:48 3751

原创 geoserver （三）发布多层级天地图、谷歌地图、高德地图等底图切片服务

arcgis发布多层级的底图切片服务的技术已经相对成熟，但是arcgis不开源，因此最近在研究geoserver， geoserver相对比较轻量，又是开源的软件，感觉也挺好用，就是插件比较多，版本比较多，在配置的时候会消耗很多时间。最近在研究geoserver发布天地图地图的切片服务，看了网上很多文档，但是还是遇到很多坑，记录下采坑的情况，本地安装的是geoserver 1.15.2。...

2019-08-23 15:14:26 11526 14

转载 geoserver （一）安装及配置跨域问题

1.tomcat环境安装（http://geoserver.org/download/）下载zip源代码解压包，部署在tomcat里面运行geoserver；2.windows环境安装以GeoServer2.12.0版本为准，安装前确保计算机安装JDK1.8版本，因为geoserver2.12.0要求JDK1.8的java环境，不同的geoserver版本要求JDK...

2019-08-06 15:10:43 1226 4

原创 javascript（一）构造函数递归

最近项目中有个需求，react项目中做一个菜单配置项的功能，即传入某个url的参数，匹配出菜单数据内该菜单内的子菜单项及其组件。数据体：/* 菜单配置项 */export const menus = [ { subMenu: '首页地图', icon: '', path: '/map', component: HomeIndex, me...

2019-06-09 21:47:25 377

原创 CSS（三）常见的CSS文本样式

常见的CSS文本样式1、段落首行缩进通常text-indent缩进属性将对段落首行开头文本文字进行缩进显示。.popContent-desc { text-indent: 0.1rem; } 以上代码就是对div进行0.1rem的首行缩...

2019-05-21 22:11:04 328

转载 CSS（二）文字渐变

在项目中，UI经常会设计带颜色渐变的设计图，通常设计师会切图，以图片的形式加载，但这样会消耗浏览器资源，且如果需要动态改变文字，也不方便，因此就需要利用CSS3实现文字的渐变了。1、background-clip+text-fill-color：.gradient-text-one{ background-image:-webkit-linear-gradient(...

2019-05-18 22:43:14 108

原创 CSS（一）chrome浏览器表单自动填充默认样式-autofil

Chrome会在客户登陆过某网站之后, 会自动记住密码当你下次再次进入该网站的时候, 可以自由的选择登陆的账号, Chrome会为你自动填充密码. 而你无需再输入密码这本身是一个很好的功能, 但是对于开发者而言, 却有一个很让人难受的问题.当你选择账号密码之后, 你的输入框会变成浏览器自带的颜色。之所以出现这样的样式, 是因为Chrome会自动为input增加如下样式....

2019-05-18 19:47:57 7531 3

原创 React（四）create-react-app IE打开以及打包部署后页面空白问题

（1）本地测试本地测试环境解决IE页面空白问题需要安装babel-polyfillyarn add babel-polyfillnpm install babel-polyfill然后再主入口文件index.js中引入babel-polyfill包import 'babel-polyfill'（2）服务器部署在package.json文件中添加"...

2019-04-11 17:11:06 1526

原创 React（一）父子组件之间的通信

无论是React，还是Vue，父子组件之间的通信都是组件式开发至关重要的一部分。备注一下基础要点。1、父组件向子组件传值父组件向子组件传值是在调用子组件的时候通过参数传递给子组件.父组件代码import React, { Component } from 'react'import CommunicateChild from './communicateChild'ex...

2018-08-23 15:21:49 2612

原创 Vue（一）父子组件之间的通信

最近入门学习Vue框架，备注下一些基本的要点，从父子组件之间的通信开始。1、父组件向子组件传值实现父组件向子组件传值需要在子组件对象属性中添加props。.父组件代码:<template> <div> <child :message="parentMsg"></child> </div><..

2018-08-21 11:48:14 167

原创 arcgis api（三）arcgis api for js 4.x 加载高德地图、谷歌地图、天地图

arcgis api for 4.x支持2D和3D地图的展示，3.x的版本我们通过自定义Layer实现了高德地图、谷歌地图和天地图的加载。本文介绍了，在线地图服务、高德地图、谷歌地图、天地图在4.x版本中的加载方法。1、在线地图服务import React, { Component } from "react";import esriLoader from "esri-loader...

2018-08-17 17:42:32 9443 14

原创 echarts4.0 中国省界底图

echarts中做地图一直用的百度在线地图做底图，现在有个项目中客户服务器是局域网没有外网，因此需要做离线地图，需要中国的省界以及各省会城市的标注。考虑到arcgis离线地图需要做切片，或者得自己做中国省界的geoJson文件，相对都也比较复杂，想起来echarts4.0有内部自带的china的geoJson对象，只需通过加载point点的形式添加各省会城市的标注即可。代码备份一下。...

2018-08-17 14:31:21 2391 2

原创 arcgis api（二）arcgis api for js 3.x 加载高德地图、谷歌地图、天地图

本文主要介绍ArcGIS API for Javascript 3.x版本添加在线高德地图、谷歌地图、天地图的代码。1、在线高德地图define(["dojo/_base/declare", "esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/la...

2018-08-07 17:45:55 2908 11

原创 javascript 移动端获取用户当前位置经纬度信息

最近做一个项目需要前端做定位功能，获取用户当前位置的经纬度信息，尝试了很多方法，现在备份一下：一、HTML5geolocation的属性if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(onSuccess , onError);}else{ alert("您的浏览器不支持使用HTML ...

2018-08-01 11:34:17 30791 18

原创 arcgis api（一）react 或vue项目结合 arcgis api for js 地图

传统的arcgis api for js 的开发包是用require.js引用开发包的各个模块，然后再实例化对象。随着前端技术的发展，react.js、vue.js、es6的普及，模块化开发越来越多。也有很多跟arcgis相关的组件应运而生，比如react的react-arcgis组件，包含了arcgis api的部分功能，但是其并没有包含arcgis api 的所有功能，很多功能还是需要在...

2018-07-31 15:43:30 4278 2

原创 Echarts4.0 迁徙图模拟Echarts2.0样式（实现飞行轨迹和迁徙线的颜色和点的颜色一致且颜色不一样）

由于公司业务需求做Echarts4.0的迁徙图，但是Echarts4.0默认的迁徙图的飞行轨迹和迁徙线的颜色都是一样的，比较单调，现在模拟Echarts2.0的样式模拟了一个demo，虽然没有全部相同，但大体相近。备忘一下 let minigrateChart = echarts.init(document.getElementById("MinigrateChart")); ...

2018-05-01 21:07:41 9395 3

原创 ES6 React 组件引用本地图片问题

最近在用create-react-app 脚手架自己写一个小项目，遇到了很多坑，其中有一个就是React 引用本地图片的问题，我的需求是，图片的路径写在json文件里，需要从后台读取json文件，然后读取到图片的路径，在前端渲染。那么问题来了，es6不支持在标签内直接写图片的路径，即：这种格式是不支持的。在网上看了很多博客，总结下以下几个加载的方法，当然，这种是在图片不多的情况下可以采用。

2017-12-21 13:48:59 31701 5

原创 oracle 数据库创建表空间和用户及用户间赋权限

一、搜索出表空间存储位置select tablespace_name,file_id,bytes/1024/1024,file_name 　　 from dba_data_files order by file_id;二、创建表空间和用户--创建表空间CREATE TABLESPACE usertryLOGGING DATAFILE 'C:\APP\ADMI

2017-12-04 11:17:19 212

原创 create-react-app结合node express框架搭建react项目开发环境

前端框架一直用的Facebook 的React框架，之前后台一直在用.net，最近在学习node，因此想用node 的express框架，结合create-react-app脚手架搭建开发环境。技术栈一、yarnFacebook今年推出了一款工具yarn，和npm相似，都是Nodejs包管理工具，选择yarn的主要原因有：（1）yarn会缓存它下载的每个包，所有不需要重

2017-12-02 13:12:50 4096

原创 React ES6与ES5写法的区别

之前一直用的.net开发，react的写法也一直用的ES5的写法，觉得越来越out了，正好在学node，很多都用ES6的写法，就开始总结了一些React的ES6的写法。主要有以下几个方面：一、组件的创建ES5(React.createClass) import React from 'react';const SkillComponent = React.createC...

2017-11-04 20:31:04 773

原创 Node.js运用mssql模块链接SQL Server数据库

现在数据库的类型越来越多，比如node.js经常使用的MySQL，mongdb等，由于之前经常用SQL Server数据库，所以打算做一个node链接SQL Server的demo，网上找了很多方法，查到了好几个方法比如node-sqlserver模块和msnodesql 模块，但这两者对环境的要求比较高，感觉很麻烦，继续百度到了mssql模块，还是挺简单的。（1）安装mssql模块npm...

2017-10-30 20:32:24 9321 12

原创 create-react-app 结合百度地图和Echarts3.0迁徙图

一、创建create-react-app脚手架 npm install -g create-react-app create-react-app my-app /* 去目录中创建项目，my-app为项目名称 */ cd myapp /* 进入目录，然

2017-10-27 09:04:19 2171

zhengjie0722的博客