Giter Club home page Giter Club logo

he-ol-map-npm's Introduction

ucen-map

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

地图 config 设置

styles 为可选-参数与文档保持一致

{
  center: [104.1823, 35.8147],
  zoom: 4,
  basemap: [
    {
      id: 'china',
      name: 'xyz',
      visible: true,
      title: '矢量地图',
      maxZoom: 9,
      minZoom: 4,
      url: 'http://172.39.8.63:8000/services/quanguo/tiles/{z}/{x}/{y}.png'
    }
  ],
  vectormap: [],
  geojson: [
    {
      id: 'cityjson',
      name: 'geojson',
      visible: true,
      source: {
        url: 'http://172.39.8.63:8000/assets/city.json'
      },
      styles: {
        fill: 'transparent',
        stroke: 'red'
      }
    }
  ],
	extends: any // 扩展数据, 点击查询返回
}

区域-对比图(area)

{
	data: {
		// 选中区域
		code: 'xxx',
		features: [],
		styles: {
          fill: 'transparent',
          stroke: '#000000'
        },
		data: [
			// 区域内
			{
				code: 'xx',
				value: '1000m',
				features: [],
				styles: {
							// font 生效需要指定字体
							text: {
								font: '20px Calibri,sans-serif',
								fill: '#315efb'
							},
              fill: '#27ff0080',
              stroke: 'red' || {color: 'red', width: 10}
            }
			}
		]
	}
}

点-styles 中参数与 openlayers 文档保持一致

	position: [0, 0],
	styles: {
		text: {
			font: '12px PingFang SC',
			justify: 'center',
			textAlign:'center',
			fill: '#000',
			stroke: '#fff'
		},
		icon: {
			fill: '#000',
			stroke: '#fff',
			radius: '15px'
		},
		image: {
			src: 'http://www.baidu.com'
		}
	}

多点-styles 中参数与 openlayers 文档保持一致

外部 styles 为统一设置 内部 styles 为单个 position 设置样式

  positions: [
    {
      position: [],
      styels: {}
    },
    ...
  ],
  styles: {
    text: {
			font: '12px PingFang SC',
			justify: 'center',
			textAlign:'center',
			fill: '#000',
			stroke: '#fff'
		},
		icon: {
			fill: '#000',
			stroke: '#fff',
			radius: '15px'
		},
		image: {
			src: 'http://www.baidu.com'
		}
  }

工具

Grid					格网类
HexGrid				六边形类
getArea				获取多边形面积
getDistance		获取点到点的距离
getPerimeter	获取多边形周长

### 坐标转换函数
gcj02Tobd09		
bd09Togcj02,
bd09Towgs84,
wgs84Togcj02,
wgs84Tobd09,
gcj02Towgs84 

### 地图方法
renderXYZ 自定义切片地图加载
const xyzCongif = {
		mapProxyUrl: 'http://172.39.8.63:16501/mapproxy',
		url: 'http://172.39.8.63:8000/services/quanguo/tiles',
		param: '',
		render: 'color',
		renderopt: {
			reverse: true,
			graylevel: [0.63, 0.3, 0.1],
			coloroffset: [0, 0, 80]
		}
}
renderXYZ(map, xyzConfig) // map对象

he-ol-map-npm's People

Contributors

hyhoyo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.