diff --git a/.cache/.eslintrc.json b/.cache/.eslintrc.json deleted file mode 100644 index 9352bcdc0d..0000000000 --- a/.cache/.eslintrc.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "env": { - "browser": true - }, - "globals": { - "__PATH_PREFIX__": false, - "___emitter": false - } -} \ No newline at end of file diff --git a/.cache/__tests__/.babelrc b/.cache/__tests__/.babelrc deleted file mode 100644 index b1ff77b727..0000000000 --- a/.cache/__tests__/.babelrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "presets": [ - ["babel-preset-gatsby"] - ] -} diff --git a/.cache/__tests__/__snapshots__/dev-loader.js.snap b/.cache/__tests__/__snapshots__/dev-loader.js.snap deleted file mode 100644 index 043c64a7b6..0000000000 --- a/.cache/__tests__/__snapshots__/dev-loader.js.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Dev loader loadPage should be successful when component can be loaded 1`] = ` -Object { - "component": "instance", - "json": Object { - "pageContext": "something something", - }, - "page": Object { - "componentChunkName": "chunk", - "matchPath": undefined, - "path": "/mypage/", - "webpackCompilationHash": "123", - }, -} -`; diff --git a/.cache/__tests__/__snapshots__/loader.js.snap b/.cache/__tests__/__snapshots__/loader.js.snap deleted file mode 100644 index a5094e0885..0000000000 --- a/.cache/__tests__/__snapshots__/loader.js.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Production loader loadPage should be successful when component can be loaded 1`] = ` -Object { - "component": "instance", - "json": Object { - "pageContext": "something something", - }, - "page": Object { - "componentChunkName": "chunk", - "matchPath": undefined, - "path": "/mypage/", - "webpackCompilationHash": "123", - }, -} -`; diff --git a/.cache/__tests__/__snapshots__/static-entry.js.snap b/.cache/__tests__/__snapshots__/static-entry.js.snap deleted file mode 100644 index ad583044ea..0000000000 --- a/.cache/__tests__/__snapshots__/static-entry.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`develop-static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"
"`; - -exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"
div3
div2
div1
"`; - -exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"
div3
div2
div1
"`; - -exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"
"`; - -exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"
div3
div2
div1
"`; - -exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"
div3
div2
div1
"`; diff --git a/.cache/__tests__/dev-loader.js b/.cache/__tests__/dev-loader.js deleted file mode 100644 index 8e82edb546..0000000000 --- a/.cache/__tests__/dev-loader.js +++ /dev/null @@ -1,539 +0,0 @@ -// This is by no means a full test file for loader.js so feel free to add more tests. -import mock from "xhr-mock" -import DevLoader from "../dev-loader" -import emitter from "../emitter" - -jest.mock(`../emitter`) -jest.mock(`../socketIo`, () => { - return { - default: jest.fn(), - getPageData: jest.fn().mockResolvedValue(), - } -}) - -describe(`Dev loader`, () => { - describe(`loadPageDataJson`, () => { - let originalBasePath - let originalPathPrefix - let xhrCount - - /** - * @param {string} path - * @param {number} status - * @param {string|Object?} responseText - * @param {boolean?} json - */ - const mockPageData = (path, status, responseText = ``, json = false) => { - mock.get(`/page-data${path}/page-data.json`, (req, res) => { - xhrCount++ - if (json) { - res.header(`content-type`, `application/json`) - } - - return res - .status(status) - .body( - typeof responseText === `string` - ? responseText - : JSON.stringify(responseText) - ) - }) - } - - const defaultPayload = { - path: `/mypage/`, - } - - // replace the real XHR object with the mock XHR object before each test - beforeEach(() => { - originalBasePath = global.__BASE_PATH__ - originalPathPrefix = global.__PATH_PREFIX__ - global.__BASE_PATH__ = `` - global.__PATH_PREFIX__ = `` - xhrCount = 0 - mock.setup() - }) - - // put the real XHR object back and clear the mocks after each test - afterEach(() => { - global.__BASE_PATH__ = originalBasePath - global.__PATH_PREFIX__ = originalPathPrefix - mock.teardown() - }) - - it(`should return a pageData json on success`, async () => { - const devLoader = new DevLoader(null, []) - - mockPageData(`/mypage`, 200, defaultPayload, true) - - const expectation = { - status: `success`, - pagePath: `/mypage`, - payload: defaultPayload, - } - expect(await devLoader.loadPageDataJson(`/mypage/`)).toEqual(expectation) - expect(devLoader.pageDataDb.get(`/mypage`)).toEqual(expectation) - expect(xhrCount).toBe(1) - }) - - it(`should return a pageData json on success without contentType`, async () => { - const devLoader = new DevLoader(null, []) - - mockPageData(`/mypage`, 200, defaultPayload) - - const expectation = { - status: `success`, - pagePath: `/mypage`, - payload: defaultPayload, - } - expect(await devLoader.loadPageDataJson(`/mypage/`)).toEqual(expectation) - expect(devLoader.pageDataDb.get(`/mypage`)).toEqual(expectation) - expect(xhrCount).toBe(1) - }) - - it(`should return a pageData json with an empty compilation hash (gatsby develop)`, async () => { - const devLoader = new DevLoader(null, []) - - const payload = { ...defaultPayload, webpackCompilationHash: `` } - mockPageData(`/mypage`, 200, payload) - - const expectation = { - status: `success`, - pagePath: `/mypage`, - payload, - } - expect(await devLoader.loadPageDataJson(`/mypage/`)).toEqual(expectation) - expect(devLoader.pageDataDb.get(`/mypage`)).toEqual(expectation) - expect(xhrCount).toBe(1) - }) - - it(`should load a 404 page when page-path file is not a gatsby json`, async () => { - const devLoader = new DevLoader(null, []) - - const payload = { ...defaultPayload, path: `/404.html/` } - mockPageData(`/unknown-page`, 200, { random: `string` }, true) - mockPageData(`/404.html`, 200, payload, true) - - const expectation = { - status: `success`, - pagePath: `/404.html`, - notFound: true, - payload, - } - expect(await devLoader.loadPageDataJson(`/unknown-page/`)).toEqual( - expectation - ) - expect(devLoader.pageDataDb.get(`/unknown-page`)).toEqual(expectation) - expect(xhrCount).toBe(2) - }) - - it(`should load a 404 page when page-path file is not a json`, async () => { - const devLoader = new DevLoader(null, []) - - const payload = { ...defaultPayload, path: `/404.html/` } - mockPageData(`/unknown-page`, 200) - mockPageData(`/404.html`, 200, payload, true) - - const expectation = { - status: `success`, - pagePath: `/404.html`, - notFound: true, - payload, - } - expect(await devLoader.loadPageDataJson(`/unknown-page/`)).toEqual( - expectation - ) - expect(devLoader.pageDataDb.get(`/unknown-page`)).toEqual(expectation) - expect(xhrCount).toBe(2) - }) - - it(`should load a 404 page when path returns a 404`, async () => { - const devLoader = new DevLoader(null, []) - - const payload = { ...defaultPayload, path: `/404.html/` } - mockPageData(`/unknown-page`, 200) - mockPageData(`/404.html`, 200, payload, true) - - const expectation = { - status: `success`, - pagePath: `/404.html`, - notFound: true, - payload, - } - expect(await devLoader.loadPageDataJson(`/unknown-page/`)).toEqual( - expectation - ) - expect(devLoader.pageDataDb.get(`/unknown-page`)).toEqual(expectation) - expect(xhrCount).toBe(2) - }) - - it(`should return the dev-404-page when no 404 page can be found`, async () => { - const devLoader = new DevLoader(null, []) - - const payload = { ...defaultPayload, path: `/dev-404-page/` } - mockPageData(`/unknown-page`, 404) - mockPageData(`/404.html`, 404) - mockPageData(`/dev-404-page`, 200, payload, true) - - const expectation = { - status: `success`, - pagePath: `/dev-404-page`, - notFound: true, - payload, - } - expect(await devLoader.loadPageDataJson(`/unknown-page/`)).toEqual( - expectation - ) - - expect(devLoader.pageDataDb.get(`/unknown-page`)).toEqual({ - notFound: true, - pagePath: `/404.html`, - status: `failure`, - }) - expect(xhrCount).toBe(3) - }) - - it(`should return an error when status is 500`, async () => { - const devLoader = new DevLoader(null, []) - - mockPageData(`/error-page`, 500) - - const expectation = { - status: `error`, - pagePath: `/error-page`, - } - expect(await devLoader.loadPageDataJson(`/error-page/`)).toEqual( - expectation - ) - expect(devLoader.pageDataDb.get(`/error-page`)).toEqual(expectation) - expect(xhrCount).toBe(1) - }) - - it(`should retry 3 times before returning an error`, async () => { - const devLoader = new DevLoader(null, []) - - mockPageData(`/blocked-page`, 0) - - const expectation = { - status: `error`, - retries: 3, - pagePath: `/blocked-page`, - } - expect(await devLoader.loadPageDataJson(`/blocked-page/`)).toEqual( - expectation - ) - expect(devLoader.pageDataDb.get(`/blocked-page`)).toEqual(expectation) - expect(xhrCount).toBe(4) - }) - - it(`should recover if we get 1 failure`, async () => { - const devLoader = new DevLoader(null, []) - const payload = { - path: `/blocked-page/`, - } - - let xhrCount = 0 - mock.get(`/page-data/blocked-page/page-data.json`, (req, res) => { - if (xhrCount++ === 0) { - return res.status(0).body(``) - } else { - res.header(`content-type`, `application/json`) - return res.status(200).body(JSON.stringify(payload)) - } - }) - - const expectation = { - status: `success`, - retries: 1, - pagePath: `/blocked-page`, - payload, - } - expect(await devLoader.loadPageDataJson(`/blocked-page/`)).toEqual( - expectation - ) - expect(devLoader.pageDataDb.get(`/blocked-page`)).toEqual(expectation) - expect(xhrCount).toBe(2) - }) - - it(`shouldn't load pageData multiple times`, async () => { - const devLoader = new DevLoader(null, []) - - mockPageData(`/mypage`, 200, defaultPayload, true) - - const expectation = await devLoader.loadPageDataJson(`/mypage/`) - expect(await devLoader.loadPageDataJson(`/mypage/`)).toBe(expectation) - expect(xhrCount).toBe(1) - }) - }) - - describe(`loadPage`, () => { - const createSyncRequires = components => { - return { - components, - } - } - - let originalPathPrefix - - beforeEach(() => { - originalPathPrefix = global.__PATH_PREFIX__ - global.__PATH_PREFIX__ = `` - mock.setup() - mock.get(`/page-data/app-data.json`, (req, res) => - res - .status(200) - .header(`content-type`, `application/json`) - .body( - JSON.stringify({ - webpackCompilationHash: `123`, - }) - ) - ) - emitter.emit.mockReset() - }) - - afterEach(() => { - global.__PATH_PREFIX__ = originalPathPrefix - mock.teardown() - }) - - it(`should be successful when component can be loaded`, async () => { - const syncRequires = createSyncRequires({ - chunk: `instance`, - }) - const devLoader = new DevLoader(syncRequires, []) - const pageData = { - path: `/mypage/`, - componentChunkName: `chunk`, - result: { - pageContext: `something something`, - }, - } - devLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: pageData, - status: `success`, - }) - ) - - const expectation = await devLoader.loadPage(`/mypage/`) - expect(expectation).toMatchSnapshot() - expect(Object.keys(expectation)).toEqual([`component`, `json`, `page`]) - expect(devLoader.pageDb.get(`/mypage`)).toEqual( - expect.objectContaining({ - payload: expectation, - status: `success`, - }) - ) - expect(emitter.emit).toHaveBeenCalledTimes(1) - expect(emitter.emit).toHaveBeenCalledWith(`onPostLoadPageResources`, { - page: expectation, - pageResources: expectation, - }) - }) - - it(`should set not found on finalResult`, async () => { - const syncRequires = createSyncRequires({ - chunk: `instance`, - }) - const devLoader = new DevLoader(syncRequires, []) - const pageData = { - path: `/mypage/`, - componentChunkName: `chunk`, - } - devLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: pageData, - status: `success`, - notFound: true, - }) - ) - - await devLoader.loadPage(`/mypage/`) - const expectation = devLoader.pageDb.get(`/mypage`) - expect(expectation).toHaveProperty(`notFound`, true) - expect(emitter.emit).toHaveBeenCalledTimes(1) - expect(emitter.emit).toHaveBeenCalledWith(`onPostLoadPageResources`, { - page: expectation.payload, - pageResources: expectation.payload, - }) - }) - - it(`should return an error when component cannot be loaded`, async () => { - const syncRequires = createSyncRequires({ - chunk: false, - }) - const devLoader = new DevLoader(syncRequires, []) - const pageData = { - path: `/mypage/`, - componentChunkName: `chunk`, - } - devLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: pageData, - status: `success`, - }) - ) - - await devLoader.loadPage(`/mypage/`) - const expectation = devLoader.pageDb.get(`/mypage`) - expect(expectation).toHaveProperty(`status`, `error`) - expect(emitter.emit).toHaveBeenCalledTimes(0) - }) - - it(`should return an error pageData contains an error`, async () => { - const syncRequires = createSyncRequires({ - chunk: `instance`, - }) - const devLoader = new DevLoader(syncRequires, []) - const pageData = { - path: `/mypage/`, - componentChunkName: `chunk`, - } - devLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: pageData, - status: `error`, - }) - ) - - expect(await devLoader.loadPage(`/mypage/`)).toEqual({ status: `error` }) - expect(devLoader.pageDb.size).toBe(0) - expect(emitter.emit).toHaveBeenCalledTimes(0) - }) - - it(`should throw an error when 404 cannot be fetched`, async () => { - const devLoader = new DevLoader(null, []) - - devLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - status: `failure`, - }) - ) - - try { - await devLoader.loadPage(`/404.html/`) - } catch (err) { - expect(err.message).toEqual( - expect.stringContaining(`404 page could not be found`) - ) - } - expect(devLoader.pageDb.size).toBe(0) - expect(emitter.emit).toHaveBeenCalledTimes(0) - }) - - it(`should cache the result of loadPage`, async () => { - const syncRequires = createSyncRequires({ - chunk: `instance`, - }) - const devLoader = new DevLoader(syncRequires, []) - devLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: { - componentChunkName: `chunk`, - }, - status: `success`, - }) - ) - - const expectation = await devLoader.loadPage(`/mypage/`) - expect(await devLoader.loadPage(`/mypage/`)).toBe(expectation) - expect(devLoader.loadPageDataJson).toHaveBeenCalledTimes(1) - }) - }) - - describe(`loadPageSync`, () => { - it(`returns page resources when already fetched`, () => { - const devLoader = new DevLoader(null, []) - - devLoader.pageDb.set(`/mypage`, { payload: true }) - expect(devLoader.loadPageSync(`/mypage/`)).toBe(true) - }) - - it(`returns page resources when already fetched`, () => { - const devLoader = new DevLoader(null, []) - - expect(devLoader.loadPageSync(`/mypage/`)).toBeUndefined() - }) - }) - - describe(`prefetch`, () => { - const flushPromises = () => new Promise(resolve => setImmediate(resolve)) - - it(`shouldn't prefetch when shouldPrefetch is false`, () => { - const devLoader = new DevLoader(null, []) - devLoader.shouldPrefetch = jest.fn(() => false) - devLoader.doPrefetch = jest.fn() - devLoader.apiRunner = jest.fn() - - expect(devLoader.prefetch(`/mypath/`)).toBe(false) - expect(devLoader.shouldPrefetch).toHaveBeenCalledWith(`/mypath/`) - expect(devLoader.apiRunner).not.toHaveBeenCalled() - expect(devLoader.doPrefetch).not.toHaveBeenCalled() - }) - - it(`should trigger custom prefetch logic when core is disabled`, () => { - const devLoader = new DevLoader(null, []) - devLoader.shouldPrefetch = jest.fn(() => true) - devLoader.doPrefetch = jest.fn() - devLoader.apiRunner = jest.fn() - devLoader.prefetchDisabled = true - - expect(devLoader.prefetch(`/mypath/`)).toBe(false) - expect(devLoader.shouldPrefetch).toHaveBeenCalledWith(`/mypath/`) - expect(devLoader.apiRunner).toHaveBeenCalledWith(`onPrefetchPathname`, { - pathname: `/mypath/`, - }) - expect(devLoader.doPrefetch).not.toHaveBeenCalled() - }) - - it(`should prefetch when not yet triggered`, async () => { - jest.useFakeTimers() - const devLoader = new DevLoader(null, []) - devLoader.shouldPrefetch = jest.fn(() => true) - devLoader.apiRunner = jest.fn() - devLoader.doPrefetch = jest.fn(() => Promise.resolve({})) - - expect(devLoader.prefetch(`/mypath/`)).toBe(true) - - // wait for doPrefetchPromise - await flushPromises() - - expect(devLoader.apiRunner).toHaveBeenCalledWith(`onPrefetchPathname`, { - pathname: `/mypath/`, - }) - expect(devLoader.apiRunner).toHaveBeenNthCalledWith( - 2, - `onPostPrefetchPathname`, - { - pathname: `/mypath/`, - } - ) - }) - - it(`should only run apis once`, async () => { - const devLoader = new DevLoader(null, []) - devLoader.shouldPrefetch = jest.fn(() => true) - devLoader.apiRunner = jest.fn() - devLoader.doPrefetch = jest.fn(() => Promise.resolve({})) - - expect(devLoader.prefetch(`/mypath/`)).toBe(true) - expect(devLoader.prefetch(`/mypath/`)).toBe(true) - - // wait for doPrefetchPromise - await flushPromises() - - expect(devLoader.apiRunner).toHaveBeenCalledTimes(2) - expect(devLoader.apiRunner).toHaveBeenNthCalledWith( - 1, - `onPrefetchPathname`, - expect.anything() - ) - expect(devLoader.apiRunner).toHaveBeenNthCalledWith( - 2, - `onPostPrefetchPathname`, - expect.anything() - ) - }) - }) -}) diff --git a/.cache/__tests__/error-overlay-handler.js b/.cache/__tests__/error-overlay-handler.js deleted file mode 100644 index 088793742e..0000000000 --- a/.cache/__tests__/error-overlay-handler.js +++ /dev/null @@ -1,59 +0,0 @@ -import "@babel/polyfill" -const { - reportError, - clearError, - errorMap, -} = require(`../error-overlay-handler`) - -import * as ErrorOverlay from "react-error-overlay" - -jest.mock(`react-error-overlay`, () => { - return { - reportBuildError: jest.fn(), - dismissBuildError: jest.fn(), - startReportingRuntimeErrors: jest.fn(), - setEditorHandler: jest.fn(), - } -}) - -beforeEach(() => { - ErrorOverlay.reportBuildError.mockClear() - ErrorOverlay.dismissBuildError.mockClear() -}) - -describe(`errorOverlayHandler`, () => { - describe(`clearError()`, () => { - beforeEach(() => { - reportError(`foo`, `error`) - reportError(`bar`, `error`) - }) - afterAll(() => { - clearError(`foo`) - clearError(`bar`) - }) - it(`should clear specific error type`, () => { - expect(Object.keys(errorMap)).toHaveLength(2) - clearError(`foo`) - expect(Object.keys(errorMap)).toHaveLength(1) - expect(ErrorOverlay.dismissBuildError).not.toHaveBeenCalled() - }) - - it(`should call ErrorOverlay to dismiss build errors`, () => { - clearError(`foo`) - clearError(`bar`) - expect(ErrorOverlay.dismissBuildError).toHaveBeenCalled() - }) - }) - describe(`reportErrorOverlay()`, () => { - it(`should not add error if it's empty and not call ErrorOverlay`, () => { - reportError(`foo`, null) - expect(Object.keys(errorMap)).toHaveLength(0) - expect(ErrorOverlay.reportBuildError).not.toHaveBeenCalled() - }) - it(`should add error if it has a truthy value and call ErrorOverlay`, () => { - reportError(`foo`, `bar`) - expect(Object.keys(errorMap)).toHaveLength(1) - expect(ErrorOverlay.reportBuildError).toHaveBeenCalled() - }) - }) -}) diff --git a/.cache/__tests__/find-path.js b/.cache/__tests__/find-path.js deleted file mode 100644 index e8813aa1bd..0000000000 --- a/.cache/__tests__/find-path.js +++ /dev/null @@ -1,109 +0,0 @@ -import { cleanPath, setMatchPaths, findMatchPath, findPath } from "../find-path" - -describe(`find-path`, () => { - describe(`cleanPath`, () => { - beforeEach(() => { - global.__BASE_PATH__ = `` - }) - - it(`should strip out ? & # from a pathname`, () => { - expect(cleanPath(`/mypath#anchor?gatsby=cool`)).toBe(`/mypath`) - }) - - it(`should convert a /index.html to root dir`, () => { - expect(cleanPath(`/index.html`)).toBe(`/`) - }) - - it(`strip out a basePrefix`, () => { - global.__BASE_PATH__ = `/blog` - expect(cleanPath(`/blog/mypath`)).toBe(`/mypath`) - }) - }) - - describe(`findMatchPath`, () => { - beforeEach(() => { - // reset matchPaths - setMatchPaths([]) - global.__BASE_PATH__ = `` - }) - - it(`should find a path when matchPath found`, () => { - setMatchPaths([ - { - matchPath: `/app/*`, - path: `/app`, - }, - ]) - - expect(findMatchPath(`/app/dynamic-page#anchor?gatsby=cool`)).toBe(`/app`) - }) - - it(`should return null when no matchPathFound`, () => { - setMatchPaths([ - { - matchPath: `/app/*`, - path: `/app`, - }, - ]) - - expect(findMatchPath(`/notanapp/dynamic-page`)).toBeNull() - }) - }) - - describe(`findPath`, () => { - beforeEach(() => { - // reset matchPaths - setMatchPaths([]) - global.__BASE_PATH__ = `` - }) - - it(`should use matchPath if found`, () => { - setMatchPaths([ - { - matchPath: `/app/*`, - path: `/app`, - }, - ]) - - expect(findPath(`/app/dynamic-page#anchor?gatsby=cool`)).toBe(`/app`) - }) - - it(`should return the cleaned up path when no matchPathFound`, () => { - setMatchPaths([ - { - matchPath: `/app/*`, - path: `/app`, - }, - ]) - - expect(findPath(`/notanapp/my-page#anchor?gatsby=cool`)).toBe( - `/notanapp/my-page` - ) - }) - - it(`should only process a request once`, () => { - jest.resetModules() - jest.mock(`@reach/router/lib/utils`) - const findPath = require(`../find-path`).findPath - const setMatchPaths = require(`../find-path`).setMatchPaths - const match = require(`@reach/router/lib/utils`).match - - setMatchPaths([ - { - matchPath: `/app/*`, - path: `/app`, - }, - ]) - - expect(findPath(`/notanapp/my-page#anchor?gatsby=cool`)).toBe( - `/notanapp/my-page` - ) - expect(findPath(`/notanapp/my-page#anchor?gatsby=cool`)).toBe( - `/notanapp/my-page` - ) - expect(findPath(`/notanapp/my-page`)).toBe(`/notanapp/my-page`) - - expect(match).toHaveBeenCalledTimes(1) - }) - }) -}) diff --git a/.cache/__tests__/loader.js b/.cache/__tests__/loader.js deleted file mode 100644 index 5a2c05d7e0..0000000000 --- a/.cache/__tests__/loader.js +++ /dev/null @@ -1,554 +0,0 @@ -// This is by no means a full test file for loader.js so feel free to add more tests. -import mock from "xhr-mock" -import { ProdLoader } from "../loader" -import emitter from "../emitter" - -jest.mock(`../emitter`) - -describe(`Production loader`, () => { - describe(`loadPageDataJson`, () => { - let originalBasePath - let originalPathPrefix - let xhrCount - - /** - * @param {string} path - * @param {number} status - * @param {string|Object?} responseText - * @param {boolean?} json - */ - const mockPageData = (path, status, responseText = ``, json = false) => { - mock.get(`/page-data${path}/page-data.json`, (req, res) => { - xhrCount++ - if (json) { - res.header(`content-type`, `application/json`) - } - - return res - .status(status) - .body( - typeof responseText === `string` - ? responseText - : JSON.stringify(responseText) - ) - }) - } - - const defaultPayload = { - path: `/mypage/`, - } - - // replace the real XHR object with the mock XHR object before each test - beforeEach(() => { - originalBasePath = global.__BASE_PATH__ - originalPathPrefix = global.__PATH_PREFIX__ - global.__BASE_PATH__ = `` - global.__PATH_PREFIX__ = `` - xhrCount = 0 - mock.setup() - }) - - // put the real XHR object back and clear the mocks after each test - afterEach(() => { - global.__BASE_PATH__ = originalBasePath - global.__PATH_PREFIX__ = originalPathPrefix - mock.teardown() - }) - - it(`should return a pageData json on success`, async () => { - const prodLoader = new ProdLoader(null, []) - - mockPageData(`/mypage`, 200, defaultPayload, true) - - const expectation = { - status: `success`, - pagePath: `/mypage`, - payload: defaultPayload, - } - expect(await prodLoader.loadPageDataJson(`/mypage/`)).toEqual(expectation) - expect(prodLoader.pageDataDb.get(`/mypage`)).toEqual(expectation) - expect(xhrCount).toBe(1) - }) - - it(`should return a pageData json on success without contentType`, async () => { - const prodLoader = new ProdLoader(null, []) - - mockPageData(`/mypage`, 200, defaultPayload) - - const expectation = { - status: `success`, - pagePath: `/mypage`, - payload: defaultPayload, - } - expect(await prodLoader.loadPageDataJson(`/mypage/`)).toEqual(expectation) - expect(prodLoader.pageDataDb.get(`/mypage`)).toEqual(expectation) - expect(xhrCount).toBe(1) - }) - - it(`should return a pageData json with an empty compilation hash (gatsby develop)`, async () => { - const prodLoader = new ProdLoader(null, []) - - const payload = { ...defaultPayload, webpackCompilationHash: `` } - mockPageData(`/mypage`, 200, payload) - - const expectation = { - status: `success`, - pagePath: `/mypage`, - payload, - } - expect(await prodLoader.loadPageDataJson(`/mypage/`)).toEqual(expectation) - expect(prodLoader.pageDataDb.get(`/mypage`)).toEqual(expectation) - expect(xhrCount).toBe(1) - }) - - it(`should load a 404 page when page-path file is not a gatsby json`, async () => { - const prodLoader = new ProdLoader(null, []) - - const payload = { ...defaultPayload, path: `/404.html/` } - mockPageData(`/unknown-page`, 200, { random: `string` }, true) - mockPageData(`/404.html`, 200, payload, true) - - const expectation = { - status: `success`, - pagePath: `/404.html`, - notFound: true, - payload, - } - expect(await prodLoader.loadPageDataJson(`/unknown-page/`)).toEqual( - expectation - ) - expect(prodLoader.pageDataDb.get(`/unknown-page`)).toEqual(expectation) - expect(xhrCount).toBe(2) - }) - - it(`should load a 404 page when page-path file is not a json`, async () => { - const prodLoader = new ProdLoader(null, []) - - const payload = { ...defaultPayload, path: `/404.html/` } - mockPageData(`/unknown-page`, 200) - mockPageData(`/404.html`, 200, payload, true) - - const expectation = { - status: `success`, - pagePath: `/404.html`, - notFound: true, - payload, - } - expect(await prodLoader.loadPageDataJson(`/unknown-page/`)).toEqual( - expectation - ) - expect(prodLoader.pageDataDb.get(`/unknown-page`)).toEqual(expectation) - expect(xhrCount).toBe(2) - }) - - it(`should load a 404 page when path returns a 404`, async () => { - const prodLoader = new ProdLoader(null, []) - - const payload = { ...defaultPayload, path: `/404.html/` } - mockPageData(`/unknown-page`, 200) - mockPageData(`/404.html`, 200, payload, true) - - const expectation = { - status: `success`, - pagePath: `/404.html`, - notFound: true, - payload, - } - expect(await prodLoader.loadPageDataJson(`/unknown-page/`)).toEqual( - expectation - ) - expect(prodLoader.pageDataDb.get(`/unknown-page`)).toEqual(expectation) - expect(xhrCount).toBe(2) - }) - - it(`should return a failure when status is 404 and 404 page is fetched`, async () => { - const prodLoader = new ProdLoader(null, []) - - mockPageData(`/unknown-page`, 404) - mockPageData(`/404.html`, 404) - - const expectation = { - status: `failure`, - pagePath: `/404.html`, - notFound: true, - } - expect(await prodLoader.loadPageDataJson(`/unknown-page/`)).toEqual( - expectation - ) - expect(prodLoader.pageDataDb.get(`/unknown-page`)).toEqual(expectation) - expect(xhrCount).toBe(2) - }) - - it(`should return an error when status is 500`, async () => { - const prodLoader = new ProdLoader(null, []) - - mockPageData(`/error-page`, 500) - - const expectation = { - status: `error`, - pagePath: `/error-page`, - } - expect(await prodLoader.loadPageDataJson(`/error-page/`)).toEqual( - expectation - ) - expect(prodLoader.pageDataDb.get(`/error-page`)).toEqual(expectation) - expect(xhrCount).toBe(1) - }) - - it(`should retry 3 times before returning an error`, async () => { - const prodLoader = new ProdLoader(null, []) - - mockPageData(`/blocked-page`, 0) - - const expectation = { - status: `error`, - retries: 3, - pagePath: `/blocked-page`, - } - expect(await prodLoader.loadPageDataJson(`/blocked-page/`)).toEqual( - expectation - ) - expect(prodLoader.pageDataDb.get(`/blocked-page`)).toEqual(expectation) - expect(xhrCount).toBe(4) - }) - - it(`should recover if we get 1 failure`, async () => { - const prodLoader = new ProdLoader(null, []) - const payload = { - path: `/blocked-page/`, - } - - let xhrCount = 0 - mock.get(`/page-data/blocked-page/page-data.json`, (req, res) => { - if (xhrCount++ === 0) { - return res.status(0).body(``) - } else { - res.header(`content-type`, `application/json`) - return res.status(200).body(JSON.stringify(payload)) - } - }) - - const expectation = { - status: `success`, - retries: 1, - pagePath: `/blocked-page`, - payload, - } - expect(await prodLoader.loadPageDataJson(`/blocked-page/`)).toEqual( - expectation - ) - expect(prodLoader.pageDataDb.get(`/blocked-page`)).toEqual(expectation) - expect(xhrCount).toBe(2) - }) - - it(`shouldn't load pageData multiple times`, async () => { - const prodLoader = new ProdLoader(null, []) - - mockPageData(`/mypage`, 200, defaultPayload, true) - - const expectation = await prodLoader.loadPageDataJson(`/mypage/`) - expect(await prodLoader.loadPageDataJson(`/mypage/`)).toBe(expectation) - expect(xhrCount).toBe(1) - }) - }) - - describe(`loadPage`, () => { - const createAsyncRequires = components => { - return { - components, - } - } - - let originalPathPrefix - - beforeEach(() => { - originalPathPrefix = global.__PATH_PREFIX__ - global.__PATH_PREFIX__ = `` - mock.setup() - mock.get(`/page-data/app-data.json`, (req, res) => - res - .status(200) - .header(`content-type`, `application/json`) - .body( - JSON.stringify({ - webpackCompilationHash: `123`, - }) - ) - ) - emitter.emit.mockReset() - }) - - afterEach(() => { - global.__PATH_PREFIX__ = originalPathPrefix - mock.teardown() - }) - - it(`should be successful when component can be loaded`, async () => { - const asyncRequires = createAsyncRequires({ - chunk: () => Promise.resolve(`instance`), - }) - const prodLoader = new ProdLoader(asyncRequires, []) - const pageData = { - path: `/mypage/`, - componentChunkName: `chunk`, - result: { - pageContext: `something something`, - }, - } - prodLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: pageData, - status: `success`, - }) - ) - - const expectation = await prodLoader.loadPage(`/mypage/`) - expect(expectation).toMatchSnapshot() - expect(Object.keys(expectation)).toEqual([`component`, `json`, `page`]) - expect(prodLoader.pageDb.get(`/mypage`)).toEqual( - expect.objectContaining({ - payload: expectation, - status: `success`, - }) - ) - expect(emitter.emit).toHaveBeenCalledTimes(1) - expect(emitter.emit).toHaveBeenCalledWith(`onPostLoadPageResources`, { - page: expectation, - pageResources: expectation, - }) - }) - - it(`should set not found on finalResult`, async () => { - const asyncRequires = createAsyncRequires({ - chunk: () => Promise.resolve(`instance`), - }) - const prodLoader = new ProdLoader(asyncRequires, []) - const pageData = { - path: `/mypage/`, - componentChunkName: `chunk`, - } - prodLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: pageData, - status: `success`, - notFound: true, - }) - ) - - await prodLoader.loadPage(`/mypage/`) - const expectation = prodLoader.pageDb.get(`/mypage`) - expect(expectation).toHaveProperty(`notFound`, true) - expect(emitter.emit).toHaveBeenCalledTimes(1) - expect(emitter.emit).toHaveBeenCalledWith(`onPostLoadPageResources`, { - page: expectation.payload, - pageResources: expectation.payload, - }) - }) - - it(`should return an error when component cannot be loaded`, async () => { - const asyncRequires = createAsyncRequires({ - chunk: () => Promise.resolve(false), - }) - const prodLoader = new ProdLoader(asyncRequires, []) - const pageData = { - path: `/mypage/`, - componentChunkName: `chunk`, - } - prodLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: pageData, - status: `success`, - }) - ) - - await prodLoader.loadPage(`/mypage/`) - const expectation = prodLoader.pageDb.get(`/mypage`) - expect(expectation).toHaveProperty(`status`, `error`) - expect(emitter.emit).toHaveBeenCalledTimes(0) - }) - - it(`should return an error pageData contains an error`, async () => { - const asyncRequires = createAsyncRequires({ - chunk: () => Promise.resolve(`instance`), - }) - const prodLoader = new ProdLoader(asyncRequires, []) - const pageData = { - path: `/mypage/`, - componentChunkName: `chunk`, - } - prodLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: pageData, - status: `error`, - }) - ) - - expect(await prodLoader.loadPage(`/mypage/`)).toEqual({ status: `error` }) - expect(prodLoader.pageDb.size).toBe(0) - expect(emitter.emit).toHaveBeenCalledTimes(0) - }) - - it(`should throw an error when 404 cannot be fetched`, async () => { - const prodLoader = new ProdLoader(null, []) - - prodLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - status: `failure`, - }) - ) - - try { - await prodLoader.loadPage(`/404.html/`) - } catch (err) { - expect(err.message).toEqual( - expect.stringContaining(`404 page could not be found`) - ) - } - expect(prodLoader.pageDb.size).toBe(0) - expect(emitter.emit).toHaveBeenCalledTimes(0) - }) - - it(`should cache the result of loadPage`, async () => { - const asyncRequires = createAsyncRequires({ - chunk: () => Promise.resolve(`instance`), - }) - const prodLoader = new ProdLoader(asyncRequires, []) - prodLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: { - componentChunkName: `chunk`, - }, - status: `success`, - }) - ) - - const expectation = await prodLoader.loadPage(`/mypage/`) - expect(await prodLoader.loadPage(`/mypage/`)).toBe(expectation) - expect(prodLoader.loadPageDataJson).toHaveBeenCalledTimes(1) - }) - - it(`should only run 1 network request even when called multiple times`, async () => { - const asyncRequires = createAsyncRequires({ - chunk: () => Promise.resolve(`instance`), - }) - const prodLoader = new ProdLoader(asyncRequires, []) - prodLoader.loadPageDataJson = jest.fn(() => - Promise.resolve({ - payload: { - componentChunkName: `chunk`, - }, - status: `success`, - }) - ) - - const loadPagePromise = prodLoader.loadPage(`/test-page/`) - expect(prodLoader.inFlightDb.size).toBe(1) - expect(prodLoader.loadPage(`/test-page/`)).toBe(loadPagePromise) - expect(prodLoader.inFlightDb.size).toBe(1) - - const expectation = await loadPagePromise - - expect(prodLoader.inFlightDb.size).toBe(0) - expect(emitter.emit).toHaveBeenCalledTimes(1) - expect(emitter.emit).toHaveBeenCalledWith(`onPostLoadPageResources`, { - page: expectation, - pageResources: expectation, - }) - }) - }) - - describe(`loadPageSync`, () => { - it(`returns page resources when already fetched`, () => { - const prodLoader = new ProdLoader(null, []) - - prodLoader.pageDb.set(`/mypage`, { payload: true }) - expect(prodLoader.loadPageSync(`/mypage/`)).toBe(true) - }) - - it(`returns page resources when already fetched`, () => { - const prodLoader = new ProdLoader(null, []) - - expect(prodLoader.loadPageSync(`/mypage/`)).toBeUndefined() - }) - }) - - describe(`prefetch`, () => { - const flushPromises = () => new Promise(resolve => setImmediate(resolve)) - - it(`shouldn't prefetch when shouldPrefetch is false`, () => { - const prodLoader = new ProdLoader(null, []) - prodLoader.shouldPrefetch = jest.fn(() => false) - prodLoader.doPrefetch = jest.fn() - prodLoader.apiRunner = jest.fn() - - expect(prodLoader.prefetch(`/mypath/`)).toBe(false) - expect(prodLoader.shouldPrefetch).toHaveBeenCalledWith(`/mypath/`) - expect(prodLoader.apiRunner).not.toHaveBeenCalled() - expect(prodLoader.doPrefetch).not.toHaveBeenCalled() - }) - - it(`should trigger custom prefetch logic when core is disabled`, () => { - const prodLoader = new ProdLoader(null, []) - prodLoader.shouldPrefetch = jest.fn(() => true) - prodLoader.doPrefetch = jest.fn() - prodLoader.apiRunner = jest.fn() - prodLoader.prefetchDisabled = true - - expect(prodLoader.prefetch(`/mypath/`)).toBe(false) - expect(prodLoader.shouldPrefetch).toHaveBeenCalledWith(`/mypath/`) - expect(prodLoader.apiRunner).toHaveBeenCalledWith(`onPrefetchPathname`, { - pathname: `/mypath/`, - }) - expect(prodLoader.doPrefetch).not.toHaveBeenCalled() - }) - - it(`should prefetch when not yet triggered`, async () => { - jest.useFakeTimers() - const prodLoader = new ProdLoader(null, []) - prodLoader.shouldPrefetch = jest.fn(() => true) - prodLoader.apiRunner = jest.fn() - prodLoader.doPrefetch = jest.fn(() => Promise.resolve({})) - - expect(prodLoader.prefetch(`/mypath/`)).toBe(true) - - // wait for doPrefetchPromise - await flushPromises() - - expect(prodLoader.apiRunner).toHaveBeenCalledWith(`onPrefetchPathname`, { - pathname: `/mypath/`, - }) - expect(prodLoader.apiRunner).toHaveBeenNthCalledWith( - 2, - `onPostPrefetchPathname`, - { - pathname: `/mypath/`, - } - ) - }) - - it(`should only run apis once`, async () => { - const prodLoader = new ProdLoader(null, []) - prodLoader.shouldPrefetch = jest.fn(() => true) - prodLoader.apiRunner = jest.fn() - prodLoader.doPrefetch = jest.fn(() => Promise.resolve({})) - - expect(prodLoader.prefetch(`/mypath/`)).toBe(true) - expect(prodLoader.prefetch(`/mypath/`)).toBe(true) - - // wait for doPrefetchPromise - await flushPromises() - - expect(prodLoader.apiRunner).toHaveBeenCalledTimes(2) - expect(prodLoader.apiRunner).toHaveBeenNthCalledWith( - 1, - `onPrefetchPathname`, - expect.anything() - ) - expect(prodLoader.apiRunner).toHaveBeenNthCalledWith( - 2, - `onPostPrefetchPathname`, - expect.anything() - ) - }) - }) -}) diff --git a/.cache/__tests__/minimal-config.js b/.cache/__tests__/minimal-config.js deleted file mode 100644 index ef2c4c9a90..0000000000 --- a/.cache/__tests__/minimal-config.js +++ /dev/null @@ -1,32 +0,0 @@ -const path = require(`path`) -const child = require(`child_process`) - -it(`Builds cache-dir with minimal config`, done => { - const args = [ - require.resolve(`@babel/cli/bin/babel.js`), - path.join(__dirname, `..`), - `--config-file`, - path.join(__dirname, `.babelrc`), - `--ignore`, - `**/__tests__`, - ] - - const spawn = child.spawn(process.execPath, args) - - let stderr = `` - let stdout = `` - - spawn.stderr.on(`data`, function(chunk) { - stderr += chunk - }) - - spawn.stdout.on(`data`, function(chunk) { - stdout += chunk - }) - - spawn.on(`close`, function() { - expect(stderr).toEqual(``) - expect(stdout).not.toEqual(``) - done() - }) -}, 30000) diff --git a/.cache/__tests__/static-entry.js b/.cache/__tests__/static-entry.js deleted file mode 100644 index 9149015bf2..0000000000 --- a/.cache/__tests__/static-entry.js +++ /dev/null @@ -1,330 +0,0 @@ -import React from "react" -import fs from "fs" -const { join } = require(`path`) - -import DevelopStaticEntry from "../develop-static-entry" - -jest.mock(`fs`, () => { - const fs = jest.requireActual(`fs`) - return { - ...fs, - readFileSync: jest.fn(), - } -}) -jest.mock(`gatsby/package.json`, () => { - return { - version: `2.0.0`, - } -}) - -jest.mock( - `../sync-requires`, - () => { - return { - components: { - "page-component---src-pages-test-js": () => null, - }, - } - }, - { - virtual: true, - } -) - -const MOCK_FILE_INFO = { - [`${process.cwd()}/public/webpack.stats.json`]: `{}`, - [`${process.cwd()}/public/chunk-map.json`]: `{}`, - [join( - process.cwd(), - `/public/page-data/about/page-data.json` - )]: JSON.stringify({ - componentChunkName: `page-component---src-pages-test-js`, - path: `/about/`, - webpackCompilationHash: `1234567890abcdef1234`, - }), -} - -let StaticEntry -beforeEach(() => { - fs.readFileSync.mockImplementation(file => MOCK_FILE_INFO[file]) - StaticEntry = require(`../static-entry`).default -}) - -const reverseHeadersPlugin = { - plugin: { - onPreRenderHTML: ({ getHeadComponents, replaceHeadComponents }) => { - const headComponents = getHeadComponents() - headComponents.reverse() - replaceHeadComponents(headComponents) - }, - }, -} - -const injectValuePlugin = (hookName, methodName, value) => { - return { - plugin: { - [hookName]: staticEntry => { - const method = staticEntry[methodName] - method(value) - }, - }, - } -} - -const checkSanitized = components => { - expect(components.includes(null)).toBeFalsy() - expect( - components.find(val => Array.isArray(val) && val.length === 0) - ).toBeFalsy() - expect(components.find(val => Array.isArray(val))).toBeFalsy() -} - -const checkNonEmptyHeadersPlugin = { - plugin: { - onPreRenderHTML: ({ - getHeadComponents, - getPreBodyComponents, - getPostBodyComponents, - }) => { - const headComponents = getHeadComponents() - const preBodyComponents = getPreBodyComponents() - const postBodyComponents = getPostBodyComponents() - checkSanitized(headComponents) - checkSanitized(preBodyComponents) - checkSanitized(postBodyComponents) - }, - }, -} - -const fakeStylesPlugin = { - plugin: { - onRenderBody: ({ setHeadComponents }) => - setHeadComponents([ - , - , - , - ]), - }, -} - -const reverseBodyComponentsPluginFactory = type => { - return { - plugin: { - onPreRenderHTML: props => { - const components = props[`get${type}BodyComponents`]() - components.reverse() - props[`replace${type}BodyComponents`](components) - }, - }, - } -} - -const fakeComponentsPluginFactory = type => { - return { - plugin: { - onRenderBody: props => { - props[`set${type}BodyComponents`]([ -
div1
, -
div2
, -
div3
, - ]) - }, - }, - } -} - -describe(`develop-static-entry`, () => { - test(`onPreRenderHTML can be used to replace headComponents`, done => { - global.plugins = [fakeStylesPlugin, reverseHeadersPlugin] - - DevelopStaticEntry(`/about/`, (_, html) => { - expect(html).toMatchSnapshot() - done() - }) - }) - - test(`onPreRenderHTML can be used to replace postBodyComponents`, done => { - global.plugins = [ - fakeComponentsPluginFactory(`Post`), - reverseBodyComponentsPluginFactory(`Post`), - ] - - DevelopStaticEntry(`/about/`, (_, html) => { - expect(html).toMatchSnapshot() - done() - }) - }) - - test(`onPreRenderHTML can be used to replace preBodyComponents`, done => { - global.plugins = [ - fakeComponentsPluginFactory(`Pre`), - reverseBodyComponentsPluginFactory(`Pre`), - ] - - DevelopStaticEntry(`/about/`, (_, html) => { - expect(html).toMatchSnapshot() - done() - }) - }) - - test(`onPreRenderHTML adds metatag note for development environment`, done => { - DevelopStaticEntry(`/about/`, (_, html) => { - expect(html).toContain( - `` - ) - done() - }) - }) - - test(`onPreRenderHTML adds metatag note for development environment after replaceHeadComponents`, done => { - global.plugins = [reverseHeadersPlugin] - - DevelopStaticEntry(`/about/`, (_, html) => { - expect(html).toContain( - `` - ) - done() - }) - }) -}) - -describe(`static-entry sanity checks`, () => { - beforeEach(() => { - global.__PATH_PREFIX__ = `` - global.__BASE_PATH__ = `` - global.__ASSET_PREFIX__ = `` - }) - - const methodsToCheck = [ - `replaceHeadComponents`, - `replacePreBodyComponents`, - `replacePostBodyComponents`, - ] - - methodsToCheck.forEach(methodName => { - test(`${methodName} can filter out null value`, done => { - const plugin = injectValuePlugin(`onPreRenderHTML`, methodName, null) - global.plugins = [plugin, checkNonEmptyHeadersPlugin] - - StaticEntry(`/about/`, (_, html) => { - done() - }) - }) - - test(`${methodName} can filter out null values`, done => { - const plugin = injectValuePlugin(`onPreRenderHTML`, methodName, [ - null, - null, - ]) - global.plugins = [plugin, checkNonEmptyHeadersPlugin] - - StaticEntry(`/about/`, (_, html) => { - done() - }) - }) - - test(`${methodName} can filter out empty array`, done => { - const plugin = injectValuePlugin(`onPreRenderHTML`, methodName, []) - global.plugins = [plugin, checkNonEmptyHeadersPlugin] - - StaticEntry(`/about/`, (_, html) => { - done() - }) - }) - - test(`${methodName} can filter out empty arrays`, done => { - const plugin = injectValuePlugin(`onPreRenderHTML`, methodName, [[], []]) - global.plugins = [plugin, checkNonEmptyHeadersPlugin] - - StaticEntry(`/about/`, (_, html) => { - done() - }) - }) - - test(`${methodName} can flatten arrays`, done => { - const plugin = injectValuePlugin(`onPreRenderHTML`, methodName, [ - , - , - , - [], - ]) - global.plugins = [plugin, checkNonEmptyHeadersPlugin] - - StaticEntry(`/about/`, (_, html) => { - done() - }) - }) - }) -}) - -describe(`static-entry`, () => { - beforeEach(() => { - global.__PATH_PREFIX__ = `` - global.__BASE_PATH__ = `` - }) - - test(`onPreRenderHTML can be used to replace headComponents`, done => { - global.plugins = [fakeStylesPlugin, reverseHeadersPlugin] - - StaticEntry(`/about/`, (_, html) => { - expect(html).toMatchSnapshot() - done() - }) - }) - - test(`onPreRenderHTML can be used to replace postBodyComponents`, done => { - global.plugins = [ - fakeComponentsPluginFactory(`Post`), - reverseBodyComponentsPluginFactory(`Post`), - ] - - StaticEntry(`/about/`, (_, html) => { - expect(html).toMatchSnapshot() - done() - }) - }) - - test(`onPreRenderHTML can be used to replace preBodyComponents`, done => { - global.plugins = [ - fakeComponentsPluginFactory(`Pre`), - reverseBodyComponentsPluginFactory(`Pre`), - ] - - StaticEntry(`/about/`, (_, html) => { - expect(html).toMatchSnapshot() - done() - }) - }) - - test(`onPreRenderHTML does not add metatag note for development environment`, done => { - StaticEntry(`/about/`, (_, html) => { - expect(html).not.toContain( - `` - ) - done() - }) - }) -}) - -describe(`sanitizeComponents`, () => { - let sanitizeComponents - - beforeEach(() => { - fs.readFileSync.mockImplementation(file => MOCK_FILE_INFO[file]) - sanitizeComponents = require(`../static-entry`).sanitizeComponents - }) - - it(`strips assetPrefix for manifest link`, () => { - global.__PATH_PREFIX__ = `https://gatsbyjs.org/blog` - global.__BASE_PATH__ = `/blog` - global.__ASSET_PREFIX__ = `https://gatsbyjs.org` - - const sanitizedComponents = sanitizeComponents([ - , - ]) - expect(sanitizedComponents[0].props.href).toBe(`/blog/manifest.webmanifest`) - }) -}) diff --git a/.cache/__tests__/strip-prefix.js b/.cache/__tests__/strip-prefix.js deleted file mode 100644 index 5a220adb4e..0000000000 --- a/.cache/__tests__/strip-prefix.js +++ /dev/null @@ -1,27 +0,0 @@ -const stripPrefix = require(`../strip-prefix`).default - -describe(`strip-prefix`, () => { - it(`strips a prefix`, () => { - expect(stripPrefix(`/foo/bar/`, `/foo`)).toBe(`/bar/`) - }) - - it(`strips first instance only`, () => { - expect(stripPrefix(`/foo/foo/bar/`, `/foo`)).toBe(`/foo/bar/`) - }) - - it(`strips full instance only`, () => { - expect(stripPrefix(`/footest/`, `/foo`)).toBe(`/footest/`) - }) - - it(`ignores prefix appearing elsewhere in the string`, () => { - expect(stripPrefix(`/foo/bar/`, `bar`)).toBe(`/foo/bar/`) - }) - - it(`ignores a non-existent prefix`, () => { - expect(stripPrefix(`/bar`, `/foo`)).toBe(`/bar`) - }) - - it(`returns input str if no prefix is provided`, () => { - expect(stripPrefix(`/bar`)).toBe(`/bar`) - }) -}) diff --git a/.cache/api-runner-browser-plugins.js b/.cache/api-runner-browser-plugins.js deleted file mode 100644 index f406f23caa..0000000000 --- a/.cache/api-runner-browser-plugins.js +++ /dev/null @@ -1,31 +0,0 @@ -module.exports = [{ - plugin: require('../node_modules/gatsby-remark-autolink-headers/gatsby-browser.js'), - options: {"plugins":[]}, - },{ - plugin: require('../node_modules/gatsby-plugin-offline/gatsby-browser.js'), - options: {"plugins":[]}, - },{ - plugin: require('../node_modules/gatsby-plugin-manifest/gatsby-browser.js'), - options: {"plugins":[],"name":"gatsby-starter-default","short_name":"starter","start_url":"/","background_color":"#722ED1","theme_color":"#722ED1","display":"minimal-ui","icon":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/images/favicon.png"}, - },{ - plugin: require('../node_modules/gatsby-plugin-catch-links/gatsby-browser.js'), - options: {"plugins":[]}, - },{ - plugin: require('../node_modules/gatsby-plugin-nprogress/gatsby-browser.js'), - options: {"plugins":[]}, - },{ - plugin: require('../node_modules/gatsby-plugin-layout/gatsby-browser.js'), - options: {"plugins":[],"component":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/layouts/layout.tsx"}, - },{ - plugin: require('../node_modules/gatsby-plugin-nprogress/gatsby-browser.js'), - options: {"plugins":[],"color":"#722ED1"}, - },{ - plugin: require('../node_modules/gatsby-plugin-google-analytics/gatsby-browser.js'), - options: {"plugins":[],"trackingId":"UA-148148901-7"}, - },{ - plugin: require('../node_modules/@antv/gatsby-theme-antv/gatsby-browser.js'), - options: {"plugins":[],"GATrackingId":"UA-148148901-7"}, - },{ - plugin: require('../gatsby-browser.js'), - options: {"plugins":[]}, - }] diff --git a/.cache/api-runner-browser.js b/.cache/api-runner-browser.js deleted file mode 100644 index 2dd5981615..0000000000 --- a/.cache/api-runner-browser.js +++ /dev/null @@ -1,61 +0,0 @@ -const plugins = require(`./api-runner-browser-plugins`) -const { - getResourcesForPathname, - getResourcesForPathnameSync, - getResourceURLsForPathname, - loadPage, - loadPageSync, -} = require(`./loader`).publicLoader - -exports.apiRunner = (api, args = {}, defaultReturn, argTransform) => { - // Hooks for gatsby-cypress's API handler - if (process.env.CYPRESS_SUPPORT) { - if (window.___apiHandler) { - window.___apiHandler(api) - } else if (window.___resolvedAPIs) { - window.___resolvedAPIs.push(api) - } else { - window.___resolvedAPIs = [api] - } - } - - let results = plugins.map(plugin => { - if (!plugin.plugin[api]) { - return undefined - } - - // Deprecated April 2019. Use `loadPageSync` instead - args.getResourcesForPathnameSync = getResourcesForPathnameSync - // Deprecated April 2019. Use `loadPage` instead - args.getResourcesForPathname = getResourcesForPathname - args.getResourceURLsForPathname = getResourceURLsForPathname - args.loadPage = loadPage - args.loadPageSync = loadPageSync - - const result = plugin.plugin[api](args, plugin.options) - if (result && argTransform) { - args = argTransform({ args, result, plugin }) - } - return result - }) - - // Filter out undefined results. - results = results.filter(result => typeof result !== `undefined`) - - if (results.length > 0) { - return results - } else if (defaultReturn) { - return [defaultReturn] - } else { - return [] - } -} - -exports.apiRunnerAsync = (api, args, defaultReturn) => - plugins.reduce( - (previous, next) => - next.plugin[api] - ? previous.then(() => next.plugin[api](args, next.options)) - : previous, - Promise.resolve() - ) diff --git a/.cache/api-runner-ssr.js b/.cache/api-runner-ssr.js deleted file mode 100644 index bf315250ab..0000000000 --- a/.cache/api-runner-ssr.js +++ /dev/null @@ -1,67 +0,0 @@ -var plugins = [{ - plugin: require('/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/gatsby-plugin-react-helmet/gatsby-ssr'), - options: {"plugins":[]}, - },{ - plugin: require('/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/gatsby-remark-autolink-headers/gatsby-ssr'), - options: {"plugins":[]}, - },{ - plugin: require('/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/gatsby-plugin-offline/gatsby-ssr'), - options: {"plugins":[]}, - },{ - plugin: require('/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/gatsby-plugin-manifest/gatsby-ssr'), - options: {"plugins":[],"name":"gatsby-starter-default","short_name":"starter","start_url":"/","background_color":"#722ED1","theme_color":"#722ED1","display":"minimal-ui","icon":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/images/favicon.png"}, - },{ - plugin: require('/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/gatsby-plugin-sitemap/gatsby-ssr'), - options: {"plugins":[]}, - },{ - plugin: require('/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/gatsby-plugin-layout/gatsby-ssr'), - options: {"plugins":[],"component":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/layouts/layout.tsx"}, - },{ - plugin: require('/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/gatsby-plugin-google-analytics/gatsby-ssr'), - options: {"plugins":[],"trackingId":"UA-148148901-7"}, - },{ - plugin: require('/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/gatsby-ssr'), - options: {"plugins":[],"GATrackingId":"UA-148148901-7"}, - }] -// During bootstrap, we write requires at top of this file which looks like: -// var plugins = [ -// { -// plugin: require("/path/to/plugin1/gatsby-ssr.js"), -// options: { ... }, -// }, -// { -// plugin: require("/path/to/plugin2/gatsby-ssr.js"), -// options: { ... }, -// }, -// ] - -const apis = require(`./api-ssr-docs`) - -// Run the specified API in any plugins that have implemented it -module.exports = (api, args, defaultReturn, argTransform) => { - if (!apis[api]) { - console.log(`This API doesn't exist`, api) - } - - // Run each plugin in series. - // eslint-disable-next-line no-undef - let results = plugins.map(plugin => { - if (!plugin.plugin[api]) { - return undefined - } - const result = plugin.plugin[api](args, plugin.options) - if (result && argTransform) { - args = argTransform({ args, result }) - } - return result - }) - - // Filter out undefined results. - results = results.filter(result => typeof result !== `undefined`) - - if (results.length > 0) { - return results - } else { - return [defaultReturn] - } -} diff --git a/.cache/api-ssr-docs.js b/.cache/api-ssr-docs.js deleted file mode 100644 index 62982142fb..0000000000 --- a/.cache/api-ssr-docs.js +++ /dev/null @@ -1,198 +0,0 @@ -/** - * Object containing options defined in `gatsby-config.js` - * @typedef {object} pluginOptions - */ - -/** - * Replace the default server renderer. This is useful for integration with - * Redux, css-in-js libraries, etc. that need custom setups for server - * rendering. - * @param {object} $0 - * @param {string} $0.pathname The pathname of the page currently being rendered. - * @param {function} $0.replaceBodyHTMLString Call this with the HTML string - * you render. **WARNING** if multiple plugins implement this API it's the - * last plugin that "wins". TODO implement an automated warning against this. - * @param {function} $0.setHeadComponents Takes an array of components as its - * first argument which are added to the `headComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setHtmlAttributes Takes an object of props which will - * spread into the `` component. - * @param {function} $0.setBodyAttributes Takes an object of props which will - * spread into the `` component. - * @param {function} $0.setPreBodyComponents Takes an array of components as its - * first argument which are added to the `preBodyComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setPostBodyComponents Takes an array of components as its - * first argument which are added to the `postBodyComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setBodyProps Takes an object of data which - * is merged with other body props and passed to `html.js` as `bodyProps`. - * @param {pluginOptions} pluginOptions - * @example - * // From gatsby-plugin-glamor - * const { renderToString } = require("react-dom/server") - * const inline = require("glamor-inline") - * - * exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { - * const bodyHTML = renderToString(bodyComponent) - * const inlinedHTML = inline(bodyHTML) - * - * replaceBodyHTMLString(inlinedHTML) - * } - */ -exports.replaceRenderer = true - -/** - * Called after every page Gatsby server renders while building HTML so you can - * set head and body components to be rendered in your `html.js`. - * - * Gatsby does a two-pass render for HTML. It loops through your pages first - * rendering only the body and then takes the result body HTML string and - * passes it as the `body` prop to your `html.js` to complete the render. - * - * It's often handy to be able to send custom components to your `html.js`. - * For example, it's a very common pattern for React.js libraries that - * support server rendering to pull out data generated during the render to - * add to your HTML. - * - * Using this API over [`replaceRenderer`](#replaceRenderer) is preferable as - * multiple plugins can implement this API where only one plugin can take - * over server rendering. However, if your plugin requires taking over server - * rendering then that's the one to - * use - * @param {object} $0 - * @param {string} $0.pathname The pathname of the page currently being rendered. - * @param {function} $0.setHeadComponents Takes an array of components as its - * first argument which are added to the `headComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setHtmlAttributes Takes an object of props which will - * spread into the `` component. - * @param {function} $0.setBodyAttributes Takes an object of props which will - * spread into the `` component. - * @param {function} $0.setPreBodyComponents Takes an array of components as its - * first argument which are added to the `preBodyComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setPostBodyComponents Takes an array of components as its - * first argument which are added to the `postBodyComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setBodyProps Takes an object of data which - * is merged with other body props and passed to `html.js` as `bodyProps`. - * @param {pluginOptions} pluginOptions - * @example - * const { Helmet } = require("react-helmet") - * - * exports.onRenderBody = ( - * { setHeadComponents, setHtmlAttributes, setBodyAttributes }, - * pluginOptions - * ) => { - * const helmet = Helmet.renderStatic() - * setHtmlAttributes(helmet.htmlAttributes.toComponent()) - * setBodyAttributes(helmet.bodyAttributes.toComponent()) - * setHeadComponents([ - * helmet.title.toComponent(), - * helmet.link.toComponent(), - * helmet.meta.toComponent(), - * helmet.noscript.toComponent(), - * helmet.script.toComponent(), - * helmet.style.toComponent(), - * ]) - * } - */ -exports.onRenderBody = true - -/** - * Called after every page Gatsby server renders while building HTML so you can - * replace head components to be rendered in your `html.js`. This is useful if - * you need to reorder scripts or styles added by other plugins. - * @param {object} $0 - * @param {string} $0.pathname The pathname of the page currently being rendered. - * @param {Array} $0.getHeadComponents Returns the current `headComponents` array. - * @param {function} $0.replaceHeadComponents Takes an array of components as its - * first argument which replace the `headComponents` array which is passed - * to the `html.js` component. **WARNING** if multiple plugins implement this - * API it's the last plugin that "wins". - * @param {Array} $0.getPreBodyComponents Returns the current `preBodyComponents` array. - * @param {function} $0.replacePreBodyComponents Takes an array of components as its - * first argument which replace the `preBodyComponents` array which is passed - * to the `html.js` component. **WARNING** if multiple plugins implement this - * API it's the last plugin that "wins". - * @param {Array} $0.getPostBodyComponents Returns the current `postBodyComponents` array. - * @param {function} $0.replacePostBodyComponents Takes an array of components as its - * first argument which replace the `postBodyComponents` array which is passed - * to the `html.js` component. **WARNING** if multiple plugins implement this - * API it's the last plugin that "wins". - * @param {pluginOptions} pluginOptions - * @example - * // Move Typography.js styles to the top of the head section so they're loaded first. - * exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => { - * const headComponents = getHeadComponents() - * headComponents.sort((x, y) => { - * if (x.key === 'TypographyStyle') { - * return -1 - * } else if (y.key === 'TypographyStyle') { - * return 1 - * } - * return 0 - * }) - * replaceHeadComponents(headComponents) - * } - */ -exports.onPreRenderHTML = true - -/** - * Allow a plugin to wrap the page element. - * - * This is useful for setting wrapper components around pages that won't get - * unmounted on page changes. For setting Provider components, use [wrapRootElement](#wrapRootElement). - * - * _Note:_ - * There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapPageElement). - * It is recommended to use both APIs together. - * For example usage, check out [Using i18n](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n). - * @param {object} $0 - * @param {ReactNode} $0.element The "Page" React Element built by Gatsby. - * @param {object} $0.props Props object used by page. - * @param {pluginOptions} pluginOptions - * @returns {ReactNode} Wrapped element - * @example - * const React = require("react") - * const Layout = require("./src/components/layout").default - * - * exports.wrapPageElement = ({ element, props }) => { - * // props provide same data to Layout as Page element will get - * // including location, data, etc - you don't need to pass it - * return {element} - * } - */ -exports.wrapPageElement = true - -/** - * Allow a plugin to wrap the root element. - * - * This is useful to set up any Provider components that will wrap your application. - * For setting persistent UI elements around pages use [wrapPageElement](#wrapPageElement). - * - * _Note:_ - * There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapRootElement). - * It is recommended to use both APIs together. - * For example usage, check out [Using redux](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux). - * @param {object} $0 - * @param {ReactNode} $0.element The "Root" React Element built by Gatsby. - * @param {pluginOptions} pluginOptions - * @returns {ReactNode} Wrapped element - * @example - * const React = require("react") - * const { Provider } = require("react-redux") - * - * const createStore = require("./src/state/createStore") - * const store = createStore() - * - * exports.wrapRootElement = ({ element }) => { - * return ( - * - * {element} - * - * ) - * } - */ -exports.wrapRootElement = true diff --git a/.cache/app.js b/.cache/app.js deleted file mode 100644 index f0c2b5c476..0000000000 --- a/.cache/app.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from "react" -import ReactDOM from "react-dom" -import domReady from "@mikaelkristiansson/domready" - -import socketIo from "./socketIo" -import emitter from "./emitter" -import { apiRunner, apiRunnerAsync } from "./api-runner-browser" -import { setLoader, publicLoader } from "./loader" -import DevLoader from "./dev-loader" -import syncRequires from "./sync-requires" -// Generated during bootstrap -import matchPaths from "./match-paths.json" - -window.___emitter = emitter - -const loader = new DevLoader(syncRequires, matchPaths) -setLoader(loader) -loader.setApiRunner(apiRunner) - -window.___loader = publicLoader - -// Let the site/plugins run code very early. -apiRunnerAsync(`onClientEntry`).then(() => { - // Hook up the client to socket.io on server - const socket = socketIo() - if (socket) { - socket.on(`reload`, () => { - window.location.reload() - }) - } - - /** - * Service Workers are persistent by nature. They stick around, - * serving a cached version of the site if they aren't removed. - * This is especially frustrating when you need to test the - * production build on your local machine. - * - * Let's warn if we find service workers in development. - */ - if (`serviceWorker` in navigator) { - navigator.serviceWorker.getRegistrations().then(registrations => { - if (registrations.length > 0) - console.warn( - `Warning: found one or more service workers present.`, - `If your site isn't behaving as expected, you might want to remove these.`, - registrations - ) - }) - } - - const rootElement = document.getElementById(`___gatsby`) - - const renderer = apiRunner( - `replaceHydrateFunction`, - undefined, - ReactDOM.render - )[0] - - Promise.all([ - loader.loadPage(`/dev-404-page/`), - loader.loadPage(`/404.html`), - loader.loadPage(window.location.pathname), - ]).then(() => { - const preferDefault = m => (m && m.default) || m - let Root = preferDefault(require(`./root`)) - domReady(() => { - renderer(, rootElement, () => { - apiRunner(`onInitialClientRender`) - }) - }) - }) -}) diff --git a/.cache/async-requires.js b/.cache/async-requires.js deleted file mode 100644 index 8ab3a403ea..0000000000 --- a/.cache/async-requires.js +++ /dev/null @@ -1,13 +0,0 @@ -// prefer default export if available -const preferDefault = m => m && m.default || m - -exports.components = { - "component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx": () => import("../node_modules/@antv/gatsby-theme-antv/site/templates/document.tsx" /* webpackChunkName: "component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx" */), - "component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx": () => import("../node_modules/@antv/gatsby-theme-antv/site/templates/example.tsx" /* webpackChunkName: "component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx" */), - "component---cache-dev-404-page-js": () => import("dev-404-page.js" /* webpackChunkName: "component---cache-dev-404-page-js" */), - "component---node-modules-antv-gatsby-theme-antv-site-pages-index-tsx": () => import("../node_modules/@antv/gatsby-theme-antv/site/pages/index.tsx" /* webpackChunkName: "component---node-modules-antv-gatsby-theme-antv-site-pages-index-tsx" */), - "component---node-modules-antv-gatsby-theme-antv-site-pages-404-tsx": () => import("../node_modules/@antv/gatsby-theme-antv/site/pages/404.tsx" /* webpackChunkName: "component---node-modules-antv-gatsby-theme-antv-site-pages-404-tsx" */), - "component---site-pages-index-en-tsx": () => import("../site/pages/index.en.tsx" /* webpackChunkName: "component---site-pages-index-en-tsx" */), - "component---site-pages-index-zh-tsx": () => import("../site/pages/index.zh.tsx" /* webpackChunkName: "component---site-pages-index-zh-tsx" */) -} - diff --git a/.cache/babelState.json b/.cache/babelState.json deleted file mode 100644 index f6b4f68d54..0000000000 --- a/.cache/babelState.json +++ /dev/null @@ -1,152 +0,0 @@ -{ - "stages": { - "develop": { - "plugins": [ - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js", - "options": {} - }, - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - "options": {} - }, - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-numeric-separator/lib/index.js", - "options": {} - }, - { - "name": "babel-plugin-import", - "options": { - "libraryName": "antd", - "libraryDirectory": "es", - "style": true - } - } - ], - "presets": [ - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/preset-typescript/lib/index.js", - "options": { - "plugins": [] - } - } - ], - "options": { - "cacheDirectory": true, - "sourceType": "unambiguous" - } - }, - "develop-html": { - "plugins": [ - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js", - "options": {} - }, - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - "options": {} - }, - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-numeric-separator/lib/index.js", - "options": {} - }, - { - "name": "babel-plugin-import", - "options": { - "libraryName": "antd", - "libraryDirectory": "es", - "style": true - } - } - ], - "presets": [ - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/preset-typescript/lib/index.js", - "options": { - "plugins": [] - } - } - ], - "options": { - "cacheDirectory": true, - "sourceType": "unambiguous" - } - }, - "build-html": { - "plugins": [ - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js", - "options": {} - }, - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - "options": {} - }, - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-numeric-separator/lib/index.js", - "options": {} - }, - { - "name": "babel-plugin-import", - "options": { - "libraryName": "antd", - "libraryDirectory": "es", - "style": true - } - } - ], - "presets": [ - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/preset-typescript/lib/index.js", - "options": { - "plugins": [] - } - } - ], - "options": { - "cacheDirectory": true, - "sourceType": "unambiguous" - } - }, - "build-javascript": { - "plugins": [ - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js", - "options": {} - }, - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - "options": {} - }, - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/plugin-proposal-numeric-separator/lib/index.js", - "options": {} - }, - { - "name": "babel-plugin-import", - "options": { - "libraryName": "antd", - "libraryDirectory": "es", - "style": true - } - } - ], - "presets": [ - { - "name": "/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@babel/preset-typescript/lib/index.js", - "options": { - "plugins": [] - } - } - ], - "options": { - "cacheDirectory": true, - "sourceType": "unambiguous" - } - } - }, - "browserslist": [ - ">0.25%", - "not dead" - ] -} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-00fefd9ca24e5841bd080eae04fe6e79.json b/.cache/caches/gatsby-transformer-remark/diskstore-00fefd9ca24e5841bd080eae04fe6e79.json deleted file mode 100644 index ad08b182de..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-00fefd9ca24e5841bd080eae04fe6e79.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-ad3a0411bb469460edbd1820d1a953f5-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-026600e1d693194303582660f48e89b3.json b/.cache/caches/gatsby-transformer-remark/diskstore-026600e1d693194303582660f48e89b3.json deleted file mode 100644 index b8712358a9..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-026600e1d693194303582660f48e89b3.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-22e40979220b547ee56864978d7eefed-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-0299463da4ac6e26e6010ddc94744761.json b/.cache/caches/gatsby-transformer-remark/diskstore-0299463da4ac6e26e6010ddc94744761.json deleted file mode 100644 index 94f0f29b4e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-0299463da4ac6e26e6010ddc94744761.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-41aa0a12479519ad49d76176cb6f7dd9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#填充图","title":null,"children":[],"data":{"hProperties":{"aria-label":"填充图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"填充图","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":6,"offset":5},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":6,"offset":5},"indent":[]},"data":{"id":"填充图","htmlAttributes":{"id":"填充图"},"hProperties":{"id":"填充图"}}},{"type":"paragraph","children":[{"type":"text","value":"绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。","position":{"start":{"line":3,"column":1,"offset":7},"end":{"line":3,"column":28,"offset":34},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":7},"end":{"line":3,"column":28,"offset":34},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"shape","position":{"start":{"line":5,"column":5,"offset":40},"end":{"line":5,"column":10,"offset":45},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":36},"end":{"line":5,"column":10,"offset":45},"indent":[]},"data":{"id":"shape","htmlAttributes":{"id":"shape"},"hProperties":{"id":"shape"}}},{"type":"paragraph","children":[{"type":"text","value":"填充图支持3种shape","position":{"start":{"line":7,"column":1,"offset":47},"end":{"line":7,"column":13,"offset":59},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":47},"end":{"line":7,"column":13,"offset":59},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"fill 绘制填充面 不支持数据映射","position":{"start":{"line":9,"column":3,"offset":63},"end":{"line":9,"column":23,"offset":83},"indent":[]}}],"position":{"start":{"line":9,"column":3,"offset":63},"end":{"line":9,"column":23,"offset":83},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":61},"end":{"line":9,"column":23,"offset":83},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"line 绘制填充图描边 不支持数据映射","position":{"start":{"line":10,"column":3,"offset":86},"end":{"line":10,"column":24,"offset":107},"indent":[]}}],"position":{"start":{"line":10,"column":3,"offset":86},"end":{"line":10,"column":24,"offset":107},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":84},"end":{"line":10,"column":24,"offset":107},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"extrude 对填充图3D拉伸 不支持数据映射","position":{"start":{"line":11,"column":3,"offset":110},"end":{"line":11,"column":27,"offset":134},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":110},"end":{"line":11,"column":27,"offset":134},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":108},"end":{"line":11,"column":27,"offset":134},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":61},"end":{"line":11,"column":27,"offset":134},"indent":[1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
","position":{"start":{"line":13,"column":1,"offset":136},"end":{"line":18,"column":4,"offset":277},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"其他方法，事件，同基类 ","position":{"start":{"line":20,"column":1,"offset":279},"end":{"line":20,"column":13,"offset":291},"indent":[]}},{"type":"link","title":null,"url":"/zh/docs/api/layer/layer","children":[{"type":"text","value":"Layer","position":{"start":{"line":20,"column":14,"offset":292},"end":{"line":20,"column":19,"offset":297},"indent":[]}}],"position":{"start":{"line":20,"column":13,"offset":291},"end":{"line":20,"column":46,"offset":324},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":279},"end":{"line":20,"column":46,"offset":324},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":23,"column":1,"offset":327}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-02ed87b73e948a4a205860b6ea462e28.json b/.cache/caches/gatsby-transformer-remark/diskstore-02ed87b73e948a4a205860b6ea462e28.json deleted file mode 100644 index 6490ca5127..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-02ed87b73e948a4a205860b6ea462e28.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-b71d02195b585681f9cbb3853782db83-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#heatmaplayer","title":null,"children":[],"data":{"hProperties":{"aria-label":"heatmaplayer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"heatmapLayer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":15,"offset":14},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":15,"offset":14},"indent":[]},"data":{"id":"heatmaplayer","htmlAttributes":{"id":"heatmaplayer"},"hProperties":{"id":"heatmaplayer"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":4,"column":5,"offset":21},"end":{"line":4,"column":7,"offset":23},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":17},"end":{"line":4,"column":7,"offset":23},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"热力图图层，包含三种类型的，","position":{"start":{"line":6,"column":1,"offset":25},"end":{"line":6,"column":15,"offset":39},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":25},"end":{"line":6,"column":15,"offset":39},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"方格热力图 ","position":{"start":{"line":7,"column":3,"offset":42},"end":{"line":7,"column":9,"offset":48},"indent":[]}}],"position":{"start":{"line":7,"column":3,"offset":42},"end":{"line":7,"column":9,"offset":48},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":40},"end":{"line":7,"column":9,"offset":48},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":40},"end":{"line":7,"column":9,"offset":48},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。","position":{"start":{"line":9,"column":1,"offset":50},"end":{"line":9,"column":57,"offset":106},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":50},"end":{"line":9,"column":57,"offset":106},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"六边形热力图 ","position":{"start":{"line":11,"column":3,"offset":110},"end":{"line":11,"column":10,"offset":117},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":110},"end":{"line":11,"column":10,"offset":117},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":108},"end":{"line":11,"column":10,"offset":117},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":108},"end":{"line":11,"column":10,"offset":117},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局","position":{"start":{"line":13,"column":1,"offset":119},"end":{"line":13,"column":61,"offset":179},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":119},"end":{"line":13,"column":61,"offset":179},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"经典热力图 ","position":{"start":{"line":15,"column":3,"offset":183},"end":{"line":15,"column":9,"offset":189},"indent":[]}}],"position":{"start":{"line":15,"column":3,"offset":183},"end":{"line":15,"column":9,"offset":189},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":181},"end":{"line":15,"column":9,"offset":189},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":181},"end":{"line":15,"column":9,"offset":189},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法","position":{"start":{"line":19,"column":1,"offset":193},"end":{"line":19,"column":48,"offset":240},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":193},"end":{"line":19,"column":48,"offset":240},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#source","title":null,"children":[],"data":{"hProperties":{"aria-label":"source permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"source","position":{"start":{"line":21,"column":5,"offset":246},"end":{"line":21,"column":11,"offset":252},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":242},"end":{"line":21,"column":11,"offset":252},"indent":[]},"data":{"id":"source","htmlAttributes":{"id":"source"},"hProperties":{"id":"source"}}},{"type":"paragraph","children":[{"type":"text","value":"热力图只支持点数据作为数据源","position":{"start":{"line":23,"column":1,"offset":254},"end":{"line":23,"column":15,"offset":268},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":254},"end":{"line":23,"column":15,"offset":268},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"布局方法 通过source的 tansforms属性配置","position":{"start":{"line":25,"column":1,"offset":270},"end":{"line":25,"column":29,"offset":298},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":270},"end":{"line":25,"column":29,"offset":298},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"type  数据聚合类型 grid、hexagon","position":{"start":{"line":27,"column":3,"offset":302},"end":{"line":27,"column":28,"offset":327},"indent":[]}}],"position":{"start":{"line":27,"column":3,"offset":302},"end":{"line":27,"column":28,"offset":327},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":300},"end":{"line":27,"column":28,"offset":327},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"size  网格半径 单位 米","position":{"start":{"line":28,"column":3,"offset":330},"end":{"line":28,"column":18,"offset":345},"indent":[]}}],"position":{"start":{"line":28,"column":3,"offset":330},"end":{"line":28,"column":18,"offset":345},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":328},"end":{"line":28,"column":18,"offset":345},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"field  聚合字段","position":{"start":{"line":29,"column":3,"offset":348},"end":{"line":29,"column":14,"offset":359},"indent":[]}}],"position":{"start":{"line":29,"column":3,"offset":348},"end":{"line":29,"column":14,"offset":359},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":346},"end":{"line":29,"column":14,"offset":359},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"method 聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":30,"column":3,"offset":362},"end":{"line":30,"column":44,"offset":403},"indent":[]}}],"position":{"start":{"line":30,"column":3,"offset":362},"end":{"line":30,"column":44,"offset":403},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":360},"end":{"line":30,"column":44,"offset":403},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":300},"end":{"line":30,"column":44,"offset":403},"indent":[1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
","position":{"start":{"line":32,"column":1,"offset":405},"end":{"line":49,"column":4,"offset":662},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"shape","position":{"start":{"line":51,"column":5,"offset":668},"end":{"line":51,"column":10,"offset":673},"indent":[]}}],"position":{"start":{"line":51,"column":1,"offset":664},"end":{"line":51,"column":10,"offset":673},"indent":[]},"data":{"id":"shape","htmlAttributes":{"id":"shape"},"hProperties":{"id":"shape"}}},{"type":"paragraph","children":[{"type":"text","value":"不同类型热力图shape支持","position":{"start":{"line":53,"column":1,"offset":675},"end":{"line":53,"column":15,"offset":689},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":675},"end":{"line":53,"column":15,"offset":689},"indent":[]}},{"type":"table","align":[null,null,null],"children":[{"type":"tableRow","children":[{"type":"tableCell","children":[],"position":{"start":{"line":55,"column":4,"offset":694},"end":{"line":55,"column":4,"offset":694},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"2D","position":{"start":{"line":55,"column":6,"offset":696},"end":{"line":55,"column":8,"offset":698},"indent":[]}}],"position":{"start":{"line":55,"column":6,"offset":696},"end":{"line":55,"column":8,"offset":698},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"3d","position":{"start":{"line":55,"column":11,"offset":701},"end":{"line":55,"column":13,"offset":703},"indent":[]}}],"position":{"start":{"line":55,"column":11,"offset":701},"end":{"line":55,"column":13,"offset":703},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":691},"end":{"line":55,"column":15,"offset":705},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"网格格热力图","position":{"start":{"line":57,"column":3,"offset":728},"end":{"line":57,"column":9,"offset":734},"indent":[]}}],"position":{"start":{"line":57,"column":3,"offset":728},"end":{"line":57,"column":9,"offset":734},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":57,"column":12,"offset":737},"end":{"line":57,"column":42,"offset":767},"indent":[]}}],"position":{"start":{"line":57,"column":12,"offset":737},"end":{"line":57,"column":42,"offset":767},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"cylinder,triangleColumn,hexagonColum,squareColumn","position":{"start":{"line":57,"column":45,"offset":770},"end":{"line":57,"column":94,"offset":819},"indent":[]}}],"position":{"start":{"line":57,"column":45,"offset":770},"end":{"line":57,"column":94,"offset":819},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":726},"end":{"line":57,"column":96,"offset":821},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"蜂窝热力图","position":{"start":{"line":58,"column":3,"offset":824},"end":{"line":58,"column":8,"offset":829},"indent":[]}}],"position":{"start":{"line":58,"column":3,"offset":824},"end":{"line":58,"column":8,"offset":829},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":58,"column":11,"offset":832},"end":{"line":58,"column":41,"offset":862},"indent":[]}}],"position":{"start":{"line":58,"column":11,"offset":832},"end":{"line":58,"column":41,"offset":862},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":58,"column":44,"offset":865},"end":{"line":58,"column":74,"offset":895},"indent":[]}}],"position":{"start":{"line":58,"column":44,"offset":865},"end":{"line":58,"column":74,"offset":895},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":822},"end":{"line":58,"column":76,"offset":897},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"普通热力图","position":{"start":{"line":59,"column":3,"offset":900},"end":{"line":59,"column":8,"offset":905},"indent":[]}}],"position":{"start":{"line":59,"column":3,"offset":900},"end":{"line":59,"column":8,"offset":905},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"heatmap","position":{"start":{"line":59,"column":11,"offset":908},"end":{"line":59,"column":18,"offset":915},"indent":[]}}],"position":{"start":{"line":59,"column":11,"offset":908},"end":{"line":59,"column":18,"offset":915},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"heatmap","position":{"start":{"line":59,"column":21,"offset":918},"end":{"line":59,"column":28,"offset":925},"indent":[]}}],"position":{"start":{"line":59,"column":21,"offset":918},"end":{"line":59,"column":28,"offset":925},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":898},"end":{"line":59,"column":30,"offset":927},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":691},"end":{"line":59,"column":30,"offset":927},"indent":[1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"热力图布局下只shape方法只支持常量的可视化。","position":{"start":{"line":62,"column":1,"offset":930},"end":{"line":62,"column":25,"offset":954},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":930},"end":{"line":62,"column":25,"offset":954},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
","position":{"start":{"line":64,"column":1,"offset":956},"end":{"line":68,"column":4,"offset":1047},"indent":[1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#size","title":null,"children":[],"data":{"hProperties":{"aria-label":"size permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size","position":{"start":{"line":70,"column":5,"offset":1053},"end":{"line":70,"column":9,"offset":1057},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":1049},"end":{"line":70,"column":9,"offset":1057},"indent":[]},"data":{"id":"size","htmlAttributes":{"id":"size"},"hProperties":{"id":"size"}}},{"type":"paragraph","children":[{"type":"text","value":"当前版本 shape 为grid，hexagon不需要设置 size 映射","position":{"start":{"line":71,"column":1,"offset":1058},"end":{"line":71,"column":38,"offset":1095},"indent":[]}}],"position":{"start":{"line":71,"column":1,"offset":1058},"end":{"line":71,"column":38,"offset":1095},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"default 类型需要设置size映射 详细参数见","position":{"start":{"line":73,"column":1,"offset":1097},"end":{"line":73,"column":27,"offset":1123},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/l7/layer#size","children":[{"type":"text","value":"Size","position":{"start":{"line":73,"column":28,"offset":1124},"end":{"line":73,"column":32,"offset":1128},"indent":[]}}],"position":{"start":{"line":73,"column":27,"offset":1123},"end":{"line":73,"column":75,"offset":1171},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":73,"column":1,"offset":1097},"end":{"line":73,"column":75,"offset":1171},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"**size(field,values) **","position":{"start":{"line":75,"column":1,"offset":1173},"end":{"line":75,"column":24,"offset":1196},"indent":[]}}],"position":{"start":{"line":75,"column":1,"offset":1173},"end":{"line":75,"column":24,"offset":1196},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"field: 热力图权重字段","position":{"start":{"line":77,"column":3,"offset":1200},"end":{"line":77,"column":17,"offset":1214},"indent":[]}}],"position":{"start":{"line":77,"column":3,"offset":1200},"end":{"line":77,"column":17,"offset":1214},"indent":[]}}],"position":{"start":{"line":77,"column":1,"offset":1198},"end":{"line":77,"column":17,"offset":1214},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"values: 数据映射区间 热力图显示 ","position":{"start":{"line":78,"column":3,"offset":1217},"end":{"line":78,"column":24,"offset":1238},"indent":[]}},{"type":"linkReference","identifier":"0, 1","label":"0, 1","referenceType":"shortcut","children":[{"type":"text","value":"0, 1","position":{"start":{"line":78,"column":25,"offset":1239},"end":{"line":78,"column":29,"offset":1243},"indent":[]}}],"position":{"start":{"line":78,"column":24,"offset":1238},"end":{"line":78,"column":30,"offset":1244},"indent":[]}},{"type":"text","value":" 效果最佳","position":{"start":{"line":78,"column":30,"offset":1244},"end":{"line":78,"column":35,"offset":1249},"indent":[]}}],"position":{"start":{"line":78,"column":3,"offset":1217},"end":{"line":78,"column":35,"offset":1249},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":1215},"end":{"line":78,"column":35,"offset":1249},"indent":[]}}],"position":{"start":{"line":77,"column":1,"offset":1198},"end":{"line":78,"column":35,"offset":1249},"indent":[1]}},{"type":"html","lang":"javascript","meta":null,"value":"
HeatmapLayer.size('field', [0, 1]);\n
","position":{"start":{"line":80,"column":1,"offset":1251},"end":{"line":82,"column":4,"offset":1304},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#color","title":null,"children":[],"data":{"hProperties":{"aria-label":"color permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"color","position":{"start":{"line":85,"column":5,"offset":1311},"end":{"line":85,"column":10,"offset":1316},"indent":[]}}],"position":{"start":{"line":85,"column":1,"offset":1307},"end":{"line":85,"column":10,"offset":1316},"indent":[]},"data":{"id":"color","htmlAttributes":{"id":"color"},"hProperties":{"id":"color"}}},{"type":"paragraph","children":[{"type":"text","value":"default heatMap 类型不需设置 color映射","position":{"start":{"line":86,"column":1,"offset":1317},"end":{"line":86,"column":31,"offset":1347},"indent":[]}}],"position":{"start":{"line":86,"column":1,"offset":1317},"end":{"line":86,"column":31,"offset":1347},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"color 配置项同 ","position":{"start":{"line":88,"column":1,"offset":1349},"end":{"line":88,"column":12,"offset":1360},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/l7/layer#color","children":[{"type":"strong","children":[{"type":"text","value":"color","position":{"start":{"line":88,"column":15,"offset":1363},"end":{"line":88,"column":20,"offset":1368},"indent":[]}}],"position":{"start":{"line":88,"column":13,"offset":1361},"end":{"line":88,"column":22,"offset":1370},"indent":[]}}],"position":{"start":{"line":88,"column":12,"offset":1360},"end":{"line":88,"column":66,"offset":1414},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":88,"column":1,"offset":1349},"end":{"line":88,"column":66,"offset":1414},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#style","title":null,"children":[],"data":{"hProperties":{"aria-label":"style permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"style","position":{"start":{"line":92,"column":5,"offset":1422},"end":{"line":92,"column":10,"offset":1427},"indent":[]}}],"position":{"start":{"line":92,"column":1,"offset":1418},"end":{"line":92,"column":10,"offset":1427},"indent":[]},"data":{"id":"style","htmlAttributes":{"id":"style"},"hProperties":{"id":"style"}}},{"type":"paragraph","children":[{"type":"text","value":"grid hexagon 可以通过style 设置透明度","position":{"start":{"line":94,"column":1,"offset":1429},"end":{"line":94,"column":29,"offset":1457},"indent":[]}}],"position":{"start":{"line":94,"column":1,"offset":1429},"end":{"line":94,"column":29,"offset":1457},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"default热力图需要通过style配置参数热力图参数","position":{"start":{"line":96,"column":1,"offset":1459},"end":{"line":96,"column":29,"offset":1487},"indent":[]}}],"position":{"start":{"line":96,"column":1,"offset":1459},"end":{"line":96,"column":29,"offset":1487},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"intensity   全局热力权重   推荐权重范围 1-5","position":{"start":{"line":98,"column":3,"offset":1491},"end":{"line":98,"column":34,"offset":1522},"indent":[]}}],"position":{"start":{"line":98,"column":3,"offset":1491},"end":{"line":98,"column":34,"offset":1522},"indent":[]}}],"position":{"start":{"line":98,"column":1,"offset":1489},"end":{"line":98,"column":34,"offset":1522},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"radius  热力半径，单位像素","position":{"start":{"line":99,"column":3,"offset":1525},"end":{"line":99,"column":20,"offset":1542},"indent":[]}}],"position":{"start":{"line":99,"column":3,"offset":1525},"end":{"line":99,"column":20,"offset":1542},"indent":[]}}],"position":{"start":{"line":99,"column":1,"offset":1523},"end":{"line":99,"column":20,"offset":1542},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"rampColors 色带参数","position":{"start":{"line":100,"column":3,"offset":1545},"end":{"line":100,"column":18,"offset":1560},"indent":[]}}],"position":{"start":{"line":100,"column":3,"offset":1545},"end":{"line":100,"column":18,"offset":1560},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"colors  颜色数组","position":{"start":{"line":101,"column":5,"offset":1565},"end":{"line":101,"column":17,"offset":1577},"indent":[]}}],"position":{"start":{"line":101,"column":5,"offset":1565},"end":{"line":101,"column":17,"offset":1577},"indent":[]}}],"position":{"start":{"line":101,"column":3,"offset":1563},"end":{"line":101,"column":17,"offset":1577},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"positions 数据区间","position":{"start":{"line":102,"column":5,"offset":1582},"end":{"line":102,"column":19,"offset":1596},"indent":[]}}],"position":{"start":{"line":102,"column":5,"offset":1582},"end":{"line":102,"column":19,"offset":1596},"indent":[]}}],"position":{"start":{"line":102,"column":3,"offset":1580},"end":{"line":102,"column":19,"offset":1596},"indent":[]}}],"position":{"start":{"line":101,"column":3,"offset":1563},"end":{"line":102,"column":19,"offset":1596},"indent":[3]}}],"position":{"start":{"line":100,"column":1,"offset":1543},"end":{"line":102,"column":19,"offset":1596},"indent":[1,1]}}],"position":{"start":{"line":98,"column":1,"offset":1489},"end":{"line":102,"column":19,"offset":1596},"indent":[1,1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
","position":{"start":{"line":104,"column":1,"offset":1598},"end":{"line":113,"column":4,"offset":1906},"indent":[1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#完整代码示例","title":null,"children":[],"data":{"hProperties":{"aria-label":"完整代码示例 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"完整代码示例","position":{"start":{"line":116,"column":5,"offset":1913},"end":{"line":116,"column":11,"offset":1919},"indent":[]}}],"position":{"start":{"line":116,"column":1,"offset":1909},"end":{"line":116,"column":11,"offset":1919},"indent":[]},"data":{"id":"完整代码示例","htmlAttributes":{"id":"完整代码示例"},"hProperties":{"id":"完整代码示例"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#普通热力图","title":null,"children":[],"data":{"hProperties":{"aria-label":"普通热力图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"普通热力图","position":{"start":{"line":118,"column":6,"offset":1926},"end":{"line":118,"column":11,"offset":1931},"indent":[]}}],"position":{"start":{"line":118,"column":1,"offset":1921},"end":{"line":118,"column":11,"offset":1931},"indent":[]},"data":{"id":"普通热力图","htmlAttributes":{"id":"普通热力图"},"hProperties":{"id":"普通热力图"}}},{"type":"html","lang":"javascript","meta":null,"value":"
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
","position":{"start":{"line":120,"column":1,"offset":1933},"end":{"line":136,"column":4,"offset":2434},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#网格热力图","title":null,"children":[],"data":{"hProperties":{"aria-label":"网格热力图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"网格热力图","position":{"start":{"line":140,"column":6,"offset":2443},"end":{"line":140,"column":11,"offset":2448},"indent":[]}}],"position":{"start":{"line":140,"column":1,"offset":2438},"end":{"line":140,"column":11,"offset":2448},"indent":[]},"data":{"id":"网格热力图","htmlAttributes":{"id":"网格热力图"},"hProperties":{"id":"网格热力图"}}},{"type":"html","lang":"javascript","meta":null,"value":"
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
","position":{"start":{"line":142,"column":1,"offset":2450},"end":{"line":169,"column":4,"offset":2936},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#六边形热力图","title":null,"children":[],"data":{"hProperties":{"aria-label":"六边形热力图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"六边形热力图","position":{"start":{"line":172,"column":6,"offset":2944},"end":{"line":172,"column":12,"offset":2950},"indent":[]}}],"position":{"start":{"line":172,"column":1,"offset":2939},"end":{"line":172,"column":12,"offset":2950},"indent":[]},"data":{"id":"六边形热力图","htmlAttributes":{"id":"六边形热力图"},"hProperties":{"id":"六边形热力图"}}},{"type":"html","lang":"javascript","meta":null,"value":"
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","position":{"start":{"line":174,"column":1,"offset":2952},"end":{"line":200,"column":4,"offset":3324},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":200,"column":4,"offset":3324}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-03708f41da5bdb1009aee4602a215f55.json b/.cache/caches/gatsby-transformer-remark/diskstore-03708f41da5bdb1009aee4602a215f55.json deleted file mode 100644 index 43e13b426e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-03708f41da5bdb1009aee4602a215f55.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-2b56a382712fe8167708fc9c6567ee2a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-03d5f6dac060ba3761b3120e75dbf12b.json b/.cache/caches/gatsby-transformer-remark/diskstore-03d5f6dac060ba3761b3120e75dbf12b.json deleted file mode 100644 index 079ebab2b3..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-03d5f6dac060ba3761b3120e75dbf12b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-b547ac3a0b516aef90927b09bdc0a22c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-063cc54e8339ea498354ae42eb8cce5f.json b/.cache/caches/gatsby-transformer-remark/diskstore-063cc54e8339ea498354ae42eb8cce5f.json deleted file mode 100644 index 9708f18e6b..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-063cc54e8339ea498354ae42eb8cce5f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-3fdafdf445bd057a86b5717b80c92ebf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-06773b2dc5a6e98235eb2ddc52110bad.json b/.cache/caches/gatsby-transformer-remark/diskstore-06773b2dc5a6e98235eb2ddc52110bad.json deleted file mode 100644 index 221ea63edc..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-06773b2dc5a6e98235eb2ddc52110bad.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-41aa0a12479519ad49d76176cb6f7dd9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-069ffdd262af5a596fd57bb14e5ef8ff.json b/.cache/caches/gatsby-transformer-remark/diskstore-069ffdd262af5a596fd57bb14e5ef8ff.json deleted file mode 100644 index bf70a2f7dd..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-069ffdd262af5a596fd57bb14e5ef8ff.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-911c24b01efa22013e3bfb6511012c6c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-0824ec34bafa3b3e1763c5900e75be7e.json b/.cache/caches/gatsby-transformer-remark/diskstore-0824ec34bafa3b3e1763c5900e75be7e.json deleted file mode 100644 index e542198ba1..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-0824ec34bafa3b3e1763c5900e75be7e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-39727a14ec623ec7ff2e3240d0462862-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"使用方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95","aria-label":"使用方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用方法","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":7,"offset":7}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":7,"offset":7}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 提供三种使用方式：CDN、Submodule。","position":{"start":{"line":4,"column":1,"offset":9},"end":{"line":4,"column":27,"offset":35}}}],"position":{"start":{"line":4,"column":1,"offset":9},"end":{"line":4,"column":27,"offset":35}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"通过-cdn-使用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%80%9A%E8%BF%87-cdn-%E4%BD%BF%E7%94%A8","aria-label":"通过 cdn 使用 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"通过 CDN 使用","position":{"start":{"line":6,"column":4,"offset":40},"end":{"line":6,"column":13,"offset":49}}}],"position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":13,"offset":49}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"首先在 ","position":{"start":{"line":8,"column":1,"offset":51},"end":{"line":8,"column":5,"offset":55}}},{"type":"raw","value":"<head>","position":{"start":{"line":8,"column":5,"offset":55},"end":{"line":8,"column":13,"offset":63}}},{"type":"text","value":" 中引入 L7 CDN 版本的 JS 和 CSS 文件：","position":{"start":{"line":8,"column":13,"offset":63},"end":{"line":8,"column":41,"offset":91}}}],"position":{"start":{"line":8,"column":1,"offset":51},"end":{"line":8,"column":41,"offset":91}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
","position":{"start":{"line":9,"column":1,"offset":92},"end":{"line":13,"column":4,"offset":218}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 ","position":{"start":{"line":15,"column":1,"offset":220},"end":{"line":15,"column":50,"offset":269}}},{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox 文档","position":{"start":{"line":15,"column":51,"offset":270},"end":{"line":15,"column":60,"offset":279}}}],"position":{"start":{"line":15,"column":50,"offset":269},"end":{"line":15,"column":120,"offset":339}}},{"type":"text","value":"：","position":{"start":{"line":15,"column":120,"offset":339},"end":{"line":15,"column":121,"offset":340}}}],"position":{"start":{"line":15,"column":1,"offset":220},"end":{"line":15,"column":121,"offset":340}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
","position":{"start":{"line":16,"column":1,"offset":341},"end":{"line":22,"column":4,"offset":583}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️高德采用异步加载，因此不需要引入任何额外静态文件。","position":{"start":{"line":23,"column":1,"offset":584},"end":{"line":23,"column":28,"offset":611}}}],"position":{"start":{"line":23,"column":1,"offset":584},"end":{"line":23,"column":28,"offset":611}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"然后在 ","position":{"start":{"line":25,"column":1,"offset":613},"end":{"line":25,"column":5,"offset":617}}},{"type":"raw","value":"<body>","position":{"start":{"line":25,"column":5,"offset":617},"end":{"line":25,"column":13,"offset":625}}},{"type":"text","value":" 中定义一个容器并设置一个 ","position":{"start":{"line":25,"column":13,"offset":625},"end":{"line":25,"column":27,"offset":639}}},{"type":"raw","value":"id","position":{"start":{"line":25,"column":27,"offset":639},"end":{"line":25,"column":31,"offset":643}}},{"type":"text","value":"。通过全局 ","position":{"start":{"line":25,"column":31,"offset":643},"end":{"line":25,"column":37,"offset":649}}},{"type":"raw","value":"L7","position":{"start":{"line":25,"column":37,"offset":649},"end":{"line":25,"column":41,"offset":653}}},{"type":"text","value":" 这个命名空间可以获取场景 ","position":{"start":{"line":25,"column":41,"offset":653},"end":{"line":25,"column":55,"offset":667}}},{"type":"raw","value":"L7.Scene","position":{"start":{"line":25,"column":55,"offset":667},"end":{"line":25,"column":65,"offset":677}}},{"type":"text","value":" 和图层 ","position":{"start":{"line":25,"column":65,"offset":677},"end":{"line":25,"column":70,"offset":682}}},{"type":"raw","value":"L7.PolygonLayer","position":{"start":{"line":25,"column":70,"offset":682},"end":{"line":25,"column":87,"offset":699}}},{"type":"text","value":"：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 ","position":{"start":{"line":25,"column":87,"offset":699},"end":{"line":26,"column":33,"offset":733}}},{"type":"raw","value":"L7.Scene","position":{"start":{"line":26,"column":33,"offset":733},"end":{"line":26,"column":43,"offset":743}}},{"type":"text","value":" 的构造函数，获取方式如下：","position":{"start":{"line":26,"column":43,"offset":743},"end":{"line":26,"column":57,"offset":757}}}],"position":{"start":{"line":25,"column":1,"offset":613},"end":{"line":26,"column":57,"offset":757}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"高德地图开发者 Key ","position":{"start":{"line":27,"column":3,"offset":760},"end":{"line":27,"column":15,"offset":772}}},{"type":"element","tagName":"a","properties":{"href":"https://lbs.amap.com/dev/key/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"申请方法","position":{"start":{"line":27,"column":16,"offset":773},"end":{"line":27,"column":20,"offset":777}}}],"position":{"start":{"line":27,"column":15,"offset":772},"end":{"line":27,"column":52,"offset":809}}}],"position":{"start":{"line":27,"column":1,"offset":758},"end":{"line":27,"column":52,"offset":809}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox Access Tokens","position":{"start":{"line":28,"column":4,"offset":813},"end":{"line":28,"column":24,"offset":833}}}],"position":{"start":{"line":28,"column":3,"offset":812},"end":{"line":28,"column":123,"offset":932}}}],"position":{"start":{"line":28,"column":1,"offset":810},"end":{"line":28,"column":123,"offset":932}}},{"type":"text","value":"\n"}],"position":{"start":{"line":27,"column":1,"offset":758},"end":{"line":28,"column":123,"offset":932}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"通过-submodule-使用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%80%9A%E8%BF%87-submodule-%E4%BD%BF%E7%94%A8","aria-label":"通过 submodule 使用 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"通过 Submodule 使用","position":{"start":{"line":30,"column":4,"offset":937},"end":{"line":30,"column":19,"offset":952}}}],"position":{"start":{"line":30,"column":1,"offset":934},"end":{"line":30,"column":19,"offset":952}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"首先通过 ","position":{"start":{"line":32,"column":1,"offset":954},"end":{"line":32,"column":6,"offset":959}}},{"type":"raw","value":"npm/yarn","position":{"start":{"line":32,"column":6,"offset":959},"end":{"line":32,"column":16,"offset":969}}}],"position":{"start":{"line":32,"column":1,"offset":954},"end":{"line":32,"column":16,"offset":969}}},{"type":"text","value":"\n"},{"type":"raw","value":"
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
","position":{"start":{"line":33,"column":1,"offset":970},"end":{"line":38,"column":4,"offset":1048}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"然后就可以使用其中包含的场景和各类图层：","position":{"start":{"line":40,"column":1,"offset":1050},"end":{"line":40,"column":21,"offset":1070}}}],"position":{"start":{"line":40,"column":1,"offset":1050},"end":{"line":40,"column":21,"offset":1070}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
","position":{"start":{"line":41,"column":1,"offset":1071},"end":{"line":86,"column":4,"offset":1942}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：","position":{"start":{"line":89,"column":1,"offset":1945},"end":{"line":89,"column":36,"offset":1980}}}],"position":{"start":{"line":89,"column":1,"offset":1945},"end":{"line":89,"column":36,"offset":1980}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"高德地图","position":{"start":{"line":90,"column":4,"offset":1984},"end":{"line":90,"column":8,"offset":1988}}}],"position":{"start":{"line":90,"column":3,"offset":1983},"end":{"line":90,"column":88,"offset":2068}}}],"position":{"start":{"line":90,"column":1,"offset":1981},"end":{"line":90,"column":88,"offset":2068}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox","position":{"start":{"line":91,"column":4,"offset":2072},"end":{"line":91,"column":10,"offset":2078}}}],"position":{"start":{"line":91,"column":3,"offset":2071},"end":{"line":91,"column":92,"offset":2160}}}],"position":{"start":{"line":91,"column":1,"offset":2069},"end":{"line":91,"column":92,"offset":2160}}},{"type":"text","value":"\n"}],"position":{"start":{"line":90,"column":1,"offset":1981},"end":{"line":91,"column":92,"offset":2160}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"wip-react"},"children":[{"type":"element","tagName":"a","properties":{"href":"#wip-react","aria-label":"wip react permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"[WIP]","position":{"start":{"line":94,"column":5,"offset":2167},"end":{"line":94,"column":8,"offset":2170}}},{"type":"text","value":" React","position":{"start":{"line":94,"column":9,"offset":2171},"end":{"line":94,"column":15,"offset":2177}}}],"position":{"start":{"line":94,"column":1,"offset":2163},"end":{"line":94,"column":15,"offset":2177}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React 组件待开发，目前可以暂时以 Submodule 方式使用：","position":{"start":{"line":96,"column":1,"offset":2179},"end":{"line":96,"column":36,"offset":2214}}}],"position":{"start":{"line":96,"column":1,"offset":2179},"end":{"line":96,"column":36,"offset":2214}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
","position":{"start":{"line":97,"column":1,"offset":2215},"end":{"line":158,"column":4,"offset":3495}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️组件 Unmount 时需要通过 ","position":{"start":{"line":160,"column":1,"offset":3497},"end":{"line":160,"column":20,"offset":3516}}},{"type":"raw","value":"scene.destroy()","position":{"start":{"line":160,"column":20,"offset":3516},"end":{"line":160,"column":37,"offset":3533}}},{"type":"text","value":" 手动销毁场景。","position":{"start":{"line":160,"column":37,"offset":3533},"end":{"line":160,"column":45,"offset":3541}}}],"position":{"start":{"line":160,"column":1,"offset":3497},"end":{"line":160,"column":45,"offset":3541}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":162,"column":1,"offset":3543}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-0c263cc0969b3925b85c614ed1651b6f.json b/.cache/caches/gatsby-transformer-remark/diskstore-0c263cc0969b3925b85c614ed1651b6f.json deleted file mode 100644 index 1a9cf9b6da..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-0c263cc0969b3925b85c614ed1651b6f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-22d5cfaea43f5168ac21fe86d535648f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-0e670e9394689267c129c5d813e288d1.json b/.cache/caches/gatsby-transformer-remark/diskstore-0e670e9394689267c129c5d813e288d1.json deleted file mode 100644 index 4495896333..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-0e670e9394689267c129c5d813e288d1.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-0b3dfbbedf9555fe75466ff56f3ff5db-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#imagelayer","title":null,"children":[],"data":{"hProperties":{"aria-label":"imagelayer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"ImageLayer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":13,"offset":12},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":13,"offset":12},"indent":[]},"data":{"id":"imagelayer","htmlAttributes":{"id":"imagelayer"},"hProperties":{"id":"imagelayer"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":3,"column":4,"offset":17},"end":{"line":3,"column":6,"offset":19},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":3,"column":6,"offset":19},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"将图片添加到地图上，需要指定图片的经纬度范围","position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#代码示例","title":null,"children":[],"data":{"hProperties":{"aria-label":"代码示例 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"代码示例","position":{"start":{"line":6,"column":5,"offset":48},"end":{"line":6,"column":9,"offset":52},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":9,"offset":52},"indent":[]},"data":{"id":"代码示例","htmlAttributes":{"id":"代码示例"},"hProperties":{"id":"代码示例"}}},{"type":"html","lang":"javascript","meta":null,"value":"
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","position":{"start":{"line":8,"column":1,"offset":54},"end":{"line":19,"column":4,"offset":297},"indent":[1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":20,"column":1,"offset":298}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-0e8453b74ecd4da6e73d60791fda00cd.json b/.cache/caches/gatsby-transformer-remark/diskstore-0e8453b74ecd4da6e73d60791fda00cd.json deleted file mode 100644 index 8f481b38c9..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-0e8453b74ecd4da6e73d60791fda00cd.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-119e3104d715d1fff21c8aae318c2c39-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#使用方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"使用方法","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":7,"offset":7},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":7,"offset":7},"indent":[]},"data":{"id":"使用方法","htmlAttributes":{"id":"使用方法"},"hProperties":{"id":"使用方法"}}},{"type":"paragraph","children":[{"type":"text","value":"L7 提供三种使用方式：CDN、Submodule。","position":{"start":{"line":4,"column":1,"offset":9},"end":{"line":4,"column":27,"offset":35},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":9},"end":{"line":4,"column":27,"offset":35},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#通过-cdn-使用","title":null,"children":[],"data":{"hProperties":{"aria-label":"通过 cdn 使用 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"通过 CDN 使用","position":{"start":{"line":6,"column":4,"offset":40},"end":{"line":6,"column":13,"offset":49},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":13,"offset":49},"indent":[]},"data":{"id":"通过-cdn-使用","htmlAttributes":{"id":"通过-cdn-使用"},"hProperties":{"id":"通过-cdn-使用"}}},{"type":"paragraph","children":[{"type":"text","value":"首先在 ","position":{"start":{"line":8,"column":1,"offset":51},"end":{"line":8,"column":5,"offset":55},"indent":[]}},{"type":"html","value":"<head>","position":{"start":{"line":8,"column":5,"offset":55},"end":{"line":8,"column":13,"offset":63},"indent":[]}},{"type":"text","value":" 中引入 L7 CDN 版本的 JS 和 CSS 文件：","position":{"start":{"line":8,"column":13,"offset":63},"end":{"line":8,"column":41,"offset":91},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":51},"end":{"line":8,"column":41,"offset":91},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
","position":{"start":{"line":9,"column":1,"offset":92},"end":{"line":13,"column":4,"offset":218},"indent":[1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 ","position":{"start":{"line":15,"column":1,"offset":220},"end":{"line":15,"column":50,"offset":269},"indent":[]}},{"type":"link","title":null,"url":"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart","children":[{"type":"text","value":"Mapbox 文档","position":{"start":{"line":15,"column":51,"offset":270},"end":{"line":15,"column":60,"offset":279},"indent":[]}}],"position":{"start":{"line":15,"column":50,"offset":269},"end":{"line":15,"column":120,"offset":339},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"：","position":{"start":{"line":15,"column":120,"offset":339},"end":{"line":15,"column":121,"offset":340},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":220},"end":{"line":15,"column":121,"offset":340},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
","position":{"start":{"line":16,"column":1,"offset":341},"end":{"line":22,"column":4,"offset":583},"indent":[1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️高德采用异步加载，因此不需要引入任何额外静态文件。","position":{"start":{"line":23,"column":1,"offset":584},"end":{"line":23,"column":28,"offset":611},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":584},"end":{"line":23,"column":28,"offset":611},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"然后在 ","position":{"start":{"line":25,"column":1,"offset":613},"end":{"line":25,"column":5,"offset":617},"indent":[]}},{"type":"html","value":"<body>","position":{"start":{"line":25,"column":5,"offset":617},"end":{"line":25,"column":13,"offset":625},"indent":[]}},{"type":"text","value":" 中定义一个容器并设置一个 ","position":{"start":{"line":25,"column":13,"offset":625},"end":{"line":25,"column":27,"offset":639},"indent":[]}},{"type":"html","value":"id","position":{"start":{"line":25,"column":27,"offset":639},"end":{"line":25,"column":31,"offset":643},"indent":[]}},{"type":"text","value":"。通过全局 ","position":{"start":{"line":25,"column":31,"offset":643},"end":{"line":25,"column":37,"offset":649},"indent":[]}},{"type":"html","value":"L7","position":{"start":{"line":25,"column":37,"offset":649},"end":{"line":25,"column":41,"offset":653},"indent":[]}},{"type":"text","value":" 这个命名空间可以获取场景 ","position":{"start":{"line":25,"column":41,"offset":653},"end":{"line":25,"column":55,"offset":667},"indent":[]}},{"type":"html","value":"L7.Scene","position":{"start":{"line":25,"column":55,"offset":667},"end":{"line":25,"column":65,"offset":677},"indent":[]}},{"type":"text","value":" 和图层 ","position":{"start":{"line":25,"column":65,"offset":677},"end":{"line":25,"column":70,"offset":682},"indent":[]}},{"type":"html","value":"L7.PolygonLayer","position":{"start":{"line":25,"column":70,"offset":682},"end":{"line":25,"column":87,"offset":699},"indent":[]}},{"type":"text","value":"：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 ","position":{"start":{"line":25,"column":87,"offset":699},"end":{"line":26,"column":33,"offset":733},"indent":[1]}},{"type":"html","value":"L7.Scene","position":{"start":{"line":26,"column":33,"offset":733},"end":{"line":26,"column":43,"offset":743},"indent":[]}},{"type":"text","value":" 的构造函数，获取方式如下：","position":{"start":{"line":26,"column":43,"offset":743},"end":{"line":26,"column":57,"offset":757},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":613},"end":{"line":26,"column":57,"offset":757},"indent":[1]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"高德地图开发者 Key ","position":{"start":{"line":27,"column":3,"offset":760},"end":{"line":27,"column":15,"offset":772},"indent":[]}},{"type":"link","title":null,"url":"https://lbs.amap.com/dev/key/","children":[{"type":"text","value":"申请方法","position":{"start":{"line":27,"column":16,"offset":773},"end":{"line":27,"column":20,"offset":777},"indent":[]}}],"position":{"start":{"line":27,"column":15,"offset":772},"end":{"line":27,"column":52,"offset":809},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":27,"column":3,"offset":760},"end":{"line":27,"column":52,"offset":809},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":758},"end":{"line":27,"column":52,"offset":809},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens","children":[{"type":"text","value":"Mapbox Access Tokens","position":{"start":{"line":28,"column":4,"offset":813},"end":{"line":28,"column":24,"offset":833},"indent":[]}}],"position":{"start":{"line":28,"column":3,"offset":812},"end":{"line":28,"column":123,"offset":932},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":28,"column":3,"offset":812},"end":{"line":28,"column":123,"offset":932},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":810},"end":{"line":28,"column":123,"offset":932},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":758},"end":{"line":28,"column":123,"offset":932},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#通过-submodule-使用","title":null,"children":[],"data":{"hProperties":{"aria-label":"通过 submodule 使用 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"通过 Submodule 使用","position":{"start":{"line":30,"column":4,"offset":937},"end":{"line":30,"column":19,"offset":952},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":934},"end":{"line":30,"column":19,"offset":952},"indent":[]},"data":{"id":"通过-submodule-使用","htmlAttributes":{"id":"通过-submodule-使用"},"hProperties":{"id":"通过-submodule-使用"}}},{"type":"paragraph","children":[{"type":"text","value":"首先通过 ","position":{"start":{"line":32,"column":1,"offset":954},"end":{"line":32,"column":6,"offset":959},"indent":[]}},{"type":"html","value":"npm/yarn","position":{"start":{"line":32,"column":6,"offset":959},"end":{"line":32,"column":16,"offset":969},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":954},"end":{"line":32,"column":16,"offset":969},"indent":[]}},{"type":"html","lang":"bash","meta":null,"value":"
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
","position":{"start":{"line":33,"column":1,"offset":970},"end":{"line":38,"column":4,"offset":1048},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"然后就可以使用其中包含的场景和各类图层：","position":{"start":{"line":40,"column":1,"offset":1050},"end":{"line":40,"column":21,"offset":1070},"indent":[]}}],"position":{"start":{"line":40,"column":1,"offset":1050},"end":{"line":40,"column":21,"offset":1070},"indent":[]}},{"type":"html","lang":"typescript","meta":null,"value":"
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
","position":{"start":{"line":41,"column":1,"offset":1071},"end":{"line":86,"column":4,"offset":1942},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：","position":{"start":{"line":89,"column":1,"offset":1945},"end":{"line":89,"column":36,"offset":1980},"indent":[]}}],"position":{"start":{"line":89,"column":1,"offset":1945},"end":{"line":89,"column":36,"offset":1980},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx","children":[{"type":"text","value":"高德地图","position":{"start":{"line":90,"column":4,"offset":1984},"end":{"line":90,"column":8,"offset":1988},"indent":[]}}],"position":{"start":{"line":90,"column":3,"offset":1983},"end":{"line":90,"column":88,"offset":2068},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":90,"column":3,"offset":1983},"end":{"line":90,"column":88,"offset":2068},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":1981},"end":{"line":90,"column":88,"offset":2068},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx","children":[{"type":"text","value":"Mapbox","position":{"start":{"line":91,"column":4,"offset":2072},"end":{"line":91,"column":10,"offset":2078},"indent":[]}}],"position":{"start":{"line":91,"column":3,"offset":2071},"end":{"line":91,"column":92,"offset":2160},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":91,"column":3,"offset":2071},"end":{"line":91,"column":92,"offset":2160},"indent":[]}}],"position":{"start":{"line":91,"column":1,"offset":2069},"end":{"line":91,"column":92,"offset":2160},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":1981},"end":{"line":91,"column":92,"offset":2160},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#wip-react","title":null,"children":[],"data":{"hProperties":{"aria-label":"wip react permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"linkReference","identifier":"wip","label":"WIP","referenceType":"shortcut","children":[{"type":"text","value":"WIP","position":{"start":{"line":94,"column":5,"offset":2167},"end":{"line":94,"column":8,"offset":2170},"indent":[]}}],"position":{"start":{"line":94,"column":4,"offset":2166},"end":{"line":94,"column":9,"offset":2171},"indent":[]}},{"type":"text","value":" React","position":{"start":{"line":94,"column":9,"offset":2171},"end":{"line":94,"column":15,"offset":2177},"indent":[]}}],"position":{"start":{"line":94,"column":1,"offset":2163},"end":{"line":94,"column":15,"offset":2177},"indent":[]},"data":{"id":"wip-react","htmlAttributes":{"id":"wip-react"},"hProperties":{"id":"wip-react"}}},{"type":"paragraph","children":[{"type":"text","value":"React 组件待开发，目前可以暂时以 Submodule 方式使用：","position":{"start":{"line":96,"column":1,"offset":2179},"end":{"line":96,"column":36,"offset":2214},"indent":[]}}],"position":{"start":{"line":96,"column":1,"offset":2179},"end":{"line":96,"column":36,"offset":2214},"indent":[]}},{"type":"html","lang":"tsx","meta":null,"value":"
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
","position":{"start":{"line":97,"column":1,"offset":2215},"end":{"line":158,"column":4,"offset":3495},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️组件 Unmount 时需要通过 ","position":{"start":{"line":160,"column":1,"offset":3497},"end":{"line":160,"column":20,"offset":3516},"indent":[]}},{"type":"html","value":"scene.destroy()","position":{"start":{"line":160,"column":20,"offset":3516},"end":{"line":160,"column":37,"offset":3533},"indent":[]}},{"type":"text","value":" 手动销毁场景。","position":{"start":{"line":160,"column":37,"offset":3533},"end":{"line":160,"column":45,"offset":3541},"indent":[]}}],"position":{"start":{"line":160,"column":1,"offset":3497},"end":{"line":160,"column":45,"offset":3541},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":162,"column":1,"offset":3543}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-0fd471dc71340d71ce4e1217af2dcdcf.json b/.cache/caches/gatsby-transformer-remark/diskstore-0fd471dc71340d71ce4e1217af2dcdcf.json deleted file mode 100644 index 34f518f3d4..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-0fd471dc71340d71ce4e1217af2dcdcf.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-22d5cfaea43f5168ac21fe86d535648f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-0ffed54a9ea84de9826d76478f31e6de.json b/.cache/caches/gatsby-transformer-remark/diskstore-0ffed54a9ea84de9826d76478f31e6de.json deleted file mode 100644 index 9d73f66d92..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-0ffed54a9ea84de9826d76478f31e6de.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-0ce38f6fc0207c9629c6165b2f176cd7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#source","title":null,"children":[],"data":{"hProperties":{"aria-label":"source permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Source","position":{"start":{"line":3,"column":3,"offset":4},"end":{"line":3,"column":9,"offset":10},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":9,"offset":10},"indent":[]},"data":{"id":"source","htmlAttributes":{"id":"source"},"hProperties":{"id":"source"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#概述","title":null,"children":[],"data":{"hProperties":{"aria-label":"概述 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"概述","position":{"start":{"line":6,"column":5,"offset":17},"end":{"line":6,"column":7,"offset":19},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":13},"end":{"line":6,"column":7,"offset":19},"indent":[]},"data":{"id":"概述","htmlAttributes":{"id":"概述"},"hProperties":{"id":"概述"}}},{"type":"paragraph","children":[{"type":"text","value":"source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);","position":{"start":{"line":8,"column":1,"offset":21},"end":{"line":8,"column":51,"offset":71},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":21},"end":{"line":8,"column":51,"offset":71},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"parser:","position":{"start":{"line":10,"column":3,"offset":75},"end":{"line":10,"column":10,"offset":82},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":73},"end":{"line":10,"column":12,"offset":84},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":73},"end":{"line":10,"column":12,"offset":84},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。","position":{"start":{"line":12,"column":1,"offset":86},"end":{"line":12,"column":83,"offset":168},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":86},"end":{"line":12,"column":83,"offset":168},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"transform:","position":{"start":{"line":14,"column":3,"offset":172},"end":{"line":14,"column":13,"offset":182},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":170},"end":{"line":14,"column":15,"offset":184},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":170},"end":{"line":14,"column":15,"offset":184},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"数据转换，数据统计，网格布局，数据聚合等数据操作。","position":{"start":{"line":16,"column":1,"offset":186},"end":{"line":16,"column":26,"offset":211},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":186},"end":{"line":16,"column":26,"offset":211},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#api","title":null,"children":[],"data":{"hProperties":{"aria-label":"api permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"API","position":{"start":{"line":19,"column":4,"offset":217},"end":{"line":19,"column":7,"offset":220},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":214},"end":{"line":19,"column":7,"offset":220},"indent":[]},"data":{"id":"api","htmlAttributes":{"id":"api"},"hProperties":{"id":"api"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#parser","title":null,"children":[],"data":{"hProperties":{"aria-label":"parser permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"parser","position":{"start":{"line":21,"column":5,"offset":226},"end":{"line":21,"column":11,"offset":232},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":222},"end":{"line":21,"column":11,"offset":232},"indent":[]},"data":{"id":"parser","htmlAttributes":{"id":"parser"},"hProperties":{"id":"parser"}}},{"type":"paragraph","children":[{"type":"text","value":"空间数据分矢量数据和栅格数据两大类","position":{"start":{"line":23,"column":1,"offset":234},"end":{"line":23,"column":18,"offset":251},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":234},"end":{"line":23,"column":18,"offset":251},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"矢量数据 支持 csv，geojson，json 三种数据类型","position":{"start":{"line":25,"column":3,"offset":255},"end":{"line":25,"column":34,"offset":286},"indent":[]}}],"position":{"start":{"line":25,"column":3,"offset":255},"end":{"line":25,"column":34,"offset":286},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":253},"end":{"line":26,"column":1,"offset":287},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"栅格数据 支持 image，Raster","position":{"start":{"line":27,"column":3,"offset":290},"end":{"line":27,"column":24,"offset":311},"indent":[]}}],"position":{"start":{"line":27,"column":3,"offset":290},"end":{"line":27,"column":24,"offset":311},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":288},"end":{"line":27,"column":24,"offset":311},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":253},"end":{"line":27,"column":24,"offset":311},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#geojson","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"geojson","position":{"start":{"line":31,"column":6,"offset":320},"end":{"line":31,"column":13,"offset":327},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":315},"end":{"line":31,"column":13,"offset":327},"indent":[]},"data":{"id":"geojson","htmlAttributes":{"id":"geojson"},"hProperties":{"id":"geojson"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://www.yuque.com/antv/l7/dm2zll","children":[{"type":"text","value":"geojson","position":{"start":{"line":33,"column":2,"offset":330},"end":{"line":33,"column":9,"offset":337},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":329},"end":{"line":33,"column":48,"offset":376},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 数据为默认数据格式，可以","position":{"start":{"line":33,"column":48,"offset":376},"end":{"line":33,"column":61,"offset":389},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":329},"end":{"line":33,"column":61,"offset":389},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"不需要设置parser 参数","position":{"start":{"line":35,"column":1,"offset":391},"end":{"line":35,"column":15,"offset":405},"indent":[]}}],"position":{"start":{"line":35,"column":1,"offset":391},"end":{"line":35,"column":15,"offset":405},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(data);\n
","position":{"start":{"line":37,"column":1,"offset":407},"end":{"line":39,"column":4,"offset":444},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#json","title":null,"children":[],"data":{"hProperties":{"aria-label":"json permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"json","position":{"start":{"line":42,"column":6,"offset":452},"end":{"line":42,"column":10,"offset":456},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":447},"end":{"line":42,"column":10,"offset":456},"indent":[]},"data":{"id":"json","htmlAttributes":{"id":"json"},"hProperties":{"id":"json"}}},{"type":"paragraph","children":[{"type":"text","value":"json 不是标准的地理数据结构，因此需要设置对应的经纬度字段","position":{"start":{"line":44,"column":1,"offset":458},"end":{"line":44,"column":33,"offset":490},"indent":[]}}],"position":{"start":{"line":44,"column":1,"offset":458},"end":{"line":44,"column":33,"offset":490},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"点数据","position":{"start":{"line":46,"column":3,"offset":494},"end":{"line":46,"column":6,"offset":497},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":492},"end":{"line":46,"column":8,"offset":499},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":492},"end":{"line":46,"column":8,"offset":499},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"x: 经度字段 ","position":{"start":{"line":48,"column":1,"offset":501},"end":{"line":48,"column":9,"offset":509},"indent":[]}}],"position":{"start":{"line":48,"column":1,"offset":501},"end":{"line":48,"column":9,"offset":509},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"y: 纬度字段","position":{"start":{"line":50,"column":1,"offset":511},"end":{"line":50,"column":8,"offset":518},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":511},"end":{"line":50,"column":8,"offset":518},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
","position":{"start":{"line":52,"column":1,"offset":520},"end":{"line":74,"column":4,"offset":765},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"线段数据","position":{"start":{"line":76,"column":3,"offset":769},"end":{"line":76,"column":7,"offset":773},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":767},"end":{"line":76,"column":9,"offset":775},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":767},"end":{"line":76,"column":9,"offset":775},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":" type: json","position":{"start":{"line":78,"column":1,"offset":777},"end":{"line":78,"column":12,"offset":788},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":777},"end":{"line":78,"column":12,"offset":788},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标","position":{"start":{"line":80,"column":1,"offset":790},"end":{"line":80,"column":44,"offset":833},"indent":[]}}],"position":{"start":{"line":80,"column":1,"offset":790},"end":{"line":80,"column":44,"offset":833},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":" x:经度字段 起点经度\n y:纬度字段 起点纬度\n x1:经度字段 终点经度\n y1:纬度字段 终点纬度","position":{"start":{"line":82,"column":1,"offset":835},"end":{"line":85,"column":16,"offset":891},"indent":[1,1,1]}}],"position":{"start":{"line":82,"column":1,"offset":835},"end":{"line":85,"column":16,"offset":891},"indent":[1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
","position":{"start":{"line":87,"column":1,"offset":893},"end":{"line":116,"column":4,"offset":1257},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"面数据","position":{"start":{"line":118,"column":3,"offset":1261},"end":{"line":118,"column":6,"offset":1264},"indent":[]}}],"position":{"start":{"line":118,"column":1,"offset":1259},"end":{"line":118,"column":8,"offset":1266},"indent":[]}}],"position":{"start":{"line":118,"column":1,"offset":1259},"end":{"line":118,"column":8,"offset":1266},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"需要指定coordinates 字段, coordinates据格式","position":{"start":{"line":120,"column":1,"offset":1268},"end":{"line":120,"column":35,"offset":1302},"indent":[]}}],"position":{"start":{"line":120,"column":1,"offset":1268},"end":{"line":120,"column":35,"offset":1302},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"注意面数据 coord  是三层数据结构","position":{"start":{"line":122,"column":3,"offset":1306},"end":{"line":122,"column":23,"offset":1326},"indent":[]}}],"position":{"start":{"line":122,"column":1,"offset":1304},"end":{"line":122,"column":25,"offset":1328},"indent":[]}}],"position":{"start":{"line":122,"column":1,"offset":1304},"end":{"line":122,"column":25,"offset":1328},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
","position":{"start":{"line":124,"column":1,"offset":1330},"end":{"line":165,"column":4,"offset":2111},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#csv","title":null,"children":[],"data":{"hProperties":{"aria-label":"csv permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"csv","position":{"start":{"line":170,"column":6,"offset":2121},"end":{"line":170,"column":9,"offset":2124},"indent":[]}}],"position":{"start":{"line":170,"column":1,"offset":2116},"end":{"line":170,"column":9,"offset":2124},"indent":[]},"data":{"id":"csv","htmlAttributes":{"id":"csv"},"hProperties":{"id":"csv"}}},{"type":"paragraph","children":[{"type":"text","value":"点，线数据配置项同json数据类型","position":{"start":{"line":171,"column":1,"offset":2125},"end":{"line":171,"column":18,"offset":2142},"indent":[]}}],"position":{"start":{"line":171,"column":1,"offset":2125},"end":{"line":171,"column":18,"offset":2142},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
","position":{"start":{"line":173,"column":1,"offset":2144},"end":{"line":185,"column":4,"offset":2308},"indent":[1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"栅格数据类型**","position":{"start":{"line":187,"column":3,"offset":2312},"end":{"line":187,"column":11,"offset":2320},"indent":[]}}],"position":{"start":{"line":187,"column":1,"offset":2310},"end":{"line":187,"column":13,"offset":2322},"indent":[]}}],"position":{"start":{"line":187,"column":1,"offset":2310},"end":{"line":187,"column":13,"offset":2322},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#image","title":null,"children":[],"data":{"hProperties":{"aria-label":"image permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"image","position":{"start":{"line":189,"column":6,"offset":2329},"end":{"line":189,"column":11,"offset":2334},"indent":[]}}],"position":{"start":{"line":189,"column":1,"offset":2324},"end":{"line":189,"column":11,"offset":2334},"indent":[]},"data":{"id":"image","htmlAttributes":{"id":"image"},"hProperties":{"id":"image"}}},{"type":"paragraph","children":[{"type":"text","value":" 根据图片的经纬度范围，将图片添加到地图上。 配置项","position":{"start":{"line":190,"column":1,"offset":2335},"end":{"line":190,"column":27,"offset":2361},"indent":[]}}],"position":{"start":{"line":190,"column":1,"offset":2335},"end":{"line":190,"column":27,"offset":2361},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" type: image","position":{"start":{"line":192,"column":3,"offset":2365},"end":{"line":192,"column":15,"offset":2377},"indent":[]}}],"position":{"start":{"line":192,"column":3,"offset":2365},"end":{"line":192,"column":15,"offset":2377},"indent":[]}}],"position":{"start":{"line":192,"column":1,"offset":2363},"end":{"line":192,"column":15,"offset":2377},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" extent: 图像的经纬度范围 []","position":{"start":{"line":193,"column":3,"offset":2380},"end":{"line":193,"column":23,"offset":2400},"indent":[]}}],"position":{"start":{"line":193,"column":3,"offset":2380},"end":{"line":193,"column":23,"offset":2400},"indent":[]}}],"position":{"start":{"line":193,"column":1,"offset":2378},"end":{"line":193,"column":23,"offset":2400},"indent":[]}}],"position":{"start":{"line":192,"column":1,"offset":2363},"end":{"line":193,"column":23,"offset":2400},"indent":[1]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","position":{"start":{"line":195,"column":1,"offset":2402},"end":{"line":202,"column":4,"offset":2616},"indent":[1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#raster","title":null,"children":[],"data":{"hProperties":{"aria-label":"raster permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"raster","position":{"start":{"line":205,"column":6,"offset":2625},"end":{"line":205,"column":12,"offset":2631},"indent":[]}}],"position":{"start":{"line":205,"column":1,"offset":2620},"end":{"line":205,"column":12,"offset":2631},"indent":[]},"data":{"id":"raster","htmlAttributes":{"id":"raster"},"hProperties":{"id":"raster"}}},{"type":"paragraph","children":[{"type":"text","value":"栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项","position":{"start":{"line":206,"column":1,"offset":2632},"end":{"line":206,"column":44,"offset":2675},"indent":[]}}],"position":{"start":{"line":206,"column":1,"offset":2632},"end":{"line":206,"column":44,"offset":2675},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"type  raster","position":{"start":{"line":208,"column":3,"offset":2679},"end":{"line":208,"column":15,"offset":2691},"indent":[]}}],"position":{"start":{"line":208,"column":3,"offset":2679},"end":{"line":208,"column":15,"offset":2691},"indent":[]}}],"position":{"start":{"line":208,"column":1,"offset":2677},"end":{"line":208,"column":15,"offset":2691},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"width  数据宽度二维矩阵 columns ","position":{"start":{"line":209,"column":3,"offset":2694},"end":{"line":209,"column":27,"offset":2718},"indent":[]}}],"position":{"start":{"line":209,"column":3,"offset":2694},"end":{"line":209,"column":27,"offset":2718},"indent":[]}}],"position":{"start":{"line":209,"column":1,"offset":2692},"end":{"line":209,"column":27,"offset":2718},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"height 数据高度","position":{"start":{"line":210,"column":3,"offset":2721},"end":{"line":210,"column":14,"offset":2732},"indent":[]}}],"position":{"start":{"line":210,"column":3,"offset":2721},"end":{"line":210,"column":14,"offset":2732},"indent":[]}}],"position":{"start":{"line":210,"column":1,"offset":2719},"end":{"line":210,"column":14,"offset":2732},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"min 数据最大值","position":{"start":{"line":211,"column":3,"offset":2735},"end":{"line":211,"column":12,"offset":2744},"indent":[]}}],"position":{"start":{"line":211,"column":3,"offset":2735},"end":{"line":211,"column":12,"offset":2744},"indent":[]}}],"position":{"start":{"line":211,"column":1,"offset":2733},"end":{"line":211,"column":12,"offset":2744},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"max 数据最小值","position":{"start":{"line":212,"column":3,"offset":2747},"end":{"line":212,"column":12,"offset":2756},"indent":[]}}],"position":{"start":{"line":212,"column":3,"offset":2747},"end":{"line":212,"column":12,"offset":2756},"indent":[]}}],"position":{"start":{"line":212,"column":1,"offset":2745},"end":{"line":212,"column":12,"offset":2756},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"extent 经纬度范围","position":{"start":{"line":213,"column":3,"offset":2759},"end":{"line":213,"column":15,"offset":2771},"indent":[]}}],"position":{"start":{"line":213,"column":3,"offset":2759},"end":{"line":213,"column":15,"offset":2771},"indent":[]}}],"position":{"start":{"line":213,"column":1,"offset":2757},"end":{"line":213,"column":15,"offset":2771},"indent":[]}}],"position":{"start":{"line":208,"column":1,"offset":2677},"end":{"line":213,"column":15,"offset":2771},"indent":[1,1,1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
","position":{"start":{"line":215,"column":1,"offset":2773},"end":{"line":226,"column":4,"offset":3023},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#transforms","title":null,"children":[],"data":{"hProperties":{"aria-label":"transforms permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"transforms","position":{"start":{"line":229,"column":5,"offset":3030},"end":{"line":229,"column":15,"offset":3040},"indent":[]}}],"position":{"start":{"line":229,"column":1,"offset":3026},"end":{"line":229,"column":15,"offset":3040},"indent":[]},"data":{"id":"transforms","htmlAttributes":{"id":"transforms"},"hProperties":{"id":"transforms"}}},{"type":"paragraph","children":[{"type":"text","value":"目前支持三种数据处理方法 map，grid，hexagon transform配置项","position":{"start":{"line":231,"column":1,"offset":3042},"end":{"line":231,"column":43,"offset":3084},"indent":[]}}],"position":{"start":{"line":231,"column":1,"offset":3042},"end":{"line":231,"column":43,"offset":3084},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"type 数据处理类型","position":{"start":{"line":233,"column":3,"offset":3088},"end":{"line":233,"column":14,"offset":3099},"indent":[]}}],"position":{"start":{"line":233,"column":3,"offset":3088},"end":{"line":233,"column":14,"offset":3099},"indent":[]}}],"position":{"start":{"line":233,"column":1,"offset":3086},"end":{"line":233,"column":14,"offset":3099},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" tansform cfg  数据处理配置项","position":{"start":{"line":234,"column":3,"offset":3102},"end":{"line":234,"column":25,"offset":3124},"indent":[]}}],"position":{"start":{"line":234,"column":3,"offset":3102},"end":{"line":234,"column":25,"offset":3124},"indent":[]}}],"position":{"start":{"line":234,"column":1,"offset":3100},"end":{"line":234,"column":25,"offset":3124},"indent":[]}}],"position":{"start":{"line":233,"column":1,"offset":3086},"end":{"line":234,"column":25,"offset":3124},"indent":[1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#map","title":null,"children":[],"data":{"hProperties":{"aria-label":"map permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"map","position":{"start":{"line":237,"column":6,"offset":3132},"end":{"line":237,"column":9,"offset":3135},"indent":[]}}],"position":{"start":{"line":237,"column":1,"offset":3127},"end":{"line":237,"column":9,"offset":3135},"indent":[]},"data":{"id":"map","htmlAttributes":{"id":"map"},"hProperties":{"id":"map"}}},{"type":"paragraph","children":[{"type":"text","value":"数据处理，支持自定义callback函数","position":{"start":{"line":238,"column":1,"offset":3136},"end":{"line":238,"column":21,"offset":3156},"indent":[]}}],"position":{"start":{"line":238,"column":1,"offset":3136},"end":{"line":238,"column":21,"offset":3156},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"callback:function 回调函数","position":{"start":{"line":240,"column":3,"offset":3160},"end":{"line":240,"column":25,"offset":3182},"indent":[]}}],"position":{"start":{"line":240,"column":3,"offset":3160},"end":{"line":240,"column":25,"offset":3182},"indent":[]}}],"position":{"start":{"line":240,"column":1,"offset":3158},"end":{"line":240,"column":25,"offset":3182},"indent":[]}}],"position":{"start":{"line":240,"column":1,"offset":3158},"end":{"line":240,"column":25,"offset":3182},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
","position":{"start":{"line":242,"column":1,"offset":3184},"end":{"line":258,"column":4,"offset":3559},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#grid","title":null,"children":[],"data":{"hProperties":{"aria-label":"grid permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"grid","position":{"start":{"line":261,"column":6,"offset":3567},"end":{"line":261,"column":10,"offset":3571},"indent":[]}}],"position":{"start":{"line":261,"column":1,"offset":3562},"end":{"line":261,"column":10,"offset":3571},"indent":[]},"data":{"id":"grid","htmlAttributes":{"id":"grid"},"hProperties":{"id":"grid"}}},{"type":"paragraph","children":[{"type":"text","value":"生成方格网布局，根据数据字段统计，主要在网格热力图中使用","position":{"start":{"line":263,"column":1,"offset":3573},"end":{"line":263,"column":29,"offset":3601},"indent":[]}}],"position":{"start":{"line":263,"column":1,"offset":3573},"end":{"line":263,"column":29,"offset":3601},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" type: 'grid',","position":{"start":{"line":265,"column":3,"offset":3605},"end":{"line":265,"column":17,"offset":3619},"indent":[]}}],"position":{"start":{"line":265,"column":3,"offset":3605},"end":{"line":265,"column":17,"offset":3619},"indent":[]}}],"position":{"start":{"line":265,"column":1,"offset":3603},"end":{"line":265,"column":17,"offset":3619},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" size: 网格半径","position":{"start":{"line":266,"column":3,"offset":3622},"end":{"line":266,"column":14,"offset":3633},"indent":[]}}],"position":{"start":{"line":266,"column":3,"offset":3622},"end":{"line":266,"column":14,"offset":3633},"indent":[]}}],"position":{"start":{"line":266,"column":1,"offset":3620},"end":{"line":266,"column":14,"offset":3633},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" field: 数据统计字段","position":{"start":{"line":267,"column":3,"offset":3636},"end":{"line":267,"column":17,"offset":3650},"indent":[]}}],"position":{"start":{"line":267,"column":3,"offset":3636},"end":{"line":267,"column":17,"offset":3650},"indent":[]}}],"position":{"start":{"line":267,"column":1,"offset":3634},"end":{"line":267,"column":17,"offset":3650},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" method:聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":268,"column":3,"offset":3653},"end":{"line":268,"column":45,"offset":3695},"indent":[]}}],"position":{"start":{"line":268,"column":3,"offset":3653},"end":{"line":268,"column":45,"offset":3695},"indent":[]}}],"position":{"start":{"line":268,"column":1,"offset":3651},"end":{"line":268,"column":45,"offset":3695},"indent":[]}}],"position":{"start":{"line":265,"column":1,"offset":3603},"end":{"line":268,"column":45,"offset":3695},"indent":[1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
","position":{"start":{"line":270,"column":1,"offset":3697},"end":{"line":281,"column":4,"offset":3872},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#hexagon","title":null,"children":[],"data":{"hProperties":{"aria-label":"hexagon permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"hexagon","position":{"start":{"line":284,"column":6,"offset":3880},"end":{"line":284,"column":13,"offset":3887},"indent":[]}}],"position":{"start":{"line":284,"column":1,"offset":3875},"end":{"line":284,"column":13,"offset":3887},"indent":[]},"data":{"id":"hexagon","htmlAttributes":{"id":"hexagon"},"hProperties":{"id":"hexagon"}}},{"type":"paragraph","children":[{"type":"text","value":"生成六边形网格布局，根据数据字段统计","position":{"start":{"line":285,"column":1,"offset":3888},"end":{"line":285,"column":19,"offset":3906},"indent":[]}}],"position":{"start":{"line":285,"column":1,"offset":3888},"end":{"line":285,"column":19,"offset":3906},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" type: 'hexagon',","position":{"start":{"line":287,"column":3,"offset":3910},"end":{"line":287,"column":20,"offset":3927},"indent":[]}}],"position":{"start":{"line":287,"column":3,"offset":3910},"end":{"line":287,"column":20,"offset":3927},"indent":[]}}],"position":{"start":{"line":287,"column":1,"offset":3908},"end":{"line":287,"column":20,"offset":3927},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" size: 网格半径","position":{"start":{"line":288,"column":3,"offset":3930},"end":{"line":288,"column":14,"offset":3941},"indent":[]}}],"position":{"start":{"line":288,"column":3,"offset":3930},"end":{"line":288,"column":14,"offset":3941},"indent":[]}}],"position":{"start":{"line":288,"column":1,"offset":3928},"end":{"line":288,"column":14,"offset":3941},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" field: 数据统计字段","position":{"start":{"line":289,"column":3,"offset":3944},"end":{"line":289,"column":17,"offset":3958},"indent":[]}}],"position":{"start":{"line":289,"column":3,"offset":3944},"end":{"line":289,"column":17,"offset":3958},"indent":[]}}],"position":{"start":{"line":289,"column":1,"offset":3942},"end":{"line":289,"column":17,"offset":3958},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" method:聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":290,"column":3,"offset":3961},"end":{"line":290,"column":45,"offset":4003},"indent":[]}}],"position":{"start":{"line":290,"column":3,"offset":3961},"end":{"line":290,"column":45,"offset":4003},"indent":[]}}],"position":{"start":{"line":290,"column":1,"offset":3959},"end":{"line":290,"column":45,"offset":4003},"indent":[]}}],"position":{"start":{"line":287,"column":1,"offset":3908},"end":{"line":290,"column":45,"offset":4003},"indent":[1,1,1]}},{"type":"html","lang":null,"meta":null,"value":"
","position":{"start":{"line":292,"column":1,"offset":4005},"end":{"line":296,"column":1,"offset":4012},"indent":[1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":296,"column":1,"offset":4012}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-119f57d42535163855e0ac730aad8647.json b/.cache/caches/gatsby-transformer-remark/diskstore-119f57d42535163855e0ac730aad8647.json deleted file mode 100644 index d422d1b4da..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-119f57d42535163855e0ac730aad8647.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-2703c8487a1fc763376587f66eeacf7d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-125dccbb944659ff16bb32363a1a67bc.json b/.cache/caches/gatsby-transformer-remark/diskstore-125dccbb944659ff16bb32363a1a67bc.json deleted file mode 100644 index 225398e861..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-125dccbb944659ff16bb32363a1a67bc.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162511000,"key":"transformer-remark-markdown-html-eba8b84d14733129a7322c61766f8482-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-137d38b66c1d823dcdc973e2866d0914.json b/.cache/caches/gatsby-transformer-remark/diskstore-137d38b66c1d823dcdc973e2866d0914.json deleted file mode 100644 index 5420e07f9c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-137d38b66c1d823dcdc973e2866d0914.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-c78275703877b4c8457c7b54e97316df-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-13e203ec51d909cdadd7eab2b1ca2fee.json b/.cache/caches/gatsby-transformer-remark/diskstore-13e203ec51d909cdadd7eab2b1ca2fee.json deleted file mode 100644 index d1e9229ab9..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-13e203ec51d909cdadd7eab2b1ca2fee.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-397422a40e7fc67301e3758910fccfaf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-1495e5f71dbe4b21f53251a297dc754d.json b/.cache/caches/gatsby-transformer-remark/diskstore-1495e5f71dbe4b21f53251a297dc754d.json deleted file mode 100644 index 9da2481362..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-1495e5f71dbe4b21f53251a297dc754d.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-caf747b54e8159809c3beb2b46e148a0-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-16ef1432db7c8add7ee945f4ae642e79.json b/.cache/caches/gatsby-transformer-remark/diskstore-16ef1432db7c8add7ee945f4ae642e79.json deleted file mode 100644 index f05ad56a94..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-16ef1432db7c8add7ee945f4ae642e79.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-ae8ca280973abba413957dfdb0e37173-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#popup","title":null,"children":[],"data":{"hProperties":{"aria-label":"popup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"popup","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":8,"offset":7},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":8,"offset":7},"indent":[]},"data":{"id":"popup","htmlAttributes":{"id":"popup"},"hProperties":{"id":"popup"}}},{"type":"paragraph","children":[{"type":"text","value":"地图标注信息窗口，用于展示地图要素的属性信息","position":{"start":{"line":3,"column":1,"offset":9},"end":{"line":3,"column":23,"offset":31},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":9},"end":{"line":3,"column":23,"offset":31},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":6,"column":4,"offset":37},"end":{"line":6,"column":8,"offset":41},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":34},"end":{"line":6,"column":8,"offset":41},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"paragraph","children":[{"type":"text","value":"Popup","position":{"start":{"line":7,"column":1,"offset":42},"end":{"line":7,"column":6,"offset":47},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":42},"end":{"line":7,"column":6,"offset":47},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const popup = new L7.Popup(option);\n
","position":{"start":{"line":9,"column":1,"offset":49},"end":{"line":11,"column":4,"offset":101},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#option","title":null,"children":[],"data":{"hProperties":{"aria-label":"option permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"option","position":{"start":{"line":14,"column":6,"offset":109},"end":{"line":14,"column":12,"offset":115},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":104},"end":{"line":14,"column":12,"offset":115},"indent":[]},"data":{"id":"option","htmlAttributes":{"id":"option"},"hProperties":{"id":"option"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"closeButton","position":{"start":{"line":16,"column":3,"offset":119},"end":{"line":16,"column":14,"offset":130},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":119},"end":{"line":16,"column":14,"offset":130},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":117},"end":{"line":16,"column":14,"offset":130},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"closeOnClick","position":{"start":{"line":17,"column":3,"offset":133},"end":{"line":17,"column":15,"offset":145},"indent":[]}}],"position":{"start":{"line":17,"column":3,"offset":133},"end":{"line":17,"column":15,"offset":145},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":131},"end":{"line":17,"column":15,"offset":145},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"maxWidth","position":{"start":{"line":18,"column":3,"offset":148},"end":{"line":18,"column":11,"offset":156},"indent":[]}}],"position":{"start":{"line":18,"column":3,"offset":148},"end":{"line":18,"column":11,"offset":156},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":146},"end":{"line":18,"column":11,"offset":156},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"anchor","position":{"start":{"line":19,"column":3,"offset":159},"end":{"line":19,"column":9,"offset":165},"indent":[]}}],"position":{"start":{"line":19,"column":3,"offset":159},"end":{"line":19,"column":9,"offset":165},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":157},"end":{"line":19,"column":9,"offset":165},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":117},"end":{"line":19,"column":9,"offset":165},"indent":[1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":22,"column":4,"offset":171},"end":{"line":22,"column":6,"offset":173},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":168},"end":{"line":22,"column":6,"offset":173},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#setlnglat","title":null,"children":[],"data":{"hProperties":{"aria-label":"setlnglat permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setLnglat","position":{"start":{"line":24,"column":6,"offset":180},"end":{"line":24,"column":15,"offset":189},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":175},"end":{"line":24,"column":15,"offset":189},"indent":[]},"data":{"id":"setlnglat","htmlAttributes":{"id":"setlnglat"},"hProperties":{"id":"setlnglat"}}},{"type":"paragraph","children":[{"type":"text","value":"设置popup的经纬度位置","position":{"start":{"line":25,"column":1,"offset":190},"end":{"line":25,"column":14,"offset":203},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":25,"column":14,"offset":203},"end":{"line":25,"column":20,"offset":209},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":25,"column":22,"offset":211},"end":{"line":25,"column":24,"offset":213},"indent":[]}}],"position":{"start":{"line":25,"column":20,"offset":209},"end":{"line":25,"column":26,"offset":215},"indent":[]}},{"type":"text","value":"：lnglat 经纬度数组 ","position":{"start":{"line":25,"column":26,"offset":215},"end":{"line":25,"column":40,"offset":229},"indent":[]}},{"type":"linkReference","identifier":"112,32","label":"112,32","referenceType":"shortcut","children":[{"type":"text","value":"112,32","position":{"start":{"line":25,"column":41,"offset":230},"end":{"line":25,"column":47,"offset":236},"indent":[]}}],"position":{"start":{"line":25,"column":40,"offset":229},"end":{"line":25,"column":48,"offset":237},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":190},"end":{"line":25,"column":48,"offset":237},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.setLnglat([112, 32]);\n
","position":{"start":{"line":27,"column":1,"offset":239},"end":{"line":29,"column":4,"offset":284},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#addto","title":null,"children":[],"data":{"hProperties":{"aria-label":"addto permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"addTo","position":{"start":{"line":32,"column":6,"offset":292},"end":{"line":32,"column":11,"offset":297},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":287},"end":{"line":32,"column":11,"offset":297},"indent":[]},"data":{"id":"addto","htmlAttributes":{"id":"addto"},"hProperties":{"id":"addto"}}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":33,"column":3,"offset":300},"end":{"line":33,"column":5,"offset":302},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":298},"end":{"line":33,"column":7,"offset":304},"indent":[]}},{"type":"text","value":"：scene 地图scene实例","position":{"start":{"line":33,"column":7,"offset":304},"end":{"line":33,"column":23,"offset":320},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":298},"end":{"line":33,"column":23,"offset":320},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"将popup添加到地图scene显示","position":{"start":{"line":35,"column":1,"offset":322},"end":{"line":35,"column":19,"offset":340},"indent":[]}}],"position":{"start":{"line":35,"column":1,"offset":322},"end":{"line":35,"column":19,"offset":340},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.addTo(scene);\n
","position":{"start":{"line":37,"column":1,"offset":342},"end":{"line":39,"column":4,"offset":379},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#sethtml","title":null,"children":[],"data":{"hProperties":{"aria-label":"sethtml permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setHtml","position":{"start":{"line":42,"column":6,"offset":387},"end":{"line":42,"column":13,"offset":394},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":382},"end":{"line":42,"column":13,"offset":394},"indent":[]},"data":{"id":"sethtml","htmlAttributes":{"id":"sethtml"},"hProperties":{"id":"sethtml"}}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":43,"column":3,"offset":397},"end":{"line":43,"column":5,"offset":399},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":395},"end":{"line":43,"column":7,"offset":401},"indent":[]}},{"type":"text","value":"：html 字符串","position":{"start":{"line":43,"column":7,"offset":401},"end":{"line":43,"column":16,"offset":410},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":395},"end":{"line":43,"column":16,"offset":410},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"设置popup html 内容","position":{"start":{"line":45,"column":1,"offset":412},"end":{"line":45,"column":16,"offset":427},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":412},"end":{"line":45,"column":16,"offset":427},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
","position":{"start":{"line":47,"column":1,"offset":429},"end":{"line":51,"column":4,"offset":639},"indent":[1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#settext","title":null,"children":[],"data":{"hProperties":{"aria-label":"settext permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setText","position":{"start":{"line":54,"column":6,"offset":647},"end":{"line":54,"column":13,"offset":654},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":642},"end":{"line":54,"column":13,"offset":654},"indent":[]},"data":{"id":"settext","htmlAttributes":{"id":"settext"},"hProperties":{"id":"settext"}}},{"type":"paragraph","children":[{"type":"text","value":"设置 popup 显示文本内容","position":{"start":{"line":55,"column":1,"offset":655},"end":{"line":55,"column":16,"offset":670},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":655},"end":{"line":55,"column":16,"offset":670},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.setText('hello world');\n
","position":{"start":{"line":57,"column":1,"offset":672},"end":{"line":59,"column":4,"offset":719},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#remove","title":null,"children":[],"data":{"hProperties":{"aria-label":"remove permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"remove","position":{"start":{"line":62,"column":6,"offset":727},"end":{"line":62,"column":12,"offset":733},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":722},"end":{"line":62,"column":12,"offset":733},"indent":[]},"data":{"id":"remove","htmlAttributes":{"id":"remove"},"hProperties":{"id":"remove"}}},{"type":"paragraph","children":[{"type":"text","value":"移除popup","position":{"start":{"line":63,"column":1,"offset":734},"end":{"line":63,"column":8,"offset":741},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":734},"end":{"line":63,"column":8,"offset":741},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.remove();\n
","position":{"start":{"line":65,"column":1,"offset":743},"end":{"line":67,"column":4,"offset":775},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"事件","position":{"start":{"line":70,"column":4,"offset":781},"end":{"line":70,"column":6,"offset":783},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":778},"end":{"line":70,"column":6,"offset":783},"indent":[]},"data":{"id":"事件","htmlAttributes":{"id":"事件"},"hProperties":{"id":"事件"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#close","title":null,"children":[],"data":{"hProperties":{"aria-label":"close permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"close","position":{"start":{"line":72,"column":6,"offset":790},"end":{"line":72,"column":11,"offset":795},"indent":[]}}],"position":{"start":{"line":72,"column":1,"offset":785},"end":{"line":72,"column":11,"offset":795},"indent":[]},"data":{"id":"close","htmlAttributes":{"id":"close"},"hProperties":{"id":"close"}}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.on('close', () => {});\n
","position":{"start":{"line":74,"column":1,"offset":797},"end":{"line":76,"column":4,"offset":839},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#示例代码","title":null,"children":[],"data":{"hProperties":{"aria-label":"示例代码 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"示例代码","position":{"start":{"line":79,"column":4,"offset":845},"end":{"line":79,"column":8,"offset":849},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":842},"end":{"line":79,"column":8,"offset":849},"indent":[]},"data":{"id":"示例代码","htmlAttributes":{"id":"示例代码"},"hProperties":{"id":"示例代码"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#添加popup","title":null,"children":[],"data":{"hProperties":{"aria-label":"添加popup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"添加popup","position":{"start":{"line":81,"column":6,"offset":856},"end":{"line":81,"column":13,"offset":863},"indent":[]}}],"position":{"start":{"line":81,"column":1,"offset":851},"end":{"line":81,"column":13,"offset":863},"indent":[]},"data":{"id":"添加popup","htmlAttributes":{"id":"添加popup"},"hProperties":{"id":"添加popup"}}},{"type":"html","lang":null,"meta":null,"value":"
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
","position":{"start":{"line":83,"column":1,"offset":865},"end":{"line":86,"column":4,"offset":981},"indent":[1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#faq","title":null,"children":[],"data":{"hProperties":{"aria-label":"faq permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"FAQ","position":{"start":{"line":88,"column":5,"offset":987},"end":{"line":88,"column":8,"offset":990},"indent":[]}}],"position":{"start":{"line":88,"column":1,"offset":983},"end":{"line":88,"column":8,"offset":990},"indent":[]},"data":{"id":"faq","htmlAttributes":{"id":"faq"},"hProperties":{"id":"faq"}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":89,"column":1,"offset":991}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-17647e438599f418c874b5b7ea1f74e1.json b/.cache/caches/gatsby-transformer-remark/diskstore-17647e438599f418c874b5b7ea1f74e1.json deleted file mode 100644 index cf0df64f9c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-17647e438599f418c874b5b7ea1f74e1.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-8ba6e770aca269ce1a09e219ea919f44-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-177f4aea58062a448b48ccc4572dc7d1.json b/.cache/caches/gatsby-transformer-remark/diskstore-177f4aea58062a448b48ccc4572dc7d1.json deleted file mode 100644 index 0d56adb5d4..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-177f4aea58062a448b48ccc4572dc7d1.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-29a5b349a805dbe1712ced55842139a3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":52,"offset":51}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":52,"offset":51}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":52,"offset":51}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-19a6836b8454da779042dde76c110696.json b/.cache/caches/gatsby-transformer-remark/diskstore-19a6836b8454da779042dde76c110696.json deleted file mode 100644 index 3ce61e8452..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-19a6836b8454da779042dde76c110696.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-0d5e6b054ae0e4dc5ad081332b9456de-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":50,"offset":49},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":50,"offset":49},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":50,"offset":49}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-1a07b3fd6f1f5720f95f97436f01e3da.json b/.cache/caches/gatsby-transformer-remark/diskstore-1a07b3fd6f1f5720f95f97436f01e3da.json deleted file mode 100644 index 9d3513273e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-1a07b3fd6f1f5720f95f97436f01e3da.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-b71d02195b585681f9cbb3853782db83-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"heatmaplayer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#heatmaplayer","aria-label":"heatmaplayer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"heatmapLayer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":15,"offset":14}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":15,"offset":14}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":4,"column":5,"offset":21},"end":{"line":4,"column":7,"offset":23}}}],"position":{"start":{"line":4,"column":1,"offset":17},"end":{"line":4,"column":7,"offset":23}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"热力图图层，包含三种类型的，","position":{"start":{"line":6,"column":1,"offset":25},"end":{"line":6,"column":15,"offset":39}}}],"position":{"start":{"line":6,"column":1,"offset":25},"end":{"line":6,"column":15,"offset":39}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"方格热力图 ","position":{"start":{"line":7,"column":3,"offset":42},"end":{"line":7,"column":9,"offset":48}}}],"position":{"start":{"line":7,"column":1,"offset":40},"end":{"line":7,"column":9,"offset":48}}},{"type":"text","value":"\n"}],"position":{"start":{"line":7,"column":1,"offset":40},"end":{"line":7,"column":9,"offset":48}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。","position":{"start":{"line":9,"column":1,"offset":50},"end":{"line":9,"column":57,"offset":106}}}],"position":{"start":{"line":9,"column":1,"offset":50},"end":{"line":9,"column":57,"offset":106}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"六边形热力图 ","position":{"start":{"line":11,"column":3,"offset":110},"end":{"line":11,"column":10,"offset":117}}}],"position":{"start":{"line":11,"column":1,"offset":108},"end":{"line":11,"column":10,"offset":117}}},{"type":"text","value":"\n"}],"position":{"start":{"line":11,"column":1,"offset":108},"end":{"line":11,"column":10,"offset":117}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局","position":{"start":{"line":13,"column":1,"offset":119},"end":{"line":13,"column":61,"offset":179}}}],"position":{"start":{"line":13,"column":1,"offset":119},"end":{"line":13,"column":61,"offset":179}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"经典热力图 ","position":{"start":{"line":15,"column":3,"offset":183},"end":{"line":15,"column":9,"offset":189}}}],"position":{"start":{"line":15,"column":1,"offset":181},"end":{"line":15,"column":9,"offset":189}}},{"type":"text","value":"\n"}],"position":{"start":{"line":15,"column":1,"offset":181},"end":{"line":15,"column":9,"offset":189}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法","position":{"start":{"line":19,"column":1,"offset":193},"end":{"line":19,"column":48,"offset":240}}}],"position":{"start":{"line":19,"column":1,"offset":193},"end":{"line":19,"column":48,"offset":240}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"source"},"children":[{"type":"element","tagName":"a","properties":{"href":"#source","aria-label":"source permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"source","position":{"start":{"line":21,"column":5,"offset":246},"end":{"line":21,"column":11,"offset":252}}}],"position":{"start":{"line":21,"column":1,"offset":242},"end":{"line":21,"column":11,"offset":252}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"热力图只支持点数据作为数据源","position":{"start":{"line":23,"column":1,"offset":254},"end":{"line":23,"column":15,"offset":268}}}],"position":{"start":{"line":23,"column":1,"offset":254},"end":{"line":23,"column":15,"offset":268}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"布局方法 通过source的 tansforms属性配置","position":{"start":{"line":25,"column":1,"offset":270},"end":{"line":25,"column":29,"offset":298}}}],"position":{"start":{"line":25,"column":1,"offset":270},"end":{"line":25,"column":29,"offset":298}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"type  数据聚合类型 grid、hexagon","position":{"start":{"line":27,"column":3,"offset":302},"end":{"line":27,"column":28,"offset":327}}}],"position":{"start":{"line":27,"column":1,"offset":300},"end":{"line":27,"column":28,"offset":327}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"size  网格半径 单位 米","position":{"start":{"line":28,"column":3,"offset":330},"end":{"line":28,"column":18,"offset":345}}}],"position":{"start":{"line":28,"column":1,"offset":328},"end":{"line":28,"column":18,"offset":345}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"field  聚合字段","position":{"start":{"line":29,"column":3,"offset":348},"end":{"line":29,"column":14,"offset":359}}}],"position":{"start":{"line":29,"column":1,"offset":346},"end":{"line":29,"column":14,"offset":359}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"method 聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":30,"column":3,"offset":362},"end":{"line":30,"column":44,"offset":403}}}],"position":{"start":{"line":30,"column":1,"offset":360},"end":{"line":30,"column":44,"offset":403}}},{"type":"text","value":"\n"}],"position":{"start":{"line":27,"column":1,"offset":300},"end":{"line":30,"column":44,"offset":403}}},{"type":"text","value":"\n"},{"type":"raw","value":"
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
","position":{"start":{"line":32,"column":1,"offset":405},"end":{"line":49,"column":4,"offset":662}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"shape"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shape","aria-label":"shape permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"shape","position":{"start":{"line":51,"column":5,"offset":668},"end":{"line":51,"column":10,"offset":673}}}],"position":{"start":{"line":51,"column":1,"offset":664},"end":{"line":51,"column":10,"offset":673}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"不同类型热力图shape支持","position":{"start":{"line":53,"column":1,"offset":675},"end":{"line":53,"column":15,"offset":689}}}],"position":{"start":{"line":53,"column":1,"offset":675},"end":{"line":53,"column":15,"offset":689}}},{"type":"text","value":"\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"thead","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[],"position":{"start":{"line":55,"column":4,"offset":694},"end":{"line":55,"column":4,"offset":694}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"2D","position":{"start":{"line":55,"column":6,"offset":696},"end":{"line":55,"column":8,"offset":698}}}],"position":{"start":{"line":55,"column":6,"offset":696},"end":{"line":55,"column":8,"offset":698}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"3d","position":{"start":{"line":55,"column":11,"offset":701},"end":{"line":55,"column":13,"offset":703}}}],"position":{"start":{"line":55,"column":11,"offset":701},"end":{"line":55,"column":13,"offset":703}}},{"type":"text","value":"\n"}],"position":{"start":{"line":55,"column":1,"offset":691},"end":{"line":55,"column":15,"offset":705}}},{"type":"text","value":"\n"}],"position":{"start":{"line":55,"column":1,"offset":691},"end":{"line":55,"column":15,"offset":705}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"网格格热力图","position":{"start":{"line":57,"column":3,"offset":728},"end":{"line":57,"column":9,"offset":734}}}],"position":{"start":{"line":57,"column":3,"offset":728},"end":{"line":57,"column":9,"offset":734}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":57,"column":12,"offset":737},"end":{"line":57,"column":42,"offset":767}}}],"position":{"start":{"line":57,"column":12,"offset":737},"end":{"line":57,"column":42,"offset":767}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"cylinder,triangleColumn,hexagonColum,squareColumn","position":{"start":{"line":57,"column":45,"offset":770},"end":{"line":57,"column":94,"offset":819}}}],"position":{"start":{"line":57,"column":45,"offset":770},"end":{"line":57,"column":94,"offset":819}}},{"type":"text","value":"\n"}],"position":{"start":{"line":57,"column":1,"offset":726},"end":{"line":57,"column":96,"offset":821}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"蜂窝热力图","position":{"start":{"line":58,"column":3,"offset":824},"end":{"line":58,"column":8,"offset":829}}}],"position":{"start":{"line":58,"column":3,"offset":824},"end":{"line":58,"column":8,"offset":829}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":58,"column":11,"offset":832},"end":{"line":58,"column":41,"offset":862}}}],"position":{"start":{"line":58,"column":11,"offset":832},"end":{"line":58,"column":41,"offset":862}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":58,"column":44,"offset":865},"end":{"line":58,"column":74,"offset":895}}}],"position":{"start":{"line":58,"column":44,"offset":865},"end":{"line":58,"column":74,"offset":895}}},{"type":"text","value":"\n"}],"position":{"start":{"line":58,"column":1,"offset":822},"end":{"line":58,"column":76,"offset":897}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"普通热力图","position":{"start":{"line":59,"column":3,"offset":900},"end":{"line":59,"column":8,"offset":905}}}],"position":{"start":{"line":59,"column":3,"offset":900},"end":{"line":59,"column":8,"offset":905}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"heatmap","position":{"start":{"line":59,"column":11,"offset":908},"end":{"line":59,"column":18,"offset":915}}}],"position":{"start":{"line":59,"column":11,"offset":908},"end":{"line":59,"column":18,"offset":915}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"heatmap","position":{"start":{"line":59,"column":21,"offset":918},"end":{"line":59,"column":28,"offset":925}}}],"position":{"start":{"line":59,"column":21,"offset":918},"end":{"line":59,"column":28,"offset":925}}},{"type":"text","value":"\n"}],"position":{"start":{"line":59,"column":1,"offset":898},"end":{"line":59,"column":30,"offset":927}}},{"type":"text","value":"\n"}],"position":{"start":{"line":57,"column":1,"offset":726},"end":{"line":59,"column":30,"offset":927}}},{"type":"text","value":"\n"}],"position":{"start":{"line":55,"column":1,"offset":691},"end":{"line":59,"column":30,"offset":927}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"热力图布局下只shape方法只支持常量的可视化。","position":{"start":{"line":62,"column":1,"offset":930},"end":{"line":62,"column":25,"offset":954}}}],"position":{"start":{"line":62,"column":1,"offset":930},"end":{"line":62,"column":25,"offset":954}}},{"type":"text","value":"\n"},{"type":"raw","value":"
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
","position":{"start":{"line":64,"column":1,"offset":956},"end":{"line":68,"column":4,"offset":1047}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"size"},"children":[{"type":"element","tagName":"a","properties":{"href":"#size","aria-label":"size permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size","position":{"start":{"line":70,"column":5,"offset":1053},"end":{"line":70,"column":9,"offset":1057}}}],"position":{"start":{"line":70,"column":1,"offset":1049},"end":{"line":70,"column":9,"offset":1057}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"当前版本 shape 为grid，hexagon不需要设置 size 映射","position":{"start":{"line":71,"column":1,"offset":1058},"end":{"line":71,"column":38,"offset":1095}}}],"position":{"start":{"line":71,"column":1,"offset":1058},"end":{"line":71,"column":38,"offset":1095}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"default 类型需要设置size映射 详细参数见","position":{"start":{"line":73,"column":1,"offset":1097},"end":{"line":73,"column":27,"offset":1123}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/l7/layer#size","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Size","position":{"start":{"line":73,"column":28,"offset":1124},"end":{"line":73,"column":32,"offset":1128}}}],"position":{"start":{"line":73,"column":27,"offset":1123},"end":{"line":73,"column":75,"offset":1171}}}],"position":{"start":{"line":73,"column":1,"offset":1097},"end":{"line":73,"column":75,"offset":1171}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"**size(field,values) **","position":{"start":{"line":75,"column":1,"offset":1173},"end":{"line":75,"column":24,"offset":1196}}}],"position":{"start":{"line":75,"column":1,"offset":1173},"end":{"line":75,"column":24,"offset":1196}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"field: 热力图权重字段","position":{"start":{"line":77,"column":3,"offset":1200},"end":{"line":77,"column":17,"offset":1214}}}],"position":{"start":{"line":77,"column":1,"offset":1198},"end":{"line":77,"column":17,"offset":1214}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"values: 数据映射区间 热力图显示 ","position":{"start":{"line":78,"column":3,"offset":1217},"end":{"line":78,"column":24,"offset":1238}}},{"type":"text","value":"[0, 1]","position":{"start":{"line":78,"column":25,"offset":1239},"end":{"line":78,"column":29,"offset":1243}}},{"type":"text","value":" 效果最佳","position":{"start":{"line":78,"column":30,"offset":1244},"end":{"line":78,"column":35,"offset":1249}}}],"position":{"start":{"line":78,"column":1,"offset":1215},"end":{"line":78,"column":35,"offset":1249}}},{"type":"text","value":"\n"}],"position":{"start":{"line":77,"column":1,"offset":1198},"end":{"line":78,"column":35,"offset":1249}}},{"type":"text","value":"\n"},{"type":"raw","value":"
HeatmapLayer.size('field', [0, 1]);\n
","position":{"start":{"line":80,"column":1,"offset":1251},"end":{"line":82,"column":4,"offset":1304}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"color"},"children":[{"type":"element","tagName":"a","properties":{"href":"#color","aria-label":"color permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"color","position":{"start":{"line":85,"column":5,"offset":1311},"end":{"line":85,"column":10,"offset":1316}}}],"position":{"start":{"line":85,"column":1,"offset":1307},"end":{"line":85,"column":10,"offset":1316}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"default heatMap 类型不需设置 color映射","position":{"start":{"line":86,"column":1,"offset":1317},"end":{"line":86,"column":31,"offset":1347}}}],"position":{"start":{"line":86,"column":1,"offset":1317},"end":{"line":86,"column":31,"offset":1347}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"color 配置项同 ","position":{"start":{"line":88,"column":1,"offset":1349},"end":{"line":88,"column":12,"offset":1360}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/l7/layer#color","target":"_self","rel":"nofollow"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"color","position":{"start":{"line":88,"column":15,"offset":1363},"end":{"line":88,"column":20,"offset":1368}}}],"position":{"start":{"line":88,"column":13,"offset":1361},"end":{"line":88,"column":22,"offset":1370}}}],"position":{"start":{"line":88,"column":12,"offset":1360},"end":{"line":88,"column":66,"offset":1414}}}],"position":{"start":{"line":88,"column":1,"offset":1349},"end":{"line":88,"column":66,"offset":1414}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"style"},"children":[{"type":"element","tagName":"a","properties":{"href":"#style","aria-label":"style permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"style","position":{"start":{"line":92,"column":5,"offset":1422},"end":{"line":92,"column":10,"offset":1427}}}],"position":{"start":{"line":92,"column":1,"offset":1418},"end":{"line":92,"column":10,"offset":1427}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"grid hexagon 可以通过style 设置透明度","position":{"start":{"line":94,"column":1,"offset":1429},"end":{"line":94,"column":29,"offset":1457}}}],"position":{"start":{"line":94,"column":1,"offset":1429},"end":{"line":94,"column":29,"offset":1457}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"default热力图需要通过style配置参数热力图参数","position":{"start":{"line":96,"column":1,"offset":1459},"end":{"line":96,"column":29,"offset":1487}}}],"position":{"start":{"line":96,"column":1,"offset":1459},"end":{"line":96,"column":29,"offset":1487}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"intensity   全局热力权重   推荐权重范围 1-5","position":{"start":{"line":98,"column":3,"offset":1491},"end":{"line":98,"column":34,"offset":1522}}}],"position":{"start":{"line":98,"column":1,"offset":1489},"end":{"line":98,"column":34,"offset":1522}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"radius  热力半径，单位像素","position":{"start":{"line":99,"column":3,"offset":1525},"end":{"line":99,"column":20,"offset":1542}}}],"position":{"start":{"line":99,"column":1,"offset":1523},"end":{"line":99,"column":20,"offset":1542}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"rampColors 色带参数","position":{"start":{"line":100,"column":3,"offset":1545},"end":{"line":100,"column":18,"offset":1560}}}],"position":{"start":{"line":100,"column":3,"offset":1545},"end":{"line":100,"column":18,"offset":1560}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"colors  颜色数组","position":{"start":{"line":101,"column":5,"offset":1565},"end":{"line":101,"column":17,"offset":1577}}}],"position":{"start":{"line":101,"column":3,"offset":1563},"end":{"line":101,"column":17,"offset":1577}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"positions 数据区间","position":{"start":{"line":102,"column":5,"offset":1582},"end":{"line":102,"column":19,"offset":1596}}}],"position":{"start":{"line":102,"column":3,"offset":1580},"end":{"line":102,"column":19,"offset":1596}}},{"type":"text","value":"\n"}],"position":{"start":{"line":101,"column":3,"offset":1563},"end":{"line":102,"column":19,"offset":1596}}},{"type":"text","value":"\n"}],"position":{"start":{"line":100,"column":1,"offset":1543},"end":{"line":102,"column":19,"offset":1596}}},{"type":"text","value":"\n"}],"position":{"start":{"line":98,"column":1,"offset":1489},"end":{"line":102,"column":19,"offset":1596}}},{"type":"text","value":"\n"},{"type":"raw","value":"
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
","position":{"start":{"line":104,"column":1,"offset":1598},"end":{"line":113,"column":4,"offset":1906}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"完整代码示例"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B","aria-label":"完整代码示例 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"完整代码示例","position":{"start":{"line":116,"column":5,"offset":1913},"end":{"line":116,"column":11,"offset":1919}}}],"position":{"start":{"line":116,"column":1,"offset":1909},"end":{"line":116,"column":11,"offset":1919}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"普通热力图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%99%AE%E9%80%9A%E7%83%AD%E5%8A%9B%E5%9B%BE","aria-label":"普通热力图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"普通热力图","position":{"start":{"line":118,"column":6,"offset":1926},"end":{"line":118,"column":11,"offset":1931}}}],"position":{"start":{"line":118,"column":1,"offset":1921},"end":{"line":118,"column":11,"offset":1931}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
","position":{"start":{"line":120,"column":1,"offset":1933},"end":{"line":136,"column":4,"offset":2434}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"网格热力图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%BD%91%E6%A0%BC%E7%83%AD%E5%8A%9B%E5%9B%BE","aria-label":"网格热力图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"网格热力图","position":{"start":{"line":140,"column":6,"offset":2443},"end":{"line":140,"column":11,"offset":2448}}}],"position":{"start":{"line":140,"column":1,"offset":2438},"end":{"line":140,"column":11,"offset":2448}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
","position":{"start":{"line":142,"column":1,"offset":2450},"end":{"line":169,"column":4,"offset":2936}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"六边形热力图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%AD%E8%BE%B9%E5%BD%A2%E7%83%AD%E5%8A%9B%E5%9B%BE","aria-label":"六边形热力图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"六边形热力图","position":{"start":{"line":172,"column":6,"offset":2944},"end":{"line":172,"column":12,"offset":2950}}}],"position":{"start":{"line":172,"column":1,"offset":2939},"end":{"line":172,"column":12,"offset":2950}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","position":{"start":{"line":174,"column":1,"offset":2952},"end":{"line":200,"column":4,"offset":3324}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":200,"column":4,"offset":3324}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-1be64f2ab07d346b2886223f65acd54e.json b/.cache/caches/gatsby-transformer-remark/diskstore-1be64f2ab07d346b2886223f65acd54e.json deleted file mode 100644 index fd260939b3..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-1be64f2ab07d346b2886223f65acd54e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-25eb056d4a67acb0b49cfbe659e280c1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#imagelayer","title":null,"children":[],"data":{"hProperties":{"aria-label":"imagelayer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"ImageLayer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":13,"offset":12},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":13,"offset":12},"indent":[]},"data":{"id":"imagelayer","htmlAttributes":{"id":"imagelayer"},"hProperties":{"id":"imagelayer"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":3,"column":4,"offset":17},"end":{"line":3,"column":6,"offset":19},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":3,"column":6,"offset":19},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"将图片添加到地图上，需要指定图片的经纬度范围","position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#代码示例","title":null,"children":[],"data":{"hProperties":{"aria-label":"代码示例 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"代码示例","position":{"start":{"line":6,"column":5,"offset":48},"end":{"line":6,"column":9,"offset":52},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":9,"offset":52},"indent":[]},"data":{"id":"代码示例","htmlAttributes":{"id":"代码示例"},"hProperties":{"id":"代码示例"}}},{"type":"html","lang":"javascript","meta":null,"value":"
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","position":{"start":{"line":8,"column":1,"offset":54},"end":{"line":19,"column":4,"offset":297},"indent":[1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":20,"column":1,"offset":298}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-1ca95957f8edb4533e5ca7d89fafcaa9.json b/.cache/caches/gatsby-transformer-remark/diskstore-1ca95957f8edb4533e5ca7d89fafcaa9.json deleted file mode 100644 index 52fc29e12a..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-1ca95957f8edb4533e5ca7d89fafcaa9.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-ae8ca280973abba413957dfdb0e37173-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"popup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#popup","aria-label":"popup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"popup","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":8,"offset":7}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":8,"offset":7}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图标注信息窗口，用于展示地图要素的属性信息","position":{"start":{"line":3,"column":1,"offset":9},"end":{"line":3,"column":23,"offset":31}}}],"position":{"start":{"line":3,"column":1,"offset":9},"end":{"line":3,"column":23,"offset":31}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":6,"column":4,"offset":37},"end":{"line":6,"column":8,"offset":41}}}],"position":{"start":{"line":6,"column":1,"offset":34},"end":{"line":6,"column":8,"offset":41}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Popup","position":{"start":{"line":7,"column":1,"offset":42},"end":{"line":7,"column":6,"offset":47}}}],"position":{"start":{"line":7,"column":1,"offset":42},"end":{"line":7,"column":6,"offset":47}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const popup = new L7.Popup(option);\n
","position":{"start":{"line":9,"column":1,"offset":49},"end":{"line":11,"column":4,"offset":101}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"option"},"children":[{"type":"element","tagName":"a","properties":{"href":"#option","aria-label":"option permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"option","position":{"start":{"line":14,"column":6,"offset":109},"end":{"line":14,"column":12,"offset":115}}}],"position":{"start":{"line":14,"column":1,"offset":104},"end":{"line":14,"column":12,"offset":115}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"closeButton","position":{"start":{"line":16,"column":3,"offset":119},"end":{"line":16,"column":14,"offset":130}}}],"position":{"start":{"line":16,"column":1,"offset":117},"end":{"line":16,"column":14,"offset":130}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"closeOnClick","position":{"start":{"line":17,"column":3,"offset":133},"end":{"line":17,"column":15,"offset":145}}}],"position":{"start":{"line":17,"column":1,"offset":131},"end":{"line":17,"column":15,"offset":145}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"maxWidth","position":{"start":{"line":18,"column":3,"offset":148},"end":{"line":18,"column":11,"offset":156}}}],"position":{"start":{"line":18,"column":1,"offset":146},"end":{"line":18,"column":11,"offset":156}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"anchor","position":{"start":{"line":19,"column":3,"offset":159},"end":{"line":19,"column":9,"offset":165}}}],"position":{"start":{"line":19,"column":1,"offset":157},"end":{"line":19,"column":9,"offset":165}}},{"type":"text","value":"\n"}],"position":{"start":{"line":16,"column":1,"offset":117},"end":{"line":19,"column":9,"offset":165}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":22,"column":4,"offset":171},"end":{"line":22,"column":6,"offset":173}}}],"position":{"start":{"line":22,"column":1,"offset":168},"end":{"line":22,"column":6,"offset":173}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"setlnglat"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setlnglat","aria-label":"setlnglat permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setLnglat","position":{"start":{"line":24,"column":6,"offset":180},"end":{"line":24,"column":15,"offset":189}}}],"position":{"start":{"line":24,"column":1,"offset":175},"end":{"line":24,"column":15,"offset":189}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置popup的经纬度位置","position":{"start":{"line":25,"column":1,"offset":190},"end":{"line":25,"column":14,"offset":203}}},{"type":"raw","value":"
","position":{"start":{"line":25,"column":14,"offset":203},"end":{"line":25,"column":20,"offset":209}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":25,"column":22,"offset":211},"end":{"line":25,"column":24,"offset":213}}}],"position":{"start":{"line":25,"column":20,"offset":209},"end":{"line":25,"column":26,"offset":215}}},{"type":"text","value":"：lnglat 经纬度数组 ","position":{"start":{"line":25,"column":26,"offset":215},"end":{"line":25,"column":40,"offset":229}}},{"type":"text","value":"[112,32]","position":{"start":{"line":25,"column":41,"offset":230},"end":{"line":25,"column":47,"offset":236}}}],"position":{"start":{"line":25,"column":1,"offset":190},"end":{"line":25,"column":48,"offset":237}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.setLnglat([112, 32]);\n
","position":{"start":{"line":27,"column":1,"offset":239},"end":{"line":29,"column":4,"offset":284}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"addto"},"children":[{"type":"element","tagName":"a","properties":{"href":"#addto","aria-label":"addto permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"addTo","position":{"start":{"line":32,"column":6,"offset":292},"end":{"line":32,"column":11,"offset":297}}}],"position":{"start":{"line":32,"column":1,"offset":287},"end":{"line":32,"column":11,"offset":297}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":33,"column":3,"offset":300},"end":{"line":33,"column":5,"offset":302}}}],"position":{"start":{"line":33,"column":1,"offset":298},"end":{"line":33,"column":7,"offset":304}}},{"type":"text","value":"：scene 地图scene实例","position":{"start":{"line":33,"column":7,"offset":304},"end":{"line":33,"column":23,"offset":320}}}],"position":{"start":{"line":33,"column":1,"offset":298},"end":{"line":33,"column":23,"offset":320}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将popup添加到地图scene显示","position":{"start":{"line":35,"column":1,"offset":322},"end":{"line":35,"column":19,"offset":340}}}],"position":{"start":{"line":35,"column":1,"offset":322},"end":{"line":35,"column":19,"offset":340}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.addTo(scene);\n
","position":{"start":{"line":37,"column":1,"offset":342},"end":{"line":39,"column":4,"offset":379}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"sethtml"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sethtml","aria-label":"sethtml permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setHtml","position":{"start":{"line":42,"column":6,"offset":387},"end":{"line":42,"column":13,"offset":394}}}],"position":{"start":{"line":42,"column":1,"offset":382},"end":{"line":42,"column":13,"offset":394}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":43,"column":3,"offset":397},"end":{"line":43,"column":5,"offset":399}}}],"position":{"start":{"line":43,"column":1,"offset":395},"end":{"line":43,"column":7,"offset":401}}},{"type":"text","value":"：html 字符串","position":{"start":{"line":43,"column":7,"offset":401},"end":{"line":43,"column":16,"offset":410}}}],"position":{"start":{"line":43,"column":1,"offset":395},"end":{"line":43,"column":16,"offset":410}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置popup html 内容","position":{"start":{"line":45,"column":1,"offset":412},"end":{"line":45,"column":16,"offset":427}}}],"position":{"start":{"line":45,"column":1,"offset":412},"end":{"line":45,"column":16,"offset":427}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
","position":{"start":{"line":47,"column":1,"offset":429},"end":{"line":51,"column":4,"offset":639}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"settext"},"children":[{"type":"element","tagName":"a","properties":{"href":"#settext","aria-label":"settext permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setText","position":{"start":{"line":54,"column":6,"offset":647},"end":{"line":54,"column":13,"offset":654}}}],"position":{"start":{"line":54,"column":1,"offset":642},"end":{"line":54,"column":13,"offset":654}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置 popup 显示文本内容","position":{"start":{"line":55,"column":1,"offset":655},"end":{"line":55,"column":16,"offset":670}}}],"position":{"start":{"line":55,"column":1,"offset":655},"end":{"line":55,"column":16,"offset":670}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.setText('hello world');\n
","position":{"start":{"line":57,"column":1,"offset":672},"end":{"line":59,"column":4,"offset":719}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"remove"},"children":[{"type":"element","tagName":"a","properties":{"href":"#remove","aria-label":"remove permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"remove","position":{"start":{"line":62,"column":6,"offset":727},"end":{"line":62,"column":12,"offset":733}}}],"position":{"start":{"line":62,"column":1,"offset":722},"end":{"line":62,"column":12,"offset":733}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除popup","position":{"start":{"line":63,"column":1,"offset":734},"end":{"line":63,"column":8,"offset":741}}}],"position":{"start":{"line":63,"column":1,"offset":734},"end":{"line":63,"column":8,"offset":741}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.remove();\n
","position":{"start":{"line":65,"column":1,"offset":743},"end":{"line":67,"column":4,"offset":775}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%8B%E4%BB%B6","aria-label":"事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"事件","position":{"start":{"line":70,"column":4,"offset":781},"end":{"line":70,"column":6,"offset":783}}}],"position":{"start":{"line":70,"column":1,"offset":778},"end":{"line":70,"column":6,"offset":783}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"close"},"children":[{"type":"element","tagName":"a","properties":{"href":"#close","aria-label":"close permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"close","position":{"start":{"line":72,"column":6,"offset":790},"end":{"line":72,"column":11,"offset":795}}}],"position":{"start":{"line":72,"column":1,"offset":785},"end":{"line":72,"column":11,"offset":795}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.on('close', () => {});\n
","position":{"start":{"line":74,"column":1,"offset":797},"end":{"line":76,"column":4,"offset":839}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"示例代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81","aria-label":"示例代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"示例代码","position":{"start":{"line":79,"column":4,"offset":845},"end":{"line":79,"column":8,"offset":849}}}],"position":{"start":{"line":79,"column":1,"offset":842},"end":{"line":79,"column":8,"offset":849}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"添加popup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%B7%BB%E5%8A%A0popup","aria-label":"添加popup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"添加popup","position":{"start":{"line":81,"column":6,"offset":856},"end":{"line":81,"column":13,"offset":863}}}],"position":{"start":{"line":81,"column":1,"offset":851},"end":{"line":81,"column":13,"offset":863}}},{"type":"text","value":"\n"},{"type":"raw","value":"
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
","position":{"start":{"line":83,"column":1,"offset":865},"end":{"line":86,"column":4,"offset":981}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"faq"},"children":[{"type":"element","tagName":"a","properties":{"href":"#faq","aria-label":"faq permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"FAQ","position":{"start":{"line":88,"column":5,"offset":987},"end":{"line":88,"column":8,"offset":990}}}],"position":{"start":{"line":88,"column":1,"offset":983},"end":{"line":88,"column":8,"offset":990}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":89,"column":1,"offset":991}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-1d17834862c9b3ab6da500f0d21a6df8.json b/.cache/caches/gatsby-transformer-remark/diskstore-1d17834862c9b3ab6da500f0d21a6df8.json deleted file mode 100644 index 93010f7e84..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-1d17834862c9b3ab6da500f0d21a6df8.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-d1d3303c6f92e074c20c0fbe3324ba42-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-1de9670bc255a8646dd9ef35905b338a.json b/.cache/caches/gatsby-transformer-remark/diskstore-1de9670bc255a8646dd9ef35905b338a.json deleted file mode 100644 index 0600b3c06d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-1de9670bc255a8646dd9ef35905b338a.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-6568f22928a964a9957c4e79f5b8594d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#数据","title":null,"children":[],"data":{"hProperties":{"aria-label":"数据 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"数据","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":6,"offset":6},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":6,"offset":6},"indent":[]},"data":{"id":"数据","htmlAttributes":{"id":"数据"},"hProperties":{"id":"数据"}}},{"type":"paragraph","children":[{"type":"text","value":"目前L7支持的数据格式有GeoJson,CSV,JSon Image","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"GeoJSON 支持点、线、面，等所有的空间数据格式。","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":28,"offset":71},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":28,"offset":71},"end":{"line":6,"column":34,"offset":77},"indent":[]}},{"type":"text","value":"CSV 支持，点，线段，弧线的支持。","position":{"start":{"line":6,"column":34,"offset":77},"end":{"line":6,"column":52,"offset":95},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":52,"offset":95},"end":{"line":6,"column":58,"offset":101},"indent":[]}},{"type":"text","value":"JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。","position":{"start":{"line":6,"column":58,"offset":101},"end":{"line":6,"column":91,"offset":134},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":91,"offset":134},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#geojson","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"GeoJSON","position":{"start":{"line":9,"column":4,"offset":140},"end":{"line":9,"column":11,"offset":147},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":137},"end":{"line":9,"column":11,"offset":147},"indent":[]},"data":{"id":"geojson","htmlAttributes":{"id":"geojson"},"hProperties":{"id":"geojson"}}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":149},"end":{"line":11,"column":128,"offset":276},"indent":[]}},{"type":"html","lang":"json","meta":null,"value":"
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
","position":{"start":{"line":15,"column":1,"offset":280},"end":{"line":52,"column":4,"offset":980},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#地理统计分析工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"地理统计分析工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":54,"column":4,"offset":985},"end":{"line":54,"column":12,"offset":993},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":982},"end":{"line":54,"column":12,"offset":993},"indent":[]},"data":{"id":"地理统计分析工具","htmlAttributes":{"id":"地理统计分析工具"},"hProperties":{"id":"地理统计分析工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://turfjs.org/","children":[{"type":"text","value":"turfjs","position":{"start":{"line":55,"column":2,"offset":995},"end":{"line":55,"column":8,"offset":1001},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":29,"offset":1022},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":55,"column":29,"offset":1022},"end":{"line":55,"column":60,"offset":1053},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":60,"offset":1053},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#在线工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"在线工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"在线工具","position":{"start":{"line":57,"column":4,"offset":1058},"end":{"line":57,"column":8,"offset":1062},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1055},"end":{"line":57,"column":8,"offset":1062},"indent":[]},"data":{"id":"在线工具","htmlAttributes":{"id":"在线工具"},"hProperties":{"id":"在线工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://geojson.io/","children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":59,"column":2,"offset":1065},"end":{"line":59,"column":20,"offset":1083},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":41,"offset":1104},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":59,"column":41,"offset":1104},"end":{"line":59,"column":66,"offset":1129},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":66,"offset":1129},"indent":[]}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://mapshaper.org/","children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":61,"column":2,"offset":1132},"end":{"line":61,"column":24,"offset":1154},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":49,"offset":1179},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"  可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":61,"column":49,"offset":1179},"end":{"line":61,"column":80,"offset":1210},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":80,"offset":1210},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#数据资源","title":null,"children":[],"data":{"hProperties":{"aria-label":"数据资源 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"数据资源","position":{"start":{"line":63,"column":4,"offset":1215},"end":{"line":63,"column":8,"offset":1219},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":1212},"end":{"line":63,"column":8,"offset":1219},"indent":[]},"data":{"id":"数据资源","htmlAttributes":{"id":"数据资源"},"hProperties":{"id":"数据资源"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#全国行政区划边界","title":null,"children":[],"data":{"hProperties":{"aria-label":"全国行政区划边界 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"全国行政区划边界 ","position":{"start":{"line":65,"column":6,"offset":1226},"end":{"line":65,"column":15,"offset":1235},"indent":[]}}],"position":{"start":{"line":65,"column":1,"offset":1221},"end":{"line":65,"column":15,"offset":1235},"indent":[]},"data":{"id":"全国行政区划边界","htmlAttributes":{"id":"全国行政区划边界"},"hProperties":{"id":"全国行政区划边界"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4","children":[{"type":"text","value":"支持 geojson, svg下载","position":{"start":{"line":66,"column":2,"offset":1237},"end":{"line":66,"column":19,"offset":1254},"indent":[]}}],"position":{"start":{"line":66,"column":1,"offset":1236},"end":{"line":66,"column":111,"offset":1346},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":66,"column":1,"offset":1236},"end":{"line":66,"column":111,"offset":1346},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#highcharts-全球行政区划数据集","title":null,"children":[],"data":{"hProperties":{"aria-label":"highcharts 全球行政区划数据集 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"HighCharts 全球行政区划数据集","position":{"start":{"line":68,"column":6,"offset":1353},"end":{"line":68,"column":26,"offset":1373},"indent":[]}}],"position":{"start":{"line":68,"column":1,"offset":1348},"end":{"line":68,"column":26,"offset":1373},"indent":[]},"data":{"id":"highcharts-全球行政区划数据集","htmlAttributes":{"id":"highcharts-全球行政区划数据集"},"hProperties":{"id":"highcharts-全球行政区划数据集"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://img.hcharts.cn/mapdata/","children":[{"type":"text","value":"https://img.hcharts.cn/mapdata/","position":{"start":{"line":70,"column":2,"offset":1376},"end":{"line":70,"column":33,"offset":1407},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":1375},"end":{"line":70,"column":67,"offset":1441},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":70,"column":1,"offset":1375},"end":{"line":70,"column":67,"offset":1441},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":71,"column":1,"offset":1442}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-1f7e0780cc68187ba02285939fbf883e.json b/.cache/caches/gatsby-transformer-remark/diskstore-1f7e0780cc68187ba02285939fbf883e.json deleted file mode 100644 index c5f3daafd5..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-1f7e0780cc68187ba02285939fbf883e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-60d822501ed69ef0096233b3fb440654-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"An open source large-scale geospatial data visualization analysis development framework powered by WebGL.","position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":106,"offset":107},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":106,"offset":107},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。","position":{"start":{"line":5,"column":1,"offset":109},"end":{"line":5,"column":173,"offset":281},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":109},"end":{"line":5,"column":173,"offset":281},"indent":[]}},{"type":"html","value":"","position":{"start":{"line":7,"column":1,"offset":283},"end":{"line":12,"column":9,"offset":856},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，","position":{"start":{"line":14,"column":1,"offset":858},"end":{"line":14,"column":78,"offset":935},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":858},"end":{"line":14,"column":78,"offset":935},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"1.x 版本的用户需求我们持续跟进 ","position":{"start":{"line":16,"column":1,"offset":937},"end":{"line":16,"column":19,"offset":955},"indent":[]}},{"type":"link","title":null,"url":"https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html","children":[{"type":"text","value":"旧版官网地址","position":{"start":{"line":16,"column":20,"offset":956},"end":{"line":16,"column":26,"offset":962},"indent":[]}}],"position":{"start":{"line":16,"column":19,"offset":955},"end":{"line":16,"column":81,"offset":1017},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":16,"column":1,"offset":937},"end":{"line":16,"column":81,"offset":1017},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#核心特性","title":null,"children":[],"data":{"hProperties":{"aria-label":"核心特性 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"核心特性","position":{"start":{"line":18,"column":4,"offset":1022},"end":{"line":18,"column":8,"offset":1026},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":1019},"end":{"line":18,"column":8,"offset":1026},"indent":[]},"data":{"id":"核心特性","htmlAttributes":{"id":"核心特性"},"hProperties":{"id":"核心特性"}}},{"type":"paragraph","children":[{"type":"text","value":"🌏 数据驱动可视化展示","position":{"start":{"line":21,"column":1,"offset":1029},"end":{"line":21,"column":13,"offset":1041},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":1029},"end":{"line":21,"column":13,"offset":1041},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。","position":{"start":{"line":23,"column":1,"offset":1043},"end":{"line":23,"column":31,"offset":1073},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":1043},"end":{"line":23,"column":31,"offset":1073},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"🌏 2D，3D 一体化的海量数据高性能渲染","position":{"start":{"line":25,"column":1,"offset":1075},"end":{"line":25,"column":23,"offset":1097},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":1075},"end":{"line":25,"column":23,"offset":1097},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"百万级空间数据实时，动态渲染。","position":{"start":{"line":27,"column":1,"offset":1099},"end":{"line":27,"column":16,"offset":1114},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":1099},"end":{"line":27,"column":16,"offset":1114},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"🌏 简单灵活的数据接入","position":{"start":{"line":29,"column":1,"offset":1116},"end":{"line":29,"column":13,"offset":1128},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":1116},"end":{"line":29,"column":13,"offset":1128},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。","position":{"start":{"line":31,"column":1,"offset":1130},"end":{"line":31,"column":53,"offset":1182},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":1130},"end":{"line":31,"column":53,"offset":1182},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":" 🌏 多地图底图支持，支持离线内网部署","position":{"start":{"line":33,"column":1,"offset":1184},"end":{"line":33,"column":21,"offset":1204},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":1184},"end":{"line":33,"column":21,"offset":1204},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。","position":{"start":{"line":35,"column":1,"offset":1206},"end":{"line":35,"column":34,"offset":1239},"indent":[]}}],"position":{"start":{"line":35,"column":1,"offset":1206},"end":{"line":35,"column":34,"offset":1239},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#支持丰富的图表类型","title":null,"children":[],"data":{"hProperties":{"aria-label":"支持丰富的图表类型 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"支持丰富的图表类型","position":{"start":{"line":37,"column":4,"offset":1244},"end":{"line":37,"column":13,"offset":1253},"indent":[]}}],"position":{"start":{"line":37,"column":1,"offset":1241},"end":{"line":37,"column":13,"offset":1253},"indent":[]},"data":{"id":"支持丰富的图表类型","htmlAttributes":{"id":"支持丰富的图表类型"},"hProperties":{"id":"支持丰富的图表类型"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#点图层","title":null,"children":[],"data":{"hProperties":{"aria-label":"点图层 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"点图层","position":{"start":{"line":39,"column":5,"offset":1259},"end":{"line":39,"column":8,"offset":1262},"indent":[]}}],"position":{"start":{"line":39,"column":1,"offset":1255},"end":{"line":39,"column":8,"offset":1262},"indent":[]},"data":{"id":"点图层","htmlAttributes":{"id":"点图层"},"hProperties":{"id":"点图层"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"气泡图","position":{"start":{"line":41,"column":4,"offset":1268},"end":{"line":41,"column":7,"offset":1271},"indent":[]}}],"position":{"start":{"line":41,"column":4,"offset":1268},"end":{"line":41,"column":7,"offset":1271},"indent":[]}}],"position":{"start":{"line":41,"column":1,"offset":1265},"end":{"line":41,"column":7,"offset":1271},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"散点图","position":{"start":{"line":42,"column":4,"offset":1275},"end":{"line":42,"column":7,"offset":1278},"indent":[]}}],"position":{"start":{"line":42,"column":4,"offset":1275},"end":{"line":42,"column":7,"offset":1278},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":1272},"end":{"line":42,"column":7,"offset":1278},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"符号地图","position":{"start":{"line":43,"column":4,"offset":1282},"end":{"line":43,"column":8,"offset":1286},"indent":[]}}],"position":{"start":{"line":43,"column":4,"offset":1282},"end":{"line":43,"column":8,"offset":1286},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":1279},"end":{"line":43,"column":8,"offset":1286},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"3D柱状地图","position":{"start":{"line":44,"column":4,"offset":1290},"end":{"line":44,"column":10,"offset":1296},"indent":[]}}],"position":{"start":{"line":44,"column":4,"offset":1290},"end":{"line":44,"column":10,"offset":1296},"indent":[]}}],"position":{"start":{"line":44,"column":1,"offset":1287},"end":{"line":44,"column":10,"offset":1296},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"聚合地图","position":{"start":{"line":45,"column":4,"offset":1300},"end":{"line":45,"column":8,"offset":1304},"indent":[]}}],"position":{"start":{"line":45,"column":4,"offset":1300},"end":{"line":45,"column":8,"offset":1304},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":1297},"end":{"line":45,"column":8,"offset":1304},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"复合图表地图","position":{"start":{"line":46,"column":4,"offset":1308},"end":{"line":46,"column":10,"offset":1314},"indent":[]}}],"position":{"start":{"line":46,"column":4,"offset":1308},"end":{"line":46,"column":10,"offset":1314},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":1305},"end":{"line":46,"column":10,"offset":1314},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"自定义Marker","position":{"start":{"line":47,"column":4,"offset":1318},"end":{"line":47,"column":13,"offset":1327},"indent":[]}}],"position":{"start":{"line":47,"column":4,"offset":1318},"end":{"line":47,"column":13,"offset":1327},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":1315},"end":{"line":47,"column":13,"offset":1327},"indent":[]}}],"position":{"start":{"line":41,"column":1,"offset":1265},"end":{"line":47,"column":13,"offset":1327},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#线图层","title":null,"children":[],"data":{"hProperties":{"aria-label":"线图层 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"线图层","position":{"start":{"line":49,"column":5,"offset":1333},"end":{"line":49,"column":8,"offset":1336},"indent":[]}}],"position":{"start":{"line":49,"column":1,"offset":1329},"end":{"line":49,"column":8,"offset":1336},"indent":[]},"data":{"id":"线图层","htmlAttributes":{"id":"线图层"},"hProperties":{"id":"线图层"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"路径地图","position":{"start":{"line":51,"column":3,"offset":1340},"end":{"line":51,"column":7,"offset":1344},"indent":[]}}],"position":{"start":{"line":51,"column":3,"offset":1340},"end":{"line":51,"column":7,"offset":1344},"indent":[]}}],"position":{"start":{"line":51,"column":1,"offset":1338},"end":{"line":51,"column":7,"offset":1344},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"弧线，支持2D弧线、3D弧线以及大圆航线","position":{"start":{"line":52,"column":3,"offset":1347},"end":{"line":52,"column":23,"offset":1367},"indent":[]}}],"position":{"start":{"line":52,"column":3,"offset":1347},"end":{"line":52,"column":23,"offset":1367},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":1345},"end":{"line":52,"column":23,"offset":1367},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"等值线","position":{"start":{"line":53,"column":3,"offset":1370},"end":{"line":53,"column":6,"offset":1373},"indent":[]}}],"position":{"start":{"line":53,"column":3,"offset":1370},"end":{"line":53,"column":6,"offset":1373},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":1368},"end":{"line":53,"column":6,"offset":1373},"indent":[]}}],"position":{"start":{"line":51,"column":1,"offset":1338},"end":{"line":53,"column":6,"offset":1373},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#面图层","title":null,"children":[],"data":{"hProperties":{"aria-label":"面图层 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"面图层","position":{"start":{"line":55,"column":5,"offset":1379},"end":{"line":55,"column":8,"offset":1382},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":1375},"end":{"line":55,"column":8,"offset":1382},"indent":[]},"data":{"id":"面图层","htmlAttributes":{"id":"面图层"},"hProperties":{"id":"面图层"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"填充图","position":{"start":{"line":57,"column":3,"offset":1386},"end":{"line":57,"column":6,"offset":1389},"indent":[]}}],"position":{"start":{"line":57,"column":3,"offset":1386},"end":{"line":57,"column":6,"offset":1389},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1384},"end":{"line":57,"column":6,"offset":1389},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"3D填充图","position":{"start":{"line":58,"column":3,"offset":1392},"end":{"line":58,"column":8,"offset":1397},"indent":[]}}],"position":{"start":{"line":58,"column":3,"offset":1392},"end":{"line":58,"column":8,"offset":1397},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":1390},"end":{"line":58,"column":8,"offset":1397},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1384},"end":{"line":58,"column":8,"offset":1397},"indent":[1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#热力图","title":null,"children":[],"data":{"hProperties":{"aria-label":"热力图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"热力图","position":{"start":{"line":60,"column":5,"offset":1403},"end":{"line":60,"column":8,"offset":1406},"indent":[]}}],"position":{"start":{"line":60,"column":1,"offset":1399},"end":{"line":60,"column":8,"offset":1406},"indent":[]},"data":{"id":"热力图","htmlAttributes":{"id":"热力图"},"hProperties":{"id":"热力图"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"经典热力图","position":{"start":{"line":62,"column":3,"offset":1410},"end":{"line":62,"column":8,"offset":1415},"indent":[]}}],"position":{"start":{"line":62,"column":3,"offset":1410},"end":{"line":62,"column":8,"offset":1415},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":1408},"end":{"line":62,"column":8,"offset":1415},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"蜂窝热力图","position":{"start":{"line":63,"column":3,"offset":1418},"end":{"line":63,"column":8,"offset":1423},"indent":[]}}],"position":{"start":{"line":63,"column":3,"offset":1418},"end":{"line":63,"column":8,"offset":1423},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":1416},"end":{"line":63,"column":8,"offset":1423},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"网格热力图","position":{"start":{"line":64,"column":3,"offset":1426},"end":{"line":64,"column":8,"offset":1431},"indent":[]}}],"position":{"start":{"line":64,"column":3,"offset":1426},"end":{"line":64,"column":8,"offset":1431},"indent":[]}}],"position":{"start":{"line":64,"column":1,"offset":1424},"end":{"line":64,"column":8,"offset":1431},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":1408},"end":{"line":64,"column":8,"offset":1431},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#栅格地图","title":null,"children":[],"data":{"hProperties":{"aria-label":"栅格地图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"栅格地图","position":{"start":{"line":66,"column":5,"offset":1437},"end":{"line":66,"column":9,"offset":1441},"indent":[]}}],"position":{"start":{"line":66,"column":1,"offset":1433},"end":{"line":66,"column":9,"offset":1441},"indent":[]},"data":{"id":"栅格地图","htmlAttributes":{"id":"栅格地图"},"hProperties":{"id":"栅格地图"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"图片","position":{"start":{"line":67,"column":3,"offset":1444},"end":{"line":67,"column":5,"offset":1446},"indent":[]}}],"position":{"start":{"line":67,"column":3,"offset":1444},"end":{"line":67,"column":5,"offset":1446},"indent":[]}}],"position":{"start":{"line":67,"column":1,"offset":1442},"end":{"line":67,"column":5,"offset":1446},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Raster","position":{"start":{"line":68,"column":3,"offset":1449},"end":{"line":68,"column":9,"offset":1455},"indent":[]}}],"position":{"start":{"line":68,"column":3,"offset":1449},"end":{"line":68,"column":9,"offset":1455},"indent":[]}}],"position":{"start":{"line":68,"column":1,"offset":1447},"end":{"line":68,"column":9,"offset":1455},"indent":[]}}],"position":{"start":{"line":67,"column":1,"offset":1442},"end":{"line":68,"column":9,"offset":1455},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#l7-20-roadmap","title":null,"children":[],"data":{"hProperties":{"aria-label":"l7 20 roadmap permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"L7 2.0 Roadmap","position":{"start":{"line":70,"column":4,"offset":1460},"end":{"line":70,"column":18,"offset":1474},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":1457},"end":{"line":70,"column":18,"offset":1474},"indent":[]},"data":{"id":"l7-20-roadmap","htmlAttributes":{"id":"l7-20-roadmap"},"hProperties":{"id":"l7-20-roadmap"}}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ","alt":"L7 Road Map","position":{"start":{"line":72,"column":1,"offset":1476},"end":{"line":72,"column":101,"offset":1576},"indent":[]}}],"position":{"start":{"line":72,"column":1,"offset":1476},"end":{"line":72,"column":101,"offset":1576},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"更多技术细节，详细进展，请关注 ","position":{"start":{"line":75,"column":1,"offset":1579},"end":{"line":75,"column":17,"offset":1595},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/antvis/L7","children":[{"type":"text","value":"GitHub","position":{"start":{"line":75,"column":18,"offset":1596},"end":{"line":75,"column":24,"offset":1602},"indent":[]}}],"position":{"start":{"line":75,"column":17,"offset":1595},"end":{"line":75,"column":55,"offset":1633},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"，欢迎大家来给点点 Star，让更多人看到这个开源的项目。","position":{"start":{"line":75,"column":55,"offset":1633},"end":{"line":75,"column":84,"offset":1662},"indent":[]}}],"position":{"start":{"line":75,"column":1,"offset":1579},"end":{"line":75,"column":84,"offset":1662},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":76,"column":1,"offset":1663}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-20ebd56e0e270e797b0147a3ea5c8115.json b/.cache/caches/gatsby-transformer-remark/diskstore-20ebd56e0e270e797b0147a3ea5c8115.json deleted file mode 100644 index ea7d33b4f6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-20ebd56e0e270e797b0147a3ea5c8115.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-39727a14ec623ec7ff2e3240d0462862-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-23f5d6e5180d289afa341c16a8f30b57.json b/.cache/caches/gatsby-transformer-remark/diskstore-23f5d6e5180d289afa341c16a8f30b57.json deleted file mode 100644 index beeae50067..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-23f5d6e5180d289afa341c16a8f30b57.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-97fa88c11aed2c1192f7b349cbb69969-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#pointlayer","title":null,"children":[],"data":{"hProperties":{"aria-label":"pointlayer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"PointLayer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":13,"offset":12},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":13,"offset":12},"indent":[]},"data":{"id":"pointlayer","htmlAttributes":{"id":"pointlayer"},"hProperties":{"id":"pointlayer"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":4,"column":4,"offset":18},"end":{"line":4,"column":6,"offset":20},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":15},"end":{"line":4,"column":6,"offset":20},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。","position":{"start":{"line":5,"column":1,"offset":21},"end":{"line":5,"column":37,"offset":57},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":21},"end":{"line":5,"column":37,"offset":57},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"shape 支持","position":{"start":{"line":7,"column":1,"offset":59},"end":{"line":7,"column":9,"offset":67},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":59},"end":{"line":7,"column":9,"offset":67},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"3D类型 柱图","position":{"start":{"line":9,"column":3,"offset":71},"end":{"line":9,"column":10,"offset":78},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":69},"end":{"line":9,"column":12,"offset":80},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":69},"end":{"line":9,"column":12,"offset":80},"indent":[]}},{"type":"html","lang":null,"meta":null,"value":"
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
","position":{"start":{"line":11,"column":1,"offset":82},"end":{"line":14,"column":4,"offset":152},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"2D 符号图","position":{"start":{"line":16,"column":3,"offset":156},"end":{"line":16,"column":9,"offset":162},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":154},"end":{"line":16,"column":11,"offset":164},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":154},"end":{"line":16,"column":11,"offset":164},"indent":[]}},{"type":"html","lang":null,"meta":null,"value":"
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
","position":{"start":{"line":18,"column":1,"offset":166},"end":{"line":21,"column":4,"offset":275},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"图片标注","position":{"start":{"line":23,"column":3,"offset":279},"end":{"line":23,"column":7,"offset":283},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":277},"end":{"line":23,"column":9,"offset":285},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":277},"end":{"line":23,"column":9,"offset":285},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"通过 ","position":{"start":{"line":25,"column":1,"offset":287},"end":{"line":25,"column":4,"offset":290},"indent":[]}},{"type":"html","value":"Scene.addImage()","position":{"start":{"line":25,"column":4,"offset":290},"end":{"line":25,"column":26,"offset":312},"indent":[]}},{"type":"text","value":" 可以添加图片资源， ","position":{"start":{"line":25,"column":26,"offset":312},"end":{"line":25,"column":37,"offset":323},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":287},"end":{"line":25,"column":37,"offset":323},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#代码示例","title":null,"children":[],"data":{"hProperties":{"aria-label":"代码示例 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"代码示例","position":{"start":{"line":28,"column":5,"offset":330},"end":{"line":28,"column":9,"offset":334},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":326},"end":{"line":28,"column":9,"offset":334},"indent":[]},"data":{"id":"代码示例","htmlAttributes":{"id":"代码示例"},"hProperties":{"id":"代码示例"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#基本图形显示示例","title":null,"children":[],"data":{"hProperties":{"aria-label":"基本图形显示示例 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"基本图形显示示例","position":{"start":{"line":31,"column":6,"offset":342},"end":{"line":31,"column":14,"offset":350},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":337},"end":{"line":31,"column":14,"offset":350},"indent":[]},"data":{"id":"基本图形显示示例","htmlAttributes":{"id":"基本图形显示示例"},"hProperties":{"id":"基本图形显示示例"}}},{"type":"html","lang":"javascript","meta":null,"value":"
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
","position":{"start":{"line":33,"column":1,"offset":352},"end":{"line":50,"column":4,"offset":727},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#符号图","title":null,"children":[],"data":{"hProperties":{"aria-label":"符号图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"符号图","position":{"start":{"line":53,"column":6,"offset":735},"end":{"line":53,"column":9,"offset":738},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":730},"end":{"line":53,"column":9,"offset":738},"indent":[]},"data":{"id":"符号图","htmlAttributes":{"id":"符号图"},"hProperties":{"id":"符号图"}}},{"type":"paragraph","children":[{"type":"text","value":"使用图片添加地图标注","position":{"start":{"line":55,"column":1,"offset":740},"end":{"line":55,"column":11,"offset":750},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":740},"end":{"line":55,"column":11,"offset":750},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","position":{"start":{"line":57,"column":1,"offset":752},"end":{"line":70,"column":4,"offset":1002},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":74,"column":1,"offset":1006}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-2489ef82c0e02b46f50eff818a0cd83e.json b/.cache/caches/gatsby-transformer-remark/diskstore-2489ef82c0e02b46f50eff818a0cd83e.json deleted file mode 100644 index da31f5c607..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-2489ef82c0e02b46f50eff818a0cd83e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-8bd46bd263f790754e46a98ca9891ea9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-24ba23f356136a5e8111532f906c1a91.json b/.cache/caches/gatsby-transformer-remark/diskstore-24ba23f356136a5e8111532f906c1a91.json deleted file mode 100644 index f348b1e605..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-24ba23f356136a5e8111532f906c1a91.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-c233b77d35e08201ab64c4861488d352-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"填充地图的增强实现，通过三维视角中的高度体现数据差异。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":28,"offset":27},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":28,"offset":27},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":28,"offset":27}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-2544ab52ae57a50af0d903c73ca6a2a2.json b/.cache/caches/gatsby-transformer-remark/diskstore-2544ab52ae57a50af0d903c73ca6a2a2.json deleted file mode 100644 index c9663030f8..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-2544ab52ae57a50af0d903c73ca6a2a2.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-25eb056d4a67acb0b49cfbe659e280c1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"imagelayer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#imagelayer","aria-label":"imagelayer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"ImageLayer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":13,"offset":12}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":13,"offset":12}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":3,"column":4,"offset":17},"end":{"line":3,"column":6,"offset":19}}}],"position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":3,"column":6,"offset":19}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将图片添加到地图上，需要指定图片的经纬度范围","position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42}}}],"position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"代码示例"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B","aria-label":"代码示例 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"代码示例","position":{"start":{"line":6,"column":5,"offset":48},"end":{"line":6,"column":9,"offset":52}}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":9,"offset":52}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","position":{"start":{"line":8,"column":1,"offset":54},"end":{"line":19,"column":4,"offset":297}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":20,"column":1,"offset":298}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-25f685e1d353873cad77e2e507b893b9.json b/.cache/caches/gatsby-transformer-remark/diskstore-25f685e1d353873cad77e2e507b893b9.json deleted file mode 100644 index 86ddd0dd12..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-25f685e1d353873cad77e2e507b893b9.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-ad3a0411bb469460edbd1820d1a953f5-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-2629119d28bff39e4538ad657565e6e5.json b/.cache/caches/gatsby-transformer-remark/diskstore-2629119d28bff39e4538ad657565e6e5.json deleted file mode 100644 index 8c5bee87f2..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-2629119d28bff39e4538ad657565e6e5.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-63d6f29612923eb1f263a3a7fbc0d504-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-278102efab9b08d1c2e096f7cbb30f07.json b/.cache/caches/gatsby-transformer-remark/diskstore-278102efab9b08d1c2e096f7cbb30f07.json deleted file mode 100644 index 1bc7d745fb..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-278102efab9b08d1c2e096f7cbb30f07.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-0b3dfbbedf9555fe75466ff56f3ff5db-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-290d00fdd7e267372a167e3e26433966.json b/.cache/caches/gatsby-transformer-remark/diskstore-290d00fdd7e267372a167e3e26433966.json deleted file mode 100644 index f95c0b0526..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-290d00fdd7e267372a167e3e26433966.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-1c348fc333b039279ca33b95350216a1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-291e32202c32fe99d78ad1b389bf3844.json b/.cache/caches/gatsby-transformer-remark/diskstore-291e32202c32fe99d78ad1b389bf3844.json deleted file mode 100644 index 2d71e20169..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-291e32202c32fe99d78ad1b389bf3844.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-2703c8487a1fc763376587f66eeacf7d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"geojson-数据介绍"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson-%E6%95%B0%E6%8D%AE%E4%BB%8B%E7%BB%8D","aria-label":"geojson 数据介绍 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"geojson 数据介绍","position":{"start":{"line":3,"column":3,"offset":4},"end":{"line":3,"column":15,"offset":16}}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":15,"offset":16}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":6,"column":4,"offset":22},"end":{"line":6,"column":6,"offset":24}}}],"position":{"start":{"line":6,"column":1,"offset":19},"end":{"line":6,"column":6,"offset":24}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":8,"column":1,"offset":26},"end":{"line":8,"column":126,"offset":151}}}],"position":{"start":{"line":8,"column":1,"offset":26},"end":{"line":8,"column":126,"offset":151}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":""},"children":[{"type":"text","value":"geojson详细文档","position":{"start":{"line":10,"column":2,"offset":154},"end":{"line":10,"column":13,"offset":165}}}],"position":{"start":{"line":10,"column":1,"offset":153},"end":{"line":10,"column":16,"offset":168}}}],"position":{"start":{"line":10,"column":1,"offset":153},"end":{"line":10,"column":16,"offset":168}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"geojson相关的js库"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson%E7%9B%B8%E5%85%B3%E7%9A%84js%E5%BA%93","aria-label":"geojson相关的js库 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Geojson相关的JS库","position":{"start":{"line":12,"column":4,"offset":173},"end":{"line":12,"column":17,"offset":186}}}],"position":{"start":{"line":12,"column":1,"offset":170},"end":{"line":12,"column":17,"offset":186}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"地理统计分析工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7","aria-label":"地理统计分析工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":14,"column":5,"offset":192},"end":{"line":14,"column":13,"offset":200}}}],"position":{"start":{"line":14,"column":1,"offset":188},"end":{"line":14,"column":13,"offset":200}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://turfjs.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"turfjs","position":{"start":{"line":16,"column":2,"offset":203},"end":{"line":16,"column":8,"offset":209}}}],"position":{"start":{"line":16,"column":1,"offset":202},"end":{"line":16,"column":29,"offset":230}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":16,"column":29,"offset":230},"end":{"line":16,"column":60,"offset":261}}}],"position":{"start":{"line":16,"column":1,"offset":202},"end":{"line":16,"column":60,"offset":261}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"在线工具："},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7%EF%BC%9A","aria-label":"在线工具： permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"在线工具：","position":{"start":{"line":19,"column":5,"offset":268},"end":{"line":19,"column":10,"offset":273}}}],"position":{"start":{"line":19,"column":1,"offset":264},"end":{"line":19,"column":10,"offset":273}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://geojson.io/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":21,"column":2,"offset":276},"end":{"line":21,"column":20,"offset":294}}}],"position":{"start":{"line":21,"column":1,"offset":275},"end":{"line":21,"column":41,"offset":315}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":21,"column":41,"offset":315},"end":{"line":21,"column":66,"offset":340}}}],"position":{"start":{"line":21,"column":1,"offset":275},"end":{"line":21,"column":66,"offset":340}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://mapshaper.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":23,"column":2,"offset":343},"end":{"line":23,"column":24,"offset":365}}}],"position":{"start":{"line":23,"column":1,"offset":342},"end":{"line":23,"column":49,"offset":390}}},{"type":"text","value":" 可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":23,"column":49,"offset":390},"end":{"line":23,"column":80,"offset":421}}}],"position":{"start":{"line":23,"column":1,"offset":342},"end":{"line":23,"column":80,"offset":421}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":24,"column":1,"offset":422}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-2adf1cfa2e745a706e81f8a2026f1680.json b/.cache/caches/gatsby-transformer-remark/diskstore-2adf1cfa2e745a706e81f8a2026f1680.json deleted file mode 100644 index e324b332c4..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-2adf1cfa2e745a706e81f8a2026f1680.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-22e40979220b547ee56864978d7eefed-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":59,"offset":58}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":59,"offset":58}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":59,"offset":58}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-2b62a7d1ba2ac4e4f61a438707110948.json b/.cache/caches/gatsby-transformer-remark/diskstore-2b62a7d1ba2ac4e4f61a438707110948.json deleted file mode 100644 index 0374a44470..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-2b62a7d1ba2ac4e4f61a438707110948.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-e214775bf910f98457136a5495aca2a9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-2cd4efd5f29c0649119fdafc84c90fd5.json b/.cache/caches/gatsby-transformer-remark/diskstore-2cd4efd5f29c0649119fdafc84c90fd5.json deleted file mode 100644 index 1e5a869c25..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-2cd4efd5f29c0649119fdafc84c90fd5.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-7bb76714df549123e99e9b48d8d6822f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"pointlayer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pointlayer","aria-label":"pointlayer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"PointLayer","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":13,"offset":13}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":13,"offset":13}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":5,"column":4,"offset":19},"end":{"line":5,"column":6,"offset":21}}}],"position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":6,"offset":21}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。","position":{"start":{"line":6,"column":1,"offset":22},"end":{"line":6,"column":37,"offset":58}}}],"position":{"start":{"line":6,"column":1,"offset":22},"end":{"line":6,"column":37,"offset":58}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"shape 支持","position":{"start":{"line":8,"column":1,"offset":60},"end":{"line":8,"column":9,"offset":68}}}],"position":{"start":{"line":8,"column":1,"offset":60},"end":{"line":8,"column":9,"offset":68}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"3D类型 柱图","position":{"start":{"line":10,"column":3,"offset":72},"end":{"line":10,"column":10,"offset":79}}}],"position":{"start":{"line":10,"column":1,"offset":70},"end":{"line":10,"column":12,"offset":81}}}],"position":{"start":{"line":10,"column":1,"offset":70},"end":{"line":10,"column":12,"offset":81}}},{"type":"text","value":"\n"},{"type":"raw","value":"
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
","position":{"start":{"line":12,"column":1,"offset":83},"end":{"line":15,"column":4,"offset":153}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2D 符号图","position":{"start":{"line":17,"column":3,"offset":157},"end":{"line":17,"column":9,"offset":163}}}],"position":{"start":{"line":17,"column":1,"offset":155},"end":{"line":17,"column":11,"offset":165}}}],"position":{"start":{"line":17,"column":1,"offset":155},"end":{"line":17,"column":11,"offset":165}}},{"type":"text","value":"\n"},{"type":"raw","value":"
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
","position":{"start":{"line":19,"column":1,"offset":167},"end":{"line":22,"column":4,"offset":276}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"图片标注","position":{"start":{"line":24,"column":3,"offset":280},"end":{"line":24,"column":7,"offset":284}}}],"position":{"start":{"line":24,"column":1,"offset":278},"end":{"line":24,"column":9,"offset":286}}}],"position":{"start":{"line":24,"column":1,"offset":278},"end":{"line":24,"column":9,"offset":286}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"通过 ","position":{"start":{"line":26,"column":1,"offset":288},"end":{"line":26,"column":4,"offset":291}}},{"type":"raw","value":"Scene.addImage()","position":{"start":{"line":26,"column":4,"offset":291},"end":{"line":26,"column":26,"offset":313}}},{"type":"text","value":" 可以添加图片资源， ","position":{"start":{"line":26,"column":26,"offset":313},"end":{"line":26,"column":37,"offset":324}}}],"position":{"start":{"line":26,"column":1,"offset":288},"end":{"line":26,"column":37,"offset":324}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"代码示例"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B","aria-label":"代码示例 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"代码示例","position":{"start":{"line":29,"column":5,"offset":331},"end":{"line":29,"column":9,"offset":335}}}],"position":{"start":{"line":29,"column":1,"offset":327},"end":{"line":29,"column":9,"offset":335}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"基本图形显示示例"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9F%BA%E6%9C%AC%E5%9B%BE%E5%BD%A2%E6%98%BE%E7%A4%BA%E7%A4%BA%E4%BE%8B","aria-label":"基本图形显示示例 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"基本图形显示示例","position":{"start":{"line":32,"column":6,"offset":343},"end":{"line":32,"column":14,"offset":351}}}],"position":{"start":{"line":32,"column":1,"offset":338},"end":{"line":32,"column":14,"offset":351}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
","position":{"start":{"line":34,"column":1,"offset":353},"end":{"line":51,"column":4,"offset":728}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"符号图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AC%A6%E5%8F%B7%E5%9B%BE","aria-label":"符号图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"符号图","position":{"start":{"line":54,"column":6,"offset":736},"end":{"line":54,"column":9,"offset":739}}}],"position":{"start":{"line":54,"column":1,"offset":731},"end":{"line":54,"column":9,"offset":739}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"使用图片添加地图标注","position":{"start":{"line":56,"column":1,"offset":741},"end":{"line":56,"column":11,"offset":751}}}],"position":{"start":{"line":56,"column":1,"offset":741},"end":{"line":56,"column":11,"offset":751}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","position":{"start":{"line":58,"column":1,"offset":753},"end":{"line":71,"column":4,"offset":1003}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":75,"column":1,"offset":1007}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-2e4c648fc47f38dc73975e783277afe3.json b/.cache/caches/gatsby-transformer-remark/diskstore-2e4c648fc47f38dc73975e783277afe3.json deleted file mode 100644 index f5f61c0fee..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-2e4c648fc47f38dc73975e783277afe3.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-d9c8c8e6e4baf6574d8f46f3a81eba85-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-3242cd167d11d418d764d45569a80d40.json b/.cache/caches/gatsby-transformer-remark/diskstore-3242cd167d11d418d764d45569a80d40.json deleted file mode 100644 index c1810971f4..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-3242cd167d11d418d764d45569a80d40.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-4ddb72039f738ffb6fc8c7ca02770db1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"control"},"children":[{"type":"element","tagName":"a","properties":{"href":"#control","aria-label":"control permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"control","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":10,"offset":9}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":10,"offset":9}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺","position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":43,"offset":53}}}],"position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":43,"offset":53}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":6,"column":4,"offset":59},"end":{"line":6,"column":8,"offset":63}}}],"position":{"start":{"line":6,"column":1,"offset":56},"end":{"line":6,"column":8,"offset":63}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const baseControl = new L7.Control.Base(option);\n
","position":{"start":{"line":8,"column":1,"offset":65},"end":{"line":10,"column":4,"offset":131}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"option"},"children":[{"type":"element","tagName":"a","properties":{"href":"#option","aria-label":"option permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"option","position":{"start":{"line":13,"column":6,"offset":139},"end":{"line":13,"column":12,"offset":145}}}],"position":{"start":{"line":13,"column":1,"offset":134},"end":{"line":13,"column":12,"offset":145}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" position: ","position":{"start":{"line":14,"column":1,"offset":146},"end":{"line":14,"column":12,"offset":157}}},{"type":"raw","value":"string","position":{"start":{"line":14,"column":12,"offset":157},"end":{"line":14,"column":20,"offset":165}}},{"type":"text","value":" 控件位置支持是个方位 ","position":{"start":{"line":14,"column":20,"offset":165},"end":{"line":14,"column":32,"offset":177}}},{"type":"raw","value":"bottomright, topright, bottomleft, topleft","position":{"start":{"line":14,"column":32,"offset":177},"end":{"line":14,"column":76,"offset":221}}}],"position":{"start":{"line":14,"column":1,"offset":146},"end":{"line":14,"column":76,"offset":221}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"scene-内置地图组件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#scene-%E5%86%85%E7%BD%AE%E5%9C%B0%E5%9B%BE%E7%BB%84%E4%BB%B6","aria-label":"scene 内置地图组件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"scene 内置地图组件","position":{"start":{"line":17,"column":6,"offset":229},"end":{"line":17,"column":18,"offset":241}}}],"position":{"start":{"line":17,"column":1,"offset":224},"end":{"line":17,"column":18,"offset":241}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"zoom 地图放大缩小  默认添加","position":{"start":{"line":18,"column":1,"offset":242},"end":{"line":18,"column":18,"offset":259}}},{"type":"raw","value":"
","position":{"start":{"line":18,"column":18,"offset":259},"end":{"line":18,"column":24,"offset":265}}},{"type":"text","value":"Scale 地图比例尺   默认添加","position":{"start":{"line":18,"column":24,"offset":265},"end":{"line":18,"column":42,"offset":283}}},{"type":"raw","value":"
","position":{"start":{"line":18,"column":42,"offset":283},"end":{"line":18,"column":48,"offset":289}}},{"type":"text","value":"attribution 地图数据属性  默认添加","position":{"start":{"line":18,"column":48,"offset":289},"end":{"line":18,"column":72,"offset":313}}},{"type":"raw","value":"
","position":{"start":{"line":18,"column":72,"offset":313},"end":{"line":18,"column":78,"offset":319}}},{"type":"text","value":"layer 图层列表","position":{"start":{"line":18,"column":78,"offset":319},"end":{"line":18,"column":88,"offset":329}}}],"position":{"start":{"line":18,"column":1,"offset":242},"end":{"line":18,"column":88,"offset":329}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"scene配置项设置控件添加状态","position":{"start":{"line":20,"column":3,"offset":333},"end":{"line":20,"column":19,"offset":349}}}],"position":{"start":{"line":20,"column":1,"offset":331},"end":{"line":20,"column":21,"offset":351}}}],"position":{"start":{"line":20,"column":1,"offset":331},"end":{"line":20,"column":21,"offset":351}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
","position":{"start":{"line":22,"column":1,"offset":353},"end":{"line":28,"column":4,"offset":469}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":""},"children":[{"type":"element","tagName":"a","properties":{"href":"#","aria-label":" permalink","class":"anchor"},"children":[{"type":"raw","value":""}]}],"position":{"start":{"line":30,"column":1,"offset":471},"end":{"line":30,"column":6,"offset":476}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"zoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoom","aria-label":"zoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Zoom","position":{"start":{"line":32,"column":6,"offset":483},"end":{"line":32,"column":10,"offset":487}}}],"position":{"start":{"line":32,"column":1,"offset":478},"end":{"line":32,"column":10,"offset":487}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"放大缩小组件 默认 左上角","position":{"start":{"line":33,"column":1,"offset":488},"end":{"line":33,"column":14,"offset":501}}}],"position":{"start":{"line":33,"column":1,"offset":488},"end":{"line":33,"column":14,"offset":501}}},{"type":"text","value":"\n"},{"type":"raw","value":"
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
","position":{"start":{"line":35,"column":1,"offset":503},"end":{"line":39,"column":4,"offset":590}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"scale"},"children":[{"type":"element","tagName":"a","properties":{"href":"#scale","aria-label":"scale permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Scale","position":{"start":{"line":42,"column":6,"offset":598},"end":{"line":42,"column":11,"offset":603}}}],"position":{"start":{"line":42,"column":1,"offset":593},"end":{"line":42,"column":11,"offset":603}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"比例尺组件默认左下角","position":{"start":{"line":43,"column":1,"offset":604},"end":{"line":43,"column":11,"offset":614}}}],"position":{"start":{"line":43,"column":1,"offset":604},"end":{"line":43,"column":11,"offset":614}}},{"type":"text","value":"\n"},{"type":"raw","value":"
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
","position":{"start":{"line":45,"column":1,"offset":616},"end":{"line":49,"column":4,"offset":707}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"attribution"},"children":[{"type":"element","tagName":"a","properties":{"href":"#attribution","aria-label":"attribution permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"attribution","position":{"start":{"line":52,"column":6,"offset":715},"end":{"line":52,"column":17,"offset":726}}}],"position":{"start":{"line":52,"column":1,"offset":710},"end":{"line":52,"column":17,"offset":726}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"默认右下角","position":{"start":{"line":53,"column":1,"offset":727},"end":{"line":53,"column":6,"offset":732}}}],"position":{"start":{"line":53,"column":1,"offset":727},"end":{"line":53,"column":6,"offset":732}}},{"type":"text","value":"\n"},{"type":"raw","value":"
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
","position":{"start":{"line":55,"column":1,"offset":734},"end":{"line":59,"column":4,"offset":830}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"layer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#layer","aria-label":"layer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"layer","position":{"start":{"line":62,"column":6,"offset":838},"end":{"line":62,"column":11,"offset":843}}}],"position":{"start":{"line":62,"column":1,"offset":833},"end":{"line":62,"column":11,"offset":843}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层列表目前只支持可视化overlayers 图层控制","position":{"start":{"line":63,"column":1,"offset":844},"end":{"line":63,"column":28,"offset":871}}}],"position":{"start":{"line":63,"column":1,"offset":844},"end":{"line":63,"column":28,"offset":871}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
","position":{"start":{"line":65,"column":1,"offset":873},"end":{"line":73,"column":4,"offset":1031}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":76,"column":4,"offset":1037},"end":{"line":76,"column":6,"offset":1039}}}],"position":{"start":{"line":76,"column":1,"offset":1034},"end":{"line":76,"column":6,"offset":1039}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"onadd"},"children":[{"type":"element","tagName":"a","properties":{"href":"#onadd","aria-label":"onadd permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"onAdd","position":{"start":{"line":78,"column":6,"offset":1046},"end":{"line":78,"column":11,"offset":1051}}}],"position":{"start":{"line":78,"column":1,"offset":1041},"end":{"line":78,"column":11,"offset":1051}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"组件添加到地图Scene时调用，自定义组件时需要实现此方法","position":{"start":{"line":79,"column":1,"offset":1052},"end":{"line":79,"column":30,"offset":1081}}}],"position":{"start":{"line":79,"column":1,"offset":1052},"end":{"line":79,"column":30,"offset":1081}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"addto"},"children":[{"type":"element","tagName":"a","properties":{"href":"#addto","aria-label":"addto permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"addTo","position":{"start":{"line":82,"column":6,"offset":1089},"end":{"line":82,"column":11,"offset":1094}}}],"position":{"start":{"line":82,"column":1,"offset":1084},"end":{"line":82,"column":11,"offset":1094}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"添加到地图scene","position":{"start":{"line":83,"column":1,"offset":1095},"end":{"line":83,"column":11,"offset":1105}}}],"position":{"start":{"line":83,"column":1,"offset":1095},"end":{"line":83,"column":11,"offset":1105}}},{"type":"text","value":"\n"},{"type":"raw","value":"
control.addTo(scene);\n
","position":{"start":{"line":85,"column":1,"offset":1107},"end":{"line":87,"column":4,"offset":1146}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"setposition"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setposition","aria-label":"setposition permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setPosition","position":{"start":{"line":90,"column":6,"offset":1154},"end":{"line":90,"column":17,"offset":1165}}}],"position":{"start":{"line":90,"column":1,"offset":1149},"end":{"line":90,"column":17,"offset":1165}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置组件位置","position":{"start":{"line":91,"column":1,"offset":1166},"end":{"line":91,"column":7,"offset":1172}}}],"position":{"start":{"line":91,"column":1,"offset":1166},"end":{"line":91,"column":7,"offset":1172}}},{"type":"text","value":"\n"},{"type":"raw","value":"
control.setPosition('bottomright');\n
","position":{"start":{"line":93,"column":1,"offset":1174},"end":{"line":95,"column":4,"offset":1227}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"remove"},"children":[{"type":"element","tagName":"a","properties":{"href":"#remove","aria-label":"remove permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"remove","position":{"start":{"line":98,"column":6,"offset":1235},"end":{"line":98,"column":12,"offset":1241}}}],"position":{"start":{"line":98,"column":1,"offset":1230},"end":{"line":98,"column":12,"offset":1241}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除地图组件","position":{"start":{"line":99,"column":1,"offset":1242},"end":{"line":99,"column":7,"offset":1248}}}],"position":{"start":{"line":99,"column":1,"offset":1242},"end":{"line":99,"column":7,"offset":1248}}},{"type":"text","value":"\n"},{"type":"raw","value":"
control.remove();\n
","position":{"start":{"line":101,"column":1,"offset":1250},"end":{"line":103,"column":4,"offset":1285}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"示例代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81","aria-label":"示例代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"示例代码","position":{"start":{"line":107,"column":4,"offset":1292},"end":{"line":107,"column":8,"offset":1296}}}],"position":{"start":{"line":107,"column":1,"offset":1289},"end":{"line":107,"column":8,"offset":1296}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"自定义图例控件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E4%BE%8B%E6%8E%A7%E4%BB%B6","aria-label":"自定义图例控件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"自定义图例控件","position":{"start":{"line":110,"column":6,"offset":1304},"end":{"line":110,"column":13,"offset":1311}}}],"position":{"start":{"line":110,"column":1,"offset":1299},"end":{"line":110,"column":13,"offset":1311}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"源码","position":{"start":{"line":111,"column":2,"offset":1313},"end":{"line":111,"column":4,"offset":1315}}}],"position":{"start":{"line":111,"column":1,"offset":1312},"end":{"line":111,"column":77,"offset":1388}}}],"position":{"start":{"line":111,"column":1,"offset":1312},"end":{"line":111,"column":77,"offset":1388}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
","position":{"start":{"line":113,"column":1,"offset":1390},"end":{"line":128,"column":4,"offset":1914}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-1","aria-label":" 1 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]}],"position":{"start":{"line":130,"column":1,"offset":1916},"end":{"line":130,"column":4,"offset":1919}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"faq"},"children":[{"type":"element","tagName":"a","properties":{"href":"#faq","aria-label":"faq permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"FAQ","position":{"start":{"line":132,"column":4,"offset":1924},"end":{"line":132,"column":7,"offset":1927}}}],"position":{"start":{"line":132,"column":1,"offset":1921},"end":{"line":132,"column":7,"offset":1927}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":134,"column":1,"offset":1929}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-343f8172c4d07cd3f801be02ad0568b6.json b/.cache/caches/gatsby-transformer-remark/diskstore-343f8172c4d07cd3f801be02ad0568b6.json deleted file mode 100644 index 8bf18dbb49..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-343f8172c4d07cd3f801be02ad0568b6.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-0869a152e4c719c14970127d11b61364-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-34721aa205f71ddd6bc11b922f93e9d8.json b/.cache/caches/gatsby-transformer-remark/diskstore-34721aa205f71ddd6bc11b922f93e9d8.json deleted file mode 100644 index 73664f0673..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-34721aa205f71ddd6bc11b922f93e9d8.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-2b56a382712fe8167708fc9c6567ee2a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-372c9ab402a9fb47f76a5d448d884fe5.json b/.cache/caches/gatsby-transformer-remark/diskstore-372c9ab402a9fb47f76a5d448d884fe5.json deleted file mode 100644 index 6ba00794a1..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-372c9ab402a9fb47f76a5d448d884fe5.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-39727a14ec623ec7ff2e3240d0462862-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-39c56b0fd6a829a79c0ccbf69dbbca8b.json b/.cache/caches/gatsby-transformer-remark/diskstore-39c56b0fd6a829a79c0ccbf69dbbca8b.json deleted file mode 100644 index ed164f43c0..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-39c56b0fd6a829a79c0ccbf69dbbca8b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-60d822501ed69ef0096233b3fb440654-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-3b66b5ab45d78e9cdbb591c1e4ad0fd2.json b/.cache/caches/gatsby-transformer-remark/diskstore-3b66b5ab45d78e9cdbb591c1e4ad0fd2.json deleted file mode 100644 index 2bf22a648f..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-3b66b5ab45d78e9cdbb591c1e4ad0fd2.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-9850acf2f0d1dba77931250ff1ae1833-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-3b885d41ebd9e91be764e41b07f04f2a.json b/.cache/caches/gatsby-transformer-remark/diskstore-3b885d41ebd9e91be764e41b07f04f2a.json deleted file mode 100644 index a792e1381c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-3b885d41ebd9e91be764e41b07f04f2a.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-48a94297bc9dd247077cfc25bb30bedf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-3d066c523ccd84022e416ae408492650.json b/.cache/caches/gatsby-transformer-remark/diskstore-3d066c523ccd84022e416ae408492650.json deleted file mode 100644 index d775ca5a39..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-3d066c523ccd84022e416ae408492650.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-d472877a984a12546079e673e84f8ab3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-3f15eaedf680560275076348ce84d123.json b/.cache/caches/gatsby-transformer-remark/diskstore-3f15eaedf680560275076348ce84d123.json deleted file mode 100644 index e2fda2c711..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-3f15eaedf680560275076348ce84d123.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-1007c079d6357b1b7f036a12841ae440-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":48,"offset":47}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":48,"offset":47}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":48,"offset":47}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-3fc8c8fe7868468fa49313f1d868c872.json b/.cache/caches/gatsby-transformer-remark/diskstore-3fc8c8fe7868468fa49313f1d868c872.json deleted file mode 100644 index e0de9db91d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-3fc8c8fe7868468fa49313f1d868c872.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-31fce8e43ac00c6448c028e5a94f3913-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#数据","title":null,"children":[],"data":{"hProperties":{"aria-label":"数据 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"数据","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":6,"offset":6},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":6,"offset":6},"indent":[]},"data":{"id":"数据","htmlAttributes":{"id":"数据"},"hProperties":{"id":"数据"}}},{"type":"paragraph","children":[{"type":"text","value":"目前L7支持的数据格式有GeoJson,CSV,JSon Image","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"GeoJSON 支持点、线、面，等所有的空间数据格式。","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":28,"offset":71},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":28,"offset":71},"end":{"line":6,"column":34,"offset":77},"indent":[]}},{"type":"text","value":"CSV 支持，点，线段，弧线的支持。","position":{"start":{"line":6,"column":34,"offset":77},"end":{"line":6,"column":52,"offset":95},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":52,"offset":95},"end":{"line":6,"column":58,"offset":101},"indent":[]}},{"type":"text","value":"JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。","position":{"start":{"line":6,"column":58,"offset":101},"end":{"line":6,"column":91,"offset":134},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":91,"offset":134},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#geojson","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"GeoJSON","position":{"start":{"line":9,"column":4,"offset":140},"end":{"line":9,"column":11,"offset":147},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":137},"end":{"line":9,"column":11,"offset":147},"indent":[]},"data":{"id":"geojson","htmlAttributes":{"id":"geojson"},"hProperties":{"id":"geojson"}}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":149},"end":{"line":11,"column":128,"offset":276},"indent":[]}},{"type":"html","lang":"json","meta":null,"value":"
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
","position":{"start":{"line":15,"column":1,"offset":280},"end":{"line":52,"column":4,"offset":980},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#地理统计分析工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"地理统计分析工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":54,"column":4,"offset":985},"end":{"line":54,"column":12,"offset":993},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":982},"end":{"line":54,"column":12,"offset":993},"indent":[]},"data":{"id":"地理统计分析工具","htmlAttributes":{"id":"地理统计分析工具"},"hProperties":{"id":"地理统计分析工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://turfjs.org/","children":[{"type":"text","value":"turfjs","position":{"start":{"line":55,"column":2,"offset":995},"end":{"line":55,"column":8,"offset":1001},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":29,"offset":1022},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":55,"column":29,"offset":1022},"end":{"line":55,"column":60,"offset":1053},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":60,"offset":1053},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#在线工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"在线工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"在线工具","position":{"start":{"line":57,"column":4,"offset":1058},"end":{"line":57,"column":8,"offset":1062},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1055},"end":{"line":57,"column":8,"offset":1062},"indent":[]},"data":{"id":"在线工具","htmlAttributes":{"id":"在线工具"},"hProperties":{"id":"在线工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://geojson.io/","children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":59,"column":2,"offset":1065},"end":{"line":59,"column":20,"offset":1083},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":41,"offset":1104},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":59,"column":41,"offset":1104},"end":{"line":59,"column":66,"offset":1129},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":66,"offset":1129},"indent":[]}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://mapshaper.org/","children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":61,"column":2,"offset":1132},"end":{"line":61,"column":24,"offset":1154},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":49,"offset":1179},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"  可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":61,"column":49,"offset":1179},"end":{"line":61,"column":80,"offset":1210},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":80,"offset":1210},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#数据资源","title":null,"children":[],"data":{"hProperties":{"aria-label":"数据资源 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"数据资源","position":{"start":{"line":63,"column":4,"offset":1215},"end":{"line":63,"column":8,"offset":1219},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":1212},"end":{"line":63,"column":8,"offset":1219},"indent":[]},"data":{"id":"数据资源","htmlAttributes":{"id":"数据资源"},"hProperties":{"id":"数据资源"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#全国行政区划边界","title":null,"children":[],"data":{"hProperties":{"aria-label":"全国行政区划边界 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"全国行政区划边界 ","position":{"start":{"line":65,"column":6,"offset":1226},"end":{"line":65,"column":15,"offset":1235},"indent":[]}}],"position":{"start":{"line":65,"column":1,"offset":1221},"end":{"line":65,"column":15,"offset":1235},"indent":[]},"data":{"id":"全国行政区划边界","htmlAttributes":{"id":"全国行政区划边界"},"hProperties":{"id":"全国行政区划边界"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4","children":[{"type":"text","value":"支持 geojson, svg下载","position":{"start":{"line":66,"column":2,"offset":1237},"end":{"line":66,"column":19,"offset":1254},"indent":[]}}],"position":{"start":{"line":66,"column":1,"offset":1236},"end":{"line":66,"column":111,"offset":1346},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":66,"column":1,"offset":1236},"end":{"line":66,"column":111,"offset":1346},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#highcharts-全球行政区划数据集","title":null,"children":[],"data":{"hProperties":{"aria-label":"highcharts 全球行政区划数据集 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"HighCharts 全球行政区划数据集","position":{"start":{"line":68,"column":6,"offset":1353},"end":{"line":68,"column":26,"offset":1373},"indent":[]}}],"position":{"start":{"line":68,"column":1,"offset":1348},"end":{"line":68,"column":26,"offset":1373},"indent":[]},"data":{"id":"highcharts-全球行政区划数据集","htmlAttributes":{"id":"highcharts-全球行政区划数据集"},"hProperties":{"id":"highcharts-全球行政区划数据集"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://img.hcharts.cn/mapdata/","children":[{"type":"text","value":"https://img.hcharts.cn/mapdata/","position":{"start":{"line":70,"column":2,"offset":1376},"end":{"line":70,"column":33,"offset":1407},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":1375},"end":{"line":70,"column":67,"offset":1441},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":70,"column":1,"offset":1375},"end":{"line":70,"column":67,"offset":1441},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":71,"column":1,"offset":1442}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-3fc989dcac17d15145e95b513efe72e9.json b/.cache/caches/gatsby-transformer-remark/diskstore-3fc989dcac17d15145e95b513efe72e9.json deleted file mode 100644 index 6108c5e2dd..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-3fc989dcac17d15145e95b513efe72e9.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-b547ac3a0b516aef90927b09bdc0a22c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#popup","title":null,"children":[],"data":{"hProperties":{"aria-label":"popup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"popup","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":8,"offset":7},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":8,"offset":7},"indent":[]},"data":{"id":"popup","htmlAttributes":{"id":"popup"},"hProperties":{"id":"popup"}}},{"type":"paragraph","children":[{"type":"text","value":"地图标注信息窗口，用于展示地图要素的属性信息","position":{"start":{"line":3,"column":1,"offset":9},"end":{"line":3,"column":23,"offset":31},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":9},"end":{"line":3,"column":23,"offset":31},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":6,"column":4,"offset":37},"end":{"line":6,"column":8,"offset":41},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":34},"end":{"line":6,"column":8,"offset":41},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"paragraph","children":[{"type":"text","value":"Popup","position":{"start":{"line":7,"column":1,"offset":42},"end":{"line":7,"column":6,"offset":47},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":42},"end":{"line":7,"column":6,"offset":47},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const popup = new L7.Popup(option);\n
","position":{"start":{"line":9,"column":1,"offset":49},"end":{"line":11,"column":4,"offset":101},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#option","title":null,"children":[],"data":{"hProperties":{"aria-label":"option permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"option","position":{"start":{"line":14,"column":6,"offset":109},"end":{"line":14,"column":12,"offset":115},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":104},"end":{"line":14,"column":12,"offset":115},"indent":[]},"data":{"id":"option","htmlAttributes":{"id":"option"},"hProperties":{"id":"option"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"closeButton","position":{"start":{"line":16,"column":3,"offset":119},"end":{"line":16,"column":14,"offset":130},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":119},"end":{"line":16,"column":14,"offset":130},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":117},"end":{"line":16,"column":14,"offset":130},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"closeOnClick","position":{"start":{"line":17,"column":3,"offset":133},"end":{"line":17,"column":15,"offset":145},"indent":[]}}],"position":{"start":{"line":17,"column":3,"offset":133},"end":{"line":17,"column":15,"offset":145},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":131},"end":{"line":17,"column":15,"offset":145},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"maxWidth","position":{"start":{"line":18,"column":3,"offset":148},"end":{"line":18,"column":11,"offset":156},"indent":[]}}],"position":{"start":{"line":18,"column":3,"offset":148},"end":{"line":18,"column":11,"offset":156},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":146},"end":{"line":18,"column":11,"offset":156},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"anchor","position":{"start":{"line":19,"column":3,"offset":159},"end":{"line":19,"column":9,"offset":165},"indent":[]}}],"position":{"start":{"line":19,"column":3,"offset":159},"end":{"line":19,"column":9,"offset":165},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":157},"end":{"line":19,"column":9,"offset":165},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":117},"end":{"line":19,"column":9,"offset":165},"indent":[1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":22,"column":4,"offset":171},"end":{"line":22,"column":6,"offset":173},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":168},"end":{"line":22,"column":6,"offset":173},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#setlnglat","title":null,"children":[],"data":{"hProperties":{"aria-label":"setlnglat permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setLnglat","position":{"start":{"line":24,"column":6,"offset":180},"end":{"line":24,"column":15,"offset":189},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":175},"end":{"line":24,"column":15,"offset":189},"indent":[]},"data":{"id":"setlnglat","htmlAttributes":{"id":"setlnglat"},"hProperties":{"id":"setlnglat"}}},{"type":"paragraph","children":[{"type":"text","value":"设置popup的经纬度位置","position":{"start":{"line":25,"column":1,"offset":190},"end":{"line":25,"column":14,"offset":203},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":25,"column":14,"offset":203},"end":{"line":25,"column":20,"offset":209},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":25,"column":22,"offset":211},"end":{"line":25,"column":24,"offset":213},"indent":[]}}],"position":{"start":{"line":25,"column":20,"offset":209},"end":{"line":25,"column":26,"offset":215},"indent":[]}},{"type":"text","value":"：lnglat 经纬度数组 ","position":{"start":{"line":25,"column":26,"offset":215},"end":{"line":25,"column":40,"offset":229},"indent":[]}},{"type":"linkReference","identifier":"112,32","label":"112,32","referenceType":"shortcut","children":[{"type":"text","value":"112,32","position":{"start":{"line":25,"column":41,"offset":230},"end":{"line":25,"column":47,"offset":236},"indent":[]}}],"position":{"start":{"line":25,"column":40,"offset":229},"end":{"line":25,"column":48,"offset":237},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":190},"end":{"line":25,"column":48,"offset":237},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.setLnglat([112, 32]);\n
","position":{"start":{"line":27,"column":1,"offset":239},"end":{"line":29,"column":4,"offset":284},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#addto","title":null,"children":[],"data":{"hProperties":{"aria-label":"addto permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"addTo","position":{"start":{"line":32,"column":6,"offset":292},"end":{"line":32,"column":11,"offset":297},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":287},"end":{"line":32,"column":11,"offset":297},"indent":[]},"data":{"id":"addto","htmlAttributes":{"id":"addto"},"hProperties":{"id":"addto"}}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":33,"column":3,"offset":300},"end":{"line":33,"column":5,"offset":302},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":298},"end":{"line":33,"column":7,"offset":304},"indent":[]}},{"type":"text","value":"：scene 地图scene实例","position":{"start":{"line":33,"column":7,"offset":304},"end":{"line":33,"column":23,"offset":320},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":298},"end":{"line":33,"column":23,"offset":320},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"将popup添加到地图scene显示","position":{"start":{"line":35,"column":1,"offset":322},"end":{"line":35,"column":19,"offset":340},"indent":[]}}],"position":{"start":{"line":35,"column":1,"offset":322},"end":{"line":35,"column":19,"offset":340},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.addTo(scene);\n
","position":{"start":{"line":37,"column":1,"offset":342},"end":{"line":39,"column":4,"offset":379},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#sethtml","title":null,"children":[],"data":{"hProperties":{"aria-label":"sethtml permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setHtml","position":{"start":{"line":42,"column":6,"offset":387},"end":{"line":42,"column":13,"offset":394},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":382},"end":{"line":42,"column":13,"offset":394},"indent":[]},"data":{"id":"sethtml","htmlAttributes":{"id":"sethtml"},"hProperties":{"id":"sethtml"}}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":43,"column":3,"offset":397},"end":{"line":43,"column":5,"offset":399},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":395},"end":{"line":43,"column":7,"offset":401},"indent":[]}},{"type":"text","value":"：html 字符串","position":{"start":{"line":43,"column":7,"offset":401},"end":{"line":43,"column":16,"offset":410},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":395},"end":{"line":43,"column":16,"offset":410},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"设置popup html 内容","position":{"start":{"line":45,"column":1,"offset":412},"end":{"line":45,"column":16,"offset":427},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":412},"end":{"line":45,"column":16,"offset":427},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
","position":{"start":{"line":47,"column":1,"offset":429},"end":{"line":51,"column":4,"offset":639},"indent":[1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#settext","title":null,"children":[],"data":{"hProperties":{"aria-label":"settext permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setText","position":{"start":{"line":54,"column":6,"offset":647},"end":{"line":54,"column":13,"offset":654},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":642},"end":{"line":54,"column":13,"offset":654},"indent":[]},"data":{"id":"settext","htmlAttributes":{"id":"settext"},"hProperties":{"id":"settext"}}},{"type":"paragraph","children":[{"type":"text","value":"设置 popup 显示文本内容","position":{"start":{"line":55,"column":1,"offset":655},"end":{"line":55,"column":16,"offset":670},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":655},"end":{"line":55,"column":16,"offset":670},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.setText('hello world');\n
","position":{"start":{"line":57,"column":1,"offset":672},"end":{"line":59,"column":4,"offset":719},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#remove","title":null,"children":[],"data":{"hProperties":{"aria-label":"remove permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"remove","position":{"start":{"line":62,"column":6,"offset":727},"end":{"line":62,"column":12,"offset":733},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":722},"end":{"line":62,"column":12,"offset":733},"indent":[]},"data":{"id":"remove","htmlAttributes":{"id":"remove"},"hProperties":{"id":"remove"}}},{"type":"paragraph","children":[{"type":"text","value":"移除popup","position":{"start":{"line":63,"column":1,"offset":734},"end":{"line":63,"column":8,"offset":741},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":734},"end":{"line":63,"column":8,"offset":741},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.remove();\n
","position":{"start":{"line":65,"column":1,"offset":743},"end":{"line":67,"column":4,"offset":775},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"事件","position":{"start":{"line":70,"column":4,"offset":781},"end":{"line":70,"column":6,"offset":783},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":778},"end":{"line":70,"column":6,"offset":783},"indent":[]},"data":{"id":"事件","htmlAttributes":{"id":"事件"},"hProperties":{"id":"事件"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#close","title":null,"children":[],"data":{"hProperties":{"aria-label":"close permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"close","position":{"start":{"line":72,"column":6,"offset":790},"end":{"line":72,"column":11,"offset":795},"indent":[]}}],"position":{"start":{"line":72,"column":1,"offset":785},"end":{"line":72,"column":11,"offset":795},"indent":[]},"data":{"id":"close","htmlAttributes":{"id":"close"},"hProperties":{"id":"close"}}},{"type":"html","lang":"javascript","meta":null,"value":"
popup.on('close', () => {});\n
","position":{"start":{"line":74,"column":1,"offset":797},"end":{"line":76,"column":4,"offset":839},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#示例代码","title":null,"children":[],"data":{"hProperties":{"aria-label":"示例代码 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"示例代码","position":{"start":{"line":79,"column":4,"offset":845},"end":{"line":79,"column":8,"offset":849},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":842},"end":{"line":79,"column":8,"offset":849},"indent":[]},"data":{"id":"示例代码","htmlAttributes":{"id":"示例代码"},"hProperties":{"id":"示例代码"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#添加popup","title":null,"children":[],"data":{"hProperties":{"aria-label":"添加popup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"添加popup","position":{"start":{"line":81,"column":6,"offset":856},"end":{"line":81,"column":13,"offset":863},"indent":[]}}],"position":{"start":{"line":81,"column":1,"offset":851},"end":{"line":81,"column":13,"offset":863},"indent":[]},"data":{"id":"添加popup","htmlAttributes":{"id":"添加popup"},"hProperties":{"id":"添加popup"}}},{"type":"html","lang":null,"meta":null,"value":"
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
","position":{"start":{"line":83,"column":1,"offset":865},"end":{"line":86,"column":4,"offset":981},"indent":[1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#faq","title":null,"children":[],"data":{"hProperties":{"aria-label":"faq permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"FAQ","position":{"start":{"line":88,"column":5,"offset":987},"end":{"line":88,"column":8,"offset":990},"indent":[]}}],"position":{"start":{"line":88,"column":1,"offset":983},"end":{"line":88,"column":8,"offset":990},"indent":[]},"data":{"id":"faq","htmlAttributes":{"id":"faq"},"hProperties":{"id":"faq"}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":89,"column":1,"offset":991}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-4179f055025752a5a966619affb85b55.json b/.cache/caches/gatsby-transformer-remark/diskstore-4179f055025752a5a966619affb85b55.json deleted file mode 100644 index 6efed2518d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-4179f055025752a5a966619affb85b55.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-0ce38f6fc0207c9629c6165b2f176cd7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-421be543e3d1cfea7a0c4b4a28608d25.json b/.cache/caches/gatsby-transformer-remark/diskstore-421be543e3d1cfea7a0c4b4a28608d25.json deleted file mode 100644 index a71f17a87e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-421be543e3d1cfea7a0c4b4a28608d25.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-feeb976cc6200a213384f1f2a7b3760a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#heatmaplayer","title":null,"children":[],"data":{"hProperties":{"aria-label":"heatmaplayer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"heatmapLayer","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":15,"offset":15},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":15,"offset":15},"indent":[]},"data":{"id":"heatmaplayer","htmlAttributes":{"id":"heatmaplayer"},"hProperties":{"id":"heatmaplayer"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":5,"column":5,"offset":22},"end":{"line":5,"column":7,"offset":24},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":18},"end":{"line":5,"column":7,"offset":24},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"热力图图层，包含三种类型的，","position":{"start":{"line":7,"column":1,"offset":26},"end":{"line":7,"column":15,"offset":40},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":26},"end":{"line":7,"column":15,"offset":40},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"方格热力图 ","position":{"start":{"line":8,"column":3,"offset":43},"end":{"line":8,"column":9,"offset":49},"indent":[]}}],"position":{"start":{"line":8,"column":3,"offset":43},"end":{"line":8,"column":9,"offset":49},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":41},"end":{"line":8,"column":9,"offset":49},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":41},"end":{"line":8,"column":9,"offset":49},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。","position":{"start":{"line":10,"column":1,"offset":51},"end":{"line":10,"column":57,"offset":107},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":51},"end":{"line":10,"column":57,"offset":107},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"六边形热力图 ","position":{"start":{"line":12,"column":3,"offset":111},"end":{"line":12,"column":10,"offset":118},"indent":[]}}],"position":{"start":{"line":12,"column":3,"offset":111},"end":{"line":12,"column":10,"offset":118},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":109},"end":{"line":12,"column":10,"offset":118},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":109},"end":{"line":12,"column":10,"offset":118},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局","position":{"start":{"line":14,"column":1,"offset":120},"end":{"line":14,"column":61,"offset":180},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":120},"end":{"line":14,"column":61,"offset":180},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"经典热力图 ","position":{"start":{"line":16,"column":3,"offset":184},"end":{"line":16,"column":9,"offset":190},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":184},"end":{"line":16,"column":9,"offset":190},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":182},"end":{"line":16,"column":9,"offset":190},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":182},"end":{"line":16,"column":9,"offset":190},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法","position":{"start":{"line":20,"column":1,"offset":194},"end":{"line":20,"column":48,"offset":241},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":194},"end":{"line":20,"column":48,"offset":241},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#source","title":null,"children":[],"data":{"hProperties":{"aria-label":"source permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"source","position":{"start":{"line":22,"column":5,"offset":247},"end":{"line":22,"column":11,"offset":253},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":243},"end":{"line":22,"column":11,"offset":253},"indent":[]},"data":{"id":"source","htmlAttributes":{"id":"source"},"hProperties":{"id":"source"}}},{"type":"paragraph","children":[{"type":"text","value":"热力图只支持点数据作为数据源","position":{"start":{"line":24,"column":1,"offset":255},"end":{"line":24,"column":15,"offset":269},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":255},"end":{"line":24,"column":15,"offset":269},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"布局方法 通过source的 tansforms属性配置","position":{"start":{"line":26,"column":1,"offset":271},"end":{"line":26,"column":29,"offset":299},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":271},"end":{"line":26,"column":29,"offset":299},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"type  数据聚合类型 grid、hexagon","position":{"start":{"line":28,"column":3,"offset":303},"end":{"line":28,"column":28,"offset":328},"indent":[]}}],"position":{"start":{"line":28,"column":3,"offset":303},"end":{"line":28,"column":28,"offset":328},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":301},"end":{"line":28,"column":28,"offset":328},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"size  网格半径 单位 米","position":{"start":{"line":29,"column":3,"offset":331},"end":{"line":29,"column":18,"offset":346},"indent":[]}}],"position":{"start":{"line":29,"column":3,"offset":331},"end":{"line":29,"column":18,"offset":346},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":329},"end":{"line":29,"column":18,"offset":346},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"field  聚合字段","position":{"start":{"line":30,"column":3,"offset":349},"end":{"line":30,"column":14,"offset":360},"indent":[]}}],"position":{"start":{"line":30,"column":3,"offset":349},"end":{"line":30,"column":14,"offset":360},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":347},"end":{"line":30,"column":14,"offset":360},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"method 聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":31,"column":3,"offset":363},"end":{"line":31,"column":44,"offset":404},"indent":[]}}],"position":{"start":{"line":31,"column":3,"offset":363},"end":{"line":31,"column":44,"offset":404},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":361},"end":{"line":31,"column":44,"offset":404},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":301},"end":{"line":31,"column":44,"offset":404},"indent":[1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
","position":{"start":{"line":33,"column":1,"offset":406},"end":{"line":50,"column":4,"offset":661},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"shape","position":{"start":{"line":52,"column":5,"offset":667},"end":{"line":52,"column":10,"offset":672},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":663},"end":{"line":52,"column":10,"offset":672},"indent":[]},"data":{"id":"shape","htmlAttributes":{"id":"shape"},"hProperties":{"id":"shape"}}},{"type":"paragraph","children":[{"type":"text","value":"不同类型热力图shape支持","position":{"start":{"line":54,"column":1,"offset":674},"end":{"line":54,"column":15,"offset":688},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":674},"end":{"line":54,"column":15,"offset":688},"indent":[]}},{"type":"table","align":[null,null,null],"children":[{"type":"tableRow","children":[{"type":"tableCell","children":[],"position":{"start":{"line":56,"column":4,"offset":693},"end":{"line":56,"column":4,"offset":693},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"2D","position":{"start":{"line":56,"column":6,"offset":695},"end":{"line":56,"column":8,"offset":697},"indent":[]}}],"position":{"start":{"line":56,"column":6,"offset":695},"end":{"line":56,"column":8,"offset":697},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"3d","position":{"start":{"line":56,"column":11,"offset":700},"end":{"line":56,"column":13,"offset":702},"indent":[]}}],"position":{"start":{"line":56,"column":11,"offset":700},"end":{"line":56,"column":13,"offset":702},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":690},"end":{"line":56,"column":15,"offset":704},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"网格格热力图","position":{"start":{"line":58,"column":3,"offset":727},"end":{"line":58,"column":9,"offset":733},"indent":[]}}],"position":{"start":{"line":58,"column":3,"offset":727},"end":{"line":58,"column":9,"offset":733},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":58,"column":12,"offset":736},"end":{"line":58,"column":42,"offset":766},"indent":[]}}],"position":{"start":{"line":58,"column":12,"offset":736},"end":{"line":58,"column":42,"offset":766},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"cylinder,triangleColumn,hexagonColum,squareColumn","position":{"start":{"line":58,"column":45,"offset":769},"end":{"line":58,"column":94,"offset":818},"indent":[]}}],"position":{"start":{"line":58,"column":45,"offset":769},"end":{"line":58,"column":94,"offset":818},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":725},"end":{"line":58,"column":96,"offset":820},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"蜂窝热力图","position":{"start":{"line":59,"column":3,"offset":823},"end":{"line":59,"column":8,"offset":828},"indent":[]}}],"position":{"start":{"line":59,"column":3,"offset":823},"end":{"line":59,"column":8,"offset":828},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":59,"column":11,"offset":831},"end":{"line":59,"column":41,"offset":861},"indent":[]}}],"position":{"start":{"line":59,"column":11,"offset":831},"end":{"line":59,"column":41,"offset":861},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":59,"column":44,"offset":864},"end":{"line":59,"column":74,"offset":894},"indent":[]}}],"position":{"start":{"line":59,"column":44,"offset":864},"end":{"line":59,"column":74,"offset":894},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":821},"end":{"line":59,"column":76,"offset":896},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"普通热力图","position":{"start":{"line":60,"column":3,"offset":899},"end":{"line":60,"column":8,"offset":904},"indent":[]}}],"position":{"start":{"line":60,"column":3,"offset":899},"end":{"line":60,"column":8,"offset":904},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"heatmap","position":{"start":{"line":60,"column":11,"offset":907},"end":{"line":60,"column":18,"offset":914},"indent":[]}}],"position":{"start":{"line":60,"column":11,"offset":907},"end":{"line":60,"column":18,"offset":914},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"heatmap","position":{"start":{"line":60,"column":21,"offset":917},"end":{"line":60,"column":28,"offset":924},"indent":[]}}],"position":{"start":{"line":60,"column":21,"offset":917},"end":{"line":60,"column":28,"offset":924},"indent":[]}}],"position":{"start":{"line":60,"column":1,"offset":897},"end":{"line":60,"column":30,"offset":926},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":690},"end":{"line":60,"column":30,"offset":926},"indent":[1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"热力图布局下只shape方法只支持常量的可视化。","position":{"start":{"line":63,"column":1,"offset":929},"end":{"line":63,"column":25,"offset":953},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":929},"end":{"line":63,"column":25,"offset":953},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
","position":{"start":{"line":65,"column":1,"offset":955},"end":{"line":69,"column":4,"offset":1046},"indent":[1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#size","title":null,"children":[],"data":{"hProperties":{"aria-label":"size permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size","position":{"start":{"line":71,"column":5,"offset":1052},"end":{"line":71,"column":9,"offset":1056},"indent":[]}}],"position":{"start":{"line":71,"column":1,"offset":1048},"end":{"line":71,"column":9,"offset":1056},"indent":[]},"data":{"id":"size","htmlAttributes":{"id":"size"},"hProperties":{"id":"size"}}},{"type":"paragraph","children":[{"type":"text","value":"当前版本 shape 为grid，hexagon不需要设置 size 映射","position":{"start":{"line":72,"column":1,"offset":1057},"end":{"line":72,"column":38,"offset":1094},"indent":[]}}],"position":{"start":{"line":72,"column":1,"offset":1057},"end":{"line":72,"column":38,"offset":1094},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"default 类型需要设置size映射 详细参数见","position":{"start":{"line":74,"column":1,"offset":1096},"end":{"line":74,"column":27,"offset":1122},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/l7/layer#size","children":[{"type":"text","value":"Size","position":{"start":{"line":74,"column":28,"offset":1123},"end":{"line":74,"column":32,"offset":1127},"indent":[]}}],"position":{"start":{"line":74,"column":27,"offset":1122},"end":{"line":74,"column":75,"offset":1170},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":74,"column":1,"offset":1096},"end":{"line":74,"column":75,"offset":1170},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"**size(field,values) **","position":{"start":{"line":76,"column":1,"offset":1172},"end":{"line":76,"column":24,"offset":1195},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":1172},"end":{"line":76,"column":24,"offset":1195},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"field: 热力图权重字段","position":{"start":{"line":78,"column":3,"offset":1199},"end":{"line":78,"column":17,"offset":1213},"indent":[]}}],"position":{"start":{"line":78,"column":3,"offset":1199},"end":{"line":78,"column":17,"offset":1213},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":1197},"end":{"line":78,"column":17,"offset":1213},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"values: 数据映射区间 热力图显示 ","position":{"start":{"line":79,"column":3,"offset":1216},"end":{"line":79,"column":24,"offset":1237},"indent":[]}},{"type":"linkReference","identifier":"0, 1","label":"0, 1","referenceType":"shortcut","children":[{"type":"text","value":"0, 1","position":{"start":{"line":79,"column":25,"offset":1238},"end":{"line":79,"column":29,"offset":1242},"indent":[]}}],"position":{"start":{"line":79,"column":24,"offset":1237},"end":{"line":79,"column":30,"offset":1243},"indent":[]}},{"type":"text","value":" 效果最佳","position":{"start":{"line":79,"column":30,"offset":1243},"end":{"line":79,"column":35,"offset":1248},"indent":[]}}],"position":{"start":{"line":79,"column":3,"offset":1216},"end":{"line":79,"column":35,"offset":1248},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":1214},"end":{"line":79,"column":35,"offset":1248},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":1197},"end":{"line":79,"column":35,"offset":1248},"indent":[1]}},{"type":"html","lang":"javascript","meta":null,"value":"
HeatmapLayer.size('field', [0, 1]);\n
","position":{"start":{"line":81,"column":1,"offset":1250},"end":{"line":83,"column":4,"offset":1303},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#color","title":null,"children":[],"data":{"hProperties":{"aria-label":"color permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"color","position":{"start":{"line":86,"column":5,"offset":1310},"end":{"line":86,"column":10,"offset":1315},"indent":[]}}],"position":{"start":{"line":86,"column":1,"offset":1306},"end":{"line":86,"column":10,"offset":1315},"indent":[]},"data":{"id":"color","htmlAttributes":{"id":"color"},"hProperties":{"id":"color"}}},{"type":"paragraph","children":[{"type":"text","value":"default heatMap 类型不需设置 color映射","position":{"start":{"line":87,"column":1,"offset":1316},"end":{"line":87,"column":31,"offset":1346},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":1316},"end":{"line":87,"column":31,"offset":1346},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"color 配置项同 ","position":{"start":{"line":89,"column":1,"offset":1348},"end":{"line":89,"column":12,"offset":1359},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/l7/layer#color","children":[{"type":"strong","children":[{"type":"text","value":"color","position":{"start":{"line":89,"column":15,"offset":1362},"end":{"line":89,"column":20,"offset":1367},"indent":[]}}],"position":{"start":{"line":89,"column":13,"offset":1360},"end":{"line":89,"column":22,"offset":1369},"indent":[]}}],"position":{"start":{"line":89,"column":12,"offset":1359},"end":{"line":89,"column":66,"offset":1413},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":89,"column":1,"offset":1348},"end":{"line":89,"column":66,"offset":1413},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#style","title":null,"children":[],"data":{"hProperties":{"aria-label":"style permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"style","position":{"start":{"line":93,"column":5,"offset":1421},"end":{"line":93,"column":10,"offset":1426},"indent":[]}}],"position":{"start":{"line":93,"column":1,"offset":1417},"end":{"line":93,"column":10,"offset":1426},"indent":[]},"data":{"id":"style","htmlAttributes":{"id":"style"},"hProperties":{"id":"style"}}},{"type":"paragraph","children":[{"type":"text","value":"grid hexagon 可以通过style 设置透明度","position":{"start":{"line":95,"column":1,"offset":1428},"end":{"line":95,"column":29,"offset":1456},"indent":[]}}],"position":{"start":{"line":95,"column":1,"offset":1428},"end":{"line":95,"column":29,"offset":1456},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"default热力图需要通过style配置参数热力图参数","position":{"start":{"line":97,"column":1,"offset":1458},"end":{"line":97,"column":29,"offset":1486},"indent":[]}}],"position":{"start":{"line":97,"column":1,"offset":1458},"end":{"line":97,"column":29,"offset":1486},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"intensity   全局热力权重   推荐权重范围 1-5","position":{"start":{"line":99,"column":3,"offset":1490},"end":{"line":99,"column":34,"offset":1521},"indent":[]}}],"position":{"start":{"line":99,"column":3,"offset":1490},"end":{"line":99,"column":34,"offset":1521},"indent":[]}}],"position":{"start":{"line":99,"column":1,"offset":1488},"end":{"line":99,"column":34,"offset":1521},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"radius  热力半径，单位像素","position":{"start":{"line":100,"column":3,"offset":1524},"end":{"line":100,"column":20,"offset":1541},"indent":[]}}],"position":{"start":{"line":100,"column":3,"offset":1524},"end":{"line":100,"column":20,"offset":1541},"indent":[]}}],"position":{"start":{"line":100,"column":1,"offset":1522},"end":{"line":100,"column":20,"offset":1541},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"rampColors 色带参数","position":{"start":{"line":101,"column":3,"offset":1544},"end":{"line":101,"column":18,"offset":1559},"indent":[]}}],"position":{"start":{"line":101,"column":3,"offset":1544},"end":{"line":101,"column":18,"offset":1559},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"colors  颜色数组","position":{"start":{"line":102,"column":5,"offset":1564},"end":{"line":102,"column":17,"offset":1576},"indent":[]}}],"position":{"start":{"line":102,"column":5,"offset":1564},"end":{"line":102,"column":17,"offset":1576},"indent":[]}}],"position":{"start":{"line":102,"column":3,"offset":1562},"end":{"line":102,"column":17,"offset":1576},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"positions 数据区间","position":{"start":{"line":103,"column":5,"offset":1581},"end":{"line":103,"column":19,"offset":1595},"indent":[]}}],"position":{"start":{"line":103,"column":5,"offset":1581},"end":{"line":103,"column":19,"offset":1595},"indent":[]}}],"position":{"start":{"line":103,"column":3,"offset":1579},"end":{"line":103,"column":19,"offset":1595},"indent":[]}}],"position":{"start":{"line":102,"column":3,"offset":1562},"end":{"line":103,"column":19,"offset":1595},"indent":[3]}}],"position":{"start":{"line":101,"column":1,"offset":1542},"end":{"line":103,"column":19,"offset":1595},"indent":[1,1]}}],"position":{"start":{"line":99,"column":1,"offset":1488},"end":{"line":103,"column":19,"offset":1595},"indent":[1,1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
","position":{"start":{"line":105,"column":1,"offset":1597},"end":{"line":114,"column":4,"offset":1905},"indent":[1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#完整代码示例","title":null,"children":[],"data":{"hProperties":{"aria-label":"完整代码示例 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"完整代码示例","position":{"start":{"line":117,"column":5,"offset":1912},"end":{"line":117,"column":11,"offset":1918},"indent":[]}}],"position":{"start":{"line":117,"column":1,"offset":1908},"end":{"line":117,"column":11,"offset":1918},"indent":[]},"data":{"id":"完整代码示例","htmlAttributes":{"id":"完整代码示例"},"hProperties":{"id":"完整代码示例"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#普通热力图","title":null,"children":[],"data":{"hProperties":{"aria-label":"普通热力图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"普通热力图","position":{"start":{"line":119,"column":6,"offset":1925},"end":{"line":119,"column":11,"offset":1930},"indent":[]}}],"position":{"start":{"line":119,"column":1,"offset":1920},"end":{"line":119,"column":11,"offset":1930},"indent":[]},"data":{"id":"普通热力图","htmlAttributes":{"id":"普通热力图"},"hProperties":{"id":"普通热力图"}}},{"type":"html","lang":"javascript","meta":null,"value":"
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
","position":{"start":{"line":121,"column":1,"offset":1932},"end":{"line":137,"column":4,"offset":2433},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#网格热力图","title":null,"children":[],"data":{"hProperties":{"aria-label":"网格热力图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"网格热力图","position":{"start":{"line":141,"column":6,"offset":2442},"end":{"line":141,"column":11,"offset":2447},"indent":[]}}],"position":{"start":{"line":141,"column":1,"offset":2437},"end":{"line":141,"column":11,"offset":2447},"indent":[]},"data":{"id":"网格热力图","htmlAttributes":{"id":"网格热力图"},"hProperties":{"id":"网格热力图"}}},{"type":"html","lang":"javascript","meta":null,"value":"
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
","position":{"start":{"line":143,"column":1,"offset":2449},"end":{"line":170,"column":4,"offset":2935},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#六边形热力图","title":null,"children":[],"data":{"hProperties":{"aria-label":"六边形热力图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"六边形热力图","position":{"start":{"line":173,"column":6,"offset":2943},"end":{"line":173,"column":12,"offset":2949},"indent":[]}}],"position":{"start":{"line":173,"column":1,"offset":2938},"end":{"line":173,"column":12,"offset":2949},"indent":[]},"data":{"id":"六边形热力图","htmlAttributes":{"id":"六边形热力图"},"hProperties":{"id":"六边形热力图"}}},{"type":"html","lang":"javascript","meta":null,"value":"
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","position":{"start":{"line":175,"column":1,"offset":2951},"end":{"line":201,"column":4,"offset":3322},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":201,"column":4,"offset":3322}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-4360188e994a16a34ff04e7fb73ffe99.json b/.cache/caches/gatsby-transformer-remark/diskstore-4360188e994a16a34ff04e7fb73ffe99.json deleted file mode 100644 index adf87c6edb..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-4360188e994a16a34ff04e7fb73ffe99.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-d1d3303c6f92e074c20c0fbe3324ba42-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-44343c1a2713857cf192ce6d6ee52d7e.json b/.cache/caches/gatsby-transformer-remark/diskstore-44343c1a2713857cf192ce6d6ee52d7e.json deleted file mode 100644 index 4783986984..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-44343c1a2713857cf192ce6d6ee52d7e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-6c5f52476ed9cd6ea8b7eabc064e76b2-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-44faede95956a096872035390fc57934.json b/.cache/caches/gatsby-transformer-remark/diskstore-44faede95956a096872035390fc57934.json deleted file mode 100644 index 0cc07ce894..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-44faede95956a096872035390fc57934.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-41aa0a12479519ad49d76176cb6f7dd9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"填充图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%A1%AB%E5%85%85%E5%9B%BE","aria-label":"填充图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"填充图","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":6,"offset":5}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":6,"offset":5}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。","position":{"start":{"line":3,"column":1,"offset":7},"end":{"line":3,"column":28,"offset":34}}}],"position":{"start":{"line":3,"column":1,"offset":7},"end":{"line":3,"column":28,"offset":34}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"shape"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shape","aria-label":"shape permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"shape","position":{"start":{"line":5,"column":5,"offset":40},"end":{"line":5,"column":10,"offset":45}}}],"position":{"start":{"line":5,"column":1,"offset":36},"end":{"line":5,"column":10,"offset":45}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"填充图支持3种shape","position":{"start":{"line":7,"column":1,"offset":47},"end":{"line":7,"column":13,"offset":59}}}],"position":{"start":{"line":7,"column":1,"offset":47},"end":{"line":7,"column":13,"offset":59}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"fill 绘制填充面 不支持数据映射","position":{"start":{"line":9,"column":3,"offset":63},"end":{"line":9,"column":23,"offset":83}}}],"position":{"start":{"line":9,"column":1,"offset":61},"end":{"line":9,"column":23,"offset":83}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"line 绘制填充图描边 不支持数据映射","position":{"start":{"line":10,"column":3,"offset":86},"end":{"line":10,"column":24,"offset":107}}}],"position":{"start":{"line":10,"column":1,"offset":84},"end":{"line":10,"column":24,"offset":107}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"extrude 对填充图3D拉伸 不支持数据映射","position":{"start":{"line":11,"column":3,"offset":110},"end":{"line":11,"column":27,"offset":134}}}],"position":{"start":{"line":11,"column":1,"offset":108},"end":{"line":11,"column":27,"offset":134}}},{"type":"text","value":"\n"}],"position":{"start":{"line":9,"column":1,"offset":61},"end":{"line":11,"column":27,"offset":134}}},{"type":"text","value":"\n"},{"type":"raw","value":"
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
","position":{"start":{"line":13,"column":1,"offset":136},"end":{"line":18,"column":4,"offset":277}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"其他方法，事件，同基类 ","position":{"start":{"line":20,"column":1,"offset":279},"end":{"line":20,"column":13,"offset":291}}},{"type":"element","tagName":"a","properties":{"href":"/zh/docs/api/layer/layer"},"children":[{"type":"text","value":"Layer","position":{"start":{"line":20,"column":14,"offset":292},"end":{"line":20,"column":19,"offset":297}}}],"position":{"start":{"line":20,"column":13,"offset":291},"end":{"line":20,"column":46,"offset":324}}}],"position":{"start":{"line":20,"column":1,"offset":279},"end":{"line":20,"column":46,"offset":324}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":23,"column":1,"offset":327}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-45cd83122ceacf46e7c73fabfd2680e7.json b/.cache/caches/gatsby-transformer-remark/diskstore-45cd83122ceacf46e7c73fabfd2680e7.json deleted file mode 100644 index 07f2c7e2e9..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-45cd83122ceacf46e7c73fabfd2680e7.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-1294fb759b9f52825afbf490561c7d81-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"layer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#layer","aria-label":"layer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Layer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":8,"offset":7}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":8,"offset":7}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":4,"column":4,"offset":13},"end":{"line":4,"column":6,"offset":15}}}],"position":{"start":{"line":4,"column":1,"offset":10},"end":{"line":4,"column":6,"offset":15}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 Layer 接口设计遵循图形语法，在可视表达上","position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":27,"offset":42}}}],"position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":27,"offset":42}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"语法示例","position":{"start":{"line":7,"column":1,"offset":44},"end":{"line":7,"column":5,"offset":48}}}],"position":{"start":{"line":7,"column":1,"offset":44},"end":{"line":7,"column":5,"offset":48}}},{"type":"text","value":"\n"},{"type":"raw","value":"
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
","position":{"start":{"line":9,"column":1,"offset":50},"end":{"line":17,"column":4,"offset":131}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":20,"column":4,"offset":137},"end":{"line":20,"column":8,"offset":141}}}],"position":{"start":{"line":20,"column":1,"offset":134},"end":{"line":20,"column":8,"offset":141}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"配置项"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%85%8D%E7%BD%AE%E9%A1%B9","aria-label":"配置项 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"配置项","position":{"start":{"line":23,"column":4,"offset":147},"end":{"line":23,"column":7,"offset":150}}}],"position":{"start":{"line":23,"column":1,"offset":144},"end":{"line":23,"column":7,"offset":150}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"visable"},"children":[{"type":"element","tagName":"a","properties":{"href":"#visable","aria-label":"visable permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"visable","position":{"start":{"line":25,"column":5,"offset":156},"end":{"line":25,"column":12,"offset":163}}}],"position":{"start":{"line":25,"column":1,"offset":152},"end":{"line":25,"column":12,"offset":163}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层是否可见   {bool } default true","position":{"start":{"line":26,"column":1,"offset":164},"end":{"line":26,"column":31,"offset":194}}}],"position":{"start":{"line":26,"column":1,"offset":164},"end":{"line":26,"column":31,"offset":194}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zindex"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zindex","aria-label":"zindex permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"zIndex","position":{"start":{"line":28,"column":5,"offset":200},"end":{"line":28,"column":11,"offset":206}}}],"position":{"start":{"line":28,"column":1,"offset":196},"end":{"line":28,"column":11,"offset":206}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0","position":{"start":{"line":29,"column":1,"offset":207},"end":{"line":29,"column":50,"offset":256}}}],"position":{"start":{"line":29,"column":1,"offset":207},"end":{"line":29,"column":50,"offset":256}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"minzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#minzoom","aria-label":"minzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"minZoom","position":{"start":{"line":30,"column":5,"offset":261},"end":{"line":30,"column":12,"offset":268}}}],"position":{"start":{"line":30,"column":1,"offset":257},"end":{"line":30,"column":12,"offset":268}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层显示最小缩放等级，（0-18）   {number}  default 0","position":{"start":{"line":31,"column":1,"offset":269},"end":{"line":31,"column":40,"offset":308}}}],"position":{"start":{"line":31,"column":1,"offset":269},"end":{"line":31,"column":40,"offset":308}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"maxzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#maxzoom","aria-label":"maxzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"maxZoom","position":{"start":{"line":33,"column":5,"offset":314},"end":{"line":33,"column":12,"offset":321}}}],"position":{"start":{"line":33,"column":1,"offset":310},"end":{"line":33,"column":12,"offset":321}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 图层显示最大缩放等级 （0-18）   {number}  default 18","position":{"start":{"line":34,"column":1,"offset":322},"end":{"line":34,"column":42,"offset":363}}}],"position":{"start":{"line":34,"column":1,"offset":322},"end":{"line":34,"column":42,"offset":363}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"鼠标事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6","aria-label":"鼠标事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"鼠标事件","position":{"start":{"line":37,"column":4,"offset":369},"end":{"line":37,"column":8,"offset":373}}}],"position":{"start":{"line":37,"column":1,"offset":366},"end":{"line":37,"column":9,"offset":374}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"beta版当前不支持，正式版会支持","position":{"start":{"line":39,"column":1,"offset":376},"end":{"line":39,"column":18,"offset":393}}}],"position":{"start":{"line":39,"column":1,"offset":376},"end":{"line":39,"column":18,"offset":393}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
","position":{"start":{"line":41,"column":1,"offset":395},"end":{"line":52,"column":4,"offset":904}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":55,"column":4,"offset":910},"end":{"line":55,"column":6,"offset":912}}}],"position":{"start":{"line":55,"column":1,"offset":907},"end":{"line":55,"column":6,"offset":912}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"source"},"children":[{"type":"element","tagName":"a","properties":{"href":"#source","aria-label":"source permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"source","position":{"start":{"line":57,"column":5,"offset":918},"end":{"line":57,"column":11,"offset":924}}}],"position":{"start":{"line":57,"column":1,"offset":914},"end":{"line":57,"column":11,"offset":924}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"数据源为layer设置数据 source(data,config)","position":{"start":{"line":58,"column":1,"offset":925},"end":{"line":58,"column":35,"offset":959}}}],"position":{"start":{"line":58,"column":1,"offset":925},"end":{"line":58,"column":35,"offset":959}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"data {geojson|json|csv}","position":{"start":{"line":60,"column":3,"offset":963},"end":{"line":60,"column":26,"offset":986}}}],"position":{"start":{"line":60,"column":1,"offset":961},"end":{"line":60,"column":26,"offset":986}}},{"type":"text","value":"\n"}],"position":{"start":{"line":60,"column":1,"offset":961},"end":{"line":60,"column":26,"offset":986}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      源数据","position":{"start":{"line":63,"column":1,"offset":989},"end":{"line":63,"column":11,"offset":999}}}],"position":{"start":{"line":63,"column":1,"offset":989},"end":{"line":63,"column":11,"offset":999}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"config  可选 数据源配置项","position":{"start":{"line":65,"column":3,"offset":1003},"end":{"line":65,"column":20,"offset":1020}}}],"position":{"start":{"line":65,"column":3,"offset":1003},"end":{"line":65,"column":20,"offset":1020}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"parser 数据解析，默认是解析层geojson","position":{"start":{"line":66,"column":5,"offset":1025},"end":{"line":66,"column":30,"offset":1050}}}],"position":{"start":{"line":66,"column":3,"offset":1023},"end":{"line":66,"column":30,"offset":1050}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"transforms ","position":{"start":{"line":67,"column":5,"offset":1055},"end":{"line":67,"column":16,"offset":1066}}},{"type":"text","value":"[transform，transform ]","position":{"start":{"line":67,"column":17,"offset":1067},"end":{"line":67,"column":37,"offset":1087}}},{"type":"text","value":"  数据处理转换 可设置多个","position":{"start":{"line":67,"column":38,"offset":1088},"end":{"line":67,"column":52,"offset":1102}}}],"position":{"start":{"line":67,"column":3,"offset":1053},"end":{"line":67,"column":52,"offset":1102}}},{"type":"text","value":"\n"}],"position":{"start":{"line":66,"column":3,"offset":1023},"end":{"line":67,"column":52,"offset":1102}}},{"type":"text","value":"\n"}],"position":{"start":{"line":65,"column":1,"offset":1001},"end":{"line":67,"column":52,"offset":1102}}},{"type":"text","value":"\n"}],"position":{"start":{"line":65,"column":1,"offset":1001},"end":{"line":67,"column":52,"offset":1102}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" parser和 transforms ","position":{"start":{"line":69,"column":1,"offset":1104},"end":{"line":69,"column":21,"offset":1124}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/l7/source","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"见source文档","position":{"start":{"line":69,"column":22,"offset":1125},"end":{"line":69,"column":31,"offset":1134}}}],"position":{"start":{"line":69,"column":21,"offset":1124},"end":{"line":69,"column":70,"offset":1173}}}],"position":{"start":{"line":69,"column":1,"offset":1104},"end":{"line":69,"column":70,"offset":1173}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
","position":{"start":{"line":71,"column":1,"offset":1175},"end":{"line":99,"column":4,"offset":1746}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":""},"children":[{"type":"element","tagName":"a","properties":{"href":"#","aria-label":" permalink","class":"anchor"},"children":[{"type":"raw","value":""}]}],"position":{"start":{"line":101,"column":1,"offset":1748},"end":{"line":101,"column":5,"offset":1752}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"scale"},"children":[{"type":"element","tagName":"a","properties":{"href":"#scale","aria-label":"scale permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"scale","position":{"start":{"line":103,"column":5,"offset":1758},"end":{"line":103,"column":10,"offset":1763}}}],"position":{"start":{"line":103,"column":1,"offset":1754},"end":{"line":103,"column":10,"offset":1763}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"cscle('field', scaleConfig)","position":{"start":{"line":106,"column":1,"offset":1766},"end":{"line":106,"column":28,"offset":1793}}}],"position":{"start":{"line":106,"column":1,"offset":1766},"end":{"line":106,"column":28,"offset":1793}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"(field: string, scaleConfig: object)","position":{"start":{"line":108,"column":1,"offset":1795},"end":{"line":108,"column":37,"offset":1831}}}],"position":{"start":{"line":108,"column":1,"offset":1795},"end":{"line":108,"column":37,"offset":1831}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为指定的数据字段进行列定义，返回 layer 实例。","position":{"start":{"line":110,"column":1,"offset":1833},"end":{"line":110,"column":27,"offset":1859}}}],"position":{"start":{"line":110,"column":1,"offset":1833},"end":{"line":110,"column":27,"offset":1859}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"field","position":{"start":{"line":114,"column":3,"offset":1865},"end":{"line":114,"column":10,"offset":1872}}},{"type":"text","value":" 字段名。","position":{"start":{"line":114,"column":10,"offset":1872},"end":{"line":114,"column":15,"offset":1877}}}],"position":{"start":{"line":114,"column":1,"offset":1863},"end":{"line":115,"column":1,"offset":1878}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"scaleConfig","position":{"start":{"line":116,"column":3,"offset":1881},"end":{"line":116,"column":16,"offset":1894}}},{"type":"text","value":" 列定义配置，对象类型，可配置的属性如下：","position":{"start":{"line":116,"column":16,"offset":1894},"end":{"line":116,"column":37,"offset":1915}}}],"position":{"start":{"line":116,"column":1,"offset":1879},"end":{"line":116,"column":37,"offset":1915}}},{"type":"text","value":"\n"}],"position":{"start":{"line":114,"column":1,"offset":1863},"end":{"line":116,"column":37,"offset":1915}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
","position":{"start":{"line":118,"column":1,"offset":1917},"end":{"line":123,"column":4,"offset":2035}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"size"},"children":[{"type":"element","tagName":"a","properties":{"href":"#size","aria-label":"size permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size","position":{"start":{"line":125,"column":5,"offset":2041},"end":{"line":125,"column":9,"offset":2045}}}],"position":{"start":{"line":125,"column":1,"offset":2037},"end":{"line":125,"column":9,"offset":2045}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将数据值映射到图形的大小上的方法。","position":{"start":{"line":127,"column":1,"offset":2047},"end":{"line":127,"column":18,"offset":2064}}}],"position":{"start":{"line":127,"column":1,"offset":2047},"end":{"line":127,"column":18,"offset":2064}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"注意：","position":{"start":{"line":129,"column":3,"offset":2068},"end":{"line":129,"column":6,"offset":2071}}}],"position":{"start":{"line":129,"column":1,"offset":2066},"end":{"line":129,"column":8,"offset":2073}}},{"type":"text","value":" ","position":{"start":{"line":129,"column":8,"offset":2073},"end":{"line":129,"column":9,"offset":2074}}}],"position":{"start":{"line":129,"column":1,"offset":2066},"end":{"line":129,"column":9,"offset":2074}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"不同图层的 size 的含义有所差别：","position":{"start":{"line":131,"column":1,"offset":2076},"end":{"line":131,"column":20,"offset":2095}}}],"position":{"start":{"line":131,"column":1,"offset":2076},"end":{"line":131,"column":20,"offset":2095}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"point 图形的 size 影响点的半径大小和高度；","position":{"start":{"line":133,"column":3,"offset":2099},"end":{"line":133,"column":30,"offset":2126}}}],"position":{"start":{"line":133,"column":1,"offset":2097},"end":{"line":134,"column":1,"offset":2127}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"line, arc, path 中的 size 影响线的粗细,和高度；","position":{"start":{"line":135,"column":3,"offset":2130},"end":{"line":135,"column":38,"offset":2165}}}],"position":{"start":{"line":135,"column":1,"offset":2128},"end":{"line":136,"column":1,"offset":2166}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"polygon size 影响的是高度","position":{"start":{"line":137,"column":3,"offset":2169},"end":{"line":137,"column":22,"offset":2188}}}],"position":{"start":{"line":137,"column":1,"offset":2167},"end":{"line":137,"column":22,"offset":2188}}},{"type":"text","value":"\n"}],"position":{"start":{"line":133,"column":1,"offset":2097},"end":{"line":137,"column":22,"offset":2188}}},{"type":"text","value":"\n"},{"type":"raw","value":"
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
","position":{"start":{"line":141,"column":1,"offset":2192},"end":{"line":151,"column":4,"offset":2434}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"sizevalue）"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sizevalue%EF%BC%89","aria-label":"sizevalue） permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size(value）","position":{"start":{"line":154,"column":6,"offset":2442},"end":{"line":154,"column":17,"offset":2453}}}],"position":{"start":{"line":154,"column":1,"offset":2437},"end":{"line":154,"column":17,"offset":2453}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"传入数字常量，如 ","position":{"start":{"line":156,"column":1,"offset":2455},"end":{"line":156,"column":10,"offset":2464}}},{"type":"raw","value":"pointLayer.size(20)","position":{"start":{"line":156,"column":10,"offset":2464},"end":{"line":156,"column":31,"offset":2485}}}],"position":{"start":{"line":156,"column":1,"offset":2455},"end":{"line":156,"column":31,"offset":2485}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"sizefield"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sizefield","aria-label":"sizefield permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size(field)","position":{"start":{"line":158,"column":6,"offset":2492},"end":{"line":158,"column":17,"offset":2503}}}],"position":{"start":{"line":158,"column":1,"offset":2487},"end":{"line":158,"column":17,"offset":2503}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"根据 field 字段的值映射大小，使用默认的","position":{"start":{"line":159,"column":1,"offset":2504},"end":{"line":159,"column":24,"offset":2527}}},{"type":"raw","value":"最大值 max:10","position":{"start":{"line":159,"column":24,"offset":2527},"end":{"line":159,"column":36,"offset":2539}}},{"type":"text","value":" 和","position":{"start":{"line":159,"column":36,"offset":2539},"end":{"line":159,"column":38,"offset":2541}}},{"type":"raw","value":"最小值 min: 1","position":{"start":{"line":159,"column":38,"offset":2541},"end":{"line":159,"column":50,"offset":2553}}},{"type":"text","value":"。","position":{"start":{"line":159,"column":50,"offset":2553},"end":{"line":159,"column":51,"offset":2554}}}],"position":{"start":{"line":159,"column":1,"offset":2504},"end":{"line":159,"column":51,"offset":2554}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"sizefield-callback"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sizefield-callback","aria-label":"sizefield callback permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size(field, callback)","position":{"start":{"line":161,"column":6,"offset":2561},"end":{"line":161,"column":27,"offset":2582}}}],"position":{"start":{"line":161,"column":1,"offset":2556},"end":{"line":161,"column":27,"offset":2582}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"使用回调函数控制图形大小。","position":{"start":{"line":162,"column":1,"offset":2583},"end":{"line":162,"column":14,"offset":2596}}}],"position":{"start":{"line":162,"column":1,"offset":2583},"end":{"line":162,"column":14,"offset":2596}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"callback","position":{"start":{"line":164,"column":3,"offset":2600},"end":{"line":164,"column":13,"offset":2610}}},{"type":"text","value":": function 回调函数。","position":{"start":{"line":164,"column":13,"offset":2610},"end":{"line":164,"column":29,"offset":2626}}}],"position":{"start":{"line":164,"column":1,"offset":2598},"end":{"line":164,"column":29,"offset":2626}}},{"type":"text","value":"\n"}],"position":{"start":{"line":164,"column":1,"offset":2598},"end":{"line":164,"column":29,"offset":2626}}},{"type":"text","value":"\n"},{"type":"raw","value":"
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
","position":{"start":{"line":166,"column":1,"offset":2628},"end":{"line":173,"column":4,"offset":2736}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"color"},"children":[{"type":"element","tagName":"a","properties":{"href":"#color","aria-label":"color permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"color","position":{"start":{"line":175,"column":5,"offset":2742},"end":{"line":175,"column":10,"offset":2747}}}],"position":{"start":{"line":175,"column":1,"offset":2738},"end":{"line":175,"column":10,"offset":2747}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将数据值映射到图形的颜色上的方法。","position":{"start":{"line":177,"column":1,"offset":2749},"end":{"line":177,"column":18,"offset":2766}}}],"position":{"start":{"line":177,"column":1,"offset":2749},"end":{"line":177,"column":18,"offset":2766}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
","position":{"start":{"line":179,"column":1,"offset":2768},"end":{"line":195,"column":4,"offset":3152}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"colorvalue"},"children":[{"type":"element","tagName":"a","properties":{"href":"#colorvalue","aria-label":"colorvalue permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"color(value)","position":{"start":{"line":198,"column":6,"offset":3160},"end":{"line":198,"column":18,"offset":3172}}}],"position":{"start":{"line":198,"column":1,"offset":3155},"end":{"line":198,"column":18,"offset":3172}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":201,"column":1,"offset":3175},"end":{"line":201,"column":4,"offset":3178}}},{"type":"raw","value":"value","position":{"start":{"line":201,"column":4,"offset":3178},"end":{"line":201,"column":11,"offset":3185}}},{"type":"text","value":" ：string\n只支持接收一个参数，value 可以是：","position":{"start":{"line":201,"column":11,"offset":3185},"end":{"line":202,"column":21,"offset":3214}}}],"position":{"start":{"line":201,"column":1,"offset":3175},"end":{"line":202,"column":21,"offset":3214}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。","position":{"start":{"line":204,"column":3,"offset":3218},"end":{"line":204,"column":64,"offset":3279}}}],"position":{"start":{"line":204,"column":1,"offset":3216},"end":{"line":205,"column":1,"offset":3280}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。","position":{"start":{"line":206,"column":3,"offset":3283},"end":{"line":206,"column":80,"offset":3360}}}],"position":{"start":{"line":206,"column":1,"offset":3281},"end":{"line":206,"column":80,"offset":3360}}},{"type":"text","value":"\n"}],"position":{"start":{"line":204,"column":1,"offset":3216},"end":{"line":206,"column":80,"offset":3360}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"示例","position":{"start":{"line":209,"column":1,"offset":3363},"end":{"line":209,"column":3,"offset":3365}}}],"position":{"start":{"line":209,"column":1,"offset":3363},"end":{"line":209,"column":3,"offset":3365}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
","position":{"start":{"line":210,"column":1,"offset":3366},"end":{"line":213,"column":4,"offset":3442}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"colorfield-colors"},"children":[{"type":"element","tagName":"a","properties":{"href":"#colorfield-colors","aria-label":"colorfield colors permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"color(field, colors)","position":{"start":{"line":216,"column":6,"offset":3450},"end":{"line":216,"column":26,"offset":3470}}}],"position":{"start":{"line":216,"column":1,"offset":3445},"end":{"line":216,"column":26,"offset":3470}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":218,"column":1,"offset":3472},"end":{"line":218,"column":4,"offset":3475}}}],"position":{"start":{"line":218,"column":1,"offset":3472},"end":{"line":218,"column":4,"offset":3475}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"field","position":{"start":{"line":220,"column":3,"offset":3479},"end":{"line":220,"column":10,"offset":3486}}},{"type":"text","value":": stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。","position":{"start":{"line":220,"column":10,"offset":3486},"end":{"line":220,"column":50,"offset":3526}}}],"position":{"start":{"line":220,"column":1,"offset":3477},"end":{"line":221,"column":1,"offset":3527}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" ","position":{"start":{"line":222,"column":3,"offset":3530},"end":{"line":222,"column":4,"offset":3531}}},{"type":"raw","value":"colors","position":{"start":{"line":222,"column":4,"offset":3531},"end":{"line":222,"column":12,"offset":3539}}},{"type":"text","value":": string | array | function","position":{"start":{"line":222,"column":12,"offset":3539},"end":{"line":222,"column":39,"offset":3566}}}],"position":{"start":{"line":222,"column":1,"offset":3528},"end":{"line":222,"column":39,"offset":3566}}},{"type":"text","value":"\n"}],"position":{"start":{"line":220,"column":1,"offset":3477},"end":{"line":222,"column":39,"offset":3566}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。","position":{"start":{"line":225,"column":1,"offset":3569},"end":{"line":225,"column":94,"offset":3662}}}],"position":{"start":{"line":225,"column":1,"offset":3569},"end":{"line":225,"column":94,"offset":3662}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
","position":{"start":{"line":227,"column":1,"offset":3664},"end":{"line":230,"column":4,"offset":3766}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：","position":{"start":{"line":232,"column":3,"offset":3770},"end":{"line":232,"column":74,"offset":3841}}}],"position":{"start":{"line":232,"column":1,"offset":3768},"end":{"line":232,"column":74,"offset":3841}}},{"type":"text","value":"\n"}],"position":{"start":{"line":232,"column":1,"offset":3768},"end":{"line":232,"column":74,"offset":3841}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
","position":{"start":{"line":236,"column":1,"offset":3845},"end":{"line":249,"column":4,"offset":4084}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"shape"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shape","aria-label":"shape permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"shape","position":{"start":{"line":251,"column":5,"offset":4090},"end":{"line":251,"column":10,"offset":4095}}}],"position":{"start":{"line":251,"column":1,"offset":4086},"end":{"line":251,"column":10,"offset":4095}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将数据值映射到图形的形状上的方法。","position":{"start":{"line":252,"column":1,"offset":4096},"end":{"line":252,"column":18,"offset":4113}}}],"position":{"start":{"line":252,"column":1,"offset":4096},"end":{"line":252,"column":18,"offset":4113}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"shape(shape)","position":{"start":{"line":254,"column":3,"offset":4117},"end":{"line":254,"column":15,"offset":4129}}}],"position":{"start":{"line":254,"column":1,"offset":4115},"end":{"line":254,"column":17,"offset":4131}}}],"position":{"start":{"line":254,"column":1,"offset":4115},"end":{"line":254,"column":17,"offset":4131}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":256,"column":1,"offset":4133},"end":{"line":256,"column":3,"offset":4135}}},{"type":"raw","value":"shape","position":{"start":{"line":256,"column":3,"offset":4135},"end":{"line":256,"column":10,"offset":4142}}},{"type":"text","value":" string","position":{"start":{"line":256,"column":10,"offset":4142},"end":{"line":256,"column":17,"offset":4149}}}],"position":{"start":{"line":256,"column":1,"offset":4133},"end":{"line":256,"column":17,"offset":4149}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状","position":{"start":{"line":258,"column":1,"offset":4151},"end":{"line":258,"column":55,"offset":4205}}}],"position":{"start":{"line":258,"column":1,"offset":4151},"end":{"line":258,"column":55,"offset":4205}}},{"type":"text","value":"\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"thead","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"layer类型","position":{"start":{"line":260,"column":3,"offset":4209},"end":{"line":260,"column":10,"offset":4216}}}],"position":{"start":{"line":260,"column":3,"offset":4209},"end":{"line":260,"column":10,"offset":4216}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"shape类型","position":{"start":{"line":260,"column":13,"offset":4219},"end":{"line":260,"column":20,"offset":4226}}}],"position":{"start":{"line":260,"column":13,"offset":4219},"end":{"line":260,"column":20,"offset":4226}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"备注","position":{"start":{"line":260,"column":23,"offset":4229},"end":{"line":260,"column":25,"offset":4231}}}],"position":{"start":{"line":260,"column":23,"offset":4229},"end":{"line":260,"column":25,"offset":4231}}},{"type":"text","value":"\n"}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":260,"column":27,"offset":4233}}},{"type":"text","value":"\n"}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":260,"column":27,"offset":4233}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"point","position":{"start":{"line":262,"column":3,"offset":4256},"end":{"line":262,"column":8,"offset":4261}}}],"position":{"start":{"line":262,"column":3,"offset":4256},"end":{"line":262,"column":8,"offset":4261}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square","position":{"start":{"line":262,"column":11,"offset":4264},"end":{"line":262,"column":97,"offset":4350}}}],"position":{"start":{"line":262,"column":11,"offset":4264},"end":{"line":262,"column":97,"offset":4350}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[],"position":{"start":{"line":262,"column":101,"offset":4354},"end":{"line":262,"column":101,"offset":4354}}},{"type":"text","value":"\n"}],"position":{"start":{"line":262,"column":1,"offset":4254},"end":{"line":262,"column":102,"offset":4355}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"line","position":{"start":{"line":263,"column":3,"offset":4358},"end":{"line":263,"column":7,"offset":4362}}}],"position":{"start":{"line":263,"column":3,"offset":4358},"end":{"line":263,"column":7,"offset":4362}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"line,arc, arc3d, greatcircle","position":{"start":{"line":263,"column":10,"offset":4365},"end":{"line":263,"column":38,"offset":4393}}}],"position":{"start":{"line":263,"column":10,"offset":4365},"end":{"line":263,"column":38,"offset":4393}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[],"position":{"start":{"line":263,"column":42,"offset":4397},"end":{"line":263,"column":42,"offset":4397}}},{"type":"text","value":"\n"}],"position":{"start":{"line":263,"column":1,"offset":4356},"end":{"line":263,"column":43,"offset":4398}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"polygon","position":{"start":{"line":264,"column":3,"offset":4401},"end":{"line":264,"column":10,"offset":4408}}}],"position":{"start":{"line":264,"column":3,"offset":4401},"end":{"line":264,"column":10,"offset":4408}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"fill,line, extrude","position":{"start":{"line":264,"column":13,"offset":4411},"end":{"line":264,"column":31,"offset":4429}}}],"position":{"start":{"line":264,"column":13,"offset":4411},"end":{"line":264,"column":31,"offset":4429}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[],"position":{"start":{"line":264,"column":35,"offset":4433},"end":{"line":264,"column":35,"offset":4433}}},{"type":"text","value":"\n"}],"position":{"start":{"line":264,"column":1,"offset":4399},"end":{"line":264,"column":36,"offset":4434}}},{"type":"text","value":"\n"}],"position":{"start":{"line":262,"column":1,"offset":4254},"end":{"line":264,"column":36,"offset":4434}}},{"type":"text","value":"\n"}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":264,"column":36,"offset":4434}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"shape(field, shapes)","position":{"start":{"line":267,"column":3,"offset":4439},"end":{"line":267,"column":23,"offset":4459}}}],"position":{"start":{"line":267,"column":1,"offset":4437},"end":{"line":267,"column":25,"offset":4461}}}],"position":{"start":{"line":267,"column":1,"offset":4437},"end":{"line":267,"column":25,"offset":4461}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"shape(field, callback)","position":{"start":{"line":269,"column":3,"offset":4465},"end":{"line":269,"column":25,"offset":4487}}}],"position":{"start":{"line":269,"column":1,"offset":4463},"end":{"line":269,"column":27,"offset":4489}}}],"position":{"start":{"line":269,"column":1,"offset":4463},"end":{"line":269,"column":27,"offset":4489}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"style"},"children":[{"type":"element","tagName":"a","properties":{"href":"#style","aria-label":"style permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"style","position":{"start":{"line":272,"column":5,"offset":4496},"end":{"line":272,"column":10,"offset":4501}}}],"position":{"start":{"line":272,"column":1,"offset":4492},"end":{"line":272,"column":10,"offset":4501}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放","position":{"start":{"line":274,"column":1,"offset":4503},"end":{"line":274,"column":32,"offset":4534}}}],"position":{"start":{"line":274,"column":1,"offset":4503},"end":{"line":274,"column":32,"offset":4534}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"fill","position":{"start":{"line":276,"column":3,"offset":4538},"end":{"line":276,"column":7,"offset":4542}}}],"position":{"start":{"line":276,"column":1,"offset":4536},"end":{"line":277,"column":1,"offset":4543}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"opacity  设置透明度","position":{"start":{"line":278,"column":3,"offset":4546},"end":{"line":278,"column":17,"offset":4560}}}],"position":{"start":{"line":278,"column":1,"offset":4544},"end":{"line":279,"column":1,"offset":4561}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"stroke 线填充颜色","position":{"start":{"line":280,"column":3,"offset":4564},"end":{"line":280,"column":16,"offset":4577}}}],"position":{"start":{"line":280,"column":1,"offset":4562},"end":{"line":281,"column":1,"offset":4578}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"strokeWidth 线的宽度","position":{"start":{"line":282,"column":3,"offset":4581},"end":{"line":282,"column":19,"offset":4597}}}],"position":{"start":{"line":282,"column":1,"offset":4579},"end":{"line":282,"column":19,"offset":4597}}},{"type":"text","value":"\n"}],"position":{"start":{"line":276,"column":1,"offset":4536},"end":{"line":282,"column":19,"offset":4597}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
","position":{"start":{"line":285,"column":1,"offset":4600},"end":{"line":291,"column":4,"offset":4686}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"show"},"children":[{"type":"element","tagName":"a","properties":{"href":"#show","aria-label":"show permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"show","position":{"start":{"line":294,"column":5,"offset":4693},"end":{"line":294,"column":9,"offset":4697}}}],"position":{"start":{"line":294,"column":1,"offset":4689},"end":{"line":294,"column":9,"offset":4697}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层显示","position":{"start":{"line":295,"column":1,"offset":4698},"end":{"line":295,"column":5,"offset":4702}}}],"position":{"start":{"line":295,"column":1,"offset":4698},"end":{"line":295,"column":5,"offset":4702}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.show();\n
","position":{"start":{"line":297,"column":1,"offset":4704},"end":{"line":299,"column":4,"offset":4735}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"hide"},"children":[{"type":"element","tagName":"a","properties":{"href":"#hide","aria-label":"hide permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"hide","position":{"start":{"line":302,"column":5,"offset":4742},"end":{"line":302,"column":9,"offset":4746}}}],"position":{"start":{"line":302,"column":1,"offset":4738},"end":{"line":302,"column":9,"offset":4746}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层隐藏","position":{"start":{"line":304,"column":1,"offset":4748},"end":{"line":304,"column":5,"offset":4752}}}],"position":{"start":{"line":304,"column":1,"offset":4748},"end":{"line":304,"column":5,"offset":4752}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.hide();\n
","position":{"start":{"line":306,"column":1,"offset":4754},"end":{"line":308,"column":4,"offset":4785}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"fitbounds"},"children":[{"type":"element","tagName":"a","properties":{"href":"#fitbounds","aria-label":"fitbounds permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"fitBounds","position":{"start":{"line":311,"column":5,"offset":4792},"end":{"line":311,"column":14,"offset":4801}}}],"position":{"start":{"line":311,"column":1,"offset":4788},"end":{"line":311,"column":14,"offset":4801}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"缩放到图层范围","position":{"start":{"line":313,"column":1,"offset":4803},"end":{"line":313,"column":8,"offset":4810}}}],"position":{"start":{"line":313,"column":1,"offset":4803},"end":{"line":313,"column":8,"offset":4810}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.fitBounds();\n
","position":{"start":{"line":315,"column":1,"offset":4812},"end":{"line":318,"column":4,"offset":4848}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":318,"column":4,"offset":4848}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-467a33803a7960be8c3b425890ce4ce2.json b/.cache/caches/gatsby-transformer-remark/diskstore-467a33803a7960be8c3b425890ce4ce2.json deleted file mode 100644 index b5f66adeab..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-467a33803a7960be8c3b425890ce4ce2.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-1294fb759b9f52825afbf490561c7d81-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-475842551b9a1376ef658947ba966614.json b/.cache/caches/gatsby-transformer-remark/diskstore-475842551b9a1376ef658947ba966614.json deleted file mode 100644 index 96cd38c53f..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-475842551b9a1376ef658947ba966614.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-7e48b5323892c7cf647cf8590e3a5578-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-478d1b78316726d21ab36757fea8f8fd.json b/.cache/caches/gatsby-transformer-remark/diskstore-478d1b78316726d21ab36757fea8f8fd.json deleted file mode 100644 index 814a4d61a6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-478d1b78316726d21ab36757fea8f8fd.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-6568f22928a964a9957c4e79f5b8594d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"数据"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%95%B0%E6%8D%AE","aria-label":"数据 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"数据","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":6,"offset":6}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":6,"offset":6}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"目前L7支持的数据格式有GeoJson,CSV,JSon Image","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42}}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON 支持点、线、面，等所有的空间数据格式。","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":28,"offset":71}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":28,"offset":71},"end":{"line":6,"column":34,"offset":77}}},{"type":"text","value":"CSV 支持，点，线段，弧线的支持。","position":{"start":{"line":6,"column":34,"offset":77},"end":{"line":6,"column":52,"offset":95}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":52,"offset":95},"end":{"line":6,"column":58,"offset":101}}},{"type":"text","value":"JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。","position":{"start":{"line":6,"column":58,"offset":101},"end":{"line":6,"column":91,"offset":134}}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":91,"offset":134}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"geojson"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson","aria-label":"geojson permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"GeoJSON","position":{"start":{"line":9,"column":4,"offset":140},"end":{"line":9,"column":11,"offset":147}}}],"position":{"start":{"line":9,"column":1,"offset":137},"end":{"line":9,"column":11,"offset":147}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276}}}],"position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276}}},{"type":"text","value":"\n"}],"position":{"start":{"line":11,"column":1,"offset":149},"end":{"line":11,"column":128,"offset":276}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
","position":{"start":{"line":15,"column":1,"offset":280},"end":{"line":52,"column":4,"offset":980}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"地理统计分析工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7","aria-label":"地理统计分析工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":54,"column":4,"offset":985},"end":{"line":54,"column":12,"offset":993}}}],"position":{"start":{"line":54,"column":1,"offset":982},"end":{"line":54,"column":12,"offset":993}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://turfjs.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"turfjs","position":{"start":{"line":55,"column":2,"offset":995},"end":{"line":55,"column":8,"offset":1001}}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":29,"offset":1022}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":55,"column":29,"offset":1022},"end":{"line":55,"column":60,"offset":1053}}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":60,"offset":1053}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"在线工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7","aria-label":"在线工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"在线工具","position":{"start":{"line":57,"column":4,"offset":1058},"end":{"line":57,"column":8,"offset":1062}}}],"position":{"start":{"line":57,"column":1,"offset":1055},"end":{"line":57,"column":8,"offset":1062}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://geojson.io/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":59,"column":2,"offset":1065},"end":{"line":59,"column":20,"offset":1083}}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":41,"offset":1104}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":59,"column":41,"offset":1104},"end":{"line":59,"column":66,"offset":1129}}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":66,"offset":1129}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://mapshaper.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":61,"column":2,"offset":1132},"end":{"line":61,"column":24,"offset":1154}}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":49,"offset":1179}}},{"type":"text","value":"  可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":61,"column":49,"offset":1179},"end":{"line":61,"column":80,"offset":1210}}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":80,"offset":1210}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"数据资源"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%95%B0%E6%8D%AE%E8%B5%84%E6%BA%90","aria-label":"数据资源 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"数据资源","position":{"start":{"line":63,"column":4,"offset":1215},"end":{"line":63,"column":8,"offset":1219}}}],"position":{"start":{"line":63,"column":1,"offset":1212},"end":{"line":63,"column":8,"offset":1219}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"全国行政区划边界"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%A8%E5%9B%BD%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E8%BE%B9%E7%95%8C","aria-label":"全国行政区划边界 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"全国行政区划边界 ","position":{"start":{"line":65,"column":6,"offset":1226},"end":{"line":65,"column":15,"offset":1235}}}],"position":{"start":{"line":65,"column":1,"offset":1221},"end":{"line":65,"column":15,"offset":1235}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"支持 geojson, svg下载","position":{"start":{"line":66,"column":2,"offset":1237},"end":{"line":66,"column":19,"offset":1254}}}],"position":{"start":{"line":66,"column":1,"offset":1236},"end":{"line":66,"column":111,"offset":1346}}}],"position":{"start":{"line":66,"column":1,"offset":1236},"end":{"line":66,"column":111,"offset":1346}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"highcharts-全球行政区划数据集"},"children":[{"type":"element","tagName":"a","properties":{"href":"#highcharts-%E5%85%A8%E7%90%83%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E6%95%B0%E6%8D%AE%E9%9B%86","aria-label":"highcharts 全球行政区划数据集 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"HighCharts 全球行政区划数据集","position":{"start":{"line":68,"column":6,"offset":1353},"end":{"line":68,"column":26,"offset":1373}}}],"position":{"start":{"line":68,"column":1,"offset":1348},"end":{"line":68,"column":26,"offset":1373}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://img.hcharts.cn/mapdata/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://img.hcharts.cn/mapdata/","position":{"start":{"line":70,"column":2,"offset":1376},"end":{"line":70,"column":33,"offset":1407}}}],"position":{"start":{"line":70,"column":1,"offset":1375},"end":{"line":70,"column":67,"offset":1441}}}],"position":{"start":{"line":70,"column":1,"offset":1375},"end":{"line":70,"column":67,"offset":1441}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":71,"column":1,"offset":1442}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-47e2d6734e6cf247f8ce6daf79134cd9.json b/.cache/caches/gatsby-transformer-remark/diskstore-47e2d6734e6cf247f8ce6daf79134cd9.json deleted file mode 100644 index e4f9a31746..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-47e2d6734e6cf247f8ce6daf79134cd9.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-eba8b84d14733129a7322c61766f8482-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-48034bf28fdf79498c216b1f2f461ff7.json b/.cache/caches/gatsby-transformer-remark/diskstore-48034bf28fdf79498c216b1f2f461ff7.json deleted file mode 100644 index bba09de466..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-48034bf28fdf79498c216b1f2f461ff7.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-3b51eb4af3d4a5698e9dc244ba9364a5-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-48b5dc002ce7e5c70ae394a1e8409341.json b/.cache/caches/gatsby-transformer-remark/diskstore-48b5dc002ce7e5c70ae394a1e8409341.json deleted file mode 100644 index 520584cf50..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-48b5dc002ce7e5c70ae394a1e8409341.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-29a5b349a805dbe1712ced55842139a3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-4ccbf7cbd8380afcf1209da075b4ab9f.json b/.cache/caches/gatsby-transformer-remark/diskstore-4ccbf7cbd8380afcf1209da075b4ab9f.json deleted file mode 100644 index 1a065a58d2..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-4ccbf7cbd8380afcf1209da075b4ab9f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-97fa88c11aed2c1192f7b349cbb69969-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"pointlayer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pointlayer","aria-label":"pointlayer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"PointLayer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":13,"offset":12}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":13,"offset":12}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":4,"column":4,"offset":18},"end":{"line":4,"column":6,"offset":20}}}],"position":{"start":{"line":4,"column":1,"offset":15},"end":{"line":4,"column":6,"offset":20}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。","position":{"start":{"line":5,"column":1,"offset":21},"end":{"line":5,"column":37,"offset":57}}}],"position":{"start":{"line":5,"column":1,"offset":21},"end":{"line":5,"column":37,"offset":57}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"shape 支持","position":{"start":{"line":7,"column":1,"offset":59},"end":{"line":7,"column":9,"offset":67}}}],"position":{"start":{"line":7,"column":1,"offset":59},"end":{"line":7,"column":9,"offset":67}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"3D类型 柱图","position":{"start":{"line":9,"column":3,"offset":71},"end":{"line":9,"column":10,"offset":78}}}],"position":{"start":{"line":9,"column":1,"offset":69},"end":{"line":9,"column":12,"offset":80}}}],"position":{"start":{"line":9,"column":1,"offset":69},"end":{"line":9,"column":12,"offset":80}}},{"type":"text","value":"\n"},{"type":"raw","value":"
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
","position":{"start":{"line":11,"column":1,"offset":82},"end":{"line":14,"column":4,"offset":152}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2D 符号图","position":{"start":{"line":16,"column":3,"offset":156},"end":{"line":16,"column":9,"offset":162}}}],"position":{"start":{"line":16,"column":1,"offset":154},"end":{"line":16,"column":11,"offset":164}}}],"position":{"start":{"line":16,"column":1,"offset":154},"end":{"line":16,"column":11,"offset":164}}},{"type":"text","value":"\n"},{"type":"raw","value":"
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
","position":{"start":{"line":18,"column":1,"offset":166},"end":{"line":21,"column":4,"offset":275}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"图片标注","position":{"start":{"line":23,"column":3,"offset":279},"end":{"line":23,"column":7,"offset":283}}}],"position":{"start":{"line":23,"column":1,"offset":277},"end":{"line":23,"column":9,"offset":285}}}],"position":{"start":{"line":23,"column":1,"offset":277},"end":{"line":23,"column":9,"offset":285}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"通过 ","position":{"start":{"line":25,"column":1,"offset":287},"end":{"line":25,"column":4,"offset":290}}},{"type":"raw","value":"Scene.addImage()","position":{"start":{"line":25,"column":4,"offset":290},"end":{"line":25,"column":26,"offset":312}}},{"type":"text","value":" 可以添加图片资源， ","position":{"start":{"line":25,"column":26,"offset":312},"end":{"line":25,"column":37,"offset":323}}}],"position":{"start":{"line":25,"column":1,"offset":287},"end":{"line":25,"column":37,"offset":323}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"代码示例"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B","aria-label":"代码示例 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"代码示例","position":{"start":{"line":28,"column":5,"offset":330},"end":{"line":28,"column":9,"offset":334}}}],"position":{"start":{"line":28,"column":1,"offset":326},"end":{"line":28,"column":9,"offset":334}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"基本图形显示示例"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9F%BA%E6%9C%AC%E5%9B%BE%E5%BD%A2%E6%98%BE%E7%A4%BA%E7%A4%BA%E4%BE%8B","aria-label":"基本图形显示示例 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"基本图形显示示例","position":{"start":{"line":31,"column":6,"offset":342},"end":{"line":31,"column":14,"offset":350}}}],"position":{"start":{"line":31,"column":1,"offset":337},"end":{"line":31,"column":14,"offset":350}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
","position":{"start":{"line":33,"column":1,"offset":352},"end":{"line":50,"column":4,"offset":727}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"符号图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AC%A6%E5%8F%B7%E5%9B%BE","aria-label":"符号图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"符号图","position":{"start":{"line":53,"column":6,"offset":735},"end":{"line":53,"column":9,"offset":738}}}],"position":{"start":{"line":53,"column":1,"offset":730},"end":{"line":53,"column":9,"offset":738}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"使用图片添加地图标注","position":{"start":{"line":55,"column":1,"offset":740},"end":{"line":55,"column":11,"offset":750}}}],"position":{"start":{"line":55,"column":1,"offset":740},"end":{"line":55,"column":11,"offset":750}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","position":{"start":{"line":57,"column":1,"offset":752},"end":{"line":70,"column":4,"offset":1002}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":74,"column":1,"offset":1006}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-4d1d5b85fbf649633e413f6287473ab0.json b/.cache/caches/gatsby-transformer-remark/diskstore-4d1d5b85fbf649633e413f6287473ab0.json deleted file mode 100644 index a976dc0d6b..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-4d1d5b85fbf649633e413f6287473ab0.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-4ddb72039f738ffb6fc8c7ca02770db1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-4ffe61e5b866c9b420f4061082451649.json b/.cache/caches/gatsby-transformer-remark/diskstore-4ffe61e5b866c9b420f4061082451649.json deleted file mode 100644 index 2eb04cb2bf..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-4ffe61e5b866c9b420f4061082451649.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-97fa88c11aed2c1192f7b349cbb69969-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-51a6740352207ea950e8e7277d56e32e.json b/.cache/caches/gatsby-transformer-remark/diskstore-51a6740352207ea950e8e7277d56e32e.json deleted file mode 100644 index 026f13c293..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-51a6740352207ea950e8e7277d56e32e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-8ba6e770aca269ce1a09e219ea919f44-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-5249205242ae6d5fe1f8ccbc55da3449.json b/.cache/caches/gatsby-transformer-remark/diskstore-5249205242ae6d5fe1f8ccbc55da3449.json deleted file mode 100644 index 01611212f8..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-5249205242ae6d5fe1f8ccbc55da3449.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-29a5b349a805dbe1712ced55842139a3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":52,"offset":51},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":52,"offset":51},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":52,"offset":51}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-52fc7672b0ccd1d5f23fca0aa72bd802.json b/.cache/caches/gatsby-transformer-remark/diskstore-52fc7672b0ccd1d5f23fca0aa72bd802.json deleted file mode 100644 index c9b5c95c51..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-52fc7672b0ccd1d5f23fca0aa72bd802.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-7bb76714df549123e99e9b48d8d6822f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-53dd33b77e22bc44d15254b6c939ec12.json b/.cache/caches/gatsby-transformer-remark/diskstore-53dd33b77e22bc44d15254b6c939ec12.json deleted file mode 100644 index a390796a04..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-53dd33b77e22bc44d15254b6c939ec12.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-eba8b84d14733129a7322c61766f8482-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-543350a277abbbd58c0094ebb37ef4e7.json b/.cache/caches/gatsby-transformer-remark/diskstore-543350a277abbbd58c0094ebb37ef4e7.json deleted file mode 100644 index e522109049..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-543350a277abbbd58c0094ebb37ef4e7.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-c78275703877b4c8457c7b54e97316df-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"线图层"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%BA%BF%E5%9B%BE%E5%B1%82","aria-label":"线图层 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"线图层","position":{"start":{"line":1,"column":4,"offset":3},"end":{"line":1,"column":7,"offset":6}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":7,"offset":6}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"shape"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shape","aria-label":"shape permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"shape","position":{"start":{"line":3,"column":5,"offset":12},"end":{"line":3,"column":10,"offset":17}}}],"position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":10,"offset":17}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"线图层支持4种 shape","position":{"start":{"line":5,"column":1,"offset":19},"end":{"line":5,"column":14,"offset":32}}}],"position":{"start":{"line":5,"column":1,"offset":19},"end":{"line":5,"column":14,"offset":32}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"line 绘制路径图，","position":{"start":{"line":7,"column":3,"offset":36},"end":{"line":7,"column":14,"offset":47}}}],"position":{"start":{"line":7,"column":1,"offset":34},"end":{"line":7,"column":14,"offset":47}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"arc 绘制弧线 通过贝塞尔曲线算法技术弧线","position":{"start":{"line":8,"column":3,"offset":50},"end":{"line":8,"column":25,"offset":72}}}],"position":{"start":{"line":8,"column":1,"offset":48},"end":{"line":8,"column":25,"offset":72}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线","position":{"start":{"line":9,"column":3,"offset":75},"end":{"line":9,"column":44,"offset":116}}}],"position":{"start":{"line":9,"column":1,"offset":73},"end":{"line":9,"column":44,"offset":116}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"arc3d 3d弧线地图 3D视角","position":{"start":{"line":10,"column":3,"offset":119},"end":{"line":10,"column":21,"offset":137}}}],"position":{"start":{"line":10,"column":1,"offset":117},"end":{"line":10,"column":21,"offset":137}}},{"type":"text","value":"\n"}],"position":{"start":{"line":7,"column":1,"offset":34},"end":{"line":10,"column":21,"offset":137}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️ 弧线只需要设置起始点坐标即可","position":{"start":{"line":12,"column":1,"offset":139},"end":{"line":12,"column":18,"offset":156}}}],"position":{"start":{"line":12,"column":1,"offset":139},"end":{"line":12,"column":18,"offset":156}}},{"type":"text","value":"\n"},{"type":"raw","value":"
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
","position":{"start":{"line":14,"column":1,"offset":158},"end":{"line":25,"column":4,"offset":376}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点","position":{"start":{"line":27,"column":1,"offset":378},"end":{"line":27,"column":46,"offset":423}}}],"position":{"start":{"line":27,"column":1,"offset":378},"end":{"line":27,"column":46,"offset":423}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
","position":{"start":{"line":28,"column":1,"offset":424},"end":{"line":52,"column":4,"offset":798}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"size"},"children":[{"type":"element","tagName":"a","properties":{"href":"#size","aria-label":"size permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size","position":{"start":{"line":54,"column":5,"offset":804},"end":{"line":54,"column":9,"offset":808}}}],"position":{"start":{"line":54,"column":1,"offset":800},"end":{"line":54,"column":9,"offset":808}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"线图层 可以设置高度","position":{"start":{"line":56,"column":1,"offset":810},"end":{"line":56,"column":11,"offset":820}}}],"position":{"start":{"line":56,"column":1,"offset":810},"end":{"line":56,"column":11,"offset":820}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"size 类型为number 则表示 line的宽度","position":{"start":{"line":58,"column":3,"offset":824},"end":{"line":58,"column":29,"offset":850}}}],"position":{"start":{"line":58,"column":1,"offset":822},"end":{"line":58,"column":29,"offset":850}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"size 类型为 ","position":{"start":{"line":59,"column":3,"offset":853},"end":{"line":59,"column":12,"offset":862}}},{"type":"text","value":"[number , number]","position":{"start":{"line":59,"column":13,"offset":863},"end":{"line":59,"column":28,"offset":878}}},{"type":"text","value":" 分别表示宽度和高度","position":{"start":{"line":59,"column":29,"offset":879},"end":{"line":59,"column":39,"offset":889}}}],"position":{"start":{"line":59,"column":1,"offset":851},"end":{"line":59,"column":39,"offset":889}}},{"type":"text","value":"\n"}],"position":{"start":{"line":58,"column":1,"offset":822},"end":{"line":59,"column":39,"offset":889}}},{"type":"text","value":"\n"},{"type":"raw","value":"
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","position":{"start":{"line":61,"column":1,"offset":891},"end":{"line":66,"column":4,"offset":975}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":69,"column":1,"offset":978}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-54ccdaaa5d9ff394f8d64996cc7840d5.json b/.cache/caches/gatsby-transformer-remark/diskstore-54ccdaaa5d9ff394f8d64996cc7840d5.json deleted file mode 100644 index 2215eec8f5..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-54ccdaaa5d9ff394f8d64996cc7840d5.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162511000,"key":"transformer-remark-markdown-html-c4cd085970d775329dc03e58519d79fd-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-553e3a68a2fb575a6eb6c323d2a1503d.json b/.cache/caches/gatsby-transformer-remark/diskstore-553e3a68a2fb575a6eb6c323d2a1503d.json deleted file mode 100644 index 67f608ea69..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-553e3a68a2fb575a6eb6c323d2a1503d.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-7e48b5323892c7cf647cf8590e3a5578-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":58,"offset":57},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":58,"offset":57},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":58,"offset":57}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-58ac9be10b6fd44db3448ef7bf56ed5f.json b/.cache/caches/gatsby-transformer-remark/diskstore-58ac9be10b6fd44db3448ef7bf56ed5f.json deleted file mode 100644 index 010e4eacd2..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-58ac9be10b6fd44db3448ef7bf56ed5f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-89764a64063045f6021242fe828f7bb0-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":41,"offset":40},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":41,"offset":40},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":41,"offset":40}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-596f5f1be2e1a0aad15855597d354598.json b/.cache/caches/gatsby-transformer-remark/diskstore-596f5f1be2e1a0aad15855597d354598.json deleted file mode 100644 index 876979a8fd..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-596f5f1be2e1a0aad15855597d354598.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-63d6f29612923eb1f263a3a7fbc0d504-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-59dd1edd2e388582d826bfa928e2507a.json b/.cache/caches/gatsby-transformer-remark/diskstore-59dd1edd2e388582d826bfa928e2507a.json deleted file mode 100644 index f55410e889..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-59dd1edd2e388582d826bfa928e2507a.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-2703c8487a1fc763376587f66eeacf7d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#geojson-数据介绍","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson 数据介绍 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"geojson 数据介绍","position":{"start":{"line":3,"column":3,"offset":4},"end":{"line":3,"column":15,"offset":16},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":15,"offset":16},"indent":[]},"data":{"id":"geojson-数据介绍","htmlAttributes":{"id":"geojson-数据介绍"},"hProperties":{"id":"geojson-数据介绍"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":6,"column":4,"offset":22},"end":{"line":6,"column":6,"offset":24},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":19},"end":{"line":6,"column":6,"offset":24},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":8,"column":1,"offset":26},"end":{"line":8,"column":126,"offset":151},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":26},"end":{"line":8,"column":126,"offset":151},"indent":[]}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"","children":[{"type":"text","value":"geojson详细文档","position":{"start":{"line":10,"column":2,"offset":154},"end":{"line":10,"column":13,"offset":165},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":153},"end":{"line":10,"column":16,"offset":168},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":153},"end":{"line":10,"column":16,"offset":168},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#geojson相关的js库","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson相关的js库 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Geojson相关的JS库","position":{"start":{"line":12,"column":4,"offset":173},"end":{"line":12,"column":17,"offset":186},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":170},"end":{"line":12,"column":17,"offset":186},"indent":[]},"data":{"id":"geojson相关的js库","htmlAttributes":{"id":"geojson相关的js库"},"hProperties":{"id":"geojson相关的js库"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#地理统计分析工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"地理统计分析工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":14,"column":5,"offset":192},"end":{"line":14,"column":13,"offset":200},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":188},"end":{"line":14,"column":13,"offset":200},"indent":[]},"data":{"id":"地理统计分析工具","htmlAttributes":{"id":"地理统计分析工具"},"hProperties":{"id":"地理统计分析工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://turfjs.org/","children":[{"type":"text","value":"turfjs","position":{"start":{"line":16,"column":2,"offset":203},"end":{"line":16,"column":8,"offset":209},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":202},"end":{"line":16,"column":29,"offset":230},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":16,"column":29,"offset":230},"end":{"line":16,"column":60,"offset":261},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":202},"end":{"line":16,"column":60,"offset":261},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#在线工具：","title":null,"children":[],"data":{"hProperties":{"aria-label":"在线工具： permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"在线工具：","position":{"start":{"line":19,"column":5,"offset":268},"end":{"line":19,"column":10,"offset":273},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":264},"end":{"line":19,"column":10,"offset":273},"indent":[]},"data":{"id":"在线工具：","htmlAttributes":{"id":"在线工具："},"hProperties":{"id":"在线工具："}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://geojson.io/","children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":21,"column":2,"offset":276},"end":{"line":21,"column":20,"offset":294},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":275},"end":{"line":21,"column":41,"offset":315},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":21,"column":41,"offset":315},"end":{"line":21,"column":66,"offset":340},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":275},"end":{"line":21,"column":66,"offset":340},"indent":[]}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://mapshaper.org/","children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":23,"column":2,"offset":343},"end":{"line":23,"column":24,"offset":365},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":342},"end":{"line":23,"column":49,"offset":390},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":23,"column":49,"offset":390},"end":{"line":23,"column":80,"offset":421},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":342},"end":{"line":23,"column":80,"offset":421},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":24,"column":1,"offset":422}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-5acc53684d5352d7bfdc1ca0fb8c3225.json b/.cache/caches/gatsby-transformer-remark/diskstore-5acc53684d5352d7bfdc1ca0fb8c3225.json deleted file mode 100644 index 5d5b42b365..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-5acc53684d5352d7bfdc1ca0fb8c3225.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-0d5e6b054ae0e4dc5ad081332b9456de-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":50,"offset":49}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":50,"offset":49}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":50,"offset":49}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-5b2f27167ba5bfaf41a98e9eed72ab75.json b/.cache/caches/gatsby-transformer-remark/diskstore-5b2f27167ba5bfaf41a98e9eed72ab75.json deleted file mode 100644 index 81e598751f..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-5b2f27167ba5bfaf41a98e9eed72ab75.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-43103af0e6fac5c913a4ee2d647171d6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":67,"offset":66},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":67,"offset":66},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":67,"offset":66}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-5cec49de36510e2e3fd1fcb7387232c9.json b/.cache/caches/gatsby-transformer-remark/diskstore-5cec49de36510e2e3fd1fcb7387232c9.json deleted file mode 100644 index 31090561c9..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-5cec49de36510e2e3fd1fcb7387232c9.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-99f9daf26f7bf831e47b400f65746195-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":3,"column":1,"offset":2}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-5dea743c4ff0108070709db350f70c0c.json b/.cache/caches/gatsby-transformer-remark/diskstore-5dea743c4ff0108070709db350f70c0c.json deleted file mode 100644 index e9e5424a75..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-5dea743c4ff0108070709db350f70c0c.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-47b0d92f07e7d22128274908bbd41917-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-5e15e08acd4fa21e537e79761690bcf5.json b/.cache/caches/gatsby-transformer-remark/diskstore-5e15e08acd4fa21e537e79761690bcf5.json deleted file mode 100644 index 78834f1a16..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-5e15e08acd4fa21e537e79761690bcf5.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-2f71087002b5dca20364ad83f1da9f61-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-5e6c36dab0ca104942d0c6fcbb40ce6f.json b/.cache/caches/gatsby-transformer-remark/diskstore-5e6c36dab0ca104942d0c6fcbb40ce6f.json deleted file mode 100644 index 8c2f0bc4fb..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-5e6c36dab0ca104942d0c6fcbb40ce6f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-3b07088eb203c170b157e52c4c57f5c9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-608cc74007bec656f75c8d29bdf3c190.json b/.cache/caches/gatsby-transformer-remark/diskstore-608cc74007bec656f75c8d29bdf3c190.json deleted file mode 100644 index 2b48ec0f8e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-608cc74007bec656f75c8d29bdf3c190.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-1ff9a1ea479245d5ce9c273f5fc64ec3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-6095f97a20608b1a487c84dea67f358c.json b/.cache/caches/gatsby-transformer-remark/diskstore-6095f97a20608b1a487c84dea67f358c.json deleted file mode 100644 index 1ee962adcc..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-6095f97a20608b1a487c84dea67f358c.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-31fce8e43ac00c6448c028e5a94f3913-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-63df6140ebb45573ca89d5e4b7424300.json b/.cache/caches/gatsby-transformer-remark/diskstore-63df6140ebb45573ca89d5e4b7424300.json deleted file mode 100644 index a54c27b1e6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-63df6140ebb45573ca89d5e4b7424300.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-9850acf2f0d1dba77931250ff1ae1833-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-65c71d00d28686276beec8dc192c5451.json b/.cache/caches/gatsby-transformer-remark/diskstore-65c71d00d28686276beec8dc192c5451.json deleted file mode 100644 index dda75611d9..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-65c71d00d28686276beec8dc192c5451.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-6333af3553efc2c96b5dfd41fa526318-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-66b67c9c9539fa1a8be302641154493d.json b/.cache/caches/gatsby-transformer-remark/diskstore-66b67c9c9539fa1a8be302641154493d.json deleted file mode 100644 index 327249b660..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-66b67c9c9539fa1a8be302641154493d.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-cdcfb792dd144bc64fd4506a40146af7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-676ed9e18a2804710e62268bb12c24ea.json b/.cache/caches/gatsby-transformer-remark/diskstore-676ed9e18a2804710e62268bb12c24ea.json deleted file mode 100644 index a6ce73f9c0..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-676ed9e18a2804710e62268bb12c24ea.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-1007c079d6357b1b7f036a12841ae440-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-6918b5cea871a7f5d3665c4043d0b2aa.json b/.cache/caches/gatsby-transformer-remark/diskstore-6918b5cea871a7f5d3665c4043d0b2aa.json deleted file mode 100644 index a5b96957df..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-6918b5cea871a7f5d3665c4043d0b2aa.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-911c24b01efa22013e3bfb6511012c6c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-69192749a063d914a3f8f86514c6952b.json b/.cache/caches/gatsby-transformer-remark/diskstore-69192749a063d914a3f8f86514c6952b.json deleted file mode 100644 index c1fb273b11..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-69192749a063d914a3f8f86514c6952b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-6c5f52476ed9cd6ea8b7eabc064e76b2-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-69c7ecece7b3f2b892c1b0adf97f8bf6.json b/.cache/caches/gatsby-transformer-remark/diskstore-69c7ecece7b3f2b892c1b0adf97f8bf6.json deleted file mode 100644 index c421476126..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-69c7ecece7b3f2b892c1b0adf97f8bf6.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-31fce8e43ac00c6448c028e5a94f3913-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"数据"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%95%B0%E6%8D%AE","aria-label":"数据 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"数据","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":6,"offset":6}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":6,"offset":6}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"目前L7支持的数据格式有GeoJson,CSV,JSon Image","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42}}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON 支持点、线、面，等所有的空间数据格式。","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":28,"offset":71}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":28,"offset":71},"end":{"line":6,"column":34,"offset":77}}},{"type":"text","value":"CSV 支持，点，线段，弧线的支持。","position":{"start":{"line":6,"column":34,"offset":77},"end":{"line":6,"column":52,"offset":95}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":52,"offset":95},"end":{"line":6,"column":58,"offset":101}}},{"type":"text","value":"JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。","position":{"start":{"line":6,"column":58,"offset":101},"end":{"line":6,"column":91,"offset":134}}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":91,"offset":134}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"geojson"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson","aria-label":"geojson permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"GeoJSON","position":{"start":{"line":9,"column":4,"offset":140},"end":{"line":9,"column":11,"offset":147}}}],"position":{"start":{"line":9,"column":1,"offset":137},"end":{"line":9,"column":11,"offset":147}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276}}}],"position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276}}},{"type":"text","value":"\n"}],"position":{"start":{"line":11,"column":1,"offset":149},"end":{"line":11,"column":128,"offset":276}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
","position":{"start":{"line":15,"column":1,"offset":280},"end":{"line":52,"column":4,"offset":980}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"地理统计分析工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7","aria-label":"地理统计分析工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":54,"column":4,"offset":985},"end":{"line":54,"column":12,"offset":993}}}],"position":{"start":{"line":54,"column":1,"offset":982},"end":{"line":54,"column":12,"offset":993}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://turfjs.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"turfjs","position":{"start":{"line":55,"column":2,"offset":995},"end":{"line":55,"column":8,"offset":1001}}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":29,"offset":1022}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":55,"column":29,"offset":1022},"end":{"line":55,"column":60,"offset":1053}}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":60,"offset":1053}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"在线工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7","aria-label":"在线工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"在线工具","position":{"start":{"line":57,"column":4,"offset":1058},"end":{"line":57,"column":8,"offset":1062}}}],"position":{"start":{"line":57,"column":1,"offset":1055},"end":{"line":57,"column":8,"offset":1062}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://geojson.io/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":59,"column":2,"offset":1065},"end":{"line":59,"column":20,"offset":1083}}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":41,"offset":1104}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":59,"column":41,"offset":1104},"end":{"line":59,"column":66,"offset":1129}}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":66,"offset":1129}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://mapshaper.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":61,"column":2,"offset":1132},"end":{"line":61,"column":24,"offset":1154}}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":49,"offset":1179}}},{"type":"text","value":"  可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":61,"column":49,"offset":1179},"end":{"line":61,"column":80,"offset":1210}}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":80,"offset":1210}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"数据资源"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%95%B0%E6%8D%AE%E8%B5%84%E6%BA%90","aria-label":"数据资源 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"数据资源","position":{"start":{"line":63,"column":4,"offset":1215},"end":{"line":63,"column":8,"offset":1219}}}],"position":{"start":{"line":63,"column":1,"offset":1212},"end":{"line":63,"column":8,"offset":1219}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"全国行政区划边界"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%A8%E5%9B%BD%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E8%BE%B9%E7%95%8C","aria-label":"全国行政区划边界 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"全国行政区划边界 ","position":{"start":{"line":65,"column":6,"offset":1226},"end":{"line":65,"column":15,"offset":1235}}}],"position":{"start":{"line":65,"column":1,"offset":1221},"end":{"line":65,"column":15,"offset":1235}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"支持 geojson, svg下载","position":{"start":{"line":66,"column":2,"offset":1237},"end":{"line":66,"column":19,"offset":1254}}}],"position":{"start":{"line":66,"column":1,"offset":1236},"end":{"line":66,"column":111,"offset":1346}}}],"position":{"start":{"line":66,"column":1,"offset":1236},"end":{"line":66,"column":111,"offset":1346}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"highcharts-全球行政区划数据集"},"children":[{"type":"element","tagName":"a","properties":{"href":"#highcharts-%E5%85%A8%E7%90%83%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E6%95%B0%E6%8D%AE%E9%9B%86","aria-label":"highcharts 全球行政区划数据集 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"HighCharts 全球行政区划数据集","position":{"start":{"line":68,"column":6,"offset":1353},"end":{"line":68,"column":26,"offset":1373}}}],"position":{"start":{"line":68,"column":1,"offset":1348},"end":{"line":68,"column":26,"offset":1373}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://img.hcharts.cn/mapdata/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://img.hcharts.cn/mapdata/","position":{"start":{"line":70,"column":2,"offset":1376},"end":{"line":70,"column":33,"offset":1407}}}],"position":{"start":{"line":70,"column":1,"offset":1375},"end":{"line":70,"column":67,"offset":1441}}}],"position":{"start":{"line":70,"column":1,"offset":1375},"end":{"line":70,"column":67,"offset":1441}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":71,"column":1,"offset":1442}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-6a18c64e7974703c79c0308f91af0163.json b/.cache/caches/gatsby-transformer-remark/diskstore-6a18c64e7974703c79c0308f91af0163.json deleted file mode 100644 index 283026b8d2..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-6a18c64e7974703c79c0308f91af0163.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-1c348fc333b039279ca33b95350216a1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-6b1ab6975f8416d32618348d473aa126.json b/.cache/caches/gatsby-transformer-remark/diskstore-6b1ab6975f8416d32618348d473aa126.json deleted file mode 100644 index ce13c0129a..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-6b1ab6975f8416d32618348d473aa126.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-63d6f29612923eb1f263a3a7fbc0d504-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#使用方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"使用方法","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":7,"offset":6},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":7,"offset":6},"indent":[]},"data":{"id":"使用方法","htmlAttributes":{"id":"使用方法"},"hProperties":{"id":"使用方法"}}},{"type":"paragraph","children":[{"type":"text","value":"L7 提供三种使用方式：CDN、Submodule。","position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":27,"offset":34},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":27,"offset":34},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#通过-cdn-使用","title":null,"children":[],"data":{"hProperties":{"aria-label":"通过 cdn 使用 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"通过 CDN 使用","position":{"start":{"line":5,"column":4,"offset":39},"end":{"line":5,"column":13,"offset":48},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":36},"end":{"line":5,"column":13,"offset":48},"indent":[]},"data":{"id":"通过-cdn-使用","htmlAttributes":{"id":"通过-cdn-使用"},"hProperties":{"id":"通过-cdn-使用"}}},{"type":"paragraph","children":[{"type":"text","value":"首先在 ","position":{"start":{"line":7,"column":1,"offset":50},"end":{"line":7,"column":5,"offset":54},"indent":[]}},{"type":"html","value":"<head>","position":{"start":{"line":7,"column":5,"offset":54},"end":{"line":7,"column":13,"offset":62},"indent":[]}},{"type":"text","value":" 中引入 L7 CDN 版本的 JS 和 CSS 文件：","position":{"start":{"line":7,"column":13,"offset":62},"end":{"line":7,"column":41,"offset":90},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":50},"end":{"line":7,"column":41,"offset":90},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
","position":{"start":{"line":8,"column":1,"offset":91},"end":{"line":12,"column":4,"offset":217},"indent":[1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 ","position":{"start":{"line":14,"column":1,"offset":219},"end":{"line":14,"column":50,"offset":268},"indent":[]}},{"type":"link","title":null,"url":"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart","children":[{"type":"text","value":"Mapbox 文档","position":{"start":{"line":14,"column":51,"offset":269},"end":{"line":14,"column":60,"offset":278},"indent":[]}}],"position":{"start":{"line":14,"column":50,"offset":268},"end":{"line":14,"column":120,"offset":338},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"：","position":{"start":{"line":14,"column":120,"offset":338},"end":{"line":14,"column":121,"offset":339},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":219},"end":{"line":14,"column":121,"offset":339},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
","position":{"start":{"line":15,"column":1,"offset":340},"end":{"line":21,"column":4,"offset":582},"indent":[1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️高德采用异步加载，因此不需要引入任何额外静态文件。","position":{"start":{"line":22,"column":1,"offset":583},"end":{"line":22,"column":28,"offset":610},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":583},"end":{"line":22,"column":28,"offset":610},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"然后在 ","position":{"start":{"line":24,"column":1,"offset":612},"end":{"line":24,"column":5,"offset":616},"indent":[]}},{"type":"html","value":"<body>","position":{"start":{"line":24,"column":5,"offset":616},"end":{"line":24,"column":13,"offset":624},"indent":[]}},{"type":"text","value":" 中定义一个容器并设置一个 ","position":{"start":{"line":24,"column":13,"offset":624},"end":{"line":24,"column":27,"offset":638},"indent":[]}},{"type":"html","value":"id","position":{"start":{"line":24,"column":27,"offset":638},"end":{"line":24,"column":31,"offset":642},"indent":[]}},{"type":"text","value":"。通过全局 ","position":{"start":{"line":24,"column":31,"offset":642},"end":{"line":24,"column":37,"offset":648},"indent":[]}},{"type":"html","value":"L7","position":{"start":{"line":24,"column":37,"offset":648},"end":{"line":24,"column":41,"offset":652},"indent":[]}},{"type":"text","value":" 这个命名空间可以获取场景 ","position":{"start":{"line":24,"column":41,"offset":652},"end":{"line":24,"column":55,"offset":666},"indent":[]}},{"type":"html","value":"L7.Scene","position":{"start":{"line":24,"column":55,"offset":666},"end":{"line":24,"column":65,"offset":676},"indent":[]}},{"type":"text","value":" 和图层 ","position":{"start":{"line":24,"column":65,"offset":676},"end":{"line":24,"column":70,"offset":681},"indent":[]}},{"type":"html","value":"L7.PolygonLayer","position":{"start":{"line":24,"column":70,"offset":681},"end":{"line":24,"column":87,"offset":698},"indent":[]}},{"type":"text","value":"：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 ","position":{"start":{"line":24,"column":87,"offset":698},"end":{"line":25,"column":33,"offset":732},"indent":[1]}},{"type":"html","value":"L7.Scene","position":{"start":{"line":25,"column":33,"offset":732},"end":{"line":25,"column":43,"offset":742},"indent":[]}},{"type":"text","value":" 的构造函数，获取方式如下：","position":{"start":{"line":25,"column":43,"offset":742},"end":{"line":25,"column":57,"offset":756},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":612},"end":{"line":25,"column":57,"offset":756},"indent":[1]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"高德地图开发者 Key ","position":{"start":{"line":26,"column":3,"offset":759},"end":{"line":26,"column":15,"offset":771},"indent":[]}},{"type":"link","title":null,"url":"https://lbs.amap.com/dev/key/","children":[{"type":"text","value":"申请方法","position":{"start":{"line":26,"column":16,"offset":772},"end":{"line":26,"column":20,"offset":776},"indent":[]}}],"position":{"start":{"line":26,"column":15,"offset":771},"end":{"line":26,"column":52,"offset":808},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":26,"column":3,"offset":759},"end":{"line":26,"column":52,"offset":808},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":757},"end":{"line":26,"column":52,"offset":808},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens","children":[{"type":"text","value":"Mapbox Access Tokens","position":{"start":{"line":27,"column":4,"offset":812},"end":{"line":27,"column":24,"offset":832},"indent":[]}}],"position":{"start":{"line":27,"column":3,"offset":811},"end":{"line":27,"column":123,"offset":931},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":27,"column":3,"offset":811},"end":{"line":27,"column":123,"offset":931},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":809},"end":{"line":27,"column":123,"offset":931},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":757},"end":{"line":27,"column":123,"offset":931},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#通过-submodule-使用","title":null,"children":[],"data":{"hProperties":{"aria-label":"通过 submodule 使用 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"通过 Submodule 使用","position":{"start":{"line":29,"column":4,"offset":936},"end":{"line":29,"column":19,"offset":951},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":933},"end":{"line":29,"column":19,"offset":951},"indent":[]},"data":{"id":"通过-submodule-使用","htmlAttributes":{"id":"通过-submodule-使用"},"hProperties":{"id":"通过-submodule-使用"}}},{"type":"paragraph","children":[{"type":"text","value":"首先通过 ","position":{"start":{"line":31,"column":1,"offset":953},"end":{"line":31,"column":6,"offset":958},"indent":[]}},{"type":"html","value":"npm/yarn","position":{"start":{"line":31,"column":6,"offset":958},"end":{"line":31,"column":16,"offset":968},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":953},"end":{"line":31,"column":16,"offset":968},"indent":[]}},{"type":"html","lang":"bash","meta":null,"value":"
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
","position":{"start":{"line":32,"column":1,"offset":969},"end":{"line":37,"column":4,"offset":1047},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"然后就可以使用其中包含的场景和各类图层：","position":{"start":{"line":39,"column":1,"offset":1049},"end":{"line":39,"column":21,"offset":1069},"indent":[]}}],"position":{"start":{"line":39,"column":1,"offset":1049},"end":{"line":39,"column":21,"offset":1069},"indent":[]}},{"type":"html","lang":"typescript","meta":null,"value":"
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
","position":{"start":{"line":40,"column":1,"offset":1070},"end":{"line":85,"column":4,"offset":1941},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：","position":{"start":{"line":88,"column":1,"offset":1944},"end":{"line":88,"column":36,"offset":1979},"indent":[]}}],"position":{"start":{"line":88,"column":1,"offset":1944},"end":{"line":88,"column":36,"offset":1979},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx","children":[{"type":"text","value":"高德地图","position":{"start":{"line":89,"column":4,"offset":1983},"end":{"line":89,"column":8,"offset":1987},"indent":[]}}],"position":{"start":{"line":89,"column":3,"offset":1982},"end":{"line":89,"column":88,"offset":2067},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":89,"column":3,"offset":1982},"end":{"line":89,"column":88,"offset":2067},"indent":[]}}],"position":{"start":{"line":89,"column":1,"offset":1980},"end":{"line":89,"column":88,"offset":2067},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx","children":[{"type":"text","value":"Mapbox","position":{"start":{"line":90,"column":4,"offset":2071},"end":{"line":90,"column":10,"offset":2077},"indent":[]}}],"position":{"start":{"line":90,"column":3,"offset":2070},"end":{"line":90,"column":92,"offset":2159},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":90,"column":3,"offset":2070},"end":{"line":90,"column":92,"offset":2159},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":2068},"end":{"line":90,"column":92,"offset":2159},"indent":[]}}],"position":{"start":{"line":89,"column":1,"offset":1980},"end":{"line":90,"column":92,"offset":2159},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#wip-react","title":null,"children":[],"data":{"hProperties":{"aria-label":"wip react permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"linkReference","identifier":"wip","label":"WIP","referenceType":"shortcut","children":[{"type":"text","value":"WIP","position":{"start":{"line":93,"column":5,"offset":2166},"end":{"line":93,"column":8,"offset":2169},"indent":[]}}],"position":{"start":{"line":93,"column":4,"offset":2165},"end":{"line":93,"column":9,"offset":2170},"indent":[]}},{"type":"text","value":" React","position":{"start":{"line":93,"column":9,"offset":2170},"end":{"line":93,"column":15,"offset":2176},"indent":[]}}],"position":{"start":{"line":93,"column":1,"offset":2162},"end":{"line":93,"column":15,"offset":2176},"indent":[]},"data":{"id":"wip-react","htmlAttributes":{"id":"wip-react"},"hProperties":{"id":"wip-react"}}},{"type":"paragraph","children":[{"type":"text","value":"React 组件待开发，目前可以暂时以 Submodule 方式使用：","position":{"start":{"line":95,"column":1,"offset":2178},"end":{"line":95,"column":36,"offset":2213},"indent":[]}}],"position":{"start":{"line":95,"column":1,"offset":2178},"end":{"line":95,"column":36,"offset":2213},"indent":[]}},{"type":"html","lang":"tsx","meta":null,"value":"
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
","position":{"start":{"line":96,"column":1,"offset":2214},"end":{"line":157,"column":4,"offset":3494},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️组件 Unmount 时需要通过 ","position":{"start":{"line":159,"column":1,"offset":3496},"end":{"line":159,"column":20,"offset":3515},"indent":[]}},{"type":"html","value":"scene.destroy()","position":{"start":{"line":159,"column":20,"offset":3515},"end":{"line":159,"column":37,"offset":3532},"indent":[]}},{"type":"text","value":" 手动销毁场景。","position":{"start":{"line":159,"column":37,"offset":3532},"end":{"line":159,"column":45,"offset":3540},"indent":[]}}],"position":{"start":{"line":159,"column":1,"offset":3496},"end":{"line":159,"column":45,"offset":3540},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":161,"column":1,"offset":3542}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-6c75f624e75ee489aec98588376087ef.json b/.cache/caches/gatsby-transformer-remark/diskstore-6c75f624e75ee489aec98588376087ef.json deleted file mode 100644 index 97c4490a97..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-6c75f624e75ee489aec98588376087ef.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-9bb7ce1cef5d17f8dfef5ffe696b4753-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-6f14889520a6b8fb231fc064b3339218.json b/.cache/caches/gatsby-transformer-remark/diskstore-6f14889520a6b8fb231fc064b3339218.json deleted file mode 100644 index b656321045..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-6f14889520a6b8fb231fc064b3339218.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-ac6b5999771507b02330fb5a6d22d24f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":5,"offset":5}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":5,"offset":5}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"scene"},"children":[{"type":"element","tagName":"a","properties":{"href":"#scene","aria-label":"scene permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Scene","position":{"start":{"line":4,"column":4,"offset":10},"end":{"line":4,"column":9,"offset":15}}}],"position":{"start":{"line":4,"column":1,"offset":7},"end":{"line":4,"column":9,"offset":15}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理","position":{"start":{"line":6,"column":1,"offset":17},"end":{"line":6,"column":48,"offset":64}}}],"position":{"start":{"line":6,"column":1,"offset":17},"end":{"line":6,"column":48,"offset":64}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"map"},"children":[{"type":"element","tagName":"a","properties":{"href":"#map","aria-label":"map permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Map","position":{"start":{"line":9,"column":4,"offset":70},"end":{"line":9,"column":7,"offset":73}}}],"position":{"start":{"line":9,"column":1,"offset":67},"end":{"line":9,"column":7,"offset":73}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。","position":{"start":{"line":11,"column":1,"offset":75},"end":{"line":12,"column":22,"offset":155}}}],"position":{"start":{"line":11,"column":1,"offset":75},"end":{"line":12,"column":22,"offset":155}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"目前L7 支持两种地图底图","position":{"start":{"line":14,"column":1,"offset":157},"end":{"line":14,"column":14,"offset":170}}}],"position":{"start":{"line":14,"column":1,"offset":157},"end":{"line":14,"column":14,"offset":170}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"高德地图 国内业务场景 合规中国地图","position":{"start":{"line":16,"column":3,"offset":174},"end":{"line":16,"column":21,"offset":192}}}],"position":{"start":{"line":16,"column":1,"offset":172},"end":{"line":16,"column":21,"offset":192}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"MapBox 国际业务，或者内网离线部署场景","position":{"start":{"line":17,"column":3,"offset":195},"end":{"line":17,"column":25,"offset":217}}}],"position":{"start":{"line":17,"column":1,"offset":193},"end":{"line":17,"column":25,"offset":217}}},{"type":"text","value":"\n"}],"position":{"start":{"line":16,"column":1,"offset":172},"end":{"line":17,"column":25,"offset":217}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"map-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#map-1","aria-label":"map 1 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"map","position":{"start":{"line":20,"column":6,"offset":225},"end":{"line":20,"column":9,"offset":228}}}],"position":{"start":{"line":20,"column":1,"offset":220},"end":{"line":20,"column":9,"offset":228}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"可以通过scene map 属性获取 map实例","position":{"start":{"line":22,"column":1,"offset":230},"end":{"line":22,"column":25,"offset":254}}}],"position":{"start":{"line":22,"column":1,"offset":230},"end":{"line":22,"column":25,"offset":254}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const map = scene.map;\n
","position":{"start":{"line":24,"column":1,"offset":256},"end":{"line":27,"column":4,"offset":297}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。","position":{"start":{"line":28,"column":1,"offset":298},"end":{"line":28,"column":78,"offset":375}}}],"position":{"start":{"line":28,"column":1,"offset":298},"end":{"line":28,"column":78,"offset":375}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"示例代码","position":{"start":{"line":30,"column":1,"offset":377},"end":{"line":30,"column":5,"offset":381}}}],"position":{"start":{"line":30,"column":1,"offset":377},"end":{"line":30,"column":5,"offset":381}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
","position":{"start":{"line":32,"column":1,"offset":383},"end":{"line":40,"column":4,"offset":552}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":43,"column":5,"offset":559},"end":{"line":43,"column":9,"offset":563}}}],"position":{"start":{"line":43,"column":1,"offset":555},"end":{"line":43,"column":9,"offset":563}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Scene","position":{"start":{"line":45,"column":3,"offset":567},"end":{"line":45,"column":8,"offset":572}}}],"position":{"start":{"line":45,"column":1,"offset":565},"end":{"line":45,"column":10,"offset":574}}},{"type":"text","value":" ","position":{"start":{"line":45,"column":10,"offset":574},"end":{"line":45,"column":11,"offset":575}}}],"position":{"start":{"line":45,"column":1,"offset":565},"end":{"line":45,"column":11,"offset":575}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"配置项"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%85%8D%E7%BD%AE%E9%A1%B9","aria-label":"配置项 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"配置项","position":{"start":{"line":50,"column":4,"offset":583},"end":{"line":50,"column":7,"offset":586}}}],"position":{"start":{"line":50,"column":1,"offset":580},"end":{"line":50,"column":7,"offset":586}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"地图配置项"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E5%9B%BE%E9%85%8D%E7%BD%AE%E9%A1%B9","aria-label":"地图配置项 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地图配置项","position":{"start":{"line":52,"column":5,"offset":592},"end":{"line":52,"column":10,"offset":597}}}],"position":{"start":{"line":52,"column":1,"offset":588},"end":{"line":52,"column":10,"offset":597}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"id"},"children":[{"type":"element","tagName":"a","properties":{"href":"#id","aria-label":"id permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"id","position":{"start":{"line":54,"column":5,"offset":603},"end":{"line":54,"column":7,"offset":605}}}],"position":{"start":{"line":54,"column":1,"offset":599},"end":{"line":54,"column":7,"offset":605}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"需传入 dom 容器或者容器 id  {domObject || string} ","position":{"start":{"line":55,"column":1,"offset":606},"end":{"line":55,"column":42,"offset":647}}},{"type":"text","value":"[必选]","position":{"start":{"line":55,"column":43,"offset":648},"end":{"line":55,"column":45,"offset":650}}}],"position":{"start":{"line":55,"column":1,"offset":606},"end":{"line":55,"column":46,"offset":651}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoom","aria-label":"zoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"zoom","position":{"start":{"line":58,"column":5,"offset":658},"end":{"line":58,"column":9,"offset":662}}}],"position":{"start":{"line":58,"column":1,"offset":654},"end":{"line":58,"column":9,"offset":662}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图初始显示级别 {number} （0-22）","position":{"start":{"line":59,"column":1,"offset":663},"end":{"line":59,"column":26,"offset":688}}}],"position":{"start":{"line":59,"column":1,"offset":663},"end":{"line":59,"column":26,"offset":688}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"center"},"children":[{"type":"element","tagName":"a","properties":{"href":"#center","aria-label":"center permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"center","position":{"start":{"line":61,"column":5,"offset":694},"end":{"line":61,"column":11,"offset":700}}}],"position":{"start":{"line":61,"column":1,"offset":690},"end":{"line":61,"column":11,"offset":700}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图初始中心经纬度 {Lnglat}","position":{"start":{"line":62,"column":1,"offset":701},"end":{"line":62,"column":19,"offset":719}}}],"position":{"start":{"line":62,"column":1,"offset":701},"end":{"line":62,"column":19,"offset":719}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"pitch"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pitch","aria-label":"pitch permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"pitch","position":{"start":{"line":64,"column":5,"offset":725},"end":{"line":64,"column":10,"offset":730}}}],"position":{"start":{"line":64,"column":1,"offset":721},"end":{"line":64,"column":10,"offset":730}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图初始俯仰角度 {number}  default 0","position":{"start":{"line":65,"column":1,"offset":731},"end":{"line":65,"column":29,"offset":759}}}],"position":{"start":{"line":65,"column":1,"offset":731},"end":{"line":65,"column":29,"offset":759}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"style"},"children":[{"type":"element","tagName":"a","properties":{"href":"#style","aria-label":"style permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"style","position":{"start":{"line":67,"column":5,"offset":765},"end":{"line":67,"column":10,"offset":770}}}],"position":{"start":{"line":67,"column":1,"offset":761},"end":{"line":67,"column":10,"offset":770}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用","position":{"start":{"line":69,"column":1,"offset":772},"end":{"line":69,"column":40,"offset":811}}}],"position":{"start":{"line":69,"column":1,"offset":772},"end":{"line":69,"column":40,"offset":811}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"dark","position":{"start":{"line":70,"column":3,"offset":814},"end":{"line":70,"column":7,"offset":818}}}],"position":{"start":{"line":70,"column":1,"offset":812},"end":{"line":70,"column":7,"offset":818}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"light","position":{"start":{"line":71,"column":3,"offset":821},"end":{"line":71,"column":8,"offset":826}}}],"position":{"start":{"line":71,"column":1,"offset":819},"end":{"line":71,"column":8,"offset":826}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"normal","position":{"start":{"line":72,"column":3,"offset":829},"end":{"line":72,"column":9,"offset":835}}}],"position":{"start":{"line":72,"column":1,"offset":827},"end":{"line":72,"column":9,"offset":835}}},{"type":"text","value":"\n"}],"position":{"start":{"line":70,"column":1,"offset":812},"end":{"line":72,"column":9,"offset":835}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"除了内置的样式，你也可以传入自定义的其他属性。","position":{"start":{"line":74,"column":1,"offset":837},"end":{"line":74,"column":24,"offset":860}}}],"position":{"start":{"line":74,"column":1,"offset":837},"end":{"line":74,"column":24,"offset":860}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"比如高德地图","position":{"start":{"line":76,"column":1,"offset":862},"end":{"line":76,"column":7,"offset":868}}}],"position":{"start":{"line":76,"column":1,"offset":862},"end":{"line":76,"column":7,"offset":868}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
","position":{"start":{"line":78,"column":1,"offset":870},"end":{"line":83,"column":4,"offset":981}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"minzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#minzoom","aria-label":"minzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"minZoom","position":{"start":{"line":86,"column":5,"offset":988},"end":{"line":86,"column":12,"offset":995}}}],"position":{"start":{"line":86,"column":1,"offset":984},"end":{"line":86,"column":12,"offset":995}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图最小缩放等级 {number}  default 0 (0-22)","position":{"start":{"line":87,"column":1,"offset":996},"end":{"line":87,"column":37,"offset":1032}}}],"position":{"start":{"line":87,"column":1,"offset":996},"end":{"line":87,"column":37,"offset":1032}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"maxzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#maxzoom","aria-label":"maxzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"maxZoom","position":{"start":{"line":89,"column":5,"offset":1038},"end":{"line":89,"column":12,"offset":1045}}}],"position":{"start":{"line":89,"column":1,"offset":1034},"end":{"line":89,"column":12,"offset":1045}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图最大缩放等级 {number}  default 22 (0-22)","position":{"start":{"line":90,"column":1,"offset":1046},"end":{"line":90,"column":38,"offset":1083}}}],"position":{"start":{"line":90,"column":1,"offset":1046},"end":{"line":90,"column":38,"offset":1083}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"rotateenable"},"children":[{"type":"element","tagName":"a","properties":{"href":"#rotateenable","aria-label":"rotateenable permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"rotateEnable","position":{"start":{"line":92,"column":5,"offset":1089},"end":{"line":92,"column":17,"offset":1101}}}],"position":{"start":{"line":92,"column":1,"offset":1085},"end":{"line":92,"column":17,"offset":1101}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图是否可旋转 {Boolean} default true","position":{"start":{"line":93,"column":1,"offset":1102},"end":{"line":93,"column":31,"offset":1132}}}],"position":{"start":{"line":93,"column":1,"offset":1102},"end":{"line":93,"column":31,"offset":1132}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":98,"column":4,"offset":1140},"end":{"line":98,"column":6,"offset":1142}}}],"position":{"start":{"line":98,"column":1,"offset":1137},"end":{"line":98,"column":6,"offset":1142}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getzoom","aria-label":"getzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getZoom","position":{"start":{"line":100,"column":5,"offset":1148},"end":{"line":100,"column":12,"offset":1155}}}],"position":{"start":{"line":100,"column":1,"offset":1144},"end":{"line":100,"column":12,"offset":1155}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取当前缩放等级","position":{"start":{"line":101,"column":1,"offset":1156},"end":{"line":101,"column":9,"offset":1164}}}],"position":{"start":{"line":101,"column":1,"offset":1156},"end":{"line":101,"column":9,"offset":1164}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getZoom();\n
","position":{"start":{"line":103,"column":1,"offset":1166},"end":{"line":105,"column":4,"offset":1200}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return {float}  当前缩放等级","position":{"start":{"line":107,"column":1,"offset":1202},"end":{"line":107,"column":24,"offset":1225}}}],"position":{"start":{"line":107,"column":1,"offset":1202},"end":{"line":107,"column":24,"offset":1225}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getlayers"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getlayers","aria-label":"getlayers permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getLayers()","position":{"start":{"line":109,"column":5,"offset":1231},"end":{"line":109,"column":16,"offset":1242}}}],"position":{"start":{"line":109,"column":1,"offset":1227},"end":{"line":109,"column":16,"offset":1242}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取所有的地图图层","position":{"start":{"line":110,"column":1,"offset":1243},"end":{"line":110,"column":10,"offset":1252}}}],"position":{"start":{"line":110,"column":1,"offset":1243},"end":{"line":110,"column":10,"offset":1252}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getLayers();\n
","position":{"start":{"line":111,"column":1,"offset":1253},"end":{"line":113,"column":4,"offset":1289}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return 图层数组 {Array}","position":{"start":{"line":115,"column":1,"offset":1291},"end":{"line":115,"column":21,"offset":1311}}}],"position":{"start":{"line":115,"column":1,"offset":1291},"end":{"line":115,"column":21,"offset":1311}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getcenter"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getcenter","aria-label":"getcenter permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getCenter()","position":{"start":{"line":118,"column":5,"offset":1318},"end":{"line":118,"column":16,"offset":1329}}}],"position":{"start":{"line":118,"column":1,"offset":1314},"end":{"line":118,"column":16,"offset":1329}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取地图中心点","position":{"start":{"line":119,"column":1,"offset":1330},"end":{"line":119,"column":8,"offset":1337}}}],"position":{"start":{"line":119,"column":1,"offset":1330},"end":{"line":119,"column":8,"offset":1337}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getCenter();\n
","position":{"start":{"line":120,"column":1,"offset":1338},"end":{"line":122,"column":4,"offset":1373}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return {Lnglat} :地图中心点","position":{"start":{"line":124,"column":1,"offset":1375},"end":{"line":124,"column":23,"offset":1397}}}],"position":{"start":{"line":124,"column":1,"offset":1375},"end":{"line":124,"column":23,"offset":1397}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getsize"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getsize","aria-label":"getsize permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getSize()","position":{"start":{"line":126,"column":5,"offset":1403},"end":{"line":126,"column":14,"offset":1412}}}],"position":{"start":{"line":126,"column":1,"offset":1399},"end":{"line":126,"column":14,"offset":1412}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取地图容器大小","position":{"start":{"line":127,"column":1,"offset":1413},"end":{"line":127,"column":9,"offset":1421}}}],"position":{"start":{"line":127,"column":1,"offset":1413},"end":{"line":127,"column":9,"offset":1421}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getSize();\n
","position":{"start":{"line":128,"column":1,"offset":1422},"end":{"line":130,"column":4,"offset":1455}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return { Object } 地图容器的 width,height","position":{"start":{"line":131,"column":1,"offset":1456},"end":{"line":131,"column":37,"offset":1492}}}],"position":{"start":{"line":131,"column":1,"offset":1456},"end":{"line":131,"column":37,"offset":1492}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getpitch"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getpitch","aria-label":"getpitch permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getPitch()","position":{"start":{"line":133,"column":5,"offset":1498},"end":{"line":133,"column":15,"offset":1508}}}],"position":{"start":{"line":133,"column":1,"offset":1494},"end":{"line":133,"column":15,"offset":1508}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取地图俯仰角","position":{"start":{"line":134,"column":1,"offset":1509},"end":{"line":134,"column":8,"offset":1516}}}],"position":{"start":{"line":134,"column":1,"offset":1509},"end":{"line":134,"column":8,"offset":1516}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getPitch();\n
","position":{"start":{"line":135,"column":1,"offset":1517},"end":{"line":137,"column":4,"offset":1552}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return {number} pitch","position":{"start":{"line":139,"column":1,"offset":1554},"end":{"line":139,"column":22,"offset":1575}}}],"position":{"start":{"line":139,"column":1,"offset":1554},"end":{"line":139,"column":22,"offset":1575}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setcenter"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setcenter","aria-label":"setcenter permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setCenter()","position":{"start":{"line":141,"column":5,"offset":1581},"end":{"line":141,"column":16,"offset":1592}}}],"position":{"start":{"line":141,"column":1,"offset":1577},"end":{"line":141,"column":16,"offset":1592}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置地图中心点坐标","position":{"start":{"line":142,"column":1,"offset":1593},"end":{"line":142,"column":10,"offset":1602}}}],"position":{"start":{"line":142,"column":1,"offset":1593},"end":{"line":142,"column":10,"offset":1602}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.setCenter([lng, lat]);\n
","position":{"start":{"line":144,"column":1,"offset":1604},"end":{"line":146,"column":4,"offset":1648}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":148,"column":1,"offset":1650},"end":{"line":148,"column":4,"offset":1653}}},{"type":"raw","value":"center","position":{"start":{"line":148,"column":4,"offset":1653},"end":{"line":148,"column":12,"offset":1661}}},{"type":"text","value":" {LngLat} 地图中心点","position":{"start":{"line":148,"column":12,"offset":1661},"end":{"line":148,"column":28,"offset":1677}}}],"position":{"start":{"line":148,"column":1,"offset":1650},"end":{"line":148,"column":28,"offset":1677}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setzoomandcenter"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setzoomandcenter","aria-label":"setzoomandcenter permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setZoomAndCenter","position":{"start":{"line":151,"column":5,"offset":1684},"end":{"line":151,"column":21,"offset":1700}}}],"position":{"start":{"line":151,"column":1,"offset":1680},"end":{"line":151,"column":21,"offset":1700}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置地图等级和中心","position":{"start":{"line":152,"column":1,"offset":1701},"end":{"line":152,"column":10,"offset":1710}}}],"position":{"start":{"line":152,"column":1,"offset":1701},"end":{"line":152,"column":10,"offset":1710}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.setZoomAndCenter(zoom, center);\n
","position":{"start":{"line":153,"column":1,"offset":1711},"end":{"line":155,"column":4,"offset":1764}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：zoom {number}","position":{"start":{"line":157,"column":1,"offset":1766},"end":{"line":157,"column":17,"offset":1782}}},{"type":"raw","value":"
","position":{"start":{"line":157,"column":17,"offset":1782},"end":{"line":157,"column":23,"offset":1788}}},{"type":"text","value":"center {LngLat}","position":{"start":{"line":157,"column":23,"offset":1788},"end":{"line":157,"column":38,"offset":1803}}}],"position":{"start":{"line":157,"column":1,"offset":1766},"end":{"line":157,"column":38,"offset":1803}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setrotation"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setrotation","aria-label":"setrotation permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setRotation","position":{"start":{"line":160,"column":5,"offset":1810},"end":{"line":160,"column":16,"offset":1821}}}],"position":{"start":{"line":160,"column":1,"offset":1806},"end":{"line":160,"column":16,"offset":1821}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 ","position":{"start":{"line":161,"column":1,"offset":1822},"end":{"line":161,"column":31,"offset":1852}}},{"type":"text","value":"[0-360]","position":{"start":{"line":161,"column":32,"offset":1853},"end":{"line":161,"column":37,"offset":1858}}}],"position":{"start":{"line":161,"column":1,"offset":1822},"end":{"line":161,"column":38,"offset":1859}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.setRotation(rotation);\n
","position":{"start":{"line":162,"column":1,"offset":1860},"end":{"line":164,"column":4,"offset":1905}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数： ","position":{"start":{"line":166,"column":1,"offset":1907},"end":{"line":166,"column":5,"offset":1911}}},{"type":"raw","value":"rotation","position":{"start":{"line":166,"column":5,"offset":1911},"end":{"line":166,"column":15,"offset":1921}}},{"type":"text","value":" {number}","position":{"start":{"line":166,"column":15,"offset":1921},"end":{"line":166,"column":26,"offset":1932}}}],"position":{"start":{"line":166,"column":1,"offset":1907},"end":{"line":166,"column":26,"offset":1932}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zoomin"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoomin","aria-label":"zoomin permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"zoomIn","position":{"start":{"line":168,"column":5,"offset":1938},"end":{"line":168,"column":11,"offset":1944}}}],"position":{"start":{"line":168,"column":1,"offset":1934},"end":{"line":168,"column":11,"offset":1944}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图放大一级","position":{"start":{"line":169,"column":1,"offset":1945},"end":{"line":169,"column":7,"offset":1951}}}],"position":{"start":{"line":169,"column":1,"offset":1945},"end":{"line":169,"column":7,"offset":1951}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.zoomIn();\n
","position":{"start":{"line":170,"column":1,"offset":1952},"end":{"line":172,"column":4,"offset":1984}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zoomout"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoomout","aria-label":"zoomout permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"zoomOut","position":{"start":{"line":174,"column":5,"offset":1990},"end":{"line":174,"column":12,"offset":1997}}}],"position":{"start":{"line":174,"column":1,"offset":1986},"end":{"line":174,"column":12,"offset":1997}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图缩小一级","position":{"start":{"line":175,"column":1,"offset":1998},"end":{"line":175,"column":7,"offset":2004}}}],"position":{"start":{"line":175,"column":1,"offset":1998},"end":{"line":175,"column":7,"offset":2004}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.ZoomOUt();\n
","position":{"start":{"line":176,"column":1,"offset":2005},"end":{"line":178,"column":4,"offset":2038}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"panto"},"children":[{"type":"element","tagName":"a","properties":{"href":"#panto","aria-label":"panto permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"panTo","position":{"start":{"line":180,"column":5,"offset":2044},"end":{"line":180,"column":10,"offset":2049}}}],"position":{"start":{"line":180,"column":1,"offset":2040},"end":{"line":180,"column":10,"offset":2049}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图平移到指定的位置","position":{"start":{"line":181,"column":1,"offset":2050},"end":{"line":181,"column":11,"offset":2060}}}],"position":{"start":{"line":181,"column":1,"offset":2050},"end":{"line":181,"column":11,"offset":2060}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.panTo(LngLat);\n
","position":{"start":{"line":182,"column":1,"offset":2061},"end":{"line":184,"column":4,"offset":2098}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":186,"column":1,"offset":2100},"end":{"line":186,"column":4,"offset":2103}}},{"type":"raw","value":"center","position":{"start":{"line":186,"column":4,"offset":2103},"end":{"line":186,"column":12,"offset":2111}}},{"type":"text","value":" LngLat 中心位置坐标","position":{"start":{"line":186,"column":12,"offset":2111},"end":{"line":186,"column":27,"offset":2126}}}],"position":{"start":{"line":186,"column":1,"offset":2100},"end":{"line":186,"column":27,"offset":2126}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"panby"},"children":[{"type":"element","tagName":"a","properties":{"href":"#panby","aria-label":"panby permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"panBy","position":{"start":{"line":188,"column":5,"offset":2132},"end":{"line":188,"column":10,"offset":2137}}}],"position":{"start":{"line":188,"column":1,"offset":2128},"end":{"line":188,"column":10,"offset":2137}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"以像素为单位沿X方向和Y方向移动地图","position":{"start":{"line":189,"column":1,"offset":2138},"end":{"line":189,"column":19,"offset":2156}}}],"position":{"start":{"line":189,"column":1,"offset":2138},"end":{"line":189,"column":19,"offset":2156}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.panBy(x, y);\n
","position":{"start":{"line":190,"column":1,"offset":2157},"end":{"line":192,"column":4,"offset":2191}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":193,"column":1,"offset":2192},"end":{"line":193,"column":4,"offset":2195}}},{"type":"raw","value":"
","position":{"start":{"line":193,"column":4,"offset":2195},"end":{"line":193,"column":10,"offset":2201}}},{"type":"raw","value":"x","position":{"start":{"line":193,"column":10,"offset":2201},"end":{"line":193,"column":13,"offset":2204}}},{"type":"text","value":" {number} 水平方向移动像素 向右为正方向","position":{"start":{"line":193,"column":13,"offset":2204},"end":{"line":193,"column":38,"offset":2229}}},{"type":"raw","value":"
","position":{"start":{"line":193,"column":38,"offset":2229},"end":{"line":193,"column":44,"offset":2235}}},{"type":"text","value":"      ","position":{"start":{"line":193,"column":44,"offset":2235},"end":{"line":193,"column":50,"offset":2241}}},{"type":"raw","value":"y","position":{"start":{"line":193,"column":50,"offset":2241},"end":{"line":193,"column":53,"offset":2244}}},{"type":"text","value":" {number} 垂直方向移动像素 向下为正方向","position":{"start":{"line":193,"column":53,"offset":2244},"end":{"line":193,"column":79,"offset":2270}}}],"position":{"start":{"line":193,"column":1,"offset":2192},"end":{"line":193,"column":79,"offset":2270}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setpitch"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setpitch","aria-label":"setpitch permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setPitch","position":{"start":{"line":196,"column":5,"offset":2277},"end":{"line":196,"column":13,"offset":2285}}}],"position":{"start":{"line":196,"column":1,"offset":2273},"end":{"line":196,"column":13,"offset":2285}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置地图仰俯角度","position":{"start":{"line":197,"column":1,"offset":2286},"end":{"line":197,"column":9,"offset":2294}}}],"position":{"start":{"line":197,"column":1,"offset":2286},"end":{"line":197,"column":9,"offset":2294}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.setPitch(pitch);\n
","position":{"start":{"line":198,"column":1,"offset":2295},"end":{"line":200,"column":4,"offset":2334}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数 :","position":{"start":{"line":202,"column":1,"offset":2336},"end":{"line":202,"column":5,"offset":2340}}},{"type":"raw","value":"
","position":{"start":{"line":202,"column":5,"offset":2340},"end":{"line":202,"column":11,"offset":2346}}},{"type":"text","value":"   ","position":{"start":{"line":202,"column":11,"offset":2346},"end":{"line":202,"column":14,"offset":2349}}},{"type":"raw","value":"pitch","position":{"start":{"line":202,"column":14,"offset":2349},"end":{"line":202,"column":21,"offset":2356}}},{"type":"text","value":" {number}","position":{"start":{"line":202,"column":21,"offset":2356},"end":{"line":202,"column":31,"offset":2366}}}],"position":{"start":{"line":202,"column":1,"offset":2336},"end":{"line":202,"column":31,"offset":2366}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"fitbounds"},"children":[{"type":"element","tagName":"a","properties":{"href":"#fitbounds","aria-label":"fitbounds permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"fitBounds","position":{"start":{"line":205,"column":5,"offset":2373},"end":{"line":205,"column":14,"offset":2382}}}],"position":{"start":{"line":205,"column":1,"offset":2369},"end":{"line":205,"column":14,"offset":2382}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图缩放到某个范围内","position":{"start":{"line":206,"column":1,"offset":2383},"end":{"line":206,"column":11,"offset":2393}}},{"type":"raw","value":"
","position":{"start":{"line":206,"column":11,"offset":2393},"end":{"line":206,"column":17,"offset":2399}}},{"type":"text","value":"参数 :","position":{"start":{"line":206,"column":17,"offset":2399},"end":{"line":206,"column":21,"offset":2403}}},{"type":"raw","value":"
","position":{"start":{"line":206,"column":21,"offset":2403},"end":{"line":206,"column":27,"offset":2409}}},{"type":"text","value":"  ","position":{"start":{"line":206,"column":27,"offset":2409},"end":{"line":206,"column":29,"offset":2411}}},{"type":"raw","value":"extent","position":{"start":{"line":206,"column":29,"offset":2411},"end":{"line":206,"column":37,"offset":2419}}},{"type":"text","value":" { array} 经纬度范围 ","position":{"start":{"line":206,"column":37,"offset":2419},"end":{"line":206,"column":53,"offset":2435}}},{"type":"text","value":"[minlng,minlat,maxlng,maxlat]","position":{"start":{"line":206,"column":54,"offset":2436},"end":{"line":206,"column":81,"offset":2463}}}],"position":{"start":{"line":206,"column":1,"offset":2383},"end":{"line":206,"column":82,"offset":2464}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.fitBounds([112, 32, 114, 35]);\n
","position":{"start":{"line":208,"column":1,"offset":2466},"end":{"line":210,"column":4,"offset":2517}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"removelayer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#removelayer","aria-label":"removelayer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"removeLayer","position":{"start":{"line":214,"column":5,"offset":2525},"end":{"line":214,"column":16,"offset":2536}}}],"position":{"start":{"line":214,"column":1,"offset":2521},"end":{"line":214,"column":16,"offset":2536}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除layer","position":{"start":{"line":215,"column":1,"offset":2537},"end":{"line":215,"column":8,"offset":2544}}}],"position":{"start":{"line":215,"column":1,"offset":2537},"end":{"line":215,"column":8,"offset":2544}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.removeLayer(layer);\n
","position":{"start":{"line":217,"column":1,"offset":2546},"end":{"line":219,"column":4,"offset":2588}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数 ","position":{"start":{"line":221,"column":1,"offset":2590},"end":{"line":221,"column":4,"offset":2593}}},{"type":"raw","value":"layer","position":{"start":{"line":221,"column":4,"offset":2593},"end":{"line":221,"column":11,"offset":2600}}},{"type":"text","value":" {Layer}","position":{"start":{"line":221,"column":11,"offset":2600},"end":{"line":221,"column":20,"offset":2609}}}],"position":{"start":{"line":221,"column":1,"offset":2590},"end":{"line":221,"column":20,"offset":2609}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getlayers-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getlayers-1","aria-label":"getlayers 1 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getLayers","position":{"start":{"line":223,"column":5,"offset":2615},"end":{"line":223,"column":14,"offset":2624}}}],"position":{"start":{"line":223,"column":1,"offset":2611},"end":{"line":223,"column":14,"offset":2624}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 获取所有的layer","position":{"start":{"line":224,"column":1,"offset":2625},"end":{"line":224,"column":12,"offset":2636}}}],"position":{"start":{"line":224,"column":1,"offset":2625},"end":{"line":224,"column":12,"offset":2636}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getLayers();\n
","position":{"start":{"line":226,"column":1,"offset":2638},"end":{"line":228,"column":4,"offset":2673}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return layers  {array}","position":{"start":{"line":230,"column":1,"offset":2675},"end":{"line":230,"column":24,"offset":2698}}}],"position":{"start":{"line":230,"column":1,"offset":2675},"end":{"line":230,"column":24,"offset":2698}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%8B%E4%BB%B6","aria-label":"事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"事件","position":{"start":{"line":232,"column":4,"offset":2703},"end":{"line":232,"column":6,"offset":2705}}}],"position":{"start":{"line":232,"column":1,"offset":2700},"end":{"line":232,"column":6,"offset":2705}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"on"},"children":[{"type":"element","tagName":"a","properties":{"href":"#on","aria-label":"on permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"on","position":{"start":{"line":235,"column":5,"offset":2712},"end":{"line":235,"column":7,"offset":2714}}}],"position":{"start":{"line":235,"column":1,"offset":2708},"end":{"line":235,"column":7,"offset":2714}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"事件监听","position":{"start":{"line":236,"column":1,"offset":2715},"end":{"line":236,"column":5,"offset":2719}}}],"position":{"start":{"line":236,"column":1,"offset":2715},"end":{"line":236,"column":5,"offset":2719}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"参数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%8F%82%E6%95%B0","aria-label":"参数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"参数","position":{"start":{"line":238,"column":6,"offset":2726},"end":{"line":238,"column":8,"offset":2728}}}],"position":{"start":{"line":238,"column":1,"offset":2721},"end":{"line":238,"column":8,"offset":2728}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"eventName","position":{"start":{"line":239,"column":1,"offset":2729},"end":{"line":239,"column":12,"offset":2740}}},{"type":"text","value":" {string} 事件名","position":{"start":{"line":239,"column":12,"offset":2740},"end":{"line":239,"column":26,"offset":2754}}},{"type":"raw","value":"
","position":{"start":{"line":239,"column":26,"offset":2754},"end":{"line":239,"column":32,"offset":2760}}},{"type":"raw","value":"hander","position":{"start":{"line":239,"column":32,"offset":2760},"end":{"line":239,"column":40,"offset":2768}}},{"type":"text","value":" {function } 事件回调函数","position":{"start":{"line":239,"column":40,"offset":2768},"end":{"line":239,"column":60,"offset":2788}}}],"position":{"start":{"line":239,"column":1,"offset":2729},"end":{"line":239,"column":60,"offset":2788}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"off"},"children":[{"type":"element","tagName":"a","properties":{"href":"#off","aria-label":"off permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"off","position":{"start":{"line":242,"column":5,"offset":2795},"end":{"line":242,"column":8,"offset":2798}}}],"position":{"start":{"line":242,"column":1,"offset":2791},"end":{"line":242,"column":8,"offset":2798}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除事件监听","position":{"start":{"line":243,"column":1,"offset":2799},"end":{"line":243,"column":7,"offset":2805}}},{"type":"raw","value":"
","position":{"start":{"line":243,"column":7,"offset":2805},"end":{"line":243,"column":13,"offset":2811}}},{"type":"raw","value":"eventName","position":{"start":{"line":243,"column":13,"offset":2811},"end":{"line":243,"column":24,"offset":2822}}},{"type":"text","value":" {string} 事件名","position":{"start":{"line":243,"column":24,"offset":2822},"end":{"line":243,"column":38,"offset":2836}}},{"type":"raw","value":"
","position":{"start":{"line":243,"column":38,"offset":2836},"end":{"line":243,"column":44,"offset":2842}}},{"type":"raw","value":"hander","position":{"start":{"line":243,"column":44,"offset":2842},"end":{"line":243,"column":52,"offset":2850}}},{"type":"text","value":" {function } 事件回调函数","position":{"start":{"line":243,"column":52,"offset":2850},"end":{"line":243,"column":72,"offset":2870}}}],"position":{"start":{"line":243,"column":1,"offset":2799},"end":{"line":243,"column":72,"offset":2870}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"地图事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E5%9B%BE%E4%BA%8B%E4%BB%B6","aria-label":"地图事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地图事件","position":{"start":{"line":246,"column":5,"offset":2877},"end":{"line":246,"column":9,"offset":2881}}}],"position":{"start":{"line":246,"column":1,"offset":2873},"end":{"line":246,"column":9,"offset":2881}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
","position":{"start":{"line":247,"column":1,"offset":2882},"end":{"line":255,"column":4,"offset":3219}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"鼠标事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6","aria-label":"鼠标事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"鼠标事件","position":{"start":{"line":258,"column":5,"offset":3226},"end":{"line":258,"column":9,"offset":3230}}}],"position":{"start":{"line":258,"column":1,"offset":3222},"end":{"line":258,"column":9,"offset":3230}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
","position":{"start":{"line":260,"column":1,"offset":3232},"end":{"line":273,"column":4,"offset":3939}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"其它事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%B6%E5%AE%83%E4%BA%8B%E4%BB%B6","aria-label":"其它事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"其它事件","position":{"start":{"line":275,"column":5,"offset":3945},"end":{"line":275,"column":9,"offset":3949}}}],"position":{"start":{"line":275,"column":1,"offset":3941},"end":{"line":275,"column":9,"offset":3949}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","position":{"start":{"line":276,"column":1,"offset":3950},"end":{"line":278,"column":4,"offset":4007}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":281,"column":1,"offset":4010}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-6fd19ce6cc9766c1c5d2732c853aa0f3.json b/.cache/caches/gatsby-transformer-remark/diskstore-6fd19ce6cc9766c1c5d2732c853aa0f3.json deleted file mode 100644 index 869efaaab1..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-6fd19ce6cc9766c1c5d2732c853aa0f3.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-feeb976cc6200a213384f1f2a7b3760a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"heatmaplayer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#heatmaplayer","aria-label":"heatmaplayer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"heatmapLayer","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":15,"offset":15}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":15,"offset":15}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":5,"column":5,"offset":22},"end":{"line":5,"column":7,"offset":24}}}],"position":{"start":{"line":5,"column":1,"offset":18},"end":{"line":5,"column":7,"offset":24}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"热力图图层，包含三种类型的，","position":{"start":{"line":7,"column":1,"offset":26},"end":{"line":7,"column":15,"offset":40}}}],"position":{"start":{"line":7,"column":1,"offset":26},"end":{"line":7,"column":15,"offset":40}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"方格热力图 ","position":{"start":{"line":8,"column":3,"offset":43},"end":{"line":8,"column":9,"offset":49}}}],"position":{"start":{"line":8,"column":1,"offset":41},"end":{"line":8,"column":9,"offset":49}}},{"type":"text","value":"\n"}],"position":{"start":{"line":8,"column":1,"offset":41},"end":{"line":8,"column":9,"offset":49}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。","position":{"start":{"line":10,"column":1,"offset":51},"end":{"line":10,"column":57,"offset":107}}}],"position":{"start":{"line":10,"column":1,"offset":51},"end":{"line":10,"column":57,"offset":107}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"六边形热力图 ","position":{"start":{"line":12,"column":3,"offset":111},"end":{"line":12,"column":10,"offset":118}}}],"position":{"start":{"line":12,"column":1,"offset":109},"end":{"line":12,"column":10,"offset":118}}},{"type":"text","value":"\n"}],"position":{"start":{"line":12,"column":1,"offset":109},"end":{"line":12,"column":10,"offset":118}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局","position":{"start":{"line":14,"column":1,"offset":120},"end":{"line":14,"column":61,"offset":180}}}],"position":{"start":{"line":14,"column":1,"offset":120},"end":{"line":14,"column":61,"offset":180}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"经典热力图 ","position":{"start":{"line":16,"column":3,"offset":184},"end":{"line":16,"column":9,"offset":190}}}],"position":{"start":{"line":16,"column":1,"offset":182},"end":{"line":16,"column":9,"offset":190}}},{"type":"text","value":"\n"}],"position":{"start":{"line":16,"column":1,"offset":182},"end":{"line":16,"column":9,"offset":190}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法","position":{"start":{"line":20,"column":1,"offset":194},"end":{"line":20,"column":48,"offset":241}}}],"position":{"start":{"line":20,"column":1,"offset":194},"end":{"line":20,"column":48,"offset":241}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"source"},"children":[{"type":"element","tagName":"a","properties":{"href":"#source","aria-label":"source permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"source","position":{"start":{"line":22,"column":5,"offset":247},"end":{"line":22,"column":11,"offset":253}}}],"position":{"start":{"line":22,"column":1,"offset":243},"end":{"line":22,"column":11,"offset":253}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"热力图只支持点数据作为数据源","position":{"start":{"line":24,"column":1,"offset":255},"end":{"line":24,"column":15,"offset":269}}}],"position":{"start":{"line":24,"column":1,"offset":255},"end":{"line":24,"column":15,"offset":269}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"布局方法 通过source的 tansforms属性配置","position":{"start":{"line":26,"column":1,"offset":271},"end":{"line":26,"column":29,"offset":299}}}],"position":{"start":{"line":26,"column":1,"offset":271},"end":{"line":26,"column":29,"offset":299}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"type  数据聚合类型 grid、hexagon","position":{"start":{"line":28,"column":3,"offset":303},"end":{"line":28,"column":28,"offset":328}}}],"position":{"start":{"line":28,"column":1,"offset":301},"end":{"line":28,"column":28,"offset":328}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"size  网格半径 单位 米","position":{"start":{"line":29,"column":3,"offset":331},"end":{"line":29,"column":18,"offset":346}}}],"position":{"start":{"line":29,"column":1,"offset":329},"end":{"line":29,"column":18,"offset":346}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"field  聚合字段","position":{"start":{"line":30,"column":3,"offset":349},"end":{"line":30,"column":14,"offset":360}}}],"position":{"start":{"line":30,"column":1,"offset":347},"end":{"line":30,"column":14,"offset":360}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"method 聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":31,"column":3,"offset":363},"end":{"line":31,"column":44,"offset":404}}}],"position":{"start":{"line":31,"column":1,"offset":361},"end":{"line":31,"column":44,"offset":404}}},{"type":"text","value":"\n"}],"position":{"start":{"line":28,"column":1,"offset":301},"end":{"line":31,"column":44,"offset":404}}},{"type":"text","value":"\n"},{"type":"raw","value":"
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
","position":{"start":{"line":33,"column":1,"offset":406},"end":{"line":50,"column":4,"offset":661}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"shape"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shape","aria-label":"shape permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"shape","position":{"start":{"line":52,"column":5,"offset":667},"end":{"line":52,"column":10,"offset":672}}}],"position":{"start":{"line":52,"column":1,"offset":663},"end":{"line":52,"column":10,"offset":672}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"不同类型热力图shape支持","position":{"start":{"line":54,"column":1,"offset":674},"end":{"line":54,"column":15,"offset":688}}}],"position":{"start":{"line":54,"column":1,"offset":674},"end":{"line":54,"column":15,"offset":688}}},{"type":"text","value":"\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"thead","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[],"position":{"start":{"line":56,"column":4,"offset":693},"end":{"line":56,"column":4,"offset":693}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"2D","position":{"start":{"line":56,"column":6,"offset":695},"end":{"line":56,"column":8,"offset":697}}}],"position":{"start":{"line":56,"column":6,"offset":695},"end":{"line":56,"column":8,"offset":697}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"3d","position":{"start":{"line":56,"column":11,"offset":700},"end":{"line":56,"column":13,"offset":702}}}],"position":{"start":{"line":56,"column":11,"offset":700},"end":{"line":56,"column":13,"offset":702}}},{"type":"text","value":"\n"}],"position":{"start":{"line":56,"column":1,"offset":690},"end":{"line":56,"column":15,"offset":704}}},{"type":"text","value":"\n"}],"position":{"start":{"line":56,"column":1,"offset":690},"end":{"line":56,"column":15,"offset":704}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"网格格热力图","position":{"start":{"line":58,"column":3,"offset":727},"end":{"line":58,"column":9,"offset":733}}}],"position":{"start":{"line":58,"column":3,"offset":727},"end":{"line":58,"column":9,"offset":733}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":58,"column":12,"offset":736},"end":{"line":58,"column":42,"offset":766}}}],"position":{"start":{"line":58,"column":12,"offset":736},"end":{"line":58,"column":42,"offset":766}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"cylinder,triangleColumn,hexagonColum,squareColumn","position":{"start":{"line":58,"column":45,"offset":769},"end":{"line":58,"column":94,"offset":818}}}],"position":{"start":{"line":58,"column":45,"offset":769},"end":{"line":58,"column":94,"offset":818}}},{"type":"text","value":"\n"}],"position":{"start":{"line":58,"column":1,"offset":725},"end":{"line":58,"column":96,"offset":820}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"蜂窝热力图","position":{"start":{"line":59,"column":3,"offset":823},"end":{"line":59,"column":8,"offset":828}}}],"position":{"start":{"line":59,"column":3,"offset":823},"end":{"line":59,"column":8,"offset":828}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":59,"column":11,"offset":831},"end":{"line":59,"column":41,"offset":861}}}],"position":{"start":{"line":59,"column":11,"offset":831},"end":{"line":59,"column":41,"offset":861}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"circle,triangle,square,heaxgon","position":{"start":{"line":59,"column":44,"offset":864},"end":{"line":59,"column":74,"offset":894}}}],"position":{"start":{"line":59,"column":44,"offset":864},"end":{"line":59,"column":74,"offset":894}}},{"type":"text","value":"\n"}],"position":{"start":{"line":59,"column":1,"offset":821},"end":{"line":59,"column":76,"offset":896}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"普通热力图","position":{"start":{"line":60,"column":3,"offset":899},"end":{"line":60,"column":8,"offset":904}}}],"position":{"start":{"line":60,"column":3,"offset":899},"end":{"line":60,"column":8,"offset":904}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"heatmap","position":{"start":{"line":60,"column":11,"offset":907},"end":{"line":60,"column":18,"offset":914}}}],"position":{"start":{"line":60,"column":11,"offset":907},"end":{"line":60,"column":18,"offset":914}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"heatmap","position":{"start":{"line":60,"column":21,"offset":917},"end":{"line":60,"column":28,"offset":924}}}],"position":{"start":{"line":60,"column":21,"offset":917},"end":{"line":60,"column":28,"offset":924}}},{"type":"text","value":"\n"}],"position":{"start":{"line":60,"column":1,"offset":897},"end":{"line":60,"column":30,"offset":926}}},{"type":"text","value":"\n"}],"position":{"start":{"line":58,"column":1,"offset":725},"end":{"line":60,"column":30,"offset":926}}},{"type":"text","value":"\n"}],"position":{"start":{"line":56,"column":1,"offset":690},"end":{"line":60,"column":30,"offset":926}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"热力图布局下只shape方法只支持常量的可视化。","position":{"start":{"line":63,"column":1,"offset":929},"end":{"line":63,"column":25,"offset":953}}}],"position":{"start":{"line":63,"column":1,"offset":929},"end":{"line":63,"column":25,"offset":953}}},{"type":"text","value":"\n"},{"type":"raw","value":"
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
","position":{"start":{"line":65,"column":1,"offset":955},"end":{"line":69,"column":4,"offset":1046}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"size"},"children":[{"type":"element","tagName":"a","properties":{"href":"#size","aria-label":"size permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size","position":{"start":{"line":71,"column":5,"offset":1052},"end":{"line":71,"column":9,"offset":1056}}}],"position":{"start":{"line":71,"column":1,"offset":1048},"end":{"line":71,"column":9,"offset":1056}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"当前版本 shape 为grid，hexagon不需要设置 size 映射","position":{"start":{"line":72,"column":1,"offset":1057},"end":{"line":72,"column":38,"offset":1094}}}],"position":{"start":{"line":72,"column":1,"offset":1057},"end":{"line":72,"column":38,"offset":1094}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"default 类型需要设置size映射 详细参数见","position":{"start":{"line":74,"column":1,"offset":1096},"end":{"line":74,"column":27,"offset":1122}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/l7/layer#size","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Size","position":{"start":{"line":74,"column":28,"offset":1123},"end":{"line":74,"column":32,"offset":1127}}}],"position":{"start":{"line":74,"column":27,"offset":1122},"end":{"line":74,"column":75,"offset":1170}}}],"position":{"start":{"line":74,"column":1,"offset":1096},"end":{"line":74,"column":75,"offset":1170}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"**size(field,values) **","position":{"start":{"line":76,"column":1,"offset":1172},"end":{"line":76,"column":24,"offset":1195}}}],"position":{"start":{"line":76,"column":1,"offset":1172},"end":{"line":76,"column":24,"offset":1195}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"field: 热力图权重字段","position":{"start":{"line":78,"column":3,"offset":1199},"end":{"line":78,"column":17,"offset":1213}}}],"position":{"start":{"line":78,"column":1,"offset":1197},"end":{"line":78,"column":17,"offset":1213}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"values: 数据映射区间 热力图显示 ","position":{"start":{"line":79,"column":3,"offset":1216},"end":{"line":79,"column":24,"offset":1237}}},{"type":"text","value":"[0, 1]","position":{"start":{"line":79,"column":25,"offset":1238},"end":{"line":79,"column":29,"offset":1242}}},{"type":"text","value":" 效果最佳","position":{"start":{"line":79,"column":30,"offset":1243},"end":{"line":79,"column":35,"offset":1248}}}],"position":{"start":{"line":79,"column":1,"offset":1214},"end":{"line":79,"column":35,"offset":1248}}},{"type":"text","value":"\n"}],"position":{"start":{"line":78,"column":1,"offset":1197},"end":{"line":79,"column":35,"offset":1248}}},{"type":"text","value":"\n"},{"type":"raw","value":"
HeatmapLayer.size('field', [0, 1]);\n
","position":{"start":{"line":81,"column":1,"offset":1250},"end":{"line":83,"column":4,"offset":1303}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"color"},"children":[{"type":"element","tagName":"a","properties":{"href":"#color","aria-label":"color permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"color","position":{"start":{"line":86,"column":5,"offset":1310},"end":{"line":86,"column":10,"offset":1315}}}],"position":{"start":{"line":86,"column":1,"offset":1306},"end":{"line":86,"column":10,"offset":1315}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"default heatMap 类型不需设置 color映射","position":{"start":{"line":87,"column":1,"offset":1316},"end":{"line":87,"column":31,"offset":1346}}}],"position":{"start":{"line":87,"column":1,"offset":1316},"end":{"line":87,"column":31,"offset":1346}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"color 配置项同 ","position":{"start":{"line":89,"column":1,"offset":1348},"end":{"line":89,"column":12,"offset":1359}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/l7/layer#color","target":"_self","rel":"nofollow"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"color","position":{"start":{"line":89,"column":15,"offset":1362},"end":{"line":89,"column":20,"offset":1367}}}],"position":{"start":{"line":89,"column":13,"offset":1360},"end":{"line":89,"column":22,"offset":1369}}}],"position":{"start":{"line":89,"column":12,"offset":1359},"end":{"line":89,"column":66,"offset":1413}}}],"position":{"start":{"line":89,"column":1,"offset":1348},"end":{"line":89,"column":66,"offset":1413}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"style"},"children":[{"type":"element","tagName":"a","properties":{"href":"#style","aria-label":"style permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"style","position":{"start":{"line":93,"column":5,"offset":1421},"end":{"line":93,"column":10,"offset":1426}}}],"position":{"start":{"line":93,"column":1,"offset":1417},"end":{"line":93,"column":10,"offset":1426}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"grid hexagon 可以通过style 设置透明度","position":{"start":{"line":95,"column":1,"offset":1428},"end":{"line":95,"column":29,"offset":1456}}}],"position":{"start":{"line":95,"column":1,"offset":1428},"end":{"line":95,"column":29,"offset":1456}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"default热力图需要通过style配置参数热力图参数","position":{"start":{"line":97,"column":1,"offset":1458},"end":{"line":97,"column":29,"offset":1486}}}],"position":{"start":{"line":97,"column":1,"offset":1458},"end":{"line":97,"column":29,"offset":1486}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"intensity   全局热力权重   推荐权重范围 1-5","position":{"start":{"line":99,"column":3,"offset":1490},"end":{"line":99,"column":34,"offset":1521}}}],"position":{"start":{"line":99,"column":1,"offset":1488},"end":{"line":99,"column":34,"offset":1521}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"radius  热力半径，单位像素","position":{"start":{"line":100,"column":3,"offset":1524},"end":{"line":100,"column":20,"offset":1541}}}],"position":{"start":{"line":100,"column":1,"offset":1522},"end":{"line":100,"column":20,"offset":1541}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"rampColors 色带参数","position":{"start":{"line":101,"column":3,"offset":1544},"end":{"line":101,"column":18,"offset":1559}}}],"position":{"start":{"line":101,"column":3,"offset":1544},"end":{"line":101,"column":18,"offset":1559}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"colors  颜色数组","position":{"start":{"line":102,"column":5,"offset":1564},"end":{"line":102,"column":17,"offset":1576}}}],"position":{"start":{"line":102,"column":3,"offset":1562},"end":{"line":102,"column":17,"offset":1576}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"positions 数据区间","position":{"start":{"line":103,"column":5,"offset":1581},"end":{"line":103,"column":19,"offset":1595}}}],"position":{"start":{"line":103,"column":3,"offset":1579},"end":{"line":103,"column":19,"offset":1595}}},{"type":"text","value":"\n"}],"position":{"start":{"line":102,"column":3,"offset":1562},"end":{"line":103,"column":19,"offset":1595}}},{"type":"text","value":"\n"}],"position":{"start":{"line":101,"column":1,"offset":1542},"end":{"line":103,"column":19,"offset":1595}}},{"type":"text","value":"\n"}],"position":{"start":{"line":99,"column":1,"offset":1488},"end":{"line":103,"column":19,"offset":1595}}},{"type":"text","value":"\n"},{"type":"raw","value":"
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
","position":{"start":{"line":105,"column":1,"offset":1597},"end":{"line":114,"column":4,"offset":1905}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"完整代码示例"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B","aria-label":"完整代码示例 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"完整代码示例","position":{"start":{"line":117,"column":5,"offset":1912},"end":{"line":117,"column":11,"offset":1918}}}],"position":{"start":{"line":117,"column":1,"offset":1908},"end":{"line":117,"column":11,"offset":1918}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"普通热力图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%99%AE%E9%80%9A%E7%83%AD%E5%8A%9B%E5%9B%BE","aria-label":"普通热力图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"普通热力图","position":{"start":{"line":119,"column":6,"offset":1925},"end":{"line":119,"column":11,"offset":1930}}}],"position":{"start":{"line":119,"column":1,"offset":1920},"end":{"line":119,"column":11,"offset":1930}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
","position":{"start":{"line":121,"column":1,"offset":1932},"end":{"line":137,"column":4,"offset":2433}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"网格热力图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%BD%91%E6%A0%BC%E7%83%AD%E5%8A%9B%E5%9B%BE","aria-label":"网格热力图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"网格热力图","position":{"start":{"line":141,"column":6,"offset":2442},"end":{"line":141,"column":11,"offset":2447}}}],"position":{"start":{"line":141,"column":1,"offset":2437},"end":{"line":141,"column":11,"offset":2447}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
","position":{"start":{"line":143,"column":1,"offset":2449},"end":{"line":170,"column":4,"offset":2935}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"六边形热力图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%AD%E8%BE%B9%E5%BD%A2%E7%83%AD%E5%8A%9B%E5%9B%BE","aria-label":"六边形热力图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"六边形热力图","position":{"start":{"line":173,"column":6,"offset":2943},"end":{"line":173,"column":12,"offset":2949}}}],"position":{"start":{"line":173,"column":1,"offset":2938},"end":{"line":173,"column":12,"offset":2949}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","position":{"start":{"line":175,"column":1,"offset":2951},"end":{"line":201,"column":4,"offset":3322}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":201,"column":4,"offset":3322}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-70306e64d780d0b877288013050c742c.json b/.cache/caches/gatsby-transformer-remark/diskstore-70306e64d780d0b877288013050c742c.json deleted file mode 100644 index 99bb5e24cd..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-70306e64d780d0b877288013050c742c.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-60d822501ed69ef0096233b3fb440654-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"An open source large-scale geospatial data visualization analysis development framework powered by WebGL.","position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":106,"offset":107}}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":106,"offset":107}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。","position":{"start":{"line":5,"column":1,"offset":109},"end":{"line":5,"column":173,"offset":281}}}],"position":{"start":{"line":5,"column":1,"offset":109},"end":{"line":5,"column":173,"offset":281}}},{"type":"text","value":"\n"},{"type":"raw","value":"","position":{"start":{"line":7,"column":1,"offset":283},"end":{"line":12,"column":9,"offset":856}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，","position":{"start":{"line":14,"column":1,"offset":858},"end":{"line":14,"column":78,"offset":935}}}],"position":{"start":{"line":14,"column":1,"offset":858},"end":{"line":14,"column":78,"offset":935}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"1.x 版本的用户需求我们持续跟进 ","position":{"start":{"line":16,"column":1,"offset":937},"end":{"line":16,"column":19,"offset":955}}},{"type":"element","tagName":"a","properties":{"href":"https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"旧版官网地址","position":{"start":{"line":16,"column":20,"offset":956},"end":{"line":16,"column":26,"offset":962}}}],"position":{"start":{"line":16,"column":19,"offset":955},"end":{"line":16,"column":81,"offset":1017}}}],"position":{"start":{"line":16,"column":1,"offset":937},"end":{"line":16,"column":81,"offset":1017}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"核心特性"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%A0%B8%E5%BF%83%E7%89%B9%E6%80%A7","aria-label":"核心特性 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"核心特性","position":{"start":{"line":18,"column":4,"offset":1022},"end":{"line":18,"column":8,"offset":1026}}}],"position":{"start":{"line":18,"column":1,"offset":1019},"end":{"line":18,"column":8,"offset":1026}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"🌏 数据驱动可视化展示","position":{"start":{"line":21,"column":1,"offset":1029},"end":{"line":21,"column":13,"offset":1041}}}],"position":{"start":{"line":21,"column":1,"offset":1029},"end":{"line":21,"column":13,"offset":1041}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。","position":{"start":{"line":23,"column":1,"offset":1043},"end":{"line":23,"column":31,"offset":1073}}}],"position":{"start":{"line":23,"column":1,"offset":1043},"end":{"line":23,"column":31,"offset":1073}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"🌏 2D，3D 一体化的海量数据高性能渲染","position":{"start":{"line":25,"column":1,"offset":1075},"end":{"line":25,"column":23,"offset":1097}}}],"position":{"start":{"line":25,"column":1,"offset":1075},"end":{"line":25,"column":23,"offset":1097}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"百万级空间数据实时，动态渲染。","position":{"start":{"line":27,"column":1,"offset":1099},"end":{"line":27,"column":16,"offset":1114}}}],"position":{"start":{"line":27,"column":1,"offset":1099},"end":{"line":27,"column":16,"offset":1114}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"🌏 简单灵活的数据接入","position":{"start":{"line":29,"column":1,"offset":1116},"end":{"line":29,"column":13,"offset":1128}}}],"position":{"start":{"line":29,"column":1,"offset":1116},"end":{"line":29,"column":13,"offset":1128}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。","position":{"start":{"line":31,"column":1,"offset":1130},"end":{"line":31,"column":53,"offset":1182}}}],"position":{"start":{"line":31,"column":1,"offset":1130},"end":{"line":31,"column":53,"offset":1182}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 🌏 多地图底图支持，支持离线内网部署","position":{"start":{"line":33,"column":1,"offset":1184},"end":{"line":33,"column":21,"offset":1204}}}],"position":{"start":{"line":33,"column":1,"offset":1184},"end":{"line":33,"column":21,"offset":1204}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。","position":{"start":{"line":35,"column":1,"offset":1206},"end":{"line":35,"column":34,"offset":1239}}}],"position":{"start":{"line":35,"column":1,"offset":1206},"end":{"line":35,"column":34,"offset":1239}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"支持丰富的图表类型"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%94%AF%E6%8C%81%E4%B8%B0%E5%AF%8C%E7%9A%84%E5%9B%BE%E8%A1%A8%E7%B1%BB%E5%9E%8B","aria-label":"支持丰富的图表类型 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"支持丰富的图表类型","position":{"start":{"line":37,"column":4,"offset":1244},"end":{"line":37,"column":13,"offset":1253}}}],"position":{"start":{"line":37,"column":1,"offset":1241},"end":{"line":37,"column":13,"offset":1253}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"点图层"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%82%B9%E5%9B%BE%E5%B1%82","aria-label":"点图层 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"点图层","position":{"start":{"line":39,"column":5,"offset":1259},"end":{"line":39,"column":8,"offset":1262}}}],"position":{"start":{"line":39,"column":1,"offset":1255},"end":{"line":39,"column":8,"offset":1262}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"气泡图","position":{"start":{"line":41,"column":4,"offset":1268},"end":{"line":41,"column":7,"offset":1271}}}],"position":{"start":{"line":41,"column":1,"offset":1265},"end":{"line":41,"column":7,"offset":1271}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"散点图","position":{"start":{"line":42,"column":4,"offset":1275},"end":{"line":42,"column":7,"offset":1278}}}],"position":{"start":{"line":42,"column":1,"offset":1272},"end":{"line":42,"column":7,"offset":1278}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"符号地图","position":{"start":{"line":43,"column":4,"offset":1282},"end":{"line":43,"column":8,"offset":1286}}}],"position":{"start":{"line":43,"column":1,"offset":1279},"end":{"line":43,"column":8,"offset":1286}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"3D柱状地图","position":{"start":{"line":44,"column":4,"offset":1290},"end":{"line":44,"column":10,"offset":1296}}}],"position":{"start":{"line":44,"column":1,"offset":1287},"end":{"line":44,"column":10,"offset":1296}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"聚合地图","position":{"start":{"line":45,"column":4,"offset":1300},"end":{"line":45,"column":8,"offset":1304}}}],"position":{"start":{"line":45,"column":1,"offset":1297},"end":{"line":45,"column":8,"offset":1304}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"复合图表地图","position":{"start":{"line":46,"column":4,"offset":1308},"end":{"line":46,"column":10,"offset":1314}}}],"position":{"start":{"line":46,"column":1,"offset":1305},"end":{"line":46,"column":10,"offset":1314}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"自定义Marker","position":{"start":{"line":47,"column":4,"offset":1318},"end":{"line":47,"column":13,"offset":1327}}}],"position":{"start":{"line":47,"column":1,"offset":1315},"end":{"line":47,"column":13,"offset":1327}}},{"type":"text","value":"\n"}],"position":{"start":{"line":41,"column":1,"offset":1265},"end":{"line":47,"column":13,"offset":1327}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"线图层"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%BA%BF%E5%9B%BE%E5%B1%82","aria-label":"线图层 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"线图层","position":{"start":{"line":49,"column":5,"offset":1333},"end":{"line":49,"column":8,"offset":1336}}}],"position":{"start":{"line":49,"column":1,"offset":1329},"end":{"line":49,"column":8,"offset":1336}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"路径地图","position":{"start":{"line":51,"column":3,"offset":1340},"end":{"line":51,"column":7,"offset":1344}}}],"position":{"start":{"line":51,"column":1,"offset":1338},"end":{"line":51,"column":7,"offset":1344}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"弧线，支持2D弧线、3D弧线以及大圆航线","position":{"start":{"line":52,"column":3,"offset":1347},"end":{"line":52,"column":23,"offset":1367}}}],"position":{"start":{"line":52,"column":1,"offset":1345},"end":{"line":52,"column":23,"offset":1367}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"等值线","position":{"start":{"line":53,"column":3,"offset":1370},"end":{"line":53,"column":6,"offset":1373}}}],"position":{"start":{"line":53,"column":1,"offset":1368},"end":{"line":53,"column":6,"offset":1373}}},{"type":"text","value":"\n"}],"position":{"start":{"line":51,"column":1,"offset":1338},"end":{"line":53,"column":6,"offset":1373}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"面图层"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%9D%A2%E5%9B%BE%E5%B1%82","aria-label":"面图层 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"面图层","position":{"start":{"line":55,"column":5,"offset":1379},"end":{"line":55,"column":8,"offset":1382}}}],"position":{"start":{"line":55,"column":1,"offset":1375},"end":{"line":55,"column":8,"offset":1382}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"填充图","position":{"start":{"line":57,"column":3,"offset":1386},"end":{"line":57,"column":6,"offset":1389}}}],"position":{"start":{"line":57,"column":1,"offset":1384},"end":{"line":57,"column":6,"offset":1389}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"3D填充图","position":{"start":{"line":58,"column":3,"offset":1392},"end":{"line":58,"column":8,"offset":1397}}}],"position":{"start":{"line":58,"column":1,"offset":1390},"end":{"line":58,"column":8,"offset":1397}}},{"type":"text","value":"\n"}],"position":{"start":{"line":57,"column":1,"offset":1384},"end":{"line":58,"column":8,"offset":1397}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"热力图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%83%AD%E5%8A%9B%E5%9B%BE","aria-label":"热力图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"热力图","position":{"start":{"line":60,"column":5,"offset":1403},"end":{"line":60,"column":8,"offset":1406}}}],"position":{"start":{"line":60,"column":1,"offset":1399},"end":{"line":60,"column":8,"offset":1406}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"经典热力图","position":{"start":{"line":62,"column":3,"offset":1410},"end":{"line":62,"column":8,"offset":1415}}}],"position":{"start":{"line":62,"column":1,"offset":1408},"end":{"line":62,"column":8,"offset":1415}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"蜂窝热力图","position":{"start":{"line":63,"column":3,"offset":1418},"end":{"line":63,"column":8,"offset":1423}}}],"position":{"start":{"line":63,"column":1,"offset":1416},"end":{"line":63,"column":8,"offset":1423}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"网格热力图","position":{"start":{"line":64,"column":3,"offset":1426},"end":{"line":64,"column":8,"offset":1431}}}],"position":{"start":{"line":64,"column":1,"offset":1424},"end":{"line":64,"column":8,"offset":1431}}},{"type":"text","value":"\n"}],"position":{"start":{"line":62,"column":1,"offset":1408},"end":{"line":64,"column":8,"offset":1431}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"栅格地图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%A0%85%E6%A0%BC%E5%9C%B0%E5%9B%BE","aria-label":"栅格地图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"栅格地图","position":{"start":{"line":66,"column":5,"offset":1437},"end":{"line":66,"column":9,"offset":1441}}}],"position":{"start":{"line":66,"column":1,"offset":1433},"end":{"line":66,"column":9,"offset":1441}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"图片","position":{"start":{"line":67,"column":3,"offset":1444},"end":{"line":67,"column":5,"offset":1446}}}],"position":{"start":{"line":67,"column":1,"offset":1442},"end":{"line":67,"column":5,"offset":1446}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Raster","position":{"start":{"line":68,"column":3,"offset":1449},"end":{"line":68,"column":9,"offset":1455}}}],"position":{"start":{"line":68,"column":1,"offset":1447},"end":{"line":68,"column":9,"offset":1455}}},{"type":"text","value":"\n"}],"position":{"start":{"line":67,"column":1,"offset":1442},"end":{"line":68,"column":9,"offset":1455}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"l7-20-roadmap"},"children":[{"type":"element","tagName":"a","properties":{"href":"#l7-20-roadmap","aria-label":"l7 20 roadmap permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"L7 2.0 Roadmap","position":{"start":{"line":70,"column":4,"offset":1460},"end":{"line":70,"column":18,"offset":1474}}}],"position":{"start":{"line":70,"column":1,"offset":1457},"end":{"line":70,"column":18,"offset":1474}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ","alt":"L7 Road Map"},"children":[],"position":{"start":{"line":72,"column":1,"offset":1476},"end":{"line":72,"column":101,"offset":1576}}}],"position":{"start":{"line":72,"column":1,"offset":1476},"end":{"line":72,"column":101,"offset":1576}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"更多技术细节，详细进展，请关注 ","position":{"start":{"line":75,"column":1,"offset":1579},"end":{"line":75,"column":17,"offset":1595}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"GitHub","position":{"start":{"line":75,"column":18,"offset":1596},"end":{"line":75,"column":24,"offset":1602}}}],"position":{"start":{"line":75,"column":17,"offset":1595},"end":{"line":75,"column":55,"offset":1633}}},{"type":"text","value":"，欢迎大家来给点点 Star，让更多人看到这个开源的项目。","position":{"start":{"line":75,"column":55,"offset":1633},"end":{"line":75,"column":84,"offset":1662}}}],"position":{"start":{"line":75,"column":1,"offset":1579},"end":{"line":75,"column":84,"offset":1662}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":76,"column":1,"offset":1663}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-708db427f6d17dd8a19efe761b638236.json b/.cache/caches/gatsby-transformer-remark/diskstore-708db427f6d17dd8a19efe761b638236.json deleted file mode 100644 index 3c86d0e6c6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-708db427f6d17dd8a19efe761b638236.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-8ba6e770aca269ce1a09e219ea919f44-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"Marker 地图标注 目前只支持2D dom标注","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":26,"offset":26},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":26,"offset":26},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":5,"column":4,"offset":32},"end":{"line":5,"column":8,"offset":36},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":29},"end":{"line":5,"column":8,"offset":36},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"paragraph","children":[{"type":"text","value":"Marker","position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":7,"offset":43},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":7,"offset":43},"end":{"line":6,"column":13,"offset":49},"indent":[]}},{"type":"html","value":"const Marker = new L7.Marker(option)","position":{"start":{"line":6,"column":13,"offset":49},"end":{"line":6,"column":51,"offset":87},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":51,"offset":87},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#option","title":null,"children":[],"data":{"hProperties":{"aria-label":"option permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"option","position":{"start":{"line":9,"column":6,"offset":95},"end":{"line":9,"column":12,"offset":101},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":90},"end":{"line":9,"column":12,"offset":101},"indent":[]},"data":{"id":"option","htmlAttributes":{"id":"option"},"hProperties":{"id":"option"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"color        ","position":{"start":{"line":11,"column":3,"offset":105},"end":{"line":11,"column":16,"offset":118},"indent":[]}},{"type":"html","value":"string","position":{"start":{"line":11,"column":16,"offset":118},"end":{"line":11,"column":25,"offset":127},"indent":[]}},{"type":"text","value":"   ","position":{"start":{"line":11,"column":25,"offset":127},"end":{"line":11,"column":28,"offset":130},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32","alt":"map-marker.png","position":{"start":{"line":11,"column":28,"offset":130},"end":{"line":11,"column":264,"offset":366},"indent":[]}},{"type":"text","value":" 设置默认marker的颜色","position":{"start":{"line":11,"column":264,"offset":366},"end":{"line":11,"column":278,"offset":380},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":105},"end":{"line":11,"column":278,"offset":380},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":103},"end":{"line":11,"column":278,"offset":380},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"element    ","position":{"start":{"line":12,"column":3,"offset":383},"end":{"line":12,"column":14,"offset":394},"indent":[]}},{"type":"html","value":"Dom|string","position":{"start":{"line":12,"column":14,"offset":394},"end":{"line":12,"column":26,"offset":406},"indent":[]}},{"type":"text","value":"    自定义marker Dom节点，可以是dom实例，也可以是dom id","position":{"start":{"line":12,"column":26,"offset":406},"end":{"line":12,"column":65,"offset":445},"indent":[]}}],"position":{"start":{"line":12,"column":3,"offset":383},"end":{"line":12,"column":65,"offset":445},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":381},"end":{"line":12,"column":65,"offset":445},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"anchor     ","position":{"start":{"line":13,"column":3,"offset":448},"end":{"line":13,"column":14,"offset":459},"indent":[]}},{"type":"html","value":"string","position":{"start":{"line":13,"column":14,"offset":459},"end":{"line":13,"column":22,"offset":467},"indent":[]}},{"type":"text","value":"  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right","position":{"start":{"line":13,"column":22,"offset":467},"end":{"line":13,"column":135,"offset":580},"indent":[]}}],"position":{"start":{"line":13,"column":3,"offset":448},"end":{"line":13,"column":135,"offset":580},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":446},"end":{"line":13,"column":135,"offset":580},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"offset    ","position":{"start":{"line":14,"column":3,"offset":583},"end":{"line":14,"column":13,"offset":593},"indent":[]}},{"type":"html","value":"Array","position":{"start":{"line":14,"column":13,"offset":593},"end":{"line":14,"column":20,"offset":600},"indent":[]}},{"type":"text","value":"  偏移量 ","position":{"start":{"line":14,"column":20,"offset":600},"end":{"line":14,"column":26,"offset":606},"indent":[]}},{"type":"linkReference","identifier":" 0, 0 ","label":" 0, 0 ","referenceType":"shortcut","children":[{"type":"text","value":" 0, 0 ","position":{"start":{"line":14,"column":27,"offset":607},"end":{"line":14,"column":33,"offset":613},"indent":[]}}],"position":{"start":{"line":14,"column":26,"offset":606},"end":{"line":14,"column":34,"offset":614},"indent":[]}},{"type":"text","value":" 分别表示 X, Y 的偏移量","position":{"start":{"line":14,"column":34,"offset":614},"end":{"line":14,"column":49,"offset":629},"indent":[]}}],"position":{"start":{"line":14,"column":3,"offset":583},"end":{"line":14,"column":49,"offset":629},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":581},"end":{"line":14,"column":49,"offset":629},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":103},"end":{"line":14,"column":49,"offset":629},"indent":[1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":17,"column":4,"offset":635},"end":{"line":17,"column":6,"offset":637},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":632},"end":{"line":17,"column":6,"offset":637},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#setlnglat","title":null,"children":[],"data":{"hProperties":{"aria-label":"setlnglat permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setLnglat","position":{"start":{"line":19,"column":6,"offset":644},"end":{"line":19,"column":15,"offset":653},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":639},"end":{"line":19,"column":15,"offset":653},"indent":[]},"data":{"id":"setlnglat","htmlAttributes":{"id":"setlnglat"},"hProperties":{"id":"setlnglat"}}},{"type":"paragraph","children":[{"type":"text","value":"设置marker经纬度位置","position":{"start":{"line":20,"column":1,"offset":654},"end":{"line":20,"column":14,"offset":667},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":654},"end":{"line":20,"column":14,"offset":667},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#addto","title":null,"children":[],"data":{"hProperties":{"aria-label":"addto permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"addTo","position":{"start":{"line":22,"column":6,"offset":674},"end":{"line":22,"column":11,"offset":679},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":669},"end":{"line":22,"column":11,"offset":679},"indent":[]},"data":{"id":"addto","htmlAttributes":{"id":"addto"},"hProperties":{"id":"addto"}}},{"type":"paragraph","children":[{"type":"text","value":"将marker添加到地图Scene","position":{"start":{"line":23,"column":1,"offset":680},"end":{"line":23,"column":18,"offset":697},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":680},"end":{"line":23,"column":18,"offset":697},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#remove","title":null,"children":[],"data":{"hProperties":{"aria-label":"remove permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"remove","position":{"start":{"line":25,"column":6,"offset":704},"end":{"line":25,"column":12,"offset":710},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":699},"end":{"line":25,"column":12,"offset":710},"indent":[]},"data":{"id":"remove","htmlAttributes":{"id":"remove"},"hProperties":{"id":"remove"}}},{"type":"paragraph","children":[{"type":"text","value":"移除marker","position":{"start":{"line":26,"column":1,"offset":711},"end":{"line":26,"column":9,"offset":719},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":711},"end":{"line":26,"column":9,"offset":719},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#getelement","title":null,"children":[],"data":{"hProperties":{"aria-label":"getelement permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getElement","position":{"start":{"line":28,"column":6,"offset":726},"end":{"line":28,"column":16,"offset":736},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":721},"end":{"line":28,"column":16,"offset":736},"indent":[]},"data":{"id":"getelement","htmlAttributes":{"id":"getelement"},"hProperties":{"id":"getelement"}}},{"type":"paragraph","children":[{"type":"text","value":"获取marker dom Element","position":{"start":{"line":29,"column":1,"offset":737},"end":{"line":29,"column":21,"offset":757},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":737},"end":{"line":29,"column":21,"offset":757},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#getlnglat","title":null,"children":[],"data":{"hProperties":{"aria-label":"getlnglat permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getLngLat","position":{"start":{"line":31,"column":6,"offset":764},"end":{"line":31,"column":15,"offset":773},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":759},"end":{"line":31,"column":15,"offset":773},"indent":[]},"data":{"id":"getlnglat","htmlAttributes":{"id":"getlnglat"},"hProperties":{"id":"getlnglat"}}},{"type":"paragraph","children":[{"type":"text","value":"获取marker经纬度坐标","position":{"start":{"line":32,"column":1,"offset":774},"end":{"line":32,"column":14,"offset":787},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":774},"end":{"line":32,"column":14,"offset":787},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#togglepopup","title":null,"children":[],"data":{"hProperties":{"aria-label":"togglepopup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"togglePopup","position":{"start":{"line":34,"column":6,"offset":794},"end":{"line":34,"column":17,"offset":805},"indent":[]}}],"position":{"start":{"line":34,"column":1,"offset":789},"end":{"line":34,"column":17,"offset":805},"indent":[]},"data":{"id":"togglepopup","htmlAttributes":{"id":"togglepopup"},"hProperties":{"id":"togglepopup"}}},{"type":"paragraph","children":[{"type":"text","value":"开启或者关闭marker弹出框","position":{"start":{"line":35,"column":1,"offset":806},"end":{"line":35,"column":16,"offset":821},"indent":[]}}],"position":{"start":{"line":35,"column":1,"offset":806},"end":{"line":35,"column":16,"offset":821},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#setpopup","title":null,"children":[],"data":{"hProperties":{"aria-label":"setpopup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setPopup","position":{"start":{"line":37,"column":6,"offset":828},"end":{"line":37,"column":14,"offset":836},"indent":[]}}],"position":{"start":{"line":37,"column":1,"offset":823},"end":{"line":37,"column":14,"offset":836},"indent":[]},"data":{"id":"setpopup","htmlAttributes":{"id":"setpopup"},"hProperties":{"id":"setpopup"}}},{"type":"paragraph","children":[{"type":"text","value":"为marker设置popup","position":{"start":{"line":38,"column":1,"offset":837},"end":{"line":38,"column":15,"offset":851},"indent":[]}}],"position":{"start":{"line":38,"column":1,"offset":837},"end":{"line":38,"column":15,"offset":851},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#getpopup","title":null,"children":[],"data":{"hProperties":{"aria-label":"getpopup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getPopup","position":{"start":{"line":40,"column":6,"offset":858},"end":{"line":40,"column":14,"offset":866},"indent":[]}}],"position":{"start":{"line":40,"column":1,"offset":853},"end":{"line":40,"column":14,"offset":866},"indent":[]},"data":{"id":"getpopup","htmlAttributes":{"id":"getpopup"},"hProperties":{"id":"getpopup"}}},{"type":"paragraph","children":[{"type":"text","value":"获取marker弹出框","position":{"start":{"line":41,"column":1,"offset":867},"end":{"line":41,"column":12,"offset":878},"indent":[]}}],"position":{"start":{"line":41,"column":1,"offset":867},"end":{"line":41,"column":12,"offset":878},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#示例代码","title":null,"children":[],"data":{"hProperties":{"aria-label":"示例代码 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"示例代码","position":{"start":{"line":44,"column":4,"offset":884},"end":{"line":44,"column":8,"offset":888},"indent":[]}}],"position":{"start":{"line":44,"column":1,"offset":881},"end":{"line":44,"column":8,"offset":888},"indent":[]},"data":{"id":"示例代码","htmlAttributes":{"id":"示例代码"},"hProperties":{"id":"示例代码"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#默认marker","title":null,"children":[],"data":{"hProperties":{"aria-label":"默认marker permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"默认Marker","position":{"start":{"line":46,"column":6,"offset":895},"end":{"line":46,"column":14,"offset":903},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":890},"end":{"line":46,"column":14,"offset":903},"indent":[]},"data":{"id":"默认marker","htmlAttributes":{"id":"默认marker"},"hProperties":{"id":"默认marker"}}},{"type":"paragraph","children":[{"type":"text","value":"**","position":{"start":{"line":47,"column":1,"offset":904},"end":{"line":47,"column":3,"offset":906},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":47,"column":3,"offset":906},"end":{"line":47,"column":9,"offset":912},"indent":[]}},{"type":"html","value":"const marker = new L7.Marker({color:'blue'})","position":{"start":{"line":47,"column":9,"offset":912},"end":{"line":47,"column":56,"offset":959},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":904},"end":{"line":47,"column":56,"offset":959},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#自定义marker","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义marker permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"自定义Marker","position":{"start":{"line":50,"column":6,"offset":967},"end":{"line":50,"column":15,"offset":976},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":962},"end":{"line":50,"column":15,"offset":976},"indent":[]},"data":{"id":"自定义marker","htmlAttributes":{"id":"自定义marker"},"hProperties":{"id":"自定义marker"}}},{"type":"html","lang":"javascript","meta":null,"value":"
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
","position":{"start":{"line":52,"column":1,"offset":978},"end":{"line":62,"column":4,"offset":1281},"indent":[1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#设置-popup","title":null,"children":[],"data":{"hProperties":{"aria-label":"设置 popup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"设置 popup","position":{"start":{"line":65,"column":6,"offset":1289},"end":{"line":65,"column":14,"offset":1297},"indent":[]}}],"position":{"start":{"line":65,"column":1,"offset":1284},"end":{"line":65,"column":14,"offset":1297},"indent":[]},"data":{"id":"设置-popup","htmlAttributes":{"id":"设置-popup"},"hProperties":{"id":"设置-popup"}}},{"type":"html","lang":"javascript","meta":null,"value":"
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","position":{"start":{"line":67,"column":1,"offset":1299},"end":{"line":77,"column":4,"offset":1499},"indent":[1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":80,"column":1,"offset":1502}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-71d7457cae084a75f217f59a58db6c16.json b/.cache/caches/gatsby-transformer-remark/diskstore-71d7457cae084a75f217f59a58db6c16.json deleted file mode 100644 index 637fec9d06..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-71d7457cae084a75f217f59a58db6c16.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-2b56a382712fe8167708fc9c6567ee2a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"Marker 地图标注 目前只支持2D dom标注","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":26,"offset":26},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":26,"offset":26},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":5,"column":4,"offset":32},"end":{"line":5,"column":8,"offset":36},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":29},"end":{"line":5,"column":8,"offset":36},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"paragraph","children":[{"type":"text","value":"Marker","position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":7,"offset":43},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":7,"offset":43},"end":{"line":6,"column":13,"offset":49},"indent":[]}},{"type":"html","value":"const Marker = new L7.Marker(option)","position":{"start":{"line":6,"column":13,"offset":49},"end":{"line":6,"column":51,"offset":87},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":51,"offset":87},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#option","title":null,"children":[],"data":{"hProperties":{"aria-label":"option permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"option","position":{"start":{"line":9,"column":6,"offset":95},"end":{"line":9,"column":12,"offset":101},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":90},"end":{"line":9,"column":12,"offset":101},"indent":[]},"data":{"id":"option","htmlAttributes":{"id":"option"},"hProperties":{"id":"option"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"color        ","position":{"start":{"line":11,"column":3,"offset":105},"end":{"line":11,"column":16,"offset":118},"indent":[]}},{"type":"html","value":"string","position":{"start":{"line":11,"column":16,"offset":118},"end":{"line":11,"column":25,"offset":127},"indent":[]}},{"type":"text","value":"   ","position":{"start":{"line":11,"column":25,"offset":127},"end":{"line":11,"column":28,"offset":130},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32","alt":"map-marker.png","position":{"start":{"line":11,"column":28,"offset":130},"end":{"line":11,"column":264,"offset":366},"indent":[]}},{"type":"text","value":" 设置默认marker的颜色","position":{"start":{"line":11,"column":264,"offset":366},"end":{"line":11,"column":278,"offset":380},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":105},"end":{"line":11,"column":278,"offset":380},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":103},"end":{"line":11,"column":278,"offset":380},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"element    ","position":{"start":{"line":12,"column":3,"offset":383},"end":{"line":12,"column":14,"offset":394},"indent":[]}},{"type":"html","value":"Dom|string","position":{"start":{"line":12,"column":14,"offset":394},"end":{"line":12,"column":26,"offset":406},"indent":[]}},{"type":"text","value":"    自定义marker Dom节点，可以是dom实例，也可以是dom id","position":{"start":{"line":12,"column":26,"offset":406},"end":{"line":12,"column":65,"offset":445},"indent":[]}}],"position":{"start":{"line":12,"column":3,"offset":383},"end":{"line":12,"column":65,"offset":445},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":381},"end":{"line":12,"column":65,"offset":445},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"anchor     ","position":{"start":{"line":13,"column":3,"offset":448},"end":{"line":13,"column":14,"offset":459},"indent":[]}},{"type":"html","value":"string","position":{"start":{"line":13,"column":14,"offset":459},"end":{"line":13,"column":22,"offset":467},"indent":[]}},{"type":"text","value":"  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right","position":{"start":{"line":13,"column":22,"offset":467},"end":{"line":13,"column":135,"offset":580},"indent":[]}}],"position":{"start":{"line":13,"column":3,"offset":448},"end":{"line":13,"column":135,"offset":580},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":446},"end":{"line":13,"column":135,"offset":580},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"offset    ","position":{"start":{"line":14,"column":3,"offset":583},"end":{"line":14,"column":13,"offset":593},"indent":[]}},{"type":"html","value":"Array","position":{"start":{"line":14,"column":13,"offset":593},"end":{"line":14,"column":20,"offset":600},"indent":[]}},{"type":"text","value":"  偏移量 ","position":{"start":{"line":14,"column":20,"offset":600},"end":{"line":14,"column":26,"offset":606},"indent":[]}},{"type":"linkReference","identifier":" 0, 0 ","label":" 0, 0 ","referenceType":"shortcut","children":[{"type":"text","value":" 0, 0 ","position":{"start":{"line":14,"column":27,"offset":607},"end":{"line":14,"column":33,"offset":613},"indent":[]}}],"position":{"start":{"line":14,"column":26,"offset":606},"end":{"line":14,"column":34,"offset":614},"indent":[]}},{"type":"text","value":" 分别表示 X, Y 的偏移量","position":{"start":{"line":14,"column":34,"offset":614},"end":{"line":14,"column":49,"offset":629},"indent":[]}}],"position":{"start":{"line":14,"column":3,"offset":583},"end":{"line":14,"column":49,"offset":629},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":581},"end":{"line":14,"column":49,"offset":629},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":103},"end":{"line":14,"column":49,"offset":629},"indent":[1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":17,"column":4,"offset":635},"end":{"line":17,"column":6,"offset":637},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":632},"end":{"line":17,"column":6,"offset":637},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#setlnglat","title":null,"children":[],"data":{"hProperties":{"aria-label":"setlnglat permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setLnglat","position":{"start":{"line":19,"column":6,"offset":644},"end":{"line":19,"column":15,"offset":653},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":639},"end":{"line":19,"column":15,"offset":653},"indent":[]},"data":{"id":"setlnglat","htmlAttributes":{"id":"setlnglat"},"hProperties":{"id":"setlnglat"}}},{"type":"paragraph","children":[{"type":"text","value":"设置marker经纬度位置","position":{"start":{"line":20,"column":1,"offset":654},"end":{"line":20,"column":14,"offset":667},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":654},"end":{"line":20,"column":14,"offset":667},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#addto","title":null,"children":[],"data":{"hProperties":{"aria-label":"addto permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"addTo","position":{"start":{"line":22,"column":6,"offset":674},"end":{"line":22,"column":11,"offset":679},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":669},"end":{"line":22,"column":11,"offset":679},"indent":[]},"data":{"id":"addto","htmlAttributes":{"id":"addto"},"hProperties":{"id":"addto"}}},{"type":"paragraph","children":[{"type":"text","value":"将marker添加到地图Scene","position":{"start":{"line":23,"column":1,"offset":680},"end":{"line":23,"column":18,"offset":697},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":680},"end":{"line":23,"column":18,"offset":697},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#remove","title":null,"children":[],"data":{"hProperties":{"aria-label":"remove permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"remove","position":{"start":{"line":25,"column":6,"offset":704},"end":{"line":25,"column":12,"offset":710},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":699},"end":{"line":25,"column":12,"offset":710},"indent":[]},"data":{"id":"remove","htmlAttributes":{"id":"remove"},"hProperties":{"id":"remove"}}},{"type":"paragraph","children":[{"type":"text","value":"移除marker","position":{"start":{"line":26,"column":1,"offset":711},"end":{"line":26,"column":9,"offset":719},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":711},"end":{"line":26,"column":9,"offset":719},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#getelement","title":null,"children":[],"data":{"hProperties":{"aria-label":"getelement permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getElement","position":{"start":{"line":28,"column":6,"offset":726},"end":{"line":28,"column":16,"offset":736},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":721},"end":{"line":28,"column":16,"offset":736},"indent":[]},"data":{"id":"getelement","htmlAttributes":{"id":"getelement"},"hProperties":{"id":"getelement"}}},{"type":"paragraph","children":[{"type":"text","value":"获取marker dom Element","position":{"start":{"line":29,"column":1,"offset":737},"end":{"line":29,"column":21,"offset":757},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":737},"end":{"line":29,"column":21,"offset":757},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#getlnglat","title":null,"children":[],"data":{"hProperties":{"aria-label":"getlnglat permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getLngLat","position":{"start":{"line":31,"column":6,"offset":764},"end":{"line":31,"column":15,"offset":773},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":759},"end":{"line":31,"column":15,"offset":773},"indent":[]},"data":{"id":"getlnglat","htmlAttributes":{"id":"getlnglat"},"hProperties":{"id":"getlnglat"}}},{"type":"paragraph","children":[{"type":"text","value":"获取marker经纬度坐标","position":{"start":{"line":32,"column":1,"offset":774},"end":{"line":32,"column":14,"offset":787},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":774},"end":{"line":32,"column":14,"offset":787},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#togglepopup","title":null,"children":[],"data":{"hProperties":{"aria-label":"togglepopup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"togglePopup","position":{"start":{"line":34,"column":6,"offset":794},"end":{"line":34,"column":17,"offset":805},"indent":[]}}],"position":{"start":{"line":34,"column":1,"offset":789},"end":{"line":34,"column":17,"offset":805},"indent":[]},"data":{"id":"togglepopup","htmlAttributes":{"id":"togglepopup"},"hProperties":{"id":"togglepopup"}}},{"type":"paragraph","children":[{"type":"text","value":"开启或者关闭marker弹出框","position":{"start":{"line":35,"column":1,"offset":806},"end":{"line":35,"column":16,"offset":821},"indent":[]}}],"position":{"start":{"line":35,"column":1,"offset":806},"end":{"line":35,"column":16,"offset":821},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#setpopup","title":null,"children":[],"data":{"hProperties":{"aria-label":"setpopup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setPopup","position":{"start":{"line":37,"column":6,"offset":828},"end":{"line":37,"column":14,"offset":836},"indent":[]}}],"position":{"start":{"line":37,"column":1,"offset":823},"end":{"line":37,"column":14,"offset":836},"indent":[]},"data":{"id":"setpopup","htmlAttributes":{"id":"setpopup"},"hProperties":{"id":"setpopup"}}},{"type":"paragraph","children":[{"type":"text","value":"为marker设置popup","position":{"start":{"line":38,"column":1,"offset":837},"end":{"line":38,"column":15,"offset":851},"indent":[]}}],"position":{"start":{"line":38,"column":1,"offset":837},"end":{"line":38,"column":15,"offset":851},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#getpopup","title":null,"children":[],"data":{"hProperties":{"aria-label":"getpopup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getPopup","position":{"start":{"line":40,"column":6,"offset":858},"end":{"line":40,"column":14,"offset":866},"indent":[]}}],"position":{"start":{"line":40,"column":1,"offset":853},"end":{"line":40,"column":14,"offset":866},"indent":[]},"data":{"id":"getpopup","htmlAttributes":{"id":"getpopup"},"hProperties":{"id":"getpopup"}}},{"type":"paragraph","children":[{"type":"text","value":"获取marker弹出框","position":{"start":{"line":41,"column":1,"offset":867},"end":{"line":41,"column":12,"offset":878},"indent":[]}}],"position":{"start":{"line":41,"column":1,"offset":867},"end":{"line":41,"column":12,"offset":878},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#示例代码","title":null,"children":[],"data":{"hProperties":{"aria-label":"示例代码 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"示例代码","position":{"start":{"line":44,"column":4,"offset":884},"end":{"line":44,"column":8,"offset":888},"indent":[]}}],"position":{"start":{"line":44,"column":1,"offset":881},"end":{"line":44,"column":8,"offset":888},"indent":[]},"data":{"id":"示例代码","htmlAttributes":{"id":"示例代码"},"hProperties":{"id":"示例代码"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#默认marker","title":null,"children":[],"data":{"hProperties":{"aria-label":"默认marker permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"默认Marker","position":{"start":{"line":46,"column":6,"offset":895},"end":{"line":46,"column":14,"offset":903},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":890},"end":{"line":46,"column":14,"offset":903},"indent":[]},"data":{"id":"默认marker","htmlAttributes":{"id":"默认marker"},"hProperties":{"id":"默认marker"}}},{"type":"paragraph","children":[{"type":"text","value":"**","position":{"start":{"line":47,"column":1,"offset":904},"end":{"line":47,"column":3,"offset":906},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":47,"column":3,"offset":906},"end":{"line":47,"column":9,"offset":912},"indent":[]}},{"type":"html","value":"const marker = new L7.Marker({color:'blue'})","position":{"start":{"line":47,"column":9,"offset":912},"end":{"line":47,"column":56,"offset":959},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":904},"end":{"line":47,"column":56,"offset":959},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#自定义marker","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义marker permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"自定义Marker","position":{"start":{"line":50,"column":6,"offset":967},"end":{"line":50,"column":15,"offset":976},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":962},"end":{"line":50,"column":15,"offset":976},"indent":[]},"data":{"id":"自定义marker","htmlAttributes":{"id":"自定义marker"},"hProperties":{"id":"自定义marker"}}},{"type":"html","lang":"javascript","meta":null,"value":"
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
","position":{"start":{"line":52,"column":1,"offset":978},"end":{"line":62,"column":4,"offset":1281},"indent":[1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#设置-popup","title":null,"children":[],"data":{"hProperties":{"aria-label":"设置 popup permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"设置 popup","position":{"start":{"line":65,"column":6,"offset":1289},"end":{"line":65,"column":14,"offset":1297},"indent":[]}}],"position":{"start":{"line":65,"column":1,"offset":1284},"end":{"line":65,"column":14,"offset":1297},"indent":[]},"data":{"id":"设置-popup","htmlAttributes":{"id":"设置-popup"},"hProperties":{"id":"设置-popup"}}},{"type":"html","lang":"javascript","meta":null,"value":"
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","position":{"start":{"line":67,"column":1,"offset":1299},"end":{"line":77,"column":4,"offset":1499},"indent":[1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":80,"column":1,"offset":1502}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-720e22c9634af3f9d131e5ac1644cf37.json b/.cache/caches/gatsby-transformer-remark/diskstore-720e22c9634af3f9d131e5ac1644cf37.json deleted file mode 100644 index 767f81c8ec..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-720e22c9634af3f9d131e5ac1644cf37.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-e214775bf910f98457136a5495aca2a9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":2,"column":1,"offset":1}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-73356f7d454821c3e49a73251e841413.json b/.cache/caches/gatsby-transformer-remark/diskstore-73356f7d454821c3e49a73251e841413.json deleted file mode 100644 index 72df6e73ed..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-73356f7d454821c3e49a73251e841413.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-1c348fc333b039279ca33b95350216a1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-733a4b307f173da473d8091da398fbdf.json b/.cache/caches/gatsby-transformer-remark/diskstore-733a4b307f173da473d8091da398fbdf.json deleted file mode 100644 index 3750004ec5..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-733a4b307f173da473d8091da398fbdf.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-397422a40e7fc67301e3758910fccfaf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-754291a4a9ec0358871137c842dbdad8.json b/.cache/caches/gatsby-transformer-remark/diskstore-754291a4a9ec0358871137c842dbdad8.json deleted file mode 100644 index 1e3d0f0a7e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-754291a4a9ec0358871137c842dbdad8.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ac6b5999771507b02330fb5a6d22d24f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-754dde23c4d0d52c71d11d840ced0580.json b/.cache/caches/gatsby-transformer-remark/diskstore-754dde23c4d0d52c71d11d840ced0580.json deleted file mode 100644 index 989d11bbad..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-754dde23c4d0d52c71d11d840ced0580.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-d472877a984a12546079e673e84f8ab3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-7592f62e01be61ff25f4c638a9f62882.json b/.cache/caches/gatsby-transformer-remark/diskstore-7592f62e01be61ff25f4c638a9f62882.json deleted file mode 100644 index 7fcf1eee92..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-7592f62e01be61ff25f4c638a9f62882.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-e8ed7f4cc4b01ba1be50f819d1d1fcae-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-762c22642bad534106d2b7da3e208152.json b/.cache/caches/gatsby-transformer-remark/diskstore-762c22642bad534106d2b7da3e208152.json deleted file mode 100644 index 87eef681f4..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-762c22642bad534106d2b7da3e208152.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-b547ac3a0b516aef90927b09bdc0a22c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"popup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#popup","aria-label":"popup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"popup","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":8,"offset":7}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":8,"offset":7}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图标注信息窗口，用于展示地图要素的属性信息","position":{"start":{"line":3,"column":1,"offset":9},"end":{"line":3,"column":23,"offset":31}}}],"position":{"start":{"line":3,"column":1,"offset":9},"end":{"line":3,"column":23,"offset":31}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":6,"column":4,"offset":37},"end":{"line":6,"column":8,"offset":41}}}],"position":{"start":{"line":6,"column":1,"offset":34},"end":{"line":6,"column":8,"offset":41}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Popup","position":{"start":{"line":7,"column":1,"offset":42},"end":{"line":7,"column":6,"offset":47}}}],"position":{"start":{"line":7,"column":1,"offset":42},"end":{"line":7,"column":6,"offset":47}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const popup = new L7.Popup(option);\n
","position":{"start":{"line":9,"column":1,"offset":49},"end":{"line":11,"column":4,"offset":101}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"option"},"children":[{"type":"element","tagName":"a","properties":{"href":"#option","aria-label":"option permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"option","position":{"start":{"line":14,"column":6,"offset":109},"end":{"line":14,"column":12,"offset":115}}}],"position":{"start":{"line":14,"column":1,"offset":104},"end":{"line":14,"column":12,"offset":115}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"closeButton","position":{"start":{"line":16,"column":3,"offset":119},"end":{"line":16,"column":14,"offset":130}}}],"position":{"start":{"line":16,"column":1,"offset":117},"end":{"line":16,"column":14,"offset":130}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"closeOnClick","position":{"start":{"line":17,"column":3,"offset":133},"end":{"line":17,"column":15,"offset":145}}}],"position":{"start":{"line":17,"column":1,"offset":131},"end":{"line":17,"column":15,"offset":145}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"maxWidth","position":{"start":{"line":18,"column":3,"offset":148},"end":{"line":18,"column":11,"offset":156}}}],"position":{"start":{"line":18,"column":1,"offset":146},"end":{"line":18,"column":11,"offset":156}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"anchor","position":{"start":{"line":19,"column":3,"offset":159},"end":{"line":19,"column":9,"offset":165}}}],"position":{"start":{"line":19,"column":1,"offset":157},"end":{"line":19,"column":9,"offset":165}}},{"type":"text","value":"\n"}],"position":{"start":{"line":16,"column":1,"offset":117},"end":{"line":19,"column":9,"offset":165}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":22,"column":4,"offset":171},"end":{"line":22,"column":6,"offset":173}}}],"position":{"start":{"line":22,"column":1,"offset":168},"end":{"line":22,"column":6,"offset":173}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"setlnglat"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setlnglat","aria-label":"setlnglat permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setLnglat","position":{"start":{"line":24,"column":6,"offset":180},"end":{"line":24,"column":15,"offset":189}}}],"position":{"start":{"line":24,"column":1,"offset":175},"end":{"line":24,"column":15,"offset":189}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置popup的经纬度位置","position":{"start":{"line":25,"column":1,"offset":190},"end":{"line":25,"column":14,"offset":203}}},{"type":"raw","value":"
","position":{"start":{"line":25,"column":14,"offset":203},"end":{"line":25,"column":20,"offset":209}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":25,"column":22,"offset":211},"end":{"line":25,"column":24,"offset":213}}}],"position":{"start":{"line":25,"column":20,"offset":209},"end":{"line":25,"column":26,"offset":215}}},{"type":"text","value":"：lnglat 经纬度数组 ","position":{"start":{"line":25,"column":26,"offset":215},"end":{"line":25,"column":40,"offset":229}}},{"type":"text","value":"[112,32]","position":{"start":{"line":25,"column":41,"offset":230},"end":{"line":25,"column":47,"offset":236}}}],"position":{"start":{"line":25,"column":1,"offset":190},"end":{"line":25,"column":48,"offset":237}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.setLnglat([112, 32]);\n
","position":{"start":{"line":27,"column":1,"offset":239},"end":{"line":29,"column":4,"offset":284}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"addto"},"children":[{"type":"element","tagName":"a","properties":{"href":"#addto","aria-label":"addto permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"addTo","position":{"start":{"line":32,"column":6,"offset":292},"end":{"line":32,"column":11,"offset":297}}}],"position":{"start":{"line":32,"column":1,"offset":287},"end":{"line":32,"column":11,"offset":297}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":33,"column":3,"offset":300},"end":{"line":33,"column":5,"offset":302}}}],"position":{"start":{"line":33,"column":1,"offset":298},"end":{"line":33,"column":7,"offset":304}}},{"type":"text","value":"：scene 地图scene实例","position":{"start":{"line":33,"column":7,"offset":304},"end":{"line":33,"column":23,"offset":320}}}],"position":{"start":{"line":33,"column":1,"offset":298},"end":{"line":33,"column":23,"offset":320}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将popup添加到地图scene显示","position":{"start":{"line":35,"column":1,"offset":322},"end":{"line":35,"column":19,"offset":340}}}],"position":{"start":{"line":35,"column":1,"offset":322},"end":{"line":35,"column":19,"offset":340}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.addTo(scene);\n
","position":{"start":{"line":37,"column":1,"offset":342},"end":{"line":39,"column":4,"offset":379}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"sethtml"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sethtml","aria-label":"sethtml permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setHtml","position":{"start":{"line":42,"column":6,"offset":387},"end":{"line":42,"column":13,"offset":394}}}],"position":{"start":{"line":42,"column":1,"offset":382},"end":{"line":42,"column":13,"offset":394}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":43,"column":3,"offset":397},"end":{"line":43,"column":5,"offset":399}}}],"position":{"start":{"line":43,"column":1,"offset":395},"end":{"line":43,"column":7,"offset":401}}},{"type":"text","value":"：html 字符串","position":{"start":{"line":43,"column":7,"offset":401},"end":{"line":43,"column":16,"offset":410}}}],"position":{"start":{"line":43,"column":1,"offset":395},"end":{"line":43,"column":16,"offset":410}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置popup html 内容","position":{"start":{"line":45,"column":1,"offset":412},"end":{"line":45,"column":16,"offset":427}}}],"position":{"start":{"line":45,"column":1,"offset":412},"end":{"line":45,"column":16,"offset":427}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
","position":{"start":{"line":47,"column":1,"offset":429},"end":{"line":51,"column":4,"offset":639}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"settext"},"children":[{"type":"element","tagName":"a","properties":{"href":"#settext","aria-label":"settext permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setText","position":{"start":{"line":54,"column":6,"offset":647},"end":{"line":54,"column":13,"offset":654}}}],"position":{"start":{"line":54,"column":1,"offset":642},"end":{"line":54,"column":13,"offset":654}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置 popup 显示文本内容","position":{"start":{"line":55,"column":1,"offset":655},"end":{"line":55,"column":16,"offset":670}}}],"position":{"start":{"line":55,"column":1,"offset":655},"end":{"line":55,"column":16,"offset":670}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.setText('hello world');\n
","position":{"start":{"line":57,"column":1,"offset":672},"end":{"line":59,"column":4,"offset":719}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"remove"},"children":[{"type":"element","tagName":"a","properties":{"href":"#remove","aria-label":"remove permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"remove","position":{"start":{"line":62,"column":6,"offset":727},"end":{"line":62,"column":12,"offset":733}}}],"position":{"start":{"line":62,"column":1,"offset":722},"end":{"line":62,"column":12,"offset":733}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除popup","position":{"start":{"line":63,"column":1,"offset":734},"end":{"line":63,"column":8,"offset":741}}}],"position":{"start":{"line":63,"column":1,"offset":734},"end":{"line":63,"column":8,"offset":741}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.remove();\n
","position":{"start":{"line":65,"column":1,"offset":743},"end":{"line":67,"column":4,"offset":775}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%8B%E4%BB%B6","aria-label":"事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"事件","position":{"start":{"line":70,"column":4,"offset":781},"end":{"line":70,"column":6,"offset":783}}}],"position":{"start":{"line":70,"column":1,"offset":778},"end":{"line":70,"column":6,"offset":783}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"close"},"children":[{"type":"element","tagName":"a","properties":{"href":"#close","aria-label":"close permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"close","position":{"start":{"line":72,"column":6,"offset":790},"end":{"line":72,"column":11,"offset":795}}}],"position":{"start":{"line":72,"column":1,"offset":785},"end":{"line":72,"column":11,"offset":795}}},{"type":"text","value":"\n"},{"type":"raw","value":"
popup.on('close', () => {});\n
","position":{"start":{"line":74,"column":1,"offset":797},"end":{"line":76,"column":4,"offset":839}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"示例代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81","aria-label":"示例代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"示例代码","position":{"start":{"line":79,"column":4,"offset":845},"end":{"line":79,"column":8,"offset":849}}}],"position":{"start":{"line":79,"column":1,"offset":842},"end":{"line":79,"column":8,"offset":849}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"添加popup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%B7%BB%E5%8A%A0popup","aria-label":"添加popup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"添加popup","position":{"start":{"line":81,"column":6,"offset":856},"end":{"line":81,"column":13,"offset":863}}}],"position":{"start":{"line":81,"column":1,"offset":851},"end":{"line":81,"column":13,"offset":863}}},{"type":"text","value":"\n"},{"type":"raw","value":"
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
","position":{"start":{"line":83,"column":1,"offset":865},"end":{"line":86,"column":4,"offset":981}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"faq"},"children":[{"type":"element","tagName":"a","properties":{"href":"#faq","aria-label":"faq permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"FAQ","position":{"start":{"line":88,"column":5,"offset":987},"end":{"line":88,"column":8,"offset":990}}}],"position":{"start":{"line":88,"column":1,"offset":983},"end":{"line":88,"column":8,"offset":990}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":89,"column":1,"offset":991}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-76bd509c642cf46a1c94208590d1970a.json b/.cache/caches/gatsby-transformer-remark/diskstore-76bd509c642cf46a1c94208590d1970a.json deleted file mode 100644 index 906ae599aa..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-76bd509c642cf46a1c94208590d1970a.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-81330a3168163fa3728e304ac6d58e91-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"control"},"children":[{"type":"element","tagName":"a","properties":{"href":"#control","aria-label":"control permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"control","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":10,"offset":9}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":10,"offset":9}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺","position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":43,"offset":53}}}],"position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":43,"offset":53}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":6,"column":4,"offset":59},"end":{"line":6,"column":8,"offset":63}}}],"position":{"start":{"line":6,"column":1,"offset":56},"end":{"line":6,"column":8,"offset":63}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const baseControl = new L7.Control.Base(option);\n
","position":{"start":{"line":8,"column":1,"offset":65},"end":{"line":10,"column":4,"offset":131}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"option"},"children":[{"type":"element","tagName":"a","properties":{"href":"#option","aria-label":"option permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"option","position":{"start":{"line":13,"column":6,"offset":139},"end":{"line":13,"column":12,"offset":145}}}],"position":{"start":{"line":13,"column":1,"offset":134},"end":{"line":13,"column":12,"offset":145}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" position: ","position":{"start":{"line":15,"column":1,"offset":147},"end":{"line":15,"column":12,"offset":158}}},{"type":"raw","value":"string","position":{"start":{"line":15,"column":12,"offset":158},"end":{"line":15,"column":20,"offset":166}}},{"type":"text","value":" 控件位置支持是个方位 ","position":{"start":{"line":15,"column":20,"offset":166},"end":{"line":15,"column":32,"offset":178}}},{"type":"raw","value":"bottomright, topright, bottomleft, topleft","position":{"start":{"line":15,"column":32,"offset":178},"end":{"line":15,"column":76,"offset":222}}}],"position":{"start":{"line":15,"column":1,"offset":147},"end":{"line":15,"column":76,"offset":222}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"scene-内置地图组件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#scene-%E5%86%85%E7%BD%AE%E5%9C%B0%E5%9B%BE%E7%BB%84%E4%BB%B6","aria-label":"scene 内置地图组件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"scene 内置地图组件","position":{"start":{"line":18,"column":6,"offset":230},"end":{"line":18,"column":18,"offset":242}}}],"position":{"start":{"line":18,"column":1,"offset":225},"end":{"line":18,"column":18,"offset":242}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"zoom 地图放大缩小  默认添加","position":{"start":{"line":19,"column":1,"offset":243},"end":{"line":19,"column":18,"offset":260}}},{"type":"raw","value":"
","position":{"start":{"line":19,"column":18,"offset":260},"end":{"line":19,"column":24,"offset":266}}},{"type":"text","value":"Scale 地图比例尺   默认添加","position":{"start":{"line":19,"column":24,"offset":266},"end":{"line":19,"column":42,"offset":284}}},{"type":"raw","value":"
","position":{"start":{"line":19,"column":42,"offset":284},"end":{"line":19,"column":48,"offset":290}}},{"type":"text","value":"attribution 地图数据属性  默认添加","position":{"start":{"line":19,"column":48,"offset":290},"end":{"line":19,"column":72,"offset":314}}},{"type":"raw","value":"
","position":{"start":{"line":19,"column":72,"offset":314},"end":{"line":19,"column":78,"offset":320}}},{"type":"text","value":"layer 图层列表","position":{"start":{"line":19,"column":78,"offset":320},"end":{"line":19,"column":88,"offset":330}}}],"position":{"start":{"line":19,"column":1,"offset":243},"end":{"line":19,"column":88,"offset":330}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"scene配置项设置控件添加状态","position":{"start":{"line":21,"column":3,"offset":334},"end":{"line":21,"column":19,"offset":350}}}],"position":{"start":{"line":21,"column":1,"offset":332},"end":{"line":21,"column":21,"offset":352}}}],"position":{"start":{"line":21,"column":1,"offset":332},"end":{"line":21,"column":21,"offset":352}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
","position":{"start":{"line":23,"column":1,"offset":354},"end":{"line":29,"column":4,"offset":470}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":""},"children":[{"type":"element","tagName":"a","properties":{"href":"#","aria-label":" permalink","class":"anchor"},"children":[{"type":"raw","value":""}]}],"position":{"start":{"line":31,"column":1,"offset":472},"end":{"line":31,"column":6,"offset":477}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"zoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoom","aria-label":"zoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Zoom","position":{"start":{"line":33,"column":6,"offset":484},"end":{"line":33,"column":10,"offset":488}}}],"position":{"start":{"line":33,"column":1,"offset":479},"end":{"line":33,"column":10,"offset":488}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"放大缩小组件 默认 左上角","position":{"start":{"line":34,"column":1,"offset":489},"end":{"line":34,"column":14,"offset":502}}}],"position":{"start":{"line":34,"column":1,"offset":489},"end":{"line":34,"column":14,"offset":502}}},{"type":"text","value":"\n"},{"type":"raw","value":"
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
","position":{"start":{"line":36,"column":1,"offset":504},"end":{"line":40,"column":4,"offset":591}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"scale"},"children":[{"type":"element","tagName":"a","properties":{"href":"#scale","aria-label":"scale permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Scale","position":{"start":{"line":43,"column":6,"offset":599},"end":{"line":43,"column":11,"offset":604}}}],"position":{"start":{"line":43,"column":1,"offset":594},"end":{"line":43,"column":11,"offset":604}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"比例尺组件默认左下角","position":{"start":{"line":44,"column":1,"offset":605},"end":{"line":44,"column":11,"offset":615}}}],"position":{"start":{"line":44,"column":1,"offset":605},"end":{"line":44,"column":11,"offset":615}}},{"type":"text","value":"\n"},{"type":"raw","value":"
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
","position":{"start":{"line":46,"column":1,"offset":617},"end":{"line":50,"column":4,"offset":708}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"attribution"},"children":[{"type":"element","tagName":"a","properties":{"href":"#attribution","aria-label":"attribution permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"attribution","position":{"start":{"line":53,"column":6,"offset":716},"end":{"line":53,"column":17,"offset":727}}}],"position":{"start":{"line":53,"column":1,"offset":711},"end":{"line":53,"column":17,"offset":727}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"默认右下角","position":{"start":{"line":54,"column":1,"offset":728},"end":{"line":54,"column":6,"offset":733}}}],"position":{"start":{"line":54,"column":1,"offset":728},"end":{"line":54,"column":6,"offset":733}}},{"type":"text","value":"\n"},{"type":"raw","value":"
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
","position":{"start":{"line":56,"column":1,"offset":735},"end":{"line":60,"column":4,"offset":831}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"layer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#layer","aria-label":"layer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"layer","position":{"start":{"line":63,"column":6,"offset":839},"end":{"line":63,"column":11,"offset":844}}}],"position":{"start":{"line":63,"column":1,"offset":834},"end":{"line":63,"column":11,"offset":844}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层列表目前只支持可视化overlayers 图层控制","position":{"start":{"line":64,"column":1,"offset":845},"end":{"line":64,"column":28,"offset":872}}}],"position":{"start":{"line":64,"column":1,"offset":845},"end":{"line":64,"column":28,"offset":872}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
","position":{"start":{"line":66,"column":1,"offset":874},"end":{"line":74,"column":4,"offset":1032}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":77,"column":4,"offset":1038},"end":{"line":77,"column":6,"offset":1040}}}],"position":{"start":{"line":77,"column":1,"offset":1035},"end":{"line":77,"column":6,"offset":1040}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"onadd"},"children":[{"type":"element","tagName":"a","properties":{"href":"#onadd","aria-label":"onadd permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"onAdd","position":{"start":{"line":79,"column":6,"offset":1047},"end":{"line":79,"column":11,"offset":1052}}}],"position":{"start":{"line":79,"column":1,"offset":1042},"end":{"line":79,"column":11,"offset":1052}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"组件添加到地图Scene时调用，自定义组件时需要实现此方法","position":{"start":{"line":80,"column":1,"offset":1053},"end":{"line":80,"column":30,"offset":1082}}}],"position":{"start":{"line":80,"column":1,"offset":1053},"end":{"line":80,"column":30,"offset":1082}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"addto"},"children":[{"type":"element","tagName":"a","properties":{"href":"#addto","aria-label":"addto permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"addTo","position":{"start":{"line":83,"column":6,"offset":1090},"end":{"line":83,"column":11,"offset":1095}}}],"position":{"start":{"line":83,"column":1,"offset":1085},"end":{"line":83,"column":11,"offset":1095}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"添加到地图scene","position":{"start":{"line":84,"column":1,"offset":1096},"end":{"line":84,"column":11,"offset":1106}}}],"position":{"start":{"line":84,"column":1,"offset":1096},"end":{"line":84,"column":11,"offset":1106}}},{"type":"text","value":"\n"},{"type":"raw","value":"
control.addTo(scene);\n
","position":{"start":{"line":86,"column":1,"offset":1108},"end":{"line":88,"column":4,"offset":1147}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"setposition"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setposition","aria-label":"setposition permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setPosition","position":{"start":{"line":91,"column":6,"offset":1155},"end":{"line":91,"column":17,"offset":1166}}}],"position":{"start":{"line":91,"column":1,"offset":1150},"end":{"line":91,"column":17,"offset":1166}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置组件位置","position":{"start":{"line":92,"column":1,"offset":1167},"end":{"line":92,"column":7,"offset":1173}}}],"position":{"start":{"line":92,"column":1,"offset":1167},"end":{"line":92,"column":7,"offset":1173}}},{"type":"text","value":"\n"},{"type":"raw","value":"
control.setPosition('bottomright');\n
","position":{"start":{"line":94,"column":1,"offset":1175},"end":{"line":96,"column":4,"offset":1228}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"remove"},"children":[{"type":"element","tagName":"a","properties":{"href":"#remove","aria-label":"remove permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"remove","position":{"start":{"line":99,"column":6,"offset":1236},"end":{"line":99,"column":12,"offset":1242}}}],"position":{"start":{"line":99,"column":1,"offset":1231},"end":{"line":99,"column":12,"offset":1242}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除地图组件","position":{"start":{"line":100,"column":1,"offset":1243},"end":{"line":100,"column":7,"offset":1249}}}],"position":{"start":{"line":100,"column":1,"offset":1243},"end":{"line":100,"column":7,"offset":1249}}},{"type":"text","value":"\n"},{"type":"raw","value":"
control.remove();\n
","position":{"start":{"line":102,"column":1,"offset":1251},"end":{"line":104,"column":4,"offset":1286}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"示例代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81","aria-label":"示例代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"示例代码","position":{"start":{"line":108,"column":4,"offset":1293},"end":{"line":108,"column":8,"offset":1297}}}],"position":{"start":{"line":108,"column":1,"offset":1290},"end":{"line":108,"column":8,"offset":1297}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"自定义图例控件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E4%BE%8B%E6%8E%A7%E4%BB%B6","aria-label":"自定义图例控件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"自定义图例控件","position":{"start":{"line":111,"column":6,"offset":1305},"end":{"line":111,"column":13,"offset":1312}}}],"position":{"start":{"line":111,"column":1,"offset":1300},"end":{"line":111,"column":13,"offset":1312}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"源码","position":{"start":{"line":112,"column":2,"offset":1314},"end":{"line":112,"column":4,"offset":1316}}}],"position":{"start":{"line":112,"column":1,"offset":1313},"end":{"line":112,"column":77,"offset":1389}}}],"position":{"start":{"line":112,"column":1,"offset":1313},"end":{"line":112,"column":77,"offset":1389}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
","position":{"start":{"line":114,"column":1,"offset":1391},"end":{"line":129,"column":4,"offset":1915}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-1","aria-label":" 1 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]}],"position":{"start":{"line":131,"column":1,"offset":1917},"end":{"line":131,"column":4,"offset":1920}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"faq"},"children":[{"type":"element","tagName":"a","properties":{"href":"#faq","aria-label":"faq permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"FAQ","position":{"start":{"line":133,"column":4,"offset":1925},"end":{"line":133,"column":7,"offset":1928}}}],"position":{"start":{"line":133,"column":1,"offset":1922},"end":{"line":133,"column":7,"offset":1928}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":135,"column":1,"offset":1930}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-7a8d8de09682c29bb71a363a587e5363.json b/.cache/caches/gatsby-transformer-remark/diskstore-7a8d8de09682c29bb71a363a587e5363.json deleted file mode 100644 index 2dfd25e2d6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-7a8d8de09682c29bb71a363a587e5363.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-2b56a382712fe8167708fc9c6567ee2a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Marker 地图标注 目前只支持2D dom标注","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":26,"offset":26}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":26,"offset":26}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":5,"column":4,"offset":32},"end":{"line":5,"column":8,"offset":36}}}],"position":{"start":{"line":5,"column":1,"offset":29},"end":{"line":5,"column":8,"offset":36}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Marker","position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":7,"offset":43}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":7,"offset":43},"end":{"line":6,"column":13,"offset":49}}},{"type":"raw","value":"const Marker = new L7.Marker(option)","position":{"start":{"line":6,"column":13,"offset":49},"end":{"line":6,"column":51,"offset":87}}}],"position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":51,"offset":87}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"option"},"children":[{"type":"element","tagName":"a","properties":{"href":"#option","aria-label":"option permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"option","position":{"start":{"line":9,"column":6,"offset":95},"end":{"line":9,"column":12,"offset":101}}}],"position":{"start":{"line":9,"column":1,"offset":90},"end":{"line":9,"column":12,"offset":101}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"color        ","position":{"start":{"line":11,"column":3,"offset":105},"end":{"line":11,"column":16,"offset":118}}},{"type":"raw","value":"string","position":{"start":{"line":11,"column":16,"offset":118},"end":{"line":11,"column":25,"offset":127}}},{"type":"text","value":"   ","position":{"start":{"line":11,"column":25,"offset":127},"end":{"line":11,"column":28,"offset":130}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32","alt":"map-marker.png"},"children":[],"position":{"start":{"line":11,"column":28,"offset":130},"end":{"line":11,"column":264,"offset":366}}},{"type":"text","value":" 设置默认marker的颜色","position":{"start":{"line":11,"column":264,"offset":366},"end":{"line":11,"column":278,"offset":380}}}],"position":{"start":{"line":11,"column":1,"offset":103},"end":{"line":11,"column":278,"offset":380}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"element    ","position":{"start":{"line":12,"column":3,"offset":383},"end":{"line":12,"column":14,"offset":394}}},{"type":"raw","value":"Dom|string","position":{"start":{"line":12,"column":14,"offset":394},"end":{"line":12,"column":26,"offset":406}}},{"type":"text","value":"    自定义marker Dom节点，可以是dom实例，也可以是dom id","position":{"start":{"line":12,"column":26,"offset":406},"end":{"line":12,"column":65,"offset":445}}}],"position":{"start":{"line":12,"column":1,"offset":381},"end":{"line":12,"column":65,"offset":445}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"anchor     ","position":{"start":{"line":13,"column":3,"offset":448},"end":{"line":13,"column":14,"offset":459}}},{"type":"raw","value":"string","position":{"start":{"line":13,"column":14,"offset":459},"end":{"line":13,"column":22,"offset":467}}},{"type":"text","value":"  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right","position":{"start":{"line":13,"column":22,"offset":467},"end":{"line":13,"column":135,"offset":580}}}],"position":{"start":{"line":13,"column":1,"offset":446},"end":{"line":13,"column":135,"offset":580}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"offset    ","position":{"start":{"line":14,"column":3,"offset":583},"end":{"line":14,"column":13,"offset":593}}},{"type":"raw","value":"Array","position":{"start":{"line":14,"column":13,"offset":593},"end":{"line":14,"column":20,"offset":600}}},{"type":"text","value":"  偏移量 ","position":{"start":{"line":14,"column":20,"offset":600},"end":{"line":14,"column":26,"offset":606}}},{"type":"text","value":"[ 0, 0 ]","position":{"start":{"line":14,"column":27,"offset":607},"end":{"line":14,"column":33,"offset":613}}},{"type":"text","value":" 分别表示 X, Y 的偏移量","position":{"start":{"line":14,"column":34,"offset":614},"end":{"line":14,"column":49,"offset":629}}}],"position":{"start":{"line":14,"column":1,"offset":581},"end":{"line":14,"column":49,"offset":629}}},{"type":"text","value":"\n"}],"position":{"start":{"line":11,"column":1,"offset":103},"end":{"line":14,"column":49,"offset":629}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":17,"column":4,"offset":635},"end":{"line":17,"column":6,"offset":637}}}],"position":{"start":{"line":17,"column":1,"offset":632},"end":{"line":17,"column":6,"offset":637}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"setlnglat"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setlnglat","aria-label":"setlnglat permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setLnglat","position":{"start":{"line":19,"column":6,"offset":644},"end":{"line":19,"column":15,"offset":653}}}],"position":{"start":{"line":19,"column":1,"offset":639},"end":{"line":19,"column":15,"offset":653}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置marker经纬度位置","position":{"start":{"line":20,"column":1,"offset":654},"end":{"line":20,"column":14,"offset":667}}}],"position":{"start":{"line":20,"column":1,"offset":654},"end":{"line":20,"column":14,"offset":667}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"addto"},"children":[{"type":"element","tagName":"a","properties":{"href":"#addto","aria-label":"addto permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"addTo","position":{"start":{"line":22,"column":6,"offset":674},"end":{"line":22,"column":11,"offset":679}}}],"position":{"start":{"line":22,"column":1,"offset":669},"end":{"line":22,"column":11,"offset":679}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将marker添加到地图Scene","position":{"start":{"line":23,"column":1,"offset":680},"end":{"line":23,"column":18,"offset":697}}}],"position":{"start":{"line":23,"column":1,"offset":680},"end":{"line":23,"column":18,"offset":697}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"remove"},"children":[{"type":"element","tagName":"a","properties":{"href":"#remove","aria-label":"remove permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"remove","position":{"start":{"line":25,"column":6,"offset":704},"end":{"line":25,"column":12,"offset":710}}}],"position":{"start":{"line":25,"column":1,"offset":699},"end":{"line":25,"column":12,"offset":710}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除marker","position":{"start":{"line":26,"column":1,"offset":711},"end":{"line":26,"column":9,"offset":719}}}],"position":{"start":{"line":26,"column":1,"offset":711},"end":{"line":26,"column":9,"offset":719}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"getelement"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getelement","aria-label":"getelement permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getElement","position":{"start":{"line":28,"column":6,"offset":726},"end":{"line":28,"column":16,"offset":736}}}],"position":{"start":{"line":28,"column":1,"offset":721},"end":{"line":28,"column":16,"offset":736}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取marker dom Element","position":{"start":{"line":29,"column":1,"offset":737},"end":{"line":29,"column":21,"offset":757}}}],"position":{"start":{"line":29,"column":1,"offset":737},"end":{"line":29,"column":21,"offset":757}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"getlnglat"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getlnglat","aria-label":"getlnglat permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getLngLat","position":{"start":{"line":31,"column":6,"offset":764},"end":{"line":31,"column":15,"offset":773}}}],"position":{"start":{"line":31,"column":1,"offset":759},"end":{"line":31,"column":15,"offset":773}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取marker经纬度坐标","position":{"start":{"line":32,"column":1,"offset":774},"end":{"line":32,"column":14,"offset":787}}}],"position":{"start":{"line":32,"column":1,"offset":774},"end":{"line":32,"column":14,"offset":787}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"togglepopup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#togglepopup","aria-label":"togglepopup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"togglePopup","position":{"start":{"line":34,"column":6,"offset":794},"end":{"line":34,"column":17,"offset":805}}}],"position":{"start":{"line":34,"column":1,"offset":789},"end":{"line":34,"column":17,"offset":805}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"开启或者关闭marker弹出框","position":{"start":{"line":35,"column":1,"offset":806},"end":{"line":35,"column":16,"offset":821}}}],"position":{"start":{"line":35,"column":1,"offset":806},"end":{"line":35,"column":16,"offset":821}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"setpopup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setpopup","aria-label":"setpopup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setPopup","position":{"start":{"line":37,"column":6,"offset":828},"end":{"line":37,"column":14,"offset":836}}}],"position":{"start":{"line":37,"column":1,"offset":823},"end":{"line":37,"column":14,"offset":836}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为marker设置popup","position":{"start":{"line":38,"column":1,"offset":837},"end":{"line":38,"column":15,"offset":851}}}],"position":{"start":{"line":38,"column":1,"offset":837},"end":{"line":38,"column":15,"offset":851}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"getpopup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getpopup","aria-label":"getpopup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getPopup","position":{"start":{"line":40,"column":6,"offset":858},"end":{"line":40,"column":14,"offset":866}}}],"position":{"start":{"line":40,"column":1,"offset":853},"end":{"line":40,"column":14,"offset":866}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取marker弹出框","position":{"start":{"line":41,"column":1,"offset":867},"end":{"line":41,"column":12,"offset":878}}}],"position":{"start":{"line":41,"column":1,"offset":867},"end":{"line":41,"column":12,"offset":878}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"示例代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81","aria-label":"示例代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"示例代码","position":{"start":{"line":44,"column":4,"offset":884},"end":{"line":44,"column":8,"offset":888}}}],"position":{"start":{"line":44,"column":1,"offset":881},"end":{"line":44,"column":8,"offset":888}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"默认marker"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%BB%98%E8%AE%A4marker","aria-label":"默认marker permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"默认Marker","position":{"start":{"line":46,"column":6,"offset":895},"end":{"line":46,"column":14,"offset":903}}}],"position":{"start":{"line":46,"column":1,"offset":890},"end":{"line":46,"column":14,"offset":903}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"**","position":{"start":{"line":47,"column":1,"offset":904},"end":{"line":47,"column":3,"offset":906}}},{"type":"raw","value":"
","position":{"start":{"line":47,"column":3,"offset":906},"end":{"line":47,"column":9,"offset":912}}},{"type":"raw","value":"const marker = new L7.Marker({color:'blue'})","position":{"start":{"line":47,"column":9,"offset":912},"end":{"line":47,"column":56,"offset":959}}}],"position":{"start":{"line":47,"column":1,"offset":904},"end":{"line":47,"column":56,"offset":959}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"自定义marker"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%87%AA%E5%AE%9A%E4%B9%89marker","aria-label":"自定义marker permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"自定义Marker","position":{"start":{"line":50,"column":6,"offset":967},"end":{"line":50,"column":15,"offset":976}}}],"position":{"start":{"line":50,"column":1,"offset":962},"end":{"line":50,"column":15,"offset":976}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
","position":{"start":{"line":52,"column":1,"offset":978},"end":{"line":62,"column":4,"offset":1281}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"设置-popup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%AE%BE%E7%BD%AE-popup","aria-label":"设置 popup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"设置 popup","position":{"start":{"line":65,"column":6,"offset":1289},"end":{"line":65,"column":14,"offset":1297}}}],"position":{"start":{"line":65,"column":1,"offset":1284},"end":{"line":65,"column":14,"offset":1297}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","position":{"start":{"line":67,"column":1,"offset":1299},"end":{"line":77,"column":4,"offset":1499}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":80,"column":1,"offset":1502}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-7aaa76b8fc1b248393a24117a24cf130.json b/.cache/caches/gatsby-transformer-remark/diskstore-7aaa76b8fc1b248393a24117a24cf130.json deleted file mode 100644 index 6905332c4e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-7aaa76b8fc1b248393a24117a24cf130.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-7bb76714df549123e99e9b48d8d6822f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#pointlayer","title":null,"children":[],"data":{"hProperties":{"aria-label":"pointlayer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"PointLayer","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":13,"offset":13},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":13,"offset":13},"indent":[]},"data":{"id":"pointlayer","htmlAttributes":{"id":"pointlayer"},"hProperties":{"id":"pointlayer"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":5,"column":4,"offset":19},"end":{"line":5,"column":6,"offset":21},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":6,"offset":21},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。","position":{"start":{"line":6,"column":1,"offset":22},"end":{"line":6,"column":37,"offset":58},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":22},"end":{"line":6,"column":37,"offset":58},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"shape 支持","position":{"start":{"line":8,"column":1,"offset":60},"end":{"line":8,"column":9,"offset":68},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":60},"end":{"line":8,"column":9,"offset":68},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"3D类型 柱图","position":{"start":{"line":10,"column":3,"offset":72},"end":{"line":10,"column":10,"offset":79},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":70},"end":{"line":10,"column":12,"offset":81},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":70},"end":{"line":10,"column":12,"offset":81},"indent":[]}},{"type":"html","lang":null,"meta":null,"value":"
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
","position":{"start":{"line":12,"column":1,"offset":83},"end":{"line":15,"column":4,"offset":153},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"2D 符号图","position":{"start":{"line":17,"column":3,"offset":157},"end":{"line":17,"column":9,"offset":163},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":155},"end":{"line":17,"column":11,"offset":165},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":155},"end":{"line":17,"column":11,"offset":165},"indent":[]}},{"type":"html","lang":null,"meta":null,"value":"
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
","position":{"start":{"line":19,"column":1,"offset":167},"end":{"line":22,"column":4,"offset":276},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"图片标注","position":{"start":{"line":24,"column":3,"offset":280},"end":{"line":24,"column":7,"offset":284},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":278},"end":{"line":24,"column":9,"offset":286},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":278},"end":{"line":24,"column":9,"offset":286},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"通过 ","position":{"start":{"line":26,"column":1,"offset":288},"end":{"line":26,"column":4,"offset":291},"indent":[]}},{"type":"html","value":"Scene.addImage()","position":{"start":{"line":26,"column":4,"offset":291},"end":{"line":26,"column":26,"offset":313},"indent":[]}},{"type":"text","value":" 可以添加图片资源， ","position":{"start":{"line":26,"column":26,"offset":313},"end":{"line":26,"column":37,"offset":324},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":288},"end":{"line":26,"column":37,"offset":324},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#代码示例","title":null,"children":[],"data":{"hProperties":{"aria-label":"代码示例 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"代码示例","position":{"start":{"line":29,"column":5,"offset":331},"end":{"line":29,"column":9,"offset":335},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":327},"end":{"line":29,"column":9,"offset":335},"indent":[]},"data":{"id":"代码示例","htmlAttributes":{"id":"代码示例"},"hProperties":{"id":"代码示例"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#基本图形显示示例","title":null,"children":[],"data":{"hProperties":{"aria-label":"基本图形显示示例 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"基本图形显示示例","position":{"start":{"line":32,"column":6,"offset":343},"end":{"line":32,"column":14,"offset":351},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":338},"end":{"line":32,"column":14,"offset":351},"indent":[]},"data":{"id":"基本图形显示示例","htmlAttributes":{"id":"基本图形显示示例"},"hProperties":{"id":"基本图形显示示例"}}},{"type":"html","lang":"javascript","meta":null,"value":"
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
","position":{"start":{"line":34,"column":1,"offset":353},"end":{"line":51,"column":4,"offset":728},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#符号图","title":null,"children":[],"data":{"hProperties":{"aria-label":"符号图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"符号图","position":{"start":{"line":54,"column":6,"offset":736},"end":{"line":54,"column":9,"offset":739},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":731},"end":{"line":54,"column":9,"offset":739},"indent":[]},"data":{"id":"符号图","htmlAttributes":{"id":"符号图"},"hProperties":{"id":"符号图"}}},{"type":"paragraph","children":[{"type":"text","value":"使用图片添加地图标注","position":{"start":{"line":56,"column":1,"offset":741},"end":{"line":56,"column":11,"offset":751},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":741},"end":{"line":56,"column":11,"offset":751},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","position":{"start":{"line":58,"column":1,"offset":753},"end":{"line":71,"column":4,"offset":1003},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":75,"column":1,"offset":1007}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-7b915898e4bea43ef3afe9736b8aa199.json b/.cache/caches/gatsby-transformer-remark/diskstore-7b915898e4bea43ef3afe9736b8aa199.json deleted file mode 100644 index afa42f9503..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-7b915898e4bea43ef3afe9736b8aa199.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-6c5f52476ed9cd6ea8b7eabc064e76b2-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-7c2f51a805458a1d5ede245d6eb2325d.json b/.cache/caches/gatsby-transformer-remark/diskstore-7c2f51a805458a1d5ede245d6eb2325d.json deleted file mode 100644 index 100fbc3cd6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-7c2f51a805458a1d5ede245d6eb2325d.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-48a94297bc9dd247077cfc25bb30bedf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-7d89b52b124f8b8c375172f3341720e4.json b/.cache/caches/gatsby-transformer-remark/diskstore-7d89b52b124f8b8c375172f3341720e4.json deleted file mode 100644 index a335ab6ca7..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-7d89b52b124f8b8c375172f3341720e4.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-fe414ff6aa99e525f316a6218dd13c0f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"填充图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%A1%AB%E5%85%85%E5%9B%BE","aria-label":"填充图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"填充图","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":6,"offset":5}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":6,"offset":5}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。","position":{"start":{"line":3,"column":1,"offset":7},"end":{"line":3,"column":28,"offset":34}}}],"position":{"start":{"line":3,"column":1,"offset":7},"end":{"line":3,"column":28,"offset":34}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"shape"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shape","aria-label":"shape permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"shape","position":{"start":{"line":5,"column":5,"offset":40},"end":{"line":5,"column":10,"offset":45}}}],"position":{"start":{"line":5,"column":1,"offset":36},"end":{"line":5,"column":10,"offset":45}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"填充图支持3种shape","position":{"start":{"line":7,"column":1,"offset":47},"end":{"line":7,"column":13,"offset":59}}}],"position":{"start":{"line":7,"column":1,"offset":47},"end":{"line":7,"column":13,"offset":59}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"fill 绘制填充面 不支持数据映射","position":{"start":{"line":9,"column":3,"offset":63},"end":{"line":9,"column":23,"offset":83}}}],"position":{"start":{"line":9,"column":1,"offset":61},"end":{"line":9,"column":23,"offset":83}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"line 绘制填充图描边 不支持数据映射","position":{"start":{"line":10,"column":3,"offset":86},"end":{"line":10,"column":24,"offset":107}}}],"position":{"start":{"line":10,"column":1,"offset":84},"end":{"line":10,"column":24,"offset":107}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"extrude 对填充图3D拉伸 不支持数据映射","position":{"start":{"line":11,"column":3,"offset":110},"end":{"line":11,"column":27,"offset":134}}}],"position":{"start":{"line":11,"column":1,"offset":108},"end":{"line":11,"column":27,"offset":134}}},{"type":"text","value":"\n"}],"position":{"start":{"line":9,"column":1,"offset":61},"end":{"line":11,"column":27,"offset":134}}},{"type":"text","value":"\n"},{"type":"raw","value":"
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
","position":{"start":{"line":13,"column":1,"offset":136},"end":{"line":18,"column":4,"offset":277}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"其他方法，事件，同基类 ","position":{"start":{"line":20,"column":1,"offset":279},"end":{"line":20,"column":13,"offset":291}}},{"type":"element","tagName":"a","properties":{"href":"/zh/docs/api/layer/layer"},"children":[{"type":"text","value":"Layer","position":{"start":{"line":20,"column":14,"offset":292},"end":{"line":20,"column":19,"offset":297}}}],"position":{"start":{"line":20,"column":13,"offset":291},"end":{"line":20,"column":46,"offset":324}}}],"position":{"start":{"line":20,"column":1,"offset":279},"end":{"line":20,"column":46,"offset":324}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":23,"column":1,"offset":327}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-7dc14d1deb1cb61094911198d6ccda47.json b/.cache/caches/gatsby-transformer-remark/diskstore-7dc14d1deb1cb61094911198d6ccda47.json deleted file mode 100644 index be1b6a90d0..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-7dc14d1deb1cb61094911198d6ccda47.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-0869a152e4c719c14970127d11b61364-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-7fee7ccf2286aae973f845df4b8f7d0f.json b/.cache/caches/gatsby-transformer-remark/diskstore-7fee7ccf2286aae973f845df4b8f7d0f.json deleted file mode 100644 index 17e1ba089d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-7fee7ccf2286aae973f845df4b8f7d0f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-a47796faf1ab795c66b81908e03e735c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-81022e90eeb37f88c7838964f15db7ce.json b/.cache/caches/gatsby-transformer-remark/diskstore-81022e90eeb37f88c7838964f15db7ce.json deleted file mode 100644 index 0bbcbf30cd..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-81022e90eeb37f88c7838964f15db7ce.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-6568f22928a964a9957c4e79f5b8594d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-82176e0b642462e0192830afa69ca564.json b/.cache/caches/gatsby-transformer-remark/diskstore-82176e0b642462e0192830afa69ca564.json deleted file mode 100644 index a0e175f59a..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-82176e0b642462e0192830afa69ca564.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-e8ed7f4cc4b01ba1be50f819d1d1fcae-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":47,"offset":46}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":47,"offset":46}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":47,"offset":46}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-839092d3fa3126679d03a5414ba43f4f.json b/.cache/caches/gatsby-transformer-remark/diskstore-839092d3fa3126679d03a5414ba43f4f.json deleted file mode 100644 index 23ab08d0f3..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-839092d3fa3126679d03a5414ba43f4f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-89764a64063045f6021242fe828f7bb0-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-849f902becf39871a69b642d484ad711.json b/.cache/caches/gatsby-transformer-remark/diskstore-849f902becf39871a69b642d484ad711.json deleted file mode 100644 index f05794d279..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-849f902becf39871a69b642d484ad711.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162511000,"key":"transformer-remark-markdown-html-d9c8c8e6e4baf6574d8f46f3a81eba85-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-84a2732e146dcd073312a1dbf9c9753a.json b/.cache/caches/gatsby-transformer-remark/diskstore-84a2732e146dcd073312a1dbf9c9753a.json deleted file mode 100644 index 27bac68773..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-84a2732e146dcd073312a1dbf9c9753a.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-3fdafdf445bd057a86b5717b80c92ebf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":5,"offset":5}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":5,"offset":5}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"scene"},"children":[{"type":"element","tagName":"a","properties":{"href":"#scene","aria-label":"scene permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Scene","position":{"start":{"line":4,"column":4,"offset":10},"end":{"line":4,"column":9,"offset":15}}}],"position":{"start":{"line":4,"column":1,"offset":7},"end":{"line":4,"column":9,"offset":15}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理","position":{"start":{"line":6,"column":1,"offset":17},"end":{"line":6,"column":48,"offset":64}}}],"position":{"start":{"line":6,"column":1,"offset":17},"end":{"line":6,"column":48,"offset":64}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"map"},"children":[{"type":"element","tagName":"a","properties":{"href":"#map","aria-label":"map permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Map","position":{"start":{"line":9,"column":4,"offset":70},"end":{"line":9,"column":7,"offset":73}}}],"position":{"start":{"line":9,"column":1,"offset":67},"end":{"line":9,"column":7,"offset":73}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。","position":{"start":{"line":11,"column":1,"offset":75},"end":{"line":12,"column":22,"offset":155}}}],"position":{"start":{"line":11,"column":1,"offset":75},"end":{"line":12,"column":22,"offset":155}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"目前L7 支持两种地图底图","position":{"start":{"line":14,"column":1,"offset":157},"end":{"line":14,"column":14,"offset":170}}}],"position":{"start":{"line":14,"column":1,"offset":157},"end":{"line":14,"column":14,"offset":170}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"高德地图 国内业务场景 合规中国地图","position":{"start":{"line":16,"column":3,"offset":174},"end":{"line":16,"column":21,"offset":192}}}],"position":{"start":{"line":16,"column":1,"offset":172},"end":{"line":16,"column":21,"offset":192}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"MapBox 国际业务，或者内网离线部署场景","position":{"start":{"line":17,"column":3,"offset":195},"end":{"line":17,"column":25,"offset":217}}}],"position":{"start":{"line":17,"column":1,"offset":193},"end":{"line":17,"column":25,"offset":217}}},{"type":"text","value":"\n"}],"position":{"start":{"line":16,"column":1,"offset":172},"end":{"line":17,"column":25,"offset":217}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"map-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#map-1","aria-label":"map 1 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"map","position":{"start":{"line":20,"column":6,"offset":225},"end":{"line":20,"column":9,"offset":228}}}],"position":{"start":{"line":20,"column":1,"offset":220},"end":{"line":20,"column":9,"offset":228}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"可以通过scene map 属性获取 map实例","position":{"start":{"line":22,"column":1,"offset":230},"end":{"line":22,"column":25,"offset":254}}}],"position":{"start":{"line":22,"column":1,"offset":230},"end":{"line":22,"column":25,"offset":254}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const map = scene.map;\n
","position":{"start":{"line":24,"column":1,"offset":256},"end":{"line":27,"column":4,"offset":297}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。","position":{"start":{"line":28,"column":1,"offset":298},"end":{"line":28,"column":78,"offset":375}}}],"position":{"start":{"line":28,"column":1,"offset":298},"end":{"line":28,"column":78,"offset":375}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"示例代码","position":{"start":{"line":30,"column":1,"offset":377},"end":{"line":30,"column":5,"offset":381}}}],"position":{"start":{"line":30,"column":1,"offset":377},"end":{"line":30,"column":5,"offset":381}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
","position":{"start":{"line":32,"column":1,"offset":383},"end":{"line":40,"column":4,"offset":551}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":43,"column":5,"offset":558},"end":{"line":43,"column":9,"offset":562}}}],"position":{"start":{"line":43,"column":1,"offset":554},"end":{"line":43,"column":9,"offset":562}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Scene","position":{"start":{"line":45,"column":3,"offset":566},"end":{"line":45,"column":8,"offset":571}}}],"position":{"start":{"line":45,"column":1,"offset":564},"end":{"line":45,"column":10,"offset":573}}},{"type":"text","value":" ","position":{"start":{"line":45,"column":10,"offset":573},"end":{"line":45,"column":11,"offset":574}}}],"position":{"start":{"line":45,"column":1,"offset":564},"end":{"line":45,"column":11,"offset":574}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"配置项"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%85%8D%E7%BD%AE%E9%A1%B9","aria-label":"配置项 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"配置项","position":{"start":{"line":50,"column":4,"offset":582},"end":{"line":50,"column":7,"offset":585}}}],"position":{"start":{"line":50,"column":1,"offset":579},"end":{"line":50,"column":7,"offset":585}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"地图配置项"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E5%9B%BE%E9%85%8D%E7%BD%AE%E9%A1%B9","aria-label":"地图配置项 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地图配置项","position":{"start":{"line":52,"column":5,"offset":591},"end":{"line":52,"column":10,"offset":596}}}],"position":{"start":{"line":52,"column":1,"offset":587},"end":{"line":52,"column":10,"offset":596}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"id"},"children":[{"type":"element","tagName":"a","properties":{"href":"#id","aria-label":"id permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"id","position":{"start":{"line":54,"column":5,"offset":602},"end":{"line":54,"column":7,"offset":604}}}],"position":{"start":{"line":54,"column":1,"offset":598},"end":{"line":54,"column":7,"offset":604}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"需传入 dom 容器或者容器 id  {domObject || string} ","position":{"start":{"line":55,"column":1,"offset":605},"end":{"line":55,"column":42,"offset":646}}},{"type":"text","value":"[必选]","position":{"start":{"line":55,"column":43,"offset":647},"end":{"line":55,"column":45,"offset":649}}}],"position":{"start":{"line":55,"column":1,"offset":605},"end":{"line":55,"column":46,"offset":650}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoom","aria-label":"zoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"zoom","position":{"start":{"line":58,"column":5,"offset":657},"end":{"line":58,"column":9,"offset":661}}}],"position":{"start":{"line":58,"column":1,"offset":653},"end":{"line":58,"column":9,"offset":661}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图初始显示级别 {number} （0-22）","position":{"start":{"line":59,"column":1,"offset":662},"end":{"line":59,"column":26,"offset":687}}}],"position":{"start":{"line":59,"column":1,"offset":662},"end":{"line":59,"column":26,"offset":687}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"center"},"children":[{"type":"element","tagName":"a","properties":{"href":"#center","aria-label":"center permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"center","position":{"start":{"line":61,"column":5,"offset":693},"end":{"line":61,"column":11,"offset":699}}}],"position":{"start":{"line":61,"column":1,"offset":689},"end":{"line":61,"column":11,"offset":699}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图初始中心经纬度 {Lnglat}","position":{"start":{"line":62,"column":1,"offset":700},"end":{"line":62,"column":19,"offset":718}}}],"position":{"start":{"line":62,"column":1,"offset":700},"end":{"line":62,"column":19,"offset":718}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"pitch"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pitch","aria-label":"pitch permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"pitch","position":{"start":{"line":64,"column":5,"offset":724},"end":{"line":64,"column":10,"offset":729}}}],"position":{"start":{"line":64,"column":1,"offset":720},"end":{"line":64,"column":10,"offset":729}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图初始俯仰角度 {number}  default 0","position":{"start":{"line":65,"column":1,"offset":730},"end":{"line":65,"column":29,"offset":758}}}],"position":{"start":{"line":65,"column":1,"offset":730},"end":{"line":65,"column":29,"offset":758}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"style"},"children":[{"type":"element","tagName":"a","properties":{"href":"#style","aria-label":"style permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"style","position":{"start":{"line":67,"column":5,"offset":764},"end":{"line":67,"column":10,"offset":769}}}],"position":{"start":{"line":67,"column":1,"offset":760},"end":{"line":67,"column":10,"offset":769}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用","position":{"start":{"line":69,"column":1,"offset":771},"end":{"line":69,"column":40,"offset":810}}}],"position":{"start":{"line":69,"column":1,"offset":771},"end":{"line":69,"column":40,"offset":810}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"dark","position":{"start":{"line":70,"column":3,"offset":813},"end":{"line":70,"column":7,"offset":817}}}],"position":{"start":{"line":70,"column":1,"offset":811},"end":{"line":70,"column":7,"offset":817}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"light","position":{"start":{"line":71,"column":3,"offset":820},"end":{"line":71,"column":8,"offset":825}}}],"position":{"start":{"line":71,"column":1,"offset":818},"end":{"line":71,"column":8,"offset":825}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"normal","position":{"start":{"line":72,"column":3,"offset":828},"end":{"line":72,"column":9,"offset":834}}}],"position":{"start":{"line":72,"column":1,"offset":826},"end":{"line":72,"column":9,"offset":834}}},{"type":"text","value":"\n"}],"position":{"start":{"line":70,"column":1,"offset":811},"end":{"line":72,"column":9,"offset":834}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"除了内置的样式，你也可以传入自定义的其他属性。","position":{"start":{"line":74,"column":1,"offset":836},"end":{"line":74,"column":24,"offset":859}}}],"position":{"start":{"line":74,"column":1,"offset":836},"end":{"line":74,"column":24,"offset":859}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"比如高德地图","position":{"start":{"line":76,"column":1,"offset":861},"end":{"line":76,"column":7,"offset":867}}}],"position":{"start":{"line":76,"column":1,"offset":861},"end":{"line":76,"column":7,"offset":867}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
","position":{"start":{"line":78,"column":1,"offset":869},"end":{"line":83,"column":4,"offset":980}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"minzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#minzoom","aria-label":"minzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"minZoom","position":{"start":{"line":86,"column":5,"offset":987},"end":{"line":86,"column":12,"offset":994}}}],"position":{"start":{"line":86,"column":1,"offset":983},"end":{"line":86,"column":12,"offset":994}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图最小缩放等级 {number}  default 0 (0-22)","position":{"start":{"line":87,"column":1,"offset":995},"end":{"line":87,"column":37,"offset":1031}}}],"position":{"start":{"line":87,"column":1,"offset":995},"end":{"line":87,"column":37,"offset":1031}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"maxzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#maxzoom","aria-label":"maxzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"maxZoom","position":{"start":{"line":89,"column":5,"offset":1037},"end":{"line":89,"column":12,"offset":1044}}}],"position":{"start":{"line":89,"column":1,"offset":1033},"end":{"line":89,"column":12,"offset":1044}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图最大缩放等级 {number}  default 22 (0-22)","position":{"start":{"line":90,"column":1,"offset":1045},"end":{"line":90,"column":38,"offset":1082}}}],"position":{"start":{"line":90,"column":1,"offset":1045},"end":{"line":90,"column":38,"offset":1082}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"rotateenable"},"children":[{"type":"element","tagName":"a","properties":{"href":"#rotateenable","aria-label":"rotateenable permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"rotateEnable","position":{"start":{"line":92,"column":5,"offset":1088},"end":{"line":92,"column":17,"offset":1100}}}],"position":{"start":{"line":92,"column":1,"offset":1084},"end":{"line":92,"column":17,"offset":1100}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图是否可旋转 {Boolean} default true","position":{"start":{"line":93,"column":1,"offset":1101},"end":{"line":93,"column":31,"offset":1131}}}],"position":{"start":{"line":93,"column":1,"offset":1101},"end":{"line":93,"column":31,"offset":1131}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":98,"column":4,"offset":1139},"end":{"line":98,"column":6,"offset":1141}}}],"position":{"start":{"line":98,"column":1,"offset":1136},"end":{"line":98,"column":6,"offset":1141}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getzoom","aria-label":"getzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getZoom","position":{"start":{"line":100,"column":5,"offset":1147},"end":{"line":100,"column":12,"offset":1154}}}],"position":{"start":{"line":100,"column":1,"offset":1143},"end":{"line":100,"column":12,"offset":1154}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取当前缩放等级","position":{"start":{"line":101,"column":1,"offset":1155},"end":{"line":101,"column":9,"offset":1163}}}],"position":{"start":{"line":101,"column":1,"offset":1155},"end":{"line":101,"column":9,"offset":1163}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getZoom();\n
","position":{"start":{"line":103,"column":1,"offset":1165},"end":{"line":105,"column":4,"offset":1199}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return {float}  当前缩放等级","position":{"start":{"line":107,"column":1,"offset":1201},"end":{"line":107,"column":24,"offset":1224}}}],"position":{"start":{"line":107,"column":1,"offset":1201},"end":{"line":107,"column":24,"offset":1224}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getlayers"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getlayers","aria-label":"getlayers permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getLayers()","position":{"start":{"line":109,"column":5,"offset":1230},"end":{"line":109,"column":16,"offset":1241}}}],"position":{"start":{"line":109,"column":1,"offset":1226},"end":{"line":109,"column":16,"offset":1241}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取所有的地图图层","position":{"start":{"line":110,"column":1,"offset":1242},"end":{"line":110,"column":10,"offset":1251}}}],"position":{"start":{"line":110,"column":1,"offset":1242},"end":{"line":110,"column":10,"offset":1251}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getLayers();\n
","position":{"start":{"line":111,"column":1,"offset":1252},"end":{"line":113,"column":4,"offset":1288}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return 图层数组 {Array}","position":{"start":{"line":115,"column":1,"offset":1290},"end":{"line":115,"column":21,"offset":1310}}}],"position":{"start":{"line":115,"column":1,"offset":1290},"end":{"line":115,"column":21,"offset":1310}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getcenter"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getcenter","aria-label":"getcenter permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getCenter()","position":{"start":{"line":118,"column":5,"offset":1317},"end":{"line":118,"column":16,"offset":1328}}}],"position":{"start":{"line":118,"column":1,"offset":1313},"end":{"line":118,"column":16,"offset":1328}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取地图中心点","position":{"start":{"line":119,"column":1,"offset":1329},"end":{"line":119,"column":8,"offset":1336}}}],"position":{"start":{"line":119,"column":1,"offset":1329},"end":{"line":119,"column":8,"offset":1336}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getCenter();\n
","position":{"start":{"line":120,"column":1,"offset":1337},"end":{"line":122,"column":4,"offset":1372}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return {Lnglat} :地图中心点","position":{"start":{"line":124,"column":1,"offset":1374},"end":{"line":124,"column":23,"offset":1396}}}],"position":{"start":{"line":124,"column":1,"offset":1374},"end":{"line":124,"column":23,"offset":1396}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getsize"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getsize","aria-label":"getsize permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getSize()","position":{"start":{"line":126,"column":5,"offset":1402},"end":{"line":126,"column":14,"offset":1411}}}],"position":{"start":{"line":126,"column":1,"offset":1398},"end":{"line":126,"column":14,"offset":1411}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取地图容器大小","position":{"start":{"line":127,"column":1,"offset":1412},"end":{"line":127,"column":9,"offset":1420}}}],"position":{"start":{"line":127,"column":1,"offset":1412},"end":{"line":127,"column":9,"offset":1420}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getSize();\n
","position":{"start":{"line":128,"column":1,"offset":1421},"end":{"line":130,"column":4,"offset":1454}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return { Object } 地图容器的 width,height","position":{"start":{"line":131,"column":1,"offset":1455},"end":{"line":131,"column":37,"offset":1491}}}],"position":{"start":{"line":131,"column":1,"offset":1455},"end":{"line":131,"column":37,"offset":1491}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getpitch"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getpitch","aria-label":"getpitch permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getPitch()","position":{"start":{"line":133,"column":5,"offset":1497},"end":{"line":133,"column":15,"offset":1507}}}],"position":{"start":{"line":133,"column":1,"offset":1493},"end":{"line":133,"column":15,"offset":1507}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取地图俯仰角","position":{"start":{"line":134,"column":1,"offset":1508},"end":{"line":134,"column":8,"offset":1515}}}],"position":{"start":{"line":134,"column":1,"offset":1508},"end":{"line":134,"column":8,"offset":1515}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getPitch();\n
","position":{"start":{"line":135,"column":1,"offset":1516},"end":{"line":137,"column":4,"offset":1551}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return {number} pitch","position":{"start":{"line":139,"column":1,"offset":1553},"end":{"line":139,"column":22,"offset":1574}}}],"position":{"start":{"line":139,"column":1,"offset":1553},"end":{"line":139,"column":22,"offset":1574}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setcenter"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setcenter","aria-label":"setcenter permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setCenter()","position":{"start":{"line":141,"column":5,"offset":1580},"end":{"line":141,"column":16,"offset":1591}}}],"position":{"start":{"line":141,"column":1,"offset":1576},"end":{"line":141,"column":16,"offset":1591}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置地图中心点坐标","position":{"start":{"line":142,"column":1,"offset":1592},"end":{"line":142,"column":10,"offset":1601}}}],"position":{"start":{"line":142,"column":1,"offset":1592},"end":{"line":142,"column":10,"offset":1601}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.setCenter([lng, lat]);\n
","position":{"start":{"line":144,"column":1,"offset":1603},"end":{"line":146,"column":4,"offset":1647}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":148,"column":1,"offset":1649},"end":{"line":148,"column":4,"offset":1652}}},{"type":"raw","value":"center","position":{"start":{"line":148,"column":4,"offset":1652},"end":{"line":148,"column":12,"offset":1660}}},{"type":"text","value":" {LngLat} 地图中心点","position":{"start":{"line":148,"column":12,"offset":1660},"end":{"line":148,"column":28,"offset":1676}}}],"position":{"start":{"line":148,"column":1,"offset":1649},"end":{"line":148,"column":28,"offset":1676}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setzoomandcenter"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setzoomandcenter","aria-label":"setzoomandcenter permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setZoomAndCenter","position":{"start":{"line":151,"column":5,"offset":1683},"end":{"line":151,"column":21,"offset":1699}}}],"position":{"start":{"line":151,"column":1,"offset":1679},"end":{"line":151,"column":21,"offset":1699}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置地图等级和中心","position":{"start":{"line":152,"column":1,"offset":1700},"end":{"line":152,"column":10,"offset":1709}}}],"position":{"start":{"line":152,"column":1,"offset":1700},"end":{"line":152,"column":10,"offset":1709}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.setZoomAndCenter(zoom, center);\n
","position":{"start":{"line":153,"column":1,"offset":1710},"end":{"line":155,"column":4,"offset":1763}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：zoom {number}","position":{"start":{"line":157,"column":1,"offset":1765},"end":{"line":157,"column":17,"offset":1781}}},{"type":"raw","value":"
","position":{"start":{"line":157,"column":17,"offset":1781},"end":{"line":157,"column":23,"offset":1787}}},{"type":"text","value":"center {LngLat}","position":{"start":{"line":157,"column":23,"offset":1787},"end":{"line":157,"column":38,"offset":1802}}}],"position":{"start":{"line":157,"column":1,"offset":1765},"end":{"line":157,"column":38,"offset":1802}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setrotation"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setrotation","aria-label":"setrotation permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setRotation","position":{"start":{"line":160,"column":5,"offset":1809},"end":{"line":160,"column":16,"offset":1820}}}],"position":{"start":{"line":160,"column":1,"offset":1805},"end":{"line":160,"column":16,"offset":1820}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 ","position":{"start":{"line":161,"column":1,"offset":1821},"end":{"line":161,"column":31,"offset":1851}}},{"type":"text","value":"[0-360]","position":{"start":{"line":161,"column":32,"offset":1852},"end":{"line":161,"column":37,"offset":1857}}}],"position":{"start":{"line":161,"column":1,"offset":1821},"end":{"line":161,"column":38,"offset":1858}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.setRotation(rotation);\n
","position":{"start":{"line":162,"column":1,"offset":1859},"end":{"line":164,"column":4,"offset":1904}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数： ","position":{"start":{"line":166,"column":1,"offset":1906},"end":{"line":166,"column":5,"offset":1910}}},{"type":"raw","value":"rotation","position":{"start":{"line":166,"column":5,"offset":1910},"end":{"line":166,"column":15,"offset":1920}}},{"type":"text","value":" {number}","position":{"start":{"line":166,"column":15,"offset":1920},"end":{"line":166,"column":26,"offset":1931}}}],"position":{"start":{"line":166,"column":1,"offset":1906},"end":{"line":166,"column":26,"offset":1931}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zoomin"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoomin","aria-label":"zoomin permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"zoomIn","position":{"start":{"line":168,"column":5,"offset":1937},"end":{"line":168,"column":11,"offset":1943}}}],"position":{"start":{"line":168,"column":1,"offset":1933},"end":{"line":168,"column":11,"offset":1943}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图放大一级","position":{"start":{"line":169,"column":1,"offset":1944},"end":{"line":169,"column":7,"offset":1950}}}],"position":{"start":{"line":169,"column":1,"offset":1944},"end":{"line":169,"column":7,"offset":1950}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.zoomIn();\n
","position":{"start":{"line":170,"column":1,"offset":1951},"end":{"line":172,"column":4,"offset":1983}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zoomout"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoomout","aria-label":"zoomout permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"zoomOut","position":{"start":{"line":174,"column":5,"offset":1989},"end":{"line":174,"column":12,"offset":1996}}}],"position":{"start":{"line":174,"column":1,"offset":1985},"end":{"line":174,"column":12,"offset":1996}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图缩小一级","position":{"start":{"line":175,"column":1,"offset":1997},"end":{"line":175,"column":7,"offset":2003}}}],"position":{"start":{"line":175,"column":1,"offset":1997},"end":{"line":175,"column":7,"offset":2003}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.ZoomOUt();\n
","position":{"start":{"line":176,"column":1,"offset":2004},"end":{"line":178,"column":4,"offset":2037}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"panto"},"children":[{"type":"element","tagName":"a","properties":{"href":"#panto","aria-label":"panto permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"panTo","position":{"start":{"line":180,"column":5,"offset":2043},"end":{"line":180,"column":10,"offset":2048}}}],"position":{"start":{"line":180,"column":1,"offset":2039},"end":{"line":180,"column":10,"offset":2048}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图平移到指定的位置","position":{"start":{"line":181,"column":1,"offset":2049},"end":{"line":181,"column":11,"offset":2059}}}],"position":{"start":{"line":181,"column":1,"offset":2049},"end":{"line":181,"column":11,"offset":2059}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.panTo(LngLat);\n
","position":{"start":{"line":182,"column":1,"offset":2060},"end":{"line":184,"column":4,"offset":2097}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":186,"column":1,"offset":2099},"end":{"line":186,"column":4,"offset":2102}}},{"type":"raw","value":"center","position":{"start":{"line":186,"column":4,"offset":2102},"end":{"line":186,"column":12,"offset":2110}}},{"type":"text","value":" LngLat 中心位置坐标","position":{"start":{"line":186,"column":12,"offset":2110},"end":{"line":186,"column":27,"offset":2125}}}],"position":{"start":{"line":186,"column":1,"offset":2099},"end":{"line":186,"column":27,"offset":2125}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"panby"},"children":[{"type":"element","tagName":"a","properties":{"href":"#panby","aria-label":"panby permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"panBy","position":{"start":{"line":188,"column":5,"offset":2131},"end":{"line":188,"column":10,"offset":2136}}}],"position":{"start":{"line":188,"column":1,"offset":2127},"end":{"line":188,"column":10,"offset":2136}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"以像素为单位沿X方向和Y方向移动地图","position":{"start":{"line":189,"column":1,"offset":2137},"end":{"line":189,"column":19,"offset":2155}}}],"position":{"start":{"line":189,"column":1,"offset":2137},"end":{"line":189,"column":19,"offset":2155}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.panBy(x, y);\n
","position":{"start":{"line":190,"column":1,"offset":2156},"end":{"line":192,"column":4,"offset":2190}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":193,"column":1,"offset":2191},"end":{"line":193,"column":4,"offset":2194}}},{"type":"raw","value":"
","position":{"start":{"line":193,"column":4,"offset":2194},"end":{"line":193,"column":10,"offset":2200}}},{"type":"raw","value":"x","position":{"start":{"line":193,"column":10,"offset":2200},"end":{"line":193,"column":13,"offset":2203}}},{"type":"text","value":" {number} 水平方向移动像素 向右为正方向","position":{"start":{"line":193,"column":13,"offset":2203},"end":{"line":193,"column":38,"offset":2228}}},{"type":"raw","value":"
","position":{"start":{"line":193,"column":38,"offset":2228},"end":{"line":193,"column":44,"offset":2234}}},{"type":"text","value":"      ","position":{"start":{"line":193,"column":44,"offset":2234},"end":{"line":193,"column":50,"offset":2240}}},{"type":"raw","value":"y","position":{"start":{"line":193,"column":50,"offset":2240},"end":{"line":193,"column":53,"offset":2243}}},{"type":"text","value":" {number} 垂直方向移动像素 向下为正方向","position":{"start":{"line":193,"column":53,"offset":2243},"end":{"line":193,"column":79,"offset":2269}}}],"position":{"start":{"line":193,"column":1,"offset":2191},"end":{"line":193,"column":79,"offset":2269}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setpitch"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setpitch","aria-label":"setpitch permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setPitch","position":{"start":{"line":196,"column":5,"offset":2276},"end":{"line":196,"column":13,"offset":2284}}}],"position":{"start":{"line":196,"column":1,"offset":2272},"end":{"line":196,"column":13,"offset":2284}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置地图仰俯角度","position":{"start":{"line":197,"column":1,"offset":2285},"end":{"line":197,"column":9,"offset":2293}}}],"position":{"start":{"line":197,"column":1,"offset":2285},"end":{"line":197,"column":9,"offset":2293}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.setPitch(pitch);\n
","position":{"start":{"line":198,"column":1,"offset":2294},"end":{"line":200,"column":4,"offset":2333}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数 :","position":{"start":{"line":202,"column":1,"offset":2335},"end":{"line":202,"column":5,"offset":2339}}},{"type":"raw","value":"
","position":{"start":{"line":202,"column":5,"offset":2339},"end":{"line":202,"column":11,"offset":2345}}},{"type":"text","value":"   ","position":{"start":{"line":202,"column":11,"offset":2345},"end":{"line":202,"column":14,"offset":2348}}},{"type":"raw","value":"pitch","position":{"start":{"line":202,"column":14,"offset":2348},"end":{"line":202,"column":21,"offset":2355}}},{"type":"text","value":" {number}","position":{"start":{"line":202,"column":21,"offset":2355},"end":{"line":202,"column":31,"offset":2365}}}],"position":{"start":{"line":202,"column":1,"offset":2335},"end":{"line":202,"column":31,"offset":2365}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"fitbounds"},"children":[{"type":"element","tagName":"a","properties":{"href":"#fitbounds","aria-label":"fitbounds permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"fitBounds","position":{"start":{"line":205,"column":5,"offset":2372},"end":{"line":205,"column":14,"offset":2381}}}],"position":{"start":{"line":205,"column":1,"offset":2368},"end":{"line":205,"column":14,"offset":2381}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"地图缩放到某个范围内","position":{"start":{"line":206,"column":1,"offset":2382},"end":{"line":206,"column":11,"offset":2392}}},{"type":"raw","value":"
","position":{"start":{"line":206,"column":11,"offset":2392},"end":{"line":206,"column":17,"offset":2398}}},{"type":"text","value":"参数 :","position":{"start":{"line":206,"column":17,"offset":2398},"end":{"line":206,"column":21,"offset":2402}}},{"type":"raw","value":"
","position":{"start":{"line":206,"column":21,"offset":2402},"end":{"line":206,"column":27,"offset":2408}}},{"type":"text","value":"  ","position":{"start":{"line":206,"column":27,"offset":2408},"end":{"line":206,"column":29,"offset":2410}}},{"type":"raw","value":"extent","position":{"start":{"line":206,"column":29,"offset":2410},"end":{"line":206,"column":37,"offset":2418}}},{"type":"text","value":" { array} 经纬度范围 ","position":{"start":{"line":206,"column":37,"offset":2418},"end":{"line":206,"column":53,"offset":2434}}},{"type":"text","value":"[minlng,minlat,maxlng,maxlat]","position":{"start":{"line":206,"column":54,"offset":2435},"end":{"line":206,"column":81,"offset":2462}}}],"position":{"start":{"line":206,"column":1,"offset":2382},"end":{"line":206,"column":82,"offset":2463}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.fitBounds([112, 32, 114, 35]);\n
","position":{"start":{"line":208,"column":1,"offset":2465},"end":{"line":210,"column":4,"offset":2516}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"removelayer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#removelayer","aria-label":"removelayer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"removeLayer","position":{"start":{"line":214,"column":5,"offset":2524},"end":{"line":214,"column":16,"offset":2535}}}],"position":{"start":{"line":214,"column":1,"offset":2520},"end":{"line":214,"column":16,"offset":2535}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除layer","position":{"start":{"line":215,"column":1,"offset":2536},"end":{"line":215,"column":8,"offset":2543}}}],"position":{"start":{"line":215,"column":1,"offset":2536},"end":{"line":215,"column":8,"offset":2543}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.removeLayer(layer);\n
","position":{"start":{"line":217,"column":1,"offset":2545},"end":{"line":219,"column":4,"offset":2587}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数 ","position":{"start":{"line":221,"column":1,"offset":2589},"end":{"line":221,"column":4,"offset":2592}}},{"type":"raw","value":"layer","position":{"start":{"line":221,"column":4,"offset":2592},"end":{"line":221,"column":11,"offset":2599}}},{"type":"text","value":" {Layer}","position":{"start":{"line":221,"column":11,"offset":2599},"end":{"line":221,"column":20,"offset":2608}}}],"position":{"start":{"line":221,"column":1,"offset":2589},"end":{"line":221,"column":20,"offset":2608}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getlayers-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getlayers-1","aria-label":"getlayers 1 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getLayers","position":{"start":{"line":223,"column":5,"offset":2614},"end":{"line":223,"column":14,"offset":2623}}}],"position":{"start":{"line":223,"column":1,"offset":2610},"end":{"line":223,"column":14,"offset":2623}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 获取所有的layer","position":{"start":{"line":224,"column":1,"offset":2624},"end":{"line":224,"column":12,"offset":2635}}}],"position":{"start":{"line":224,"column":1,"offset":2624},"end":{"line":224,"column":12,"offset":2635}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.getLayers();\n
","position":{"start":{"line":226,"column":1,"offset":2637},"end":{"line":228,"column":4,"offset":2672}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"return layers  {array}","position":{"start":{"line":230,"column":1,"offset":2674},"end":{"line":230,"column":24,"offset":2697}}}],"position":{"start":{"line":230,"column":1,"offset":2674},"end":{"line":230,"column":24,"offset":2697}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%8B%E4%BB%B6","aria-label":"事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"事件","position":{"start":{"line":232,"column":4,"offset":2702},"end":{"line":232,"column":6,"offset":2704}}}],"position":{"start":{"line":232,"column":1,"offset":2699},"end":{"line":232,"column":6,"offset":2704}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"on"},"children":[{"type":"element","tagName":"a","properties":{"href":"#on","aria-label":"on permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"on","position":{"start":{"line":235,"column":5,"offset":2711},"end":{"line":235,"column":7,"offset":2713}}}],"position":{"start":{"line":235,"column":1,"offset":2707},"end":{"line":235,"column":7,"offset":2713}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"事件监听","position":{"start":{"line":236,"column":1,"offset":2714},"end":{"line":236,"column":5,"offset":2718}}}],"position":{"start":{"line":236,"column":1,"offset":2714},"end":{"line":236,"column":5,"offset":2718}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"参数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%8F%82%E6%95%B0","aria-label":"参数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"参数","position":{"start":{"line":238,"column":6,"offset":2725},"end":{"line":238,"column":8,"offset":2727}}}],"position":{"start":{"line":238,"column":1,"offset":2720},"end":{"line":238,"column":8,"offset":2727}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"eventName","position":{"start":{"line":239,"column":1,"offset":2728},"end":{"line":239,"column":12,"offset":2739}}},{"type":"text","value":" {string} 事件名","position":{"start":{"line":239,"column":12,"offset":2739},"end":{"line":239,"column":26,"offset":2753}}},{"type":"raw","value":"
","position":{"start":{"line":239,"column":26,"offset":2753},"end":{"line":239,"column":32,"offset":2759}}},{"type":"raw","value":"hander","position":{"start":{"line":239,"column":32,"offset":2759},"end":{"line":239,"column":40,"offset":2767}}},{"type":"text","value":" {function } 事件回调函数","position":{"start":{"line":239,"column":40,"offset":2767},"end":{"line":239,"column":60,"offset":2787}}}],"position":{"start":{"line":239,"column":1,"offset":2728},"end":{"line":239,"column":60,"offset":2787}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"off"},"children":[{"type":"element","tagName":"a","properties":{"href":"#off","aria-label":"off permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"off","position":{"start":{"line":242,"column":5,"offset":2794},"end":{"line":242,"column":8,"offset":2797}}}],"position":{"start":{"line":242,"column":1,"offset":2790},"end":{"line":242,"column":8,"offset":2797}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除事件监听","position":{"start":{"line":243,"column":1,"offset":2798},"end":{"line":243,"column":7,"offset":2804}}},{"type":"raw","value":"
","position":{"start":{"line":243,"column":7,"offset":2804},"end":{"line":243,"column":13,"offset":2810}}},{"type":"raw","value":"eventName","position":{"start":{"line":243,"column":13,"offset":2810},"end":{"line":243,"column":24,"offset":2821}}},{"type":"text","value":" {string} 事件名","position":{"start":{"line":243,"column":24,"offset":2821},"end":{"line":243,"column":38,"offset":2835}}},{"type":"raw","value":"
","position":{"start":{"line":243,"column":38,"offset":2835},"end":{"line":243,"column":44,"offset":2841}}},{"type":"raw","value":"hander","position":{"start":{"line":243,"column":44,"offset":2841},"end":{"line":243,"column":52,"offset":2849}}},{"type":"text","value":" {function } 事件回调函数","position":{"start":{"line":243,"column":52,"offset":2849},"end":{"line":243,"column":72,"offset":2869}}}],"position":{"start":{"line":243,"column":1,"offset":2798},"end":{"line":243,"column":72,"offset":2869}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"地图事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E5%9B%BE%E4%BA%8B%E4%BB%B6","aria-label":"地图事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地图事件","position":{"start":{"line":246,"column":5,"offset":2876},"end":{"line":246,"column":9,"offset":2880}}}],"position":{"start":{"line":246,"column":1,"offset":2872},"end":{"line":246,"column":9,"offset":2880}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
","position":{"start":{"line":247,"column":1,"offset":2881},"end":{"line":255,"column":4,"offset":3218}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"鼠标事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6","aria-label":"鼠标事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"鼠标事件","position":{"start":{"line":258,"column":5,"offset":3225},"end":{"line":258,"column":9,"offset":3229}}}],"position":{"start":{"line":258,"column":1,"offset":3221},"end":{"line":258,"column":9,"offset":3229}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
","position":{"start":{"line":260,"column":1,"offset":3231},"end":{"line":273,"column":4,"offset":3938}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"其它事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%B6%E5%AE%83%E4%BA%8B%E4%BB%B6","aria-label":"其它事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"其它事件","position":{"start":{"line":275,"column":5,"offset":3944},"end":{"line":275,"column":9,"offset":3948}}}],"position":{"start":{"line":275,"column":1,"offset":3940},"end":{"line":275,"column":9,"offset":3948}}},{"type":"text","value":"\n"},{"type":"raw","value":"
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","position":{"start":{"line":276,"column":1,"offset":3949},"end":{"line":278,"column":4,"offset":4006}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":281,"column":1,"offset":4009}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-84d26d81484a0058c96f148132544f97.json b/.cache/caches/gatsby-transformer-remark/diskstore-84d26d81484a0058c96f148132544f97.json deleted file mode 100644 index e48f781b3b..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-84d26d81484a0058c96f148132544f97.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-8bd46bd263f790754e46a98ca9891ea9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-85f33acacb2ac78195f67b0b87e035e6.json b/.cache/caches/gatsby-transformer-remark/diskstore-85f33acacb2ac78195f67b0b87e035e6.json deleted file mode 100644 index b6927ed812..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-85f33acacb2ac78195f67b0b87e035e6.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-be04f0ab294598a21926b87cd453f97c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8631dccb7fabe7e09826b5f10d176651.json b/.cache/caches/gatsby-transformer-remark/diskstore-8631dccb7fabe7e09826b5f10d176651.json deleted file mode 100644 index ce7232a315..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8631dccb7fabe7e09826b5f10d176651.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-c78275703877b4c8457c7b54e97316df-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-86a95d56750bb1646e501a1bc800a052.json b/.cache/caches/gatsby-transformer-remark/diskstore-86a95d56750bb1646e501a1bc800a052.json deleted file mode 100644 index c52c3ef0a5..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-86a95d56750bb1646e501a1bc800a052.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-47b0d92f07e7d22128274908bbd41917-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"数据"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%95%B0%E6%8D%AE","aria-label":"数据 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"数据","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":6,"offset":6}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":6,"offset":6}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"目前L7支持的数据格式有GeoJson,CSV,JSon Image","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42}}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON 支持点、线、面，等所有的空间数据格式。","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":28,"offset":71}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":28,"offset":71},"end":{"line":6,"column":34,"offset":77}}},{"type":"text","value":"CSV 支持，点，线段，弧线的支持。","position":{"start":{"line":6,"column":34,"offset":77},"end":{"line":6,"column":52,"offset":95}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":52,"offset":95},"end":{"line":6,"column":58,"offset":101}}},{"type":"text","value":"JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。","position":{"start":{"line":6,"column":58,"offset":101},"end":{"line":6,"column":91,"offset":134}}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":91,"offset":134}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"geojson"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson","aria-label":"geojson permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"GeoJSON","position":{"start":{"line":9,"column":4,"offset":140},"end":{"line":9,"column":11,"offset":147}}}],"position":{"start":{"line":9,"column":1,"offset":137},"end":{"line":9,"column":11,"offset":147}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276}}}],"position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276}}},{"type":"text","value":"\n"}],"position":{"start":{"line":11,"column":1,"offset":149},"end":{"line":11,"column":128,"offset":276}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
","position":{"start":{"line":15,"column":1,"offset":280},"end":{"line":52,"column":4,"offset":980}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"地理统计分析工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7","aria-label":"地理统计分析工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":54,"column":4,"offset":985},"end":{"line":54,"column":12,"offset":993}}}],"position":{"start":{"line":54,"column":1,"offset":982},"end":{"line":54,"column":12,"offset":993}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://turfjs.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"turfjs","position":{"start":{"line":55,"column":2,"offset":995},"end":{"line":55,"column":8,"offset":1001}}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":29,"offset":1022}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":55,"column":29,"offset":1022},"end":{"line":55,"column":60,"offset":1053}}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":60,"offset":1053}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"在线工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7","aria-label":"在线工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"在线工具","position":{"start":{"line":57,"column":4,"offset":1058},"end":{"line":57,"column":8,"offset":1062}}}],"position":{"start":{"line":57,"column":1,"offset":1055},"end":{"line":57,"column":8,"offset":1062}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://geojson.io/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":59,"column":2,"offset":1065},"end":{"line":59,"column":20,"offset":1083}}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":41,"offset":1104}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":59,"column":41,"offset":1104},"end":{"line":59,"column":66,"offset":1129}}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":66,"offset":1129}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://mapshaper.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":61,"column":2,"offset":1132},"end":{"line":61,"column":24,"offset":1154}}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":49,"offset":1179}}},{"type":"text","value":"  可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":61,"column":49,"offset":1179},"end":{"line":61,"column":80,"offset":1210}}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":80,"offset":1210}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":62,"column":1,"offset":1211}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-871c179487f76de156a6ac0595aa152a.json b/.cache/caches/gatsby-transformer-remark/diskstore-871c179487f76de156a6ac0595aa152a.json deleted file mode 100644 index f64ef2f498..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-871c179487f76de156a6ac0595aa152a.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-2703c8487a1fc763376587f66eeacf7d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-87973f10bbfed69f80ff54c265d8bcbc.json b/.cache/caches/gatsby-transformer-remark/diskstore-87973f10bbfed69f80ff54c265d8bcbc.json deleted file mode 100644 index dec4e2a13d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-87973f10bbfed69f80ff54c265d8bcbc.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-caf747b54e8159809c3beb2b46e148a0-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8872c83868f489ed9533ef440761b5cf.json b/.cache/caches/gatsby-transformer-remark/diskstore-8872c83868f489ed9533ef440761b5cf.json deleted file mode 100644 index 1e61bd6da1..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8872c83868f489ed9533ef440761b5cf.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-cdcfb792dd144bc64fd4506a40146af7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8a9e78f5faa0f831e4372e4f88c9cf89.json b/.cache/caches/gatsby-transformer-remark/diskstore-8a9e78f5faa0f831e4372e4f88c9cf89.json deleted file mode 100644 index e883d76bc6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8a9e78f5faa0f831e4372e4f88c9cf89.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-41aa0a12479519ad49d76176cb6f7dd9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8b99334f0d53403c281a5ab4dc5c8abb.json b/.cache/caches/gatsby-transformer-remark/diskstore-8b99334f0d53403c281a5ab4dc5c8abb.json deleted file mode 100644 index 7ad1cdc7bb..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8b99334f0d53403c281a5ab4dc5c8abb.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-7e48b5323892c7cf647cf8590e3a5578-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":58,"offset":57}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":58,"offset":57}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":58,"offset":57}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8c1b6de18b081e28951adf8a76aee0e4.json b/.cache/caches/gatsby-transformer-remark/diskstore-8c1b6de18b081e28951adf8a76aee0e4.json deleted file mode 100644 index 7953d137b1..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8c1b6de18b081e28951adf8a76aee0e4.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-be04f0ab294598a21926b87cd453f97c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8e001cfe241ea8fb228f72fa1fd6de0b.json b/.cache/caches/gatsby-transformer-remark/diskstore-8e001cfe241ea8fb228f72fa1fd6de0b.json deleted file mode 100644 index aa6ccc192c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8e001cfe241ea8fb228f72fa1fd6de0b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-feeb976cc6200a213384f1f2a7b3760a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8e943e22a810aa760959788e88c48f5b.json b/.cache/caches/gatsby-transformer-remark/diskstore-8e943e22a810aa760959788e88c48f5b.json deleted file mode 100644 index 4ad00dbae8..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8e943e22a810aa760959788e88c48f5b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-fe414ff6aa99e525f316a6218dd13c0f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#填充图","title":null,"children":[],"data":{"hProperties":{"aria-label":"填充图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"填充图","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":6,"offset":5},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":6,"offset":5},"indent":[]},"data":{"id":"填充图","htmlAttributes":{"id":"填充图"},"hProperties":{"id":"填充图"}}},{"type":"paragraph","children":[{"type":"text","value":"绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。","position":{"start":{"line":3,"column":1,"offset":7},"end":{"line":3,"column":28,"offset":34},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":7},"end":{"line":3,"column":28,"offset":34},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"shape","position":{"start":{"line":5,"column":5,"offset":40},"end":{"line":5,"column":10,"offset":45},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":36},"end":{"line":5,"column":10,"offset":45},"indent":[]},"data":{"id":"shape","htmlAttributes":{"id":"shape"},"hProperties":{"id":"shape"}}},{"type":"paragraph","children":[{"type":"text","value":"填充图支持3种shape","position":{"start":{"line":7,"column":1,"offset":47},"end":{"line":7,"column":13,"offset":59},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":47},"end":{"line":7,"column":13,"offset":59},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"fill 绘制填充面 不支持数据映射","position":{"start":{"line":9,"column":3,"offset":63},"end":{"line":9,"column":23,"offset":83},"indent":[]}}],"position":{"start":{"line":9,"column":3,"offset":63},"end":{"line":9,"column":23,"offset":83},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":61},"end":{"line":9,"column":23,"offset":83},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"line 绘制填充图描边 不支持数据映射","position":{"start":{"line":10,"column":3,"offset":86},"end":{"line":10,"column":24,"offset":107},"indent":[]}}],"position":{"start":{"line":10,"column":3,"offset":86},"end":{"line":10,"column":24,"offset":107},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":84},"end":{"line":10,"column":24,"offset":107},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"extrude 对填充图3D拉伸 不支持数据映射","position":{"start":{"line":11,"column":3,"offset":110},"end":{"line":11,"column":27,"offset":134},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":110},"end":{"line":11,"column":27,"offset":134},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":108},"end":{"line":11,"column":27,"offset":134},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":61},"end":{"line":11,"column":27,"offset":134},"indent":[1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
","position":{"start":{"line":13,"column":1,"offset":136},"end":{"line":18,"column":4,"offset":277},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"其他方法，事件，同基类 ","position":{"start":{"line":20,"column":1,"offset":279},"end":{"line":20,"column":13,"offset":291},"indent":[]}},{"type":"link","title":null,"url":"/zh/docs/api/layer/layer","children":[{"type":"text","value":"Layer","position":{"start":{"line":20,"column":14,"offset":292},"end":{"line":20,"column":19,"offset":297},"indent":[]}}],"position":{"start":{"line":20,"column":13,"offset":291},"end":{"line":20,"column":46,"offset":324},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":279},"end":{"line":20,"column":46,"offset":324},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":23,"column":1,"offset":327}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8ec8db374be0e5d12c5e9b041ff3e1f6.json b/.cache/caches/gatsby-transformer-remark/diskstore-8ec8db374be0e5d12c5e9b041ff3e1f6.json deleted file mode 100644 index f151cac52f..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8ec8db374be0e5d12c5e9b041ff3e1f6.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-0b3dfbbedf9555fe75466ff56f3ff5db-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8f449885a730f79b09ef860636320253.json b/.cache/caches/gatsby-transformer-remark/diskstore-8f449885a730f79b09ef860636320253.json deleted file mode 100644 index 3a65feddf1..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8f449885a730f79b09ef860636320253.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-d1d3303c6f92e074c20c0fbe3324ba42-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#线图层","title":null,"children":[],"data":{"hProperties":{"aria-label":"线图层 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"线图层","position":{"start":{"line":1,"column":4,"offset":3},"end":{"line":1,"column":7,"offset":6},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":7,"offset":6},"indent":[]},"data":{"id":"线图层","htmlAttributes":{"id":"线图层"},"hProperties":{"id":"线图层"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"shape","position":{"start":{"line":3,"column":5,"offset":12},"end":{"line":3,"column":10,"offset":17},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":10,"offset":17},"indent":[]},"data":{"id":"shape","htmlAttributes":{"id":"shape"},"hProperties":{"id":"shape"}}},{"type":"paragraph","children":[{"type":"text","value":"线图层支持4种 shape","position":{"start":{"line":5,"column":1,"offset":19},"end":{"line":5,"column":14,"offset":32},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":19},"end":{"line":5,"column":14,"offset":32},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"line 绘制路径图，","position":{"start":{"line":7,"column":3,"offset":36},"end":{"line":7,"column":14,"offset":47},"indent":[]}}],"position":{"start":{"line":7,"column":3,"offset":36},"end":{"line":7,"column":14,"offset":47},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":34},"end":{"line":7,"column":14,"offset":47},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"arc 绘制弧线 通过贝塞尔曲线算法技术弧线","position":{"start":{"line":8,"column":3,"offset":50},"end":{"line":8,"column":25,"offset":72},"indent":[]}}],"position":{"start":{"line":8,"column":3,"offset":50},"end":{"line":8,"column":25,"offset":72},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":48},"end":{"line":8,"column":25,"offset":72},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线","position":{"start":{"line":9,"column":3,"offset":75},"end":{"line":9,"column":44,"offset":116},"indent":[]}}],"position":{"start":{"line":9,"column":3,"offset":75},"end":{"line":9,"column":44,"offset":116},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":73},"end":{"line":9,"column":44,"offset":116},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"arc3d 3d弧线地图 3D视角","position":{"start":{"line":10,"column":3,"offset":119},"end":{"line":10,"column":21,"offset":137},"indent":[]}}],"position":{"start":{"line":10,"column":3,"offset":119},"end":{"line":10,"column":21,"offset":137},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":117},"end":{"line":10,"column":21,"offset":137},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":34},"end":{"line":10,"column":21,"offset":137},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ 弧线只需要设置起始点坐标即可","position":{"start":{"line":12,"column":1,"offset":139},"end":{"line":12,"column":18,"offset":156},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":139},"end":{"line":12,"column":18,"offset":156},"indent":[]}},{"type":"html","lang":null,"meta":null,"value":"
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
","position":{"start":{"line":14,"column":1,"offset":158},"end":{"line":25,"column":4,"offset":375},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点","position":{"start":{"line":27,"column":1,"offset":377},"end":{"line":27,"column":46,"offset":422},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":377},"end":{"line":27,"column":46,"offset":422},"indent":[]}},{"type":"html","lang":null,"meta":null,"value":"
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
","position":{"start":{"line":28,"column":1,"offset":423},"end":{"line":52,"column":4,"offset":797},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#size","title":null,"children":[],"data":{"hProperties":{"aria-label":"size permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size","position":{"start":{"line":54,"column":5,"offset":803},"end":{"line":54,"column":9,"offset":807},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":799},"end":{"line":54,"column":9,"offset":807},"indent":[]},"data":{"id":"size","htmlAttributes":{"id":"size"},"hProperties":{"id":"size"}}},{"type":"paragraph","children":[{"type":"text","value":"线图层 可以设置高度","position":{"start":{"line":56,"column":1,"offset":809},"end":{"line":56,"column":11,"offset":819},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":809},"end":{"line":56,"column":11,"offset":819},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"size 类型为number 则表示 line的宽度","position":{"start":{"line":58,"column":3,"offset":823},"end":{"line":58,"column":29,"offset":849},"indent":[]}}],"position":{"start":{"line":58,"column":3,"offset":823},"end":{"line":58,"column":29,"offset":849},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":821},"end":{"line":58,"column":29,"offset":849},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"size 类型为 ","position":{"start":{"line":59,"column":3,"offset":852},"end":{"line":59,"column":12,"offset":861},"indent":[]}},{"type":"linkReference","identifier":"number , number","label":"number , number","referenceType":"shortcut","children":[{"type":"text","value":"number , number","position":{"start":{"line":59,"column":13,"offset":862},"end":{"line":59,"column":28,"offset":877},"indent":[]}}],"position":{"start":{"line":59,"column":12,"offset":861},"end":{"line":59,"column":29,"offset":878},"indent":[]}},{"type":"text","value":" 分别表示宽度和高度","position":{"start":{"line":59,"column":29,"offset":878},"end":{"line":59,"column":39,"offset":888},"indent":[]}}],"position":{"start":{"line":59,"column":3,"offset":852},"end":{"line":59,"column":39,"offset":888},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":850},"end":{"line":59,"column":39,"offset":888},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":821},"end":{"line":59,"column":39,"offset":888},"indent":[1]}},{"type":"html","lang":"javascript","meta":null,"value":"
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","position":{"start":{"line":61,"column":1,"offset":890},"end":{"line":66,"column":4,"offset":974},"indent":[1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":69,"column":1,"offset":977}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8f98346bf85951315f21cc10b75284ac.json b/.cache/caches/gatsby-transformer-remark/diskstore-8f98346bf85951315f21cc10b75284ac.json deleted file mode 100644 index b49bd7da9f..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8f98346bf85951315f21cc10b75284ac.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-ed91d2618bada36e0008fd0df5fb212b-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-8fe452837ddd40f5ec3ca21eff34f92f.json b/.cache/caches/gatsby-transformer-remark/diskstore-8fe452837ddd40f5ec3ca21eff34f92f.json deleted file mode 100644 index c4bacdb544..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-8fe452837ddd40f5ec3ca21eff34f92f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-ad3a0411bb469460edbd1820d1a953f5-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-92653bf1aeb3e4fb0fc751940a7bff84.json b/.cache/caches/gatsby-transformer-remark/diskstore-92653bf1aeb3e4fb0fc751940a7bff84.json deleted file mode 100644 index 709453c790..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-92653bf1aeb3e4fb0fc751940a7bff84.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-22e40979220b547ee56864978d7eefed-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":59,"offset":58},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":59,"offset":58},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":59,"offset":58}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-928019d96af7ed14975bc59c2944c522.json b/.cache/caches/gatsby-transformer-remark/diskstore-928019d96af7ed14975bc59c2944c522.json deleted file mode 100644 index c67e183fd6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-928019d96af7ed14975bc59c2944c522.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162511000,"key":"transformer-remark-markdown-html-ed91d2618bada36e0008fd0df5fb212b-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-973c457ad6757353068b505a3b8b6c50.json b/.cache/caches/gatsby-transformer-remark/diskstore-973c457ad6757353068b505a3b8b6c50.json deleted file mode 100644 index 3cb1194e72..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-973c457ad6757353068b505a3b8b6c50.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-3b51eb4af3d4a5698e9dc244ba9364a5-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"geojson-数据介绍"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson-%E6%95%B0%E6%8D%AE%E4%BB%8B%E7%BB%8D","aria-label":"geojson 数据介绍 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"geojson 数据介绍","position":{"start":{"line":3,"column":3,"offset":4},"end":{"line":3,"column":15,"offset":16}}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":15,"offset":16}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":6,"column":4,"offset":22},"end":{"line":6,"column":6,"offset":24}}}],"position":{"start":{"line":6,"column":1,"offset":19},"end":{"line":6,"column":6,"offset":24}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":8,"column":1,"offset":26},"end":{"line":8,"column":126,"offset":151}}}],"position":{"start":{"line":8,"column":1,"offset":26},"end":{"line":8,"column":126,"offset":151}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":""},"children":[{"type":"text","value":"geojson详细文档","position":{"start":{"line":10,"column":2,"offset":154},"end":{"line":10,"column":13,"offset":165}}}],"position":{"start":{"line":10,"column":1,"offset":153},"end":{"line":10,"column":16,"offset":168}}}],"position":{"start":{"line":10,"column":1,"offset":153},"end":{"line":10,"column":16,"offset":168}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"geojson相关的js库"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson%E7%9B%B8%E5%85%B3%E7%9A%84js%E5%BA%93","aria-label":"geojson相关的js库 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Geojson相关的JS库","position":{"start":{"line":12,"column":4,"offset":173},"end":{"line":12,"column":17,"offset":186}}}],"position":{"start":{"line":12,"column":1,"offset":170},"end":{"line":12,"column":17,"offset":186}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"地理统计分析工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7","aria-label":"地理统计分析工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":14,"column":5,"offset":192},"end":{"line":14,"column":13,"offset":200}}}],"position":{"start":{"line":14,"column":1,"offset":188},"end":{"line":14,"column":13,"offset":200}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://turfjs.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"turfjs","position":{"start":{"line":16,"column":2,"offset":203},"end":{"line":16,"column":8,"offset":209}}}],"position":{"start":{"line":16,"column":1,"offset":202},"end":{"line":16,"column":29,"offset":230}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":16,"column":29,"offset":230},"end":{"line":16,"column":60,"offset":261}}}],"position":{"start":{"line":16,"column":1,"offset":202},"end":{"line":16,"column":60,"offset":261}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"在线工具："},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7%EF%BC%9A","aria-label":"在线工具： permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"在线工具：","position":{"start":{"line":19,"column":5,"offset":268},"end":{"line":19,"column":10,"offset":273}}}],"position":{"start":{"line":19,"column":1,"offset":264},"end":{"line":19,"column":10,"offset":273}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://geojson.io/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":21,"column":2,"offset":276},"end":{"line":21,"column":20,"offset":294}}}],"position":{"start":{"line":21,"column":1,"offset":275},"end":{"line":21,"column":41,"offset":315}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":21,"column":41,"offset":315},"end":{"line":21,"column":66,"offset":340}}}],"position":{"start":{"line":21,"column":1,"offset":275},"end":{"line":21,"column":66,"offset":340}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://mapshaper.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":23,"column":2,"offset":343},"end":{"line":23,"column":24,"offset":365}}}],"position":{"start":{"line":23,"column":1,"offset":342},"end":{"line":23,"column":49,"offset":390}}},{"type":"text","value":" 可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":23,"column":49,"offset":390},"end":{"line":23,"column":80,"offset":421}}}],"position":{"start":{"line":23,"column":1,"offset":342},"end":{"line":23,"column":80,"offset":421}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":24,"column":1,"offset":422}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-97ca6df771e35468c6c569c185240f63.json b/.cache/caches/gatsby-transformer-remark/diskstore-97ca6df771e35468c6c569c185240f63.json deleted file mode 100644 index 661bd6de9b..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-97ca6df771e35468c6c569c185240f63.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-2f71087002b5dca20364ad83f1da9f61-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-99e1ed359f4eba67b6711473dd03df84.json b/.cache/caches/gatsby-transformer-remark/diskstore-99e1ed359f4eba67b6711473dd03df84.json deleted file mode 100644 index 5adb28029c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-99e1ed359f4eba67b6711473dd03df84.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-be04f0ab294598a21926b87cd453f97c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-9b486bec70aa4273f07e11f775f1425a.json b/.cache/caches/gatsby-transformer-remark/diskstore-9b486bec70aa4273f07e11f775f1425a.json deleted file mode 100644 index 4d351212a7..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-9b486bec70aa4273f07e11f775f1425a.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-2f71087002b5dca20364ad83f1da9f61-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-9bff8d9f0ec139b47d44f0fb4f2af24b.json b/.cache/caches/gatsby-transformer-remark/diskstore-9bff8d9f0ec139b47d44f0fb4f2af24b.json deleted file mode 100644 index a459a27a98..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-9bff8d9f0ec139b47d44f0fb4f2af24b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-25eb056d4a67acb0b49cfbe659e280c1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-9df2a2b1d1e5727c40c1818a921124fe.json b/.cache/caches/gatsby-transformer-remark/diskstore-9df2a2b1d1e5727c40c1818a921124fe.json deleted file mode 100644 index 658be3949d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-9df2a2b1d1e5727c40c1818a921124fe.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-d9c8c8e6e4baf6574d8f46f3a81eba85-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-9e68f94ff83eff84c3f3754bf58eae79.json b/.cache/caches/gatsby-transformer-remark/diskstore-9e68f94ff83eff84c3f3754bf58eae79.json deleted file mode 100644 index deb33ff2e6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-9e68f94ff83eff84c3f3754bf58eae79.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-c4cd085970d775329dc03e58519d79fd-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":2,"column":1,"offset":1}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-9f1808abb60d938de902f411b8b128cf.json b/.cache/caches/gatsby-transformer-remark/diskstore-9f1808abb60d938de902f411b8b128cf.json deleted file mode 100644 index e020b27faf..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-9f1808abb60d938de902f411b8b128cf.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-4ddb72039f738ffb6fc8c7ca02770db1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#control","title":null,"children":[],"data":{"hProperties":{"aria-label":"control permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"control","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":10,"offset":9},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":10,"offset":9},"indent":[]},"data":{"id":"control","htmlAttributes":{"id":"control"},"hProperties":{"id":"control"}}},{"type":"paragraph","children":[{"type":"text","value":"地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺","position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":43,"offset":53},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":43,"offset":53},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":6,"column":4,"offset":59},"end":{"line":6,"column":8,"offset":63},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":56},"end":{"line":6,"column":8,"offset":63},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"html","lang":"javascript","meta":null,"value":"
const baseControl = new L7.Control.Base(option);\n
","position":{"start":{"line":8,"column":1,"offset":65},"end":{"line":10,"column":4,"offset":131},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#option","title":null,"children":[],"data":{"hProperties":{"aria-label":"option permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"option","position":{"start":{"line":13,"column":6,"offset":139},"end":{"line":13,"column":12,"offset":145},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":134},"end":{"line":13,"column":12,"offset":145},"indent":[]},"data":{"id":"option","htmlAttributes":{"id":"option"},"hProperties":{"id":"option"}}},{"type":"paragraph","children":[{"type":"text","value":" position: ","position":{"start":{"line":14,"column":1,"offset":146},"end":{"line":14,"column":12,"offset":157},"indent":[]}},{"type":"html","value":"string","position":{"start":{"line":14,"column":12,"offset":157},"end":{"line":14,"column":20,"offset":165},"indent":[]}},{"type":"text","value":" 控件位置支持是个方位 ","position":{"start":{"line":14,"column":20,"offset":165},"end":{"line":14,"column":32,"offset":177},"indent":[]}},{"type":"html","value":"bottomright, topright, bottomleft, topleft","position":{"start":{"line":14,"column":32,"offset":177},"end":{"line":14,"column":76,"offset":221},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":146},"end":{"line":14,"column":76,"offset":221},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#scene-内置地图组件","title":null,"children":[],"data":{"hProperties":{"aria-label":"scene 内置地图组件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"scene 内置地图组件","position":{"start":{"line":17,"column":6,"offset":229},"end":{"line":17,"column":18,"offset":241},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":224},"end":{"line":17,"column":18,"offset":241},"indent":[]},"data":{"id":"scene-内置地图组件","htmlAttributes":{"id":"scene-内置地图组件"},"hProperties":{"id":"scene-内置地图组件"}}},{"type":"paragraph","children":[{"type":"text","value":"zoom 地图放大缩小  默认添加","position":{"start":{"line":18,"column":1,"offset":242},"end":{"line":18,"column":18,"offset":259},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":18,"column":18,"offset":259},"end":{"line":18,"column":24,"offset":265},"indent":[]}},{"type":"text","value":"Scale 地图比例尺   默认添加","position":{"start":{"line":18,"column":24,"offset":265},"end":{"line":18,"column":42,"offset":283},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":18,"column":42,"offset":283},"end":{"line":18,"column":48,"offset":289},"indent":[]}},{"type":"text","value":"attribution 地图数据属性  默认添加","position":{"start":{"line":18,"column":48,"offset":289},"end":{"line":18,"column":72,"offset":313},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":18,"column":72,"offset":313},"end":{"line":18,"column":78,"offset":319},"indent":[]}},{"type":"text","value":"layer 图层列表","position":{"start":{"line":18,"column":78,"offset":319},"end":{"line":18,"column":88,"offset":329},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":242},"end":{"line":18,"column":88,"offset":329},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"scene配置项设置控件添加状态","position":{"start":{"line":20,"column":3,"offset":333},"end":{"line":20,"column":19,"offset":349},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":331},"end":{"line":20,"column":21,"offset":351},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":331},"end":{"line":20,"column":21,"offset":351},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
","position":{"start":{"line":22,"column":1,"offset":353},"end":{"line":28,"column":4,"offset":469},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#","title":null,"children":[],"data":{"hProperties":{"aria-label":" permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":30,"column":1,"offset":471},"end":{"line":30,"column":6,"offset":476},"indent":[]},"data":{"id":"","htmlAttributes":{"id":""},"hProperties":{"id":""}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#zoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"zoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Zoom","position":{"start":{"line":32,"column":6,"offset":483},"end":{"line":32,"column":10,"offset":487},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":478},"end":{"line":32,"column":10,"offset":487},"indent":[]},"data":{"id":"zoom","htmlAttributes":{"id":"zoom"},"hProperties":{"id":"zoom"}}},{"type":"paragraph","children":[{"type":"text","value":"放大缩小组件 默认 左上角","position":{"start":{"line":33,"column":1,"offset":488},"end":{"line":33,"column":14,"offset":501},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":488},"end":{"line":33,"column":14,"offset":501},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
","position":{"start":{"line":35,"column":1,"offset":503},"end":{"line":39,"column":4,"offset":590},"indent":[1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#scale","title":null,"children":[],"data":{"hProperties":{"aria-label":"scale permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Scale","position":{"start":{"line":42,"column":6,"offset":598},"end":{"line":42,"column":11,"offset":603},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":593},"end":{"line":42,"column":11,"offset":603},"indent":[]},"data":{"id":"scale","htmlAttributes":{"id":"scale"},"hProperties":{"id":"scale"}}},{"type":"paragraph","children":[{"type":"text","value":"比例尺组件默认左下角","position":{"start":{"line":43,"column":1,"offset":604},"end":{"line":43,"column":11,"offset":614},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":604},"end":{"line":43,"column":11,"offset":614},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
","position":{"start":{"line":45,"column":1,"offset":616},"end":{"line":49,"column":4,"offset":707},"indent":[1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#attribution","title":null,"children":[],"data":{"hProperties":{"aria-label":"attribution permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"attribution","position":{"start":{"line":52,"column":6,"offset":715},"end":{"line":52,"column":17,"offset":726},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":710},"end":{"line":52,"column":17,"offset":726},"indent":[]},"data":{"id":"attribution","htmlAttributes":{"id":"attribution"},"hProperties":{"id":"attribution"}}},{"type":"paragraph","children":[{"type":"text","value":"默认右下角","position":{"start":{"line":53,"column":1,"offset":727},"end":{"line":53,"column":6,"offset":732},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":727},"end":{"line":53,"column":6,"offset":732},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
","position":{"start":{"line":55,"column":1,"offset":734},"end":{"line":59,"column":4,"offset":830},"indent":[1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#layer","title":null,"children":[],"data":{"hProperties":{"aria-label":"layer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"layer","position":{"start":{"line":62,"column":6,"offset":838},"end":{"line":62,"column":11,"offset":843},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":833},"end":{"line":62,"column":11,"offset":843},"indent":[]},"data":{"id":"layer","htmlAttributes":{"id":"layer"},"hProperties":{"id":"layer"}}},{"type":"paragraph","children":[{"type":"text","value":"图层列表目前只支持可视化overlayers 图层控制","position":{"start":{"line":63,"column":1,"offset":844},"end":{"line":63,"column":28,"offset":871},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":844},"end":{"line":63,"column":28,"offset":871},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
","position":{"start":{"line":65,"column":1,"offset":873},"end":{"line":73,"column":4,"offset":1031},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":76,"column":4,"offset":1037},"end":{"line":76,"column":6,"offset":1039},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":1034},"end":{"line":76,"column":6,"offset":1039},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#onadd","title":null,"children":[],"data":{"hProperties":{"aria-label":"onadd permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"onAdd","position":{"start":{"line":78,"column":6,"offset":1046},"end":{"line":78,"column":11,"offset":1051},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":1041},"end":{"line":78,"column":11,"offset":1051},"indent":[]},"data":{"id":"onadd","htmlAttributes":{"id":"onadd"},"hProperties":{"id":"onadd"}}},{"type":"paragraph","children":[{"type":"text","value":"组件添加到地图Scene时调用，自定义组件时需要实现此方法","position":{"start":{"line":79,"column":1,"offset":1052},"end":{"line":79,"column":30,"offset":1081},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":1052},"end":{"line":79,"column":30,"offset":1081},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#addto","title":null,"children":[],"data":{"hProperties":{"aria-label":"addto permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"addTo","position":{"start":{"line":82,"column":6,"offset":1089},"end":{"line":82,"column":11,"offset":1094},"indent":[]}}],"position":{"start":{"line":82,"column":1,"offset":1084},"end":{"line":82,"column":11,"offset":1094},"indent":[]},"data":{"id":"addto","htmlAttributes":{"id":"addto"},"hProperties":{"id":"addto"}}},{"type":"paragraph","children":[{"type":"text","value":"添加到地图scene","position":{"start":{"line":83,"column":1,"offset":1095},"end":{"line":83,"column":11,"offset":1105},"indent":[]}}],"position":{"start":{"line":83,"column":1,"offset":1095},"end":{"line":83,"column":11,"offset":1105},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
control.addTo(scene);\n
","position":{"start":{"line":85,"column":1,"offset":1107},"end":{"line":87,"column":4,"offset":1146},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#setposition","title":null,"children":[],"data":{"hProperties":{"aria-label":"setposition permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setPosition","position":{"start":{"line":90,"column":6,"offset":1154},"end":{"line":90,"column":17,"offset":1165},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":1149},"end":{"line":90,"column":17,"offset":1165},"indent":[]},"data":{"id":"setposition","htmlAttributes":{"id":"setposition"},"hProperties":{"id":"setposition"}}},{"type":"paragraph","children":[{"type":"text","value":"设置组件位置","position":{"start":{"line":91,"column":1,"offset":1166},"end":{"line":91,"column":7,"offset":1172},"indent":[]}}],"position":{"start":{"line":91,"column":1,"offset":1166},"end":{"line":91,"column":7,"offset":1172},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
control.setPosition('bottomright');\n
","position":{"start":{"line":93,"column":1,"offset":1174},"end":{"line":95,"column":4,"offset":1227},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#remove","title":null,"children":[],"data":{"hProperties":{"aria-label":"remove permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"remove","position":{"start":{"line":98,"column":6,"offset":1235},"end":{"line":98,"column":12,"offset":1241},"indent":[]}}],"position":{"start":{"line":98,"column":1,"offset":1230},"end":{"line":98,"column":12,"offset":1241},"indent":[]},"data":{"id":"remove","htmlAttributes":{"id":"remove"},"hProperties":{"id":"remove"}}},{"type":"paragraph","children":[{"type":"text","value":"移除地图组件","position":{"start":{"line":99,"column":1,"offset":1242},"end":{"line":99,"column":7,"offset":1248},"indent":[]}}],"position":{"start":{"line":99,"column":1,"offset":1242},"end":{"line":99,"column":7,"offset":1248},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
control.remove();\n
","position":{"start":{"line":101,"column":1,"offset":1250},"end":{"line":103,"column":4,"offset":1285},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#示例代码","title":null,"children":[],"data":{"hProperties":{"aria-label":"示例代码 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"示例代码","position":{"start":{"line":107,"column":4,"offset":1292},"end":{"line":107,"column":8,"offset":1296},"indent":[]}}],"position":{"start":{"line":107,"column":1,"offset":1289},"end":{"line":107,"column":8,"offset":1296},"indent":[]},"data":{"id":"示例代码","htmlAttributes":{"id":"示例代码"},"hProperties":{"id":"示例代码"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#自定义图例控件","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义图例控件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"自定义图例控件","position":{"start":{"line":110,"column":6,"offset":1304},"end":{"line":110,"column":13,"offset":1311},"indent":[]}}],"position":{"start":{"line":110,"column":1,"offset":1299},"end":{"line":110,"column":13,"offset":1311},"indent":[]},"data":{"id":"自定义图例控件","htmlAttributes":{"id":"自定义图例控件"},"hProperties":{"id":"自定义图例控件"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html","children":[{"type":"text","value":"源码","position":{"start":{"line":111,"column":2,"offset":1313},"end":{"line":111,"column":4,"offset":1315},"indent":[]}}],"position":{"start":{"line":111,"column":1,"offset":1312},"end":{"line":111,"column":77,"offset":1388},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":111,"column":1,"offset":1312},"end":{"line":111,"column":77,"offset":1388},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
","position":{"start":{"line":113,"column":1,"offset":1390},"end":{"line":128,"column":4,"offset":1914},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-1","title":null,"children":[],"data":{"hProperties":{"aria-label":" 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":130,"column":1,"offset":1916},"end":{"line":130,"column":4,"offset":1919},"indent":[]},"data":{"id":"-1","htmlAttributes":{"id":"-1"},"hProperties":{"id":"-1"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#faq","title":null,"children":[],"data":{"hProperties":{"aria-label":"faq permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"FAQ","position":{"start":{"line":132,"column":4,"offset":1924},"end":{"line":132,"column":7,"offset":1927},"indent":[]}}],"position":{"start":{"line":132,"column":1,"offset":1921},"end":{"line":132,"column":7,"offset":1927},"indent":[]},"data":{"id":"faq","htmlAttributes":{"id":"faq"},"hProperties":{"id":"faq"}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":134,"column":1,"offset":1929}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-9f29dd0f8ccdc27860761500b8cef5b1.json b/.cache/caches/gatsby-transformer-remark/diskstore-9f29dd0f8ccdc27860761500b8cef5b1.json deleted file mode 100644 index de5906ee5d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-9f29dd0f8ccdc27860761500b8cef5b1.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-1007c079d6357b1b7f036a12841ae440-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":48,"offset":47},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":48,"offset":47},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":48,"offset":47}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a03c4a22a6a6fad7f3c8e100556ecbd3.json b/.cache/caches/gatsby-transformer-remark/diskstore-a03c4a22a6a6fad7f3c8e100556ecbd3.json deleted file mode 100644 index c3b9e8a621..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a03c4a22a6a6fad7f3c8e100556ecbd3.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-0ce38f6fc0207c9629c6165b2f176cd7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"source"},"children":[{"type":"element","tagName":"a","properties":{"href":"#source","aria-label":"source permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Source","position":{"start":{"line":3,"column":3,"offset":4},"end":{"line":3,"column":9,"offset":10}}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":9,"offset":10}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"概述"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%A6%82%E8%BF%B0","aria-label":"概述 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"概述","position":{"start":{"line":6,"column":5,"offset":17},"end":{"line":6,"column":7,"offset":19}}}],"position":{"start":{"line":6,"column":1,"offset":13},"end":{"line":6,"column":7,"offset":19}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);","position":{"start":{"line":8,"column":1,"offset":21},"end":{"line":8,"column":51,"offset":71}}}],"position":{"start":{"line":8,"column":1,"offset":21},"end":{"line":8,"column":51,"offset":71}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"parser:","position":{"start":{"line":10,"column":3,"offset":75},"end":{"line":10,"column":10,"offset":82}}}],"position":{"start":{"line":10,"column":1,"offset":73},"end":{"line":10,"column":12,"offset":84}}}],"position":{"start":{"line":10,"column":1,"offset":73},"end":{"line":10,"column":12,"offset":84}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。","position":{"start":{"line":12,"column":1,"offset":86},"end":{"line":12,"column":83,"offset":168}}}],"position":{"start":{"line":12,"column":1,"offset":86},"end":{"line":12,"column":83,"offset":168}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"transform:","position":{"start":{"line":14,"column":3,"offset":172},"end":{"line":14,"column":13,"offset":182}}}],"position":{"start":{"line":14,"column":1,"offset":170},"end":{"line":14,"column":15,"offset":184}}}],"position":{"start":{"line":14,"column":1,"offset":170},"end":{"line":14,"column":15,"offset":184}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"数据转换，数据统计，网格布局，数据聚合等数据操作。","position":{"start":{"line":16,"column":1,"offset":186},"end":{"line":16,"column":26,"offset":211}}}],"position":{"start":{"line":16,"column":1,"offset":186},"end":{"line":16,"column":26,"offset":211}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"api"},"children":[{"type":"element","tagName":"a","properties":{"href":"#api","aria-label":"api permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"API","position":{"start":{"line":19,"column":4,"offset":217},"end":{"line":19,"column":7,"offset":220}}}],"position":{"start":{"line":19,"column":1,"offset":214},"end":{"line":19,"column":7,"offset":220}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"parser"},"children":[{"type":"element","tagName":"a","properties":{"href":"#parser","aria-label":"parser permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"parser","position":{"start":{"line":21,"column":5,"offset":226},"end":{"line":21,"column":11,"offset":232}}}],"position":{"start":{"line":21,"column":1,"offset":222},"end":{"line":21,"column":11,"offset":232}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"空间数据分矢量数据和栅格数据两大类","position":{"start":{"line":23,"column":1,"offset":234},"end":{"line":23,"column":18,"offset":251}}}],"position":{"start":{"line":23,"column":1,"offset":234},"end":{"line":23,"column":18,"offset":251}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"矢量数据 支持 csv，geojson，json 三种数据类型","position":{"start":{"line":25,"column":3,"offset":255},"end":{"line":25,"column":34,"offset":286}}}],"position":{"start":{"line":25,"column":1,"offset":253},"end":{"line":26,"column":1,"offset":287}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"栅格数据 支持 image，Raster","position":{"start":{"line":27,"column":3,"offset":290},"end":{"line":27,"column":24,"offset":311}}}],"position":{"start":{"line":27,"column":1,"offset":288},"end":{"line":27,"column":24,"offset":311}}},{"type":"text","value":"\n"}],"position":{"start":{"line":25,"column":1,"offset":253},"end":{"line":27,"column":24,"offset":311}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"geojson"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson","aria-label":"geojson permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"geojson","position":{"start":{"line":31,"column":6,"offset":320},"end":{"line":31,"column":13,"offset":327}}}],"position":{"start":{"line":31,"column":1,"offset":315},"end":{"line":31,"column":13,"offset":327}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/l7/dm2zll","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"geojson","position":{"start":{"line":33,"column":2,"offset":330},"end":{"line":33,"column":9,"offset":337}}}],"position":{"start":{"line":33,"column":1,"offset":329},"end":{"line":33,"column":48,"offset":376}}},{"type":"text","value":" 数据为默认数据格式，可以","position":{"start":{"line":33,"column":48,"offset":376},"end":{"line":33,"column":61,"offset":389}}}],"position":{"start":{"line":33,"column":1,"offset":329},"end":{"line":33,"column":61,"offset":389}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"不需要设置parser 参数","position":{"start":{"line":35,"column":1,"offset":391},"end":{"line":35,"column":15,"offset":405}}}],"position":{"start":{"line":35,"column":1,"offset":391},"end":{"line":35,"column":15,"offset":405}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(data);\n
","position":{"start":{"line":37,"column":1,"offset":407},"end":{"line":39,"column":4,"offset":444}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"json"},"children":[{"type":"element","tagName":"a","properties":{"href":"#json","aria-label":"json permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"json","position":{"start":{"line":42,"column":6,"offset":452},"end":{"line":42,"column":10,"offset":456}}}],"position":{"start":{"line":42,"column":1,"offset":447},"end":{"line":42,"column":10,"offset":456}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"json 不是标准的地理数据结构，因此需要设置对应的经纬度字段","position":{"start":{"line":44,"column":1,"offset":458},"end":{"line":44,"column":33,"offset":490}}}],"position":{"start":{"line":44,"column":1,"offset":458},"end":{"line":44,"column":33,"offset":490}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"点数据","position":{"start":{"line":46,"column":3,"offset":494},"end":{"line":46,"column":6,"offset":497}}}],"position":{"start":{"line":46,"column":1,"offset":492},"end":{"line":46,"column":8,"offset":499}}}],"position":{"start":{"line":46,"column":1,"offset":492},"end":{"line":46,"column":8,"offset":499}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"x: 经度字段 ","position":{"start":{"line":48,"column":1,"offset":501},"end":{"line":48,"column":9,"offset":509}}}],"position":{"start":{"line":48,"column":1,"offset":501},"end":{"line":48,"column":9,"offset":509}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"y: 纬度字段","position":{"start":{"line":50,"column":1,"offset":511},"end":{"line":50,"column":8,"offset":518}}}],"position":{"start":{"line":50,"column":1,"offset":511},"end":{"line":50,"column":8,"offset":518}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
","position":{"start":{"line":52,"column":1,"offset":520},"end":{"line":74,"column":4,"offset":765}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"线段数据","position":{"start":{"line":76,"column":3,"offset":769},"end":{"line":76,"column":7,"offset":773}}}],"position":{"start":{"line":76,"column":1,"offset":767},"end":{"line":76,"column":9,"offset":775}}}],"position":{"start":{"line":76,"column":1,"offset":767},"end":{"line":76,"column":9,"offset":775}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" type: json","position":{"start":{"line":78,"column":1,"offset":777},"end":{"line":78,"column":12,"offset":788}}}],"position":{"start":{"line":78,"column":1,"offset":777},"end":{"line":78,"column":12,"offset":788}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标","position":{"start":{"line":80,"column":1,"offset":790},"end":{"line":80,"column":44,"offset":833}}}],"position":{"start":{"line":80,"column":1,"offset":790},"end":{"line":80,"column":44,"offset":833}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度","position":{"start":{"line":82,"column":1,"offset":835},"end":{"line":85,"column":16,"offset":891}}}],"position":{"start":{"line":82,"column":1,"offset":835},"end":{"line":85,"column":16,"offset":891}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
","position":{"start":{"line":87,"column":1,"offset":893},"end":{"line":116,"column":4,"offset":1257}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"面数据","position":{"start":{"line":118,"column":3,"offset":1261},"end":{"line":118,"column":6,"offset":1264}}}],"position":{"start":{"line":118,"column":1,"offset":1259},"end":{"line":118,"column":8,"offset":1266}}}],"position":{"start":{"line":118,"column":1,"offset":1259},"end":{"line":118,"column":8,"offset":1266}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"需要指定coordinates 字段, coordinates据格式","position":{"start":{"line":120,"column":1,"offset":1268},"end":{"line":120,"column":35,"offset":1302}}}],"position":{"start":{"line":120,"column":1,"offset":1268},"end":{"line":120,"column":35,"offset":1302}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"注意面数据 coord  是三层数据结构","position":{"start":{"line":122,"column":3,"offset":1306},"end":{"line":122,"column":23,"offset":1326}}}],"position":{"start":{"line":122,"column":1,"offset":1304},"end":{"line":122,"column":25,"offset":1328}}}],"position":{"start":{"line":122,"column":1,"offset":1304},"end":{"line":122,"column":25,"offset":1328}}},{"type":"text","value":"\n"},{"type":"raw","value":"
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
","position":{"start":{"line":124,"column":1,"offset":1330},"end":{"line":165,"column":4,"offset":2111}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"csv"},"children":[{"type":"element","tagName":"a","properties":{"href":"#csv","aria-label":"csv permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"csv","position":{"start":{"line":170,"column":6,"offset":2121},"end":{"line":170,"column":9,"offset":2124}}}],"position":{"start":{"line":170,"column":1,"offset":2116},"end":{"line":170,"column":9,"offset":2124}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"点，线数据配置项同json数据类型","position":{"start":{"line":171,"column":1,"offset":2125},"end":{"line":171,"column":18,"offset":2142}}}],"position":{"start":{"line":171,"column":1,"offset":2125},"end":{"line":171,"column":18,"offset":2142}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
","position":{"start":{"line":173,"column":1,"offset":2144},"end":{"line":185,"column":4,"offset":2308}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"栅格数据类型**","position":{"start":{"line":187,"column":3,"offset":2312},"end":{"line":187,"column":11,"offset":2320}}}],"position":{"start":{"line":187,"column":1,"offset":2310},"end":{"line":187,"column":13,"offset":2322}}}],"position":{"start":{"line":187,"column":1,"offset":2310},"end":{"line":187,"column":13,"offset":2322}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"image"},"children":[{"type":"element","tagName":"a","properties":{"href":"#image","aria-label":"image permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"image","position":{"start":{"line":189,"column":6,"offset":2329},"end":{"line":189,"column":11,"offset":2334}}}],"position":{"start":{"line":189,"column":1,"offset":2324},"end":{"line":189,"column":11,"offset":2334}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 根据图片的经纬度范围，将图片添加到地图上。 配置项","position":{"start":{"line":190,"column":1,"offset":2335},"end":{"line":190,"column":27,"offset":2361}}}],"position":{"start":{"line":190,"column":1,"offset":2335},"end":{"line":190,"column":27,"offset":2361}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" type: image","position":{"start":{"line":192,"column":3,"offset":2365},"end":{"line":192,"column":15,"offset":2377}}}],"position":{"start":{"line":192,"column":1,"offset":2363},"end":{"line":192,"column":15,"offset":2377}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" extent: 图像的经纬度范围 []","position":{"start":{"line":193,"column":3,"offset":2380},"end":{"line":193,"column":23,"offset":2400}}}],"position":{"start":{"line":193,"column":1,"offset":2378},"end":{"line":193,"column":23,"offset":2400}}},{"type":"text","value":"\n"}],"position":{"start":{"line":192,"column":1,"offset":2363},"end":{"line":193,"column":23,"offset":2400}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","position":{"start":{"line":195,"column":1,"offset":2402},"end":{"line":202,"column":4,"offset":2616}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"raster"},"children":[{"type":"element","tagName":"a","properties":{"href":"#raster","aria-label":"raster permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"raster","position":{"start":{"line":205,"column":6,"offset":2625},"end":{"line":205,"column":12,"offset":2631}}}],"position":{"start":{"line":205,"column":1,"offset":2620},"end":{"line":205,"column":12,"offset":2631}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项","position":{"start":{"line":206,"column":1,"offset":2632},"end":{"line":206,"column":44,"offset":2675}}}],"position":{"start":{"line":206,"column":1,"offset":2632},"end":{"line":206,"column":44,"offset":2675}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"type  raster","position":{"start":{"line":208,"column":3,"offset":2679},"end":{"line":208,"column":15,"offset":2691}}}],"position":{"start":{"line":208,"column":1,"offset":2677},"end":{"line":208,"column":15,"offset":2691}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"width  数据宽度二维矩阵 columns ","position":{"start":{"line":209,"column":3,"offset":2694},"end":{"line":209,"column":27,"offset":2718}}}],"position":{"start":{"line":209,"column":1,"offset":2692},"end":{"line":209,"column":27,"offset":2718}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"height 数据高度","position":{"start":{"line":210,"column":3,"offset":2721},"end":{"line":210,"column":14,"offset":2732}}}],"position":{"start":{"line":210,"column":1,"offset":2719},"end":{"line":210,"column":14,"offset":2732}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"min 数据最大值","position":{"start":{"line":211,"column":3,"offset":2735},"end":{"line":211,"column":12,"offset":2744}}}],"position":{"start":{"line":211,"column":1,"offset":2733},"end":{"line":211,"column":12,"offset":2744}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"max 数据最小值","position":{"start":{"line":212,"column":3,"offset":2747},"end":{"line":212,"column":12,"offset":2756}}}],"position":{"start":{"line":212,"column":1,"offset":2745},"end":{"line":212,"column":12,"offset":2756}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"extent 经纬度范围","position":{"start":{"line":213,"column":3,"offset":2759},"end":{"line":213,"column":15,"offset":2771}}}],"position":{"start":{"line":213,"column":1,"offset":2757},"end":{"line":213,"column":15,"offset":2771}}},{"type":"text","value":"\n"}],"position":{"start":{"line":208,"column":1,"offset":2677},"end":{"line":213,"column":15,"offset":2771}}},{"type":"text","value":"\n"},{"type":"raw","value":"
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
","position":{"start":{"line":215,"column":1,"offset":2773},"end":{"line":226,"column":4,"offset":3023}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"transforms"},"children":[{"type":"element","tagName":"a","properties":{"href":"#transforms","aria-label":"transforms permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"transforms","position":{"start":{"line":229,"column":5,"offset":3030},"end":{"line":229,"column":15,"offset":3040}}}],"position":{"start":{"line":229,"column":1,"offset":3026},"end":{"line":229,"column":15,"offset":3040}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"目前支持三种数据处理方法 map，grid，hexagon transform配置项","position":{"start":{"line":231,"column":1,"offset":3042},"end":{"line":231,"column":43,"offset":3084}}}],"position":{"start":{"line":231,"column":1,"offset":3042},"end":{"line":231,"column":43,"offset":3084}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"type 数据处理类型","position":{"start":{"line":233,"column":3,"offset":3088},"end":{"line":233,"column":14,"offset":3099}}}],"position":{"start":{"line":233,"column":1,"offset":3086},"end":{"line":233,"column":14,"offset":3099}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" tansform cfg  数据处理配置项","position":{"start":{"line":234,"column":3,"offset":3102},"end":{"line":234,"column":25,"offset":3124}}}],"position":{"start":{"line":234,"column":1,"offset":3100},"end":{"line":234,"column":25,"offset":3124}}},{"type":"text","value":"\n"}],"position":{"start":{"line":233,"column":1,"offset":3086},"end":{"line":234,"column":25,"offset":3124}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"map"},"children":[{"type":"element","tagName":"a","properties":{"href":"#map","aria-label":"map permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"map","position":{"start":{"line":237,"column":6,"offset":3132},"end":{"line":237,"column":9,"offset":3135}}}],"position":{"start":{"line":237,"column":1,"offset":3127},"end":{"line":237,"column":9,"offset":3135}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"数据处理，支持自定义callback函数","position":{"start":{"line":238,"column":1,"offset":3136},"end":{"line":238,"column":21,"offset":3156}}}],"position":{"start":{"line":238,"column":1,"offset":3136},"end":{"line":238,"column":21,"offset":3156}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"callback:function 回调函数","position":{"start":{"line":240,"column":3,"offset":3160},"end":{"line":240,"column":25,"offset":3182}}}],"position":{"start":{"line":240,"column":1,"offset":3158},"end":{"line":240,"column":25,"offset":3182}}},{"type":"text","value":"\n"}],"position":{"start":{"line":240,"column":1,"offset":3158},"end":{"line":240,"column":25,"offset":3182}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
","position":{"start":{"line":242,"column":1,"offset":3184},"end":{"line":258,"column":4,"offset":3559}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"grid"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grid","aria-label":"grid permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"grid","position":{"start":{"line":261,"column":6,"offset":3567},"end":{"line":261,"column":10,"offset":3571}}}],"position":{"start":{"line":261,"column":1,"offset":3562},"end":{"line":261,"column":10,"offset":3571}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"生成方格网布局，根据数据字段统计，主要在网格热力图中使用","position":{"start":{"line":263,"column":1,"offset":3573},"end":{"line":263,"column":29,"offset":3601}}}],"position":{"start":{"line":263,"column":1,"offset":3573},"end":{"line":263,"column":29,"offset":3601}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" type: 'grid',","position":{"start":{"line":265,"column":3,"offset":3605},"end":{"line":265,"column":17,"offset":3619}}}],"position":{"start":{"line":265,"column":1,"offset":3603},"end":{"line":265,"column":17,"offset":3619}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" size: 网格半径","position":{"start":{"line":266,"column":3,"offset":3622},"end":{"line":266,"column":14,"offset":3633}}}],"position":{"start":{"line":266,"column":1,"offset":3620},"end":{"line":266,"column":14,"offset":3633}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" field: 数据统计字段","position":{"start":{"line":267,"column":3,"offset":3636},"end":{"line":267,"column":17,"offset":3650}}}],"position":{"start":{"line":267,"column":1,"offset":3634},"end":{"line":267,"column":17,"offset":3650}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" method:聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":268,"column":3,"offset":3653},"end":{"line":268,"column":45,"offset":3695}}}],"position":{"start":{"line":268,"column":1,"offset":3651},"end":{"line":268,"column":45,"offset":3695}}},{"type":"text","value":"\n"}],"position":{"start":{"line":265,"column":1,"offset":3603},"end":{"line":268,"column":45,"offset":3695}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
","position":{"start":{"line":270,"column":1,"offset":3697},"end":{"line":281,"column":4,"offset":3872}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"hexagon"},"children":[{"type":"element","tagName":"a","properties":{"href":"#hexagon","aria-label":"hexagon permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"hexagon","position":{"start":{"line":284,"column":6,"offset":3880},"end":{"line":284,"column":13,"offset":3887}}}],"position":{"start":{"line":284,"column":1,"offset":3875},"end":{"line":284,"column":13,"offset":3887}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"生成六边形网格布局，根据数据字段统计","position":{"start":{"line":285,"column":1,"offset":3888},"end":{"line":285,"column":19,"offset":3906}}}],"position":{"start":{"line":285,"column":1,"offset":3888},"end":{"line":285,"column":19,"offset":3906}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" type: 'hexagon',","position":{"start":{"line":287,"column":3,"offset":3910},"end":{"line":287,"column":20,"offset":3927}}}],"position":{"start":{"line":287,"column":1,"offset":3908},"end":{"line":287,"column":20,"offset":3927}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" size: 网格半径","position":{"start":{"line":288,"column":3,"offset":3930},"end":{"line":288,"column":14,"offset":3941}}}],"position":{"start":{"line":288,"column":1,"offset":3928},"end":{"line":288,"column":14,"offset":3941}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" field: 数据统计字段","position":{"start":{"line":289,"column":3,"offset":3944},"end":{"line":289,"column":17,"offset":3958}}}],"position":{"start":{"line":289,"column":1,"offset":3942},"end":{"line":289,"column":17,"offset":3958}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" method:聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":290,"column":3,"offset":3961},"end":{"line":290,"column":45,"offset":4003}}}],"position":{"start":{"line":290,"column":1,"offset":3959},"end":{"line":290,"column":45,"offset":4003}}},{"type":"text","value":"\n"}],"position":{"start":{"line":287,"column":1,"offset":3908},"end":{"line":290,"column":45,"offset":4003}}},{"type":"text","value":"\n"},{"type":"raw","value":"
","position":{"start":{"line":292,"column":1,"offset":4005},"end":{"line":296,"column":1,"offset":4012}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":296,"column":1,"offset":4012}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a11dc369ce4f494d08501be9670c3de0.json b/.cache/caches/gatsby-transformer-remark/diskstore-a11dc369ce4f494d08501be9670c3de0.json deleted file mode 100644 index 9aed15bd35..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a11dc369ce4f494d08501be9670c3de0.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-119e3104d715d1fff21c8aae318c2c39-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a2353e9aa9f5bf317730820c6a17e62f.json b/.cache/caches/gatsby-transformer-remark/diskstore-a2353e9aa9f5bf317730820c6a17e62f.json deleted file mode 100644 index 9e9ef0d29d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a2353e9aa9f5bf317730820c6a17e62f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-9bb7ce1cef5d17f8dfef5ffe696b4753-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a2f4b1b7b46524ce4bb04ef64f7fc6e5.json b/.cache/caches/gatsby-transformer-remark/diskstore-a2f4b1b7b46524ce4bb04ef64f7fc6e5.json deleted file mode 100644 index e9544e54e4..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a2f4b1b7b46524ce4bb04ef64f7fc6e5.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-ac6b5999771507b02330fb5a6d22d24f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a311dab57ba27061301567ca8b591572.json b/.cache/caches/gatsby-transformer-remark/diskstore-a311dab57ba27061301567ca8b591572.json deleted file mode 100644 index 94404679a0..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a311dab57ba27061301567ca8b591572.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-9850acf2f0d1dba77931250ff1ae1833-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":55,"offset":54}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a35435cdd1b3f2a600643d8aef4c4d03.json b/.cache/caches/gatsby-transformer-remark/diskstore-a35435cdd1b3f2a600643d8aef4c4d03.json deleted file mode 100644 index 893de9c2a2..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a35435cdd1b3f2a600643d8aef4c4d03.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-911c24b01efa22013e3bfb6511012c6c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a42c5b8e4a9c14061e582ee3a1a1c8a5.json b/.cache/caches/gatsby-transformer-remark/diskstore-a42c5b8e4a9c14061e582ee3a1a1c8a5.json deleted file mode 100644 index 9c71a8a8e3..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a42c5b8e4a9c14061e582ee3a1a1c8a5.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-3b07088eb203c170b157e52c4c57f5c9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a55ea6c0a2d6bb1c6ac8745e729be447.json b/.cache/caches/gatsby-transformer-remark/diskstore-a55ea6c0a2d6bb1c6ac8745e729be447.json deleted file mode 100644 index aaee3b4fc7..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a55ea6c0a2d6bb1c6ac8745e729be447.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-ac6b5999771507b02330fb5a6d22d24f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":5,"offset":5},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":5,"offset":5},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#scene","title":null,"children":[],"data":{"hProperties":{"aria-label":"scene permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Scene","position":{"start":{"line":4,"column":4,"offset":10},"end":{"line":4,"column":9,"offset":15},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":7},"end":{"line":4,"column":9,"offset":15},"indent":[]},"data":{"id":"scene","htmlAttributes":{"id":"scene"},"hProperties":{"id":"scene"}}},{"type":"paragraph","children":[{"type":"text","value":"L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理","position":{"start":{"line":6,"column":1,"offset":17},"end":{"line":6,"column":48,"offset":64},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":17},"end":{"line":6,"column":48,"offset":64},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#map","title":null,"children":[],"data":{"hProperties":{"aria-label":"map permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Map","position":{"start":{"line":9,"column":4,"offset":70},"end":{"line":9,"column":7,"offset":73},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":67},"end":{"line":9,"column":7,"offset":73},"indent":[]},"data":{"id":"map","htmlAttributes":{"id":"map"},"hProperties":{"id":"map"}}},{"type":"paragraph","children":[{"type":"text","value":" L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n 只需要通过Scene传入地图配置项即可。","position":{"start":{"line":11,"column":1,"offset":75},"end":{"line":12,"column":22,"offset":155},"indent":[1]}}],"position":{"start":{"line":11,"column":1,"offset":75},"end":{"line":12,"column":22,"offset":155},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"目前L7 支持两种地图底图","position":{"start":{"line":14,"column":1,"offset":157},"end":{"line":14,"column":14,"offset":170},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":157},"end":{"line":14,"column":14,"offset":170},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"高德地图 国内业务场景 合规中国地图","position":{"start":{"line":16,"column":3,"offset":174},"end":{"line":16,"column":21,"offset":192},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":174},"end":{"line":16,"column":21,"offset":192},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":172},"end":{"line":16,"column":21,"offset":192},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"MapBox 国际业务，或者内网离线部署场景","position":{"start":{"line":17,"column":3,"offset":195},"end":{"line":17,"column":25,"offset":217},"indent":[]}}],"position":{"start":{"line":17,"column":3,"offset":195},"end":{"line":17,"column":25,"offset":217},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":193},"end":{"line":17,"column":25,"offset":217},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":172},"end":{"line":17,"column":25,"offset":217},"indent":[1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#map-1","title":null,"children":[],"data":{"hProperties":{"aria-label":"map 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"map","position":{"start":{"line":20,"column":6,"offset":225},"end":{"line":20,"column":9,"offset":228},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":220},"end":{"line":20,"column":9,"offset":228},"indent":[]},"data":{"id":"map-1","htmlAttributes":{"id":"map-1"},"hProperties":{"id":"map-1"}}},{"type":"paragraph","children":[{"type":"text","value":"可以通过scene map 属性获取 map实例","position":{"start":{"line":22,"column":1,"offset":230},"end":{"line":22,"column":25,"offset":254},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":230},"end":{"line":22,"column":25,"offset":254},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const map = scene.map;\n
","position":{"start":{"line":24,"column":1,"offset":256},"end":{"line":27,"column":4,"offset":297},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。","position":{"start":{"line":28,"column":1,"offset":298},"end":{"line":28,"column":78,"offset":375},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":298},"end":{"line":28,"column":78,"offset":375},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"示例代码","position":{"start":{"line":30,"column":1,"offset":377},"end":{"line":30,"column":5,"offset":381},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":377},"end":{"line":30,"column":5,"offset":381},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
","position":{"start":{"line":32,"column":1,"offset":383},"end":{"line":40,"column":4,"offset":552},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":43,"column":5,"offset":559},"end":{"line":43,"column":9,"offset":563},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":555},"end":{"line":43,"column":9,"offset":563},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Scene","position":{"start":{"line":45,"column":3,"offset":567},"end":{"line":45,"column":8,"offset":572},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":565},"end":{"line":45,"column":10,"offset":574},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":45,"column":10,"offset":574},"end":{"line":45,"column":11,"offset":575},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":565},"end":{"line":45,"column":11,"offset":575},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#配置项","title":null,"children":[],"data":{"hProperties":{"aria-label":"配置项 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"配置项","position":{"start":{"line":50,"column":4,"offset":583},"end":{"line":50,"column":7,"offset":586},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":580},"end":{"line":50,"column":7,"offset":586},"indent":[]},"data":{"id":"配置项","htmlAttributes":{"id":"配置项"},"hProperties":{"id":"配置项"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#地图配置项","title":null,"children":[],"data":{"hProperties":{"aria-label":"地图配置项 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地图配置项","position":{"start":{"line":52,"column":5,"offset":592},"end":{"line":52,"column":10,"offset":597},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":588},"end":{"line":52,"column":10,"offset":597},"indent":[]},"data":{"id":"地图配置项","htmlAttributes":{"id":"地图配置项"},"hProperties":{"id":"地图配置项"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#id","title":null,"children":[],"data":{"hProperties":{"aria-label":"id permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"id","position":{"start":{"line":54,"column":5,"offset":603},"end":{"line":54,"column":7,"offset":605},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":599},"end":{"line":54,"column":7,"offset":605},"indent":[]},"data":{"id":"id","htmlAttributes":{"id":"id"},"hProperties":{"id":"id"}}},{"type":"paragraph","children":[{"type":"text","value":"需传入 dom 容器或者容器 id  {domObject || string} ","position":{"start":{"line":55,"column":1,"offset":606},"end":{"line":55,"column":42,"offset":647},"indent":[]}},{"type":"linkReference","identifier":"必选","label":"必选","referenceType":"shortcut","children":[{"type":"text","value":"必选","position":{"start":{"line":55,"column":43,"offset":648},"end":{"line":55,"column":45,"offset":650},"indent":[]}}],"position":{"start":{"line":55,"column":42,"offset":647},"end":{"line":55,"column":46,"offset":651},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":606},"end":{"line":55,"column":46,"offset":651},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#zoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"zoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"zoom","position":{"start":{"line":58,"column":5,"offset":658},"end":{"line":58,"column":9,"offset":662},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":654},"end":{"line":58,"column":9,"offset":662},"indent":[]},"data":{"id":"zoom","htmlAttributes":{"id":"zoom"},"hProperties":{"id":"zoom"}}},{"type":"paragraph","children":[{"type":"text","value":"地图初始显示级别 {number} （0-22）","position":{"start":{"line":59,"column":1,"offset":663},"end":{"line":59,"column":26,"offset":688},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":663},"end":{"line":59,"column":26,"offset":688},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#center","title":null,"children":[],"data":{"hProperties":{"aria-label":"center permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"center","position":{"start":{"line":61,"column":5,"offset":694},"end":{"line":61,"column":11,"offset":700},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":690},"end":{"line":61,"column":11,"offset":700},"indent":[]},"data":{"id":"center","htmlAttributes":{"id":"center"},"hProperties":{"id":"center"}}},{"type":"paragraph","children":[{"type":"text","value":"地图初始中心经纬度 {Lnglat}","position":{"start":{"line":62,"column":1,"offset":701},"end":{"line":62,"column":19,"offset":719},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":701},"end":{"line":62,"column":19,"offset":719},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#pitch","title":null,"children":[],"data":{"hProperties":{"aria-label":"pitch permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"pitch","position":{"start":{"line":64,"column":5,"offset":725},"end":{"line":64,"column":10,"offset":730},"indent":[]}}],"position":{"start":{"line":64,"column":1,"offset":721},"end":{"line":64,"column":10,"offset":730},"indent":[]},"data":{"id":"pitch","htmlAttributes":{"id":"pitch"},"hProperties":{"id":"pitch"}}},{"type":"paragraph","children":[{"type":"text","value":"地图初始俯仰角度 {number}  default 0","position":{"start":{"line":65,"column":1,"offset":731},"end":{"line":65,"column":29,"offset":759},"indent":[]}}],"position":{"start":{"line":65,"column":1,"offset":731},"end":{"line":65,"column":29,"offset":759},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#style","title":null,"children":[],"data":{"hProperties":{"aria-label":"style permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"style","position":{"start":{"line":67,"column":5,"offset":765},"end":{"line":67,"column":10,"offset":770},"indent":[]}}],"position":{"start":{"line":67,"column":1,"offset":761},"end":{"line":67,"column":10,"offset":770},"indent":[]},"data":{"id":"style","htmlAttributes":{"id":"style"},"hProperties":{"id":"style"}}},{"type":"paragraph","children":[{"type":"text","value":"简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用","position":{"start":{"line":69,"column":1,"offset":772},"end":{"line":69,"column":40,"offset":811},"indent":[]}}],"position":{"start":{"line":69,"column":1,"offset":772},"end":{"line":69,"column":40,"offset":811},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"dark","position":{"start":{"line":70,"column":3,"offset":814},"end":{"line":70,"column":7,"offset":818},"indent":[]}}],"position":{"start":{"line":70,"column":3,"offset":814},"end":{"line":70,"column":7,"offset":818},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":812},"end":{"line":70,"column":7,"offset":818},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"light","position":{"start":{"line":71,"column":3,"offset":821},"end":{"line":71,"column":8,"offset":826},"indent":[]}}],"position":{"start":{"line":71,"column":3,"offset":821},"end":{"line":71,"column":8,"offset":826},"indent":[]}}],"position":{"start":{"line":71,"column":1,"offset":819},"end":{"line":71,"column":8,"offset":826},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"normal","position":{"start":{"line":72,"column":3,"offset":829},"end":{"line":72,"column":9,"offset":835},"indent":[]}}],"position":{"start":{"line":72,"column":3,"offset":829},"end":{"line":72,"column":9,"offset":835},"indent":[]}}],"position":{"start":{"line":72,"column":1,"offset":827},"end":{"line":72,"column":9,"offset":835},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":812},"end":{"line":72,"column":9,"offset":835},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"除了内置的样式，你也可以传入自定义的其他属性。","position":{"start":{"line":74,"column":1,"offset":837},"end":{"line":74,"column":24,"offset":860},"indent":[]}}],"position":{"start":{"line":74,"column":1,"offset":837},"end":{"line":74,"column":24,"offset":860},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"比如高德地图","position":{"start":{"line":76,"column":1,"offset":862},"end":{"line":76,"column":7,"offset":868},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":862},"end":{"line":76,"column":7,"offset":868},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
","position":{"start":{"line":78,"column":1,"offset":870},"end":{"line":83,"column":4,"offset":981},"indent":[1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#minzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"minzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"minZoom","position":{"start":{"line":86,"column":5,"offset":988},"end":{"line":86,"column":12,"offset":995},"indent":[]}}],"position":{"start":{"line":86,"column":1,"offset":984},"end":{"line":86,"column":12,"offset":995},"indent":[]},"data":{"id":"minzoom","htmlAttributes":{"id":"minzoom"},"hProperties":{"id":"minzoom"}}},{"type":"paragraph","children":[{"type":"text","value":"地图最小缩放等级 {number}  default 0 (0-22)","position":{"start":{"line":87,"column":1,"offset":996},"end":{"line":87,"column":37,"offset":1032},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":996},"end":{"line":87,"column":37,"offset":1032},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#maxzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"maxzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"maxZoom","position":{"start":{"line":89,"column":5,"offset":1038},"end":{"line":89,"column":12,"offset":1045},"indent":[]}}],"position":{"start":{"line":89,"column":1,"offset":1034},"end":{"line":89,"column":12,"offset":1045},"indent":[]},"data":{"id":"maxzoom","htmlAttributes":{"id":"maxzoom"},"hProperties":{"id":"maxzoom"}}},{"type":"paragraph","children":[{"type":"text","value":"地图最大缩放等级 {number}  default 22 (0-22)","position":{"start":{"line":90,"column":1,"offset":1046},"end":{"line":90,"column":38,"offset":1083},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":1046},"end":{"line":90,"column":38,"offset":1083},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#rotateenable","title":null,"children":[],"data":{"hProperties":{"aria-label":"rotateenable permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"rotateEnable","position":{"start":{"line":92,"column":5,"offset":1089},"end":{"line":92,"column":17,"offset":1101},"indent":[]}}],"position":{"start":{"line":92,"column":1,"offset":1085},"end":{"line":92,"column":17,"offset":1101},"indent":[]},"data":{"id":"rotateenable","htmlAttributes":{"id":"rotateenable"},"hProperties":{"id":"rotateenable"}}},{"type":"paragraph","children":[{"type":"text","value":"地图是否可旋转 {Boolean} default true","position":{"start":{"line":93,"column":1,"offset":1102},"end":{"line":93,"column":31,"offset":1132},"indent":[]}}],"position":{"start":{"line":93,"column":1,"offset":1102},"end":{"line":93,"column":31,"offset":1132},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":98,"column":4,"offset":1140},"end":{"line":98,"column":6,"offset":1142},"indent":[]}}],"position":{"start":{"line":98,"column":1,"offset":1137},"end":{"line":98,"column":6,"offset":1142},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"getzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getZoom","position":{"start":{"line":100,"column":5,"offset":1148},"end":{"line":100,"column":12,"offset":1155},"indent":[]}}],"position":{"start":{"line":100,"column":1,"offset":1144},"end":{"line":100,"column":12,"offset":1155},"indent":[]},"data":{"id":"getzoom","htmlAttributes":{"id":"getzoom"},"hProperties":{"id":"getzoom"}}},{"type":"paragraph","children":[{"type":"text","value":"获取当前缩放等级","position":{"start":{"line":101,"column":1,"offset":1156},"end":{"line":101,"column":9,"offset":1164},"indent":[]}}],"position":{"start":{"line":101,"column":1,"offset":1156},"end":{"line":101,"column":9,"offset":1164},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getZoom();\n
","position":{"start":{"line":103,"column":1,"offset":1166},"end":{"line":105,"column":4,"offset":1200},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return {float}  当前缩放等级","position":{"start":{"line":107,"column":1,"offset":1202},"end":{"line":107,"column":24,"offset":1225},"indent":[]}}],"position":{"start":{"line":107,"column":1,"offset":1202},"end":{"line":107,"column":24,"offset":1225},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getlayers","title":null,"children":[],"data":{"hProperties":{"aria-label":"getlayers permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getLayers()","position":{"start":{"line":109,"column":5,"offset":1231},"end":{"line":109,"column":16,"offset":1242},"indent":[]}}],"position":{"start":{"line":109,"column":1,"offset":1227},"end":{"line":109,"column":16,"offset":1242},"indent":[]},"data":{"id":"getlayers","htmlAttributes":{"id":"getlayers"},"hProperties":{"id":"getlayers"}}},{"type":"paragraph","children":[{"type":"text","value":"获取所有的地图图层","position":{"start":{"line":110,"column":1,"offset":1243},"end":{"line":110,"column":10,"offset":1252},"indent":[]}}],"position":{"start":{"line":110,"column":1,"offset":1243},"end":{"line":110,"column":10,"offset":1252},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getLayers();\n
","position":{"start":{"line":111,"column":1,"offset":1253},"end":{"line":113,"column":4,"offset":1289},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return 图层数组 {Array}","position":{"start":{"line":115,"column":1,"offset":1291},"end":{"line":115,"column":21,"offset":1311},"indent":[]}}],"position":{"start":{"line":115,"column":1,"offset":1291},"end":{"line":115,"column":21,"offset":1311},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getcenter","title":null,"children":[],"data":{"hProperties":{"aria-label":"getcenter permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getCenter()","position":{"start":{"line":118,"column":5,"offset":1318},"end":{"line":118,"column":16,"offset":1329},"indent":[]}}],"position":{"start":{"line":118,"column":1,"offset":1314},"end":{"line":118,"column":16,"offset":1329},"indent":[]},"data":{"id":"getcenter","htmlAttributes":{"id":"getcenter"},"hProperties":{"id":"getcenter"}}},{"type":"paragraph","children":[{"type":"text","value":"获取地图中心点","position":{"start":{"line":119,"column":1,"offset":1330},"end":{"line":119,"column":8,"offset":1337},"indent":[]}}],"position":{"start":{"line":119,"column":1,"offset":1330},"end":{"line":119,"column":8,"offset":1337},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getCenter();\n
","position":{"start":{"line":120,"column":1,"offset":1338},"end":{"line":122,"column":4,"offset":1373},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return {Lnglat} :地图中心点","position":{"start":{"line":124,"column":1,"offset":1375},"end":{"line":124,"column":23,"offset":1397},"indent":[]}}],"position":{"start":{"line":124,"column":1,"offset":1375},"end":{"line":124,"column":23,"offset":1397},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getsize","title":null,"children":[],"data":{"hProperties":{"aria-label":"getsize permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getSize()","position":{"start":{"line":126,"column":5,"offset":1403},"end":{"line":126,"column":14,"offset":1412},"indent":[]}}],"position":{"start":{"line":126,"column":1,"offset":1399},"end":{"line":126,"column":14,"offset":1412},"indent":[]},"data":{"id":"getsize","htmlAttributes":{"id":"getsize"},"hProperties":{"id":"getsize"}}},{"type":"paragraph","children":[{"type":"text","value":"获取地图容器大小","position":{"start":{"line":127,"column":1,"offset":1413},"end":{"line":127,"column":9,"offset":1421},"indent":[]}}],"position":{"start":{"line":127,"column":1,"offset":1413},"end":{"line":127,"column":9,"offset":1421},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getSize();\n
","position":{"start":{"line":128,"column":1,"offset":1422},"end":{"line":130,"column":4,"offset":1455},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return { Object } 地图容器的 width,height","position":{"start":{"line":131,"column":1,"offset":1456},"end":{"line":131,"column":37,"offset":1492},"indent":[]}}],"position":{"start":{"line":131,"column":1,"offset":1456},"end":{"line":131,"column":37,"offset":1492},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getpitch","title":null,"children":[],"data":{"hProperties":{"aria-label":"getpitch permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getPitch()","position":{"start":{"line":133,"column":5,"offset":1498},"end":{"line":133,"column":15,"offset":1508},"indent":[]}}],"position":{"start":{"line":133,"column":1,"offset":1494},"end":{"line":133,"column":15,"offset":1508},"indent":[]},"data":{"id":"getpitch","htmlAttributes":{"id":"getpitch"},"hProperties":{"id":"getpitch"}}},{"type":"paragraph","children":[{"type":"text","value":"获取地图俯仰角","position":{"start":{"line":134,"column":1,"offset":1509},"end":{"line":134,"column":8,"offset":1516},"indent":[]}}],"position":{"start":{"line":134,"column":1,"offset":1509},"end":{"line":134,"column":8,"offset":1516},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getPitch();\n
","position":{"start":{"line":135,"column":1,"offset":1517},"end":{"line":137,"column":4,"offset":1552},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return {number} pitch","position":{"start":{"line":139,"column":1,"offset":1554},"end":{"line":139,"column":22,"offset":1575},"indent":[]}}],"position":{"start":{"line":139,"column":1,"offset":1554},"end":{"line":139,"column":22,"offset":1575},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#setcenter","title":null,"children":[],"data":{"hProperties":{"aria-label":"setcenter permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setCenter()","position":{"start":{"line":141,"column":5,"offset":1581},"end":{"line":141,"column":16,"offset":1592},"indent":[]}}],"position":{"start":{"line":141,"column":1,"offset":1577},"end":{"line":141,"column":16,"offset":1592},"indent":[]},"data":{"id":"setcenter","htmlAttributes":{"id":"setcenter"},"hProperties":{"id":"setcenter"}}},{"type":"paragraph","children":[{"type":"text","value":"设置地图中心点坐标","position":{"start":{"line":142,"column":1,"offset":1593},"end":{"line":142,"column":10,"offset":1602},"indent":[]}}],"position":{"start":{"line":142,"column":1,"offset":1593},"end":{"line":142,"column":10,"offset":1602},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.setCenter([lng, lat]);\n
","position":{"start":{"line":144,"column":1,"offset":1604},"end":{"line":146,"column":4,"offset":1648},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":148,"column":1,"offset":1650},"end":{"line":148,"column":4,"offset":1653},"indent":[]}},{"type":"html","value":"center","position":{"start":{"line":148,"column":4,"offset":1653},"end":{"line":148,"column":12,"offset":1661},"indent":[]}},{"type":"text","value":" {LngLat} 地图中心点","position":{"start":{"line":148,"column":12,"offset":1661},"end":{"line":148,"column":28,"offset":1677},"indent":[]}}],"position":{"start":{"line":148,"column":1,"offset":1650},"end":{"line":148,"column":28,"offset":1677},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#setzoomandcenter","title":null,"children":[],"data":{"hProperties":{"aria-label":"setzoomandcenter permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setZoomAndCenter","position":{"start":{"line":151,"column":5,"offset":1684},"end":{"line":151,"column":21,"offset":1700},"indent":[]}}],"position":{"start":{"line":151,"column":1,"offset":1680},"end":{"line":151,"column":21,"offset":1700},"indent":[]},"data":{"id":"setzoomandcenter","htmlAttributes":{"id":"setzoomandcenter"},"hProperties":{"id":"setzoomandcenter"}}},{"type":"paragraph","children":[{"type":"text","value":"设置地图等级和中心","position":{"start":{"line":152,"column":1,"offset":1701},"end":{"line":152,"column":10,"offset":1710},"indent":[]}}],"position":{"start":{"line":152,"column":1,"offset":1701},"end":{"line":152,"column":10,"offset":1710},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.setZoomAndCenter(zoom, center);\n
","position":{"start":{"line":153,"column":1,"offset":1711},"end":{"line":155,"column":4,"offset":1764},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数：zoom {number}","position":{"start":{"line":157,"column":1,"offset":1766},"end":{"line":157,"column":17,"offset":1782},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":157,"column":17,"offset":1782},"end":{"line":157,"column":23,"offset":1788},"indent":[]}},{"type":"text","value":"center {LngLat}","position":{"start":{"line":157,"column":23,"offset":1788},"end":{"line":157,"column":38,"offset":1803},"indent":[]}}],"position":{"start":{"line":157,"column":1,"offset":1766},"end":{"line":157,"column":38,"offset":1803},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#setrotation","title":null,"children":[],"data":{"hProperties":{"aria-label":"setrotation permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setRotation","position":{"start":{"line":160,"column":5,"offset":1810},"end":{"line":160,"column":16,"offset":1821},"indent":[]}}],"position":{"start":{"line":160,"column":1,"offset":1806},"end":{"line":160,"column":16,"offset":1821},"indent":[]},"data":{"id":"setrotation","htmlAttributes":{"id":"setrotation"},"hProperties":{"id":"setrotation"}}},{"type":"paragraph","children":[{"type":"text","value":"设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 ","position":{"start":{"line":161,"column":1,"offset":1822},"end":{"line":161,"column":31,"offset":1852},"indent":[]}},{"type":"linkReference","identifier":"0-360","label":"0-360","referenceType":"shortcut","children":[{"type":"text","value":"0-360","position":{"start":{"line":161,"column":32,"offset":1853},"end":{"line":161,"column":37,"offset":1858},"indent":[]}}],"position":{"start":{"line":161,"column":31,"offset":1852},"end":{"line":161,"column":38,"offset":1859},"indent":[]}}],"position":{"start":{"line":161,"column":1,"offset":1822},"end":{"line":161,"column":38,"offset":1859},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.setRotation(rotation);\n
","position":{"start":{"line":162,"column":1,"offset":1860},"end":{"line":164,"column":4,"offset":1905},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数： ","position":{"start":{"line":166,"column":1,"offset":1907},"end":{"line":166,"column":5,"offset":1911},"indent":[]}},{"type":"html","value":"rotation","position":{"start":{"line":166,"column":5,"offset":1911},"end":{"line":166,"column":15,"offset":1921},"indent":[]}},{"type":"text","value":" {number}","position":{"start":{"line":166,"column":15,"offset":1921},"end":{"line":166,"column":26,"offset":1932},"indent":[]}}],"position":{"start":{"line":166,"column":1,"offset":1907},"end":{"line":166,"column":26,"offset":1932},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#zoomin","title":null,"children":[],"data":{"hProperties":{"aria-label":"zoomin permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"zoomIn","position":{"start":{"line":168,"column":5,"offset":1938},"end":{"line":168,"column":11,"offset":1944},"indent":[]}}],"position":{"start":{"line":168,"column":1,"offset":1934},"end":{"line":168,"column":11,"offset":1944},"indent":[]},"data":{"id":"zoomin","htmlAttributes":{"id":"zoomin"},"hProperties":{"id":"zoomin"}}},{"type":"paragraph","children":[{"type":"text","value":"地图放大一级","position":{"start":{"line":169,"column":1,"offset":1945},"end":{"line":169,"column":7,"offset":1951},"indent":[]}}],"position":{"start":{"line":169,"column":1,"offset":1945},"end":{"line":169,"column":7,"offset":1951},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.zoomIn();\n
","position":{"start":{"line":170,"column":1,"offset":1952},"end":{"line":172,"column":4,"offset":1984},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#zoomout","title":null,"children":[],"data":{"hProperties":{"aria-label":"zoomout permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"zoomOut","position":{"start":{"line":174,"column":5,"offset":1990},"end":{"line":174,"column":12,"offset":1997},"indent":[]}}],"position":{"start":{"line":174,"column":1,"offset":1986},"end":{"line":174,"column":12,"offset":1997},"indent":[]},"data":{"id":"zoomout","htmlAttributes":{"id":"zoomout"},"hProperties":{"id":"zoomout"}}},{"type":"paragraph","children":[{"type":"text","value":"地图缩小一级","position":{"start":{"line":175,"column":1,"offset":1998},"end":{"line":175,"column":7,"offset":2004},"indent":[]}}],"position":{"start":{"line":175,"column":1,"offset":1998},"end":{"line":175,"column":7,"offset":2004},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.ZoomOUt();\n
","position":{"start":{"line":176,"column":1,"offset":2005},"end":{"line":178,"column":4,"offset":2038},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#panto","title":null,"children":[],"data":{"hProperties":{"aria-label":"panto permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"panTo","position":{"start":{"line":180,"column":5,"offset":2044},"end":{"line":180,"column":10,"offset":2049},"indent":[]}}],"position":{"start":{"line":180,"column":1,"offset":2040},"end":{"line":180,"column":10,"offset":2049},"indent":[]},"data":{"id":"panto","htmlAttributes":{"id":"panto"},"hProperties":{"id":"panto"}}},{"type":"paragraph","children":[{"type":"text","value":"地图平移到指定的位置","position":{"start":{"line":181,"column":1,"offset":2050},"end":{"line":181,"column":11,"offset":2060},"indent":[]}}],"position":{"start":{"line":181,"column":1,"offset":2050},"end":{"line":181,"column":11,"offset":2060},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.panTo(LngLat);\n
","position":{"start":{"line":182,"column":1,"offset":2061},"end":{"line":184,"column":4,"offset":2098},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":186,"column":1,"offset":2100},"end":{"line":186,"column":4,"offset":2103},"indent":[]}},{"type":"html","value":"center","position":{"start":{"line":186,"column":4,"offset":2103},"end":{"line":186,"column":12,"offset":2111},"indent":[]}},{"type":"text","value":" LngLat 中心位置坐标","position":{"start":{"line":186,"column":12,"offset":2111},"end":{"line":186,"column":27,"offset":2126},"indent":[]}}],"position":{"start":{"line":186,"column":1,"offset":2100},"end":{"line":186,"column":27,"offset":2126},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#panby","title":null,"children":[],"data":{"hProperties":{"aria-label":"panby permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"panBy","position":{"start":{"line":188,"column":5,"offset":2132},"end":{"line":188,"column":10,"offset":2137},"indent":[]}}],"position":{"start":{"line":188,"column":1,"offset":2128},"end":{"line":188,"column":10,"offset":2137},"indent":[]},"data":{"id":"panby","htmlAttributes":{"id":"panby"},"hProperties":{"id":"panby"}}},{"type":"paragraph","children":[{"type":"text","value":"以像素为单位沿X方向和Y方向移动地图","position":{"start":{"line":189,"column":1,"offset":2138},"end":{"line":189,"column":19,"offset":2156},"indent":[]}}],"position":{"start":{"line":189,"column":1,"offset":2138},"end":{"line":189,"column":19,"offset":2156},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.panBy(x, y);\n
","position":{"start":{"line":190,"column":1,"offset":2157},"end":{"line":192,"column":4,"offset":2191},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":193,"column":1,"offset":2192},"end":{"line":193,"column":4,"offset":2195},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":193,"column":4,"offset":2195},"end":{"line":193,"column":10,"offset":2201},"indent":[]}},{"type":"html","value":"x","position":{"start":{"line":193,"column":10,"offset":2201},"end":{"line":193,"column":13,"offset":2204},"indent":[]}},{"type":"text","value":" {number} 水平方向移动像素 向右为正方向","position":{"start":{"line":193,"column":13,"offset":2204},"end":{"line":193,"column":38,"offset":2229},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":193,"column":38,"offset":2229},"end":{"line":193,"column":44,"offset":2235},"indent":[]}},{"type":"text","value":"      ","position":{"start":{"line":193,"column":44,"offset":2235},"end":{"line":193,"column":50,"offset":2241},"indent":[]}},{"type":"html","value":"y","position":{"start":{"line":193,"column":50,"offset":2241},"end":{"line":193,"column":53,"offset":2244},"indent":[]}},{"type":"text","value":" {number} 垂直方向移动像素 向下为正方向","position":{"start":{"line":193,"column":53,"offset":2244},"end":{"line":193,"column":79,"offset":2270},"indent":[]}}],"position":{"start":{"line":193,"column":1,"offset":2192},"end":{"line":193,"column":79,"offset":2270},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#setpitch","title":null,"children":[],"data":{"hProperties":{"aria-label":"setpitch permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setPitch","position":{"start":{"line":196,"column":5,"offset":2277},"end":{"line":196,"column":13,"offset":2285},"indent":[]}}],"position":{"start":{"line":196,"column":1,"offset":2273},"end":{"line":196,"column":13,"offset":2285},"indent":[]},"data":{"id":"setpitch","htmlAttributes":{"id":"setpitch"},"hProperties":{"id":"setpitch"}}},{"type":"paragraph","children":[{"type":"text","value":"设置地图仰俯角度","position":{"start":{"line":197,"column":1,"offset":2286},"end":{"line":197,"column":9,"offset":2294},"indent":[]}}],"position":{"start":{"line":197,"column":1,"offset":2286},"end":{"line":197,"column":9,"offset":2294},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.setPitch(pitch);\n
","position":{"start":{"line":198,"column":1,"offset":2295},"end":{"line":200,"column":4,"offset":2334},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数 :","position":{"start":{"line":202,"column":1,"offset":2336},"end":{"line":202,"column":5,"offset":2340},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":202,"column":5,"offset":2340},"end":{"line":202,"column":11,"offset":2346},"indent":[]}},{"type":"text","value":"   ","position":{"start":{"line":202,"column":11,"offset":2346},"end":{"line":202,"column":14,"offset":2349},"indent":[]}},{"type":"html","value":"pitch","position":{"start":{"line":202,"column":14,"offset":2349},"end":{"line":202,"column":21,"offset":2356},"indent":[]}},{"type":"text","value":" {number}","position":{"start":{"line":202,"column":21,"offset":2356},"end":{"line":202,"column":31,"offset":2366},"indent":[]}}],"position":{"start":{"line":202,"column":1,"offset":2336},"end":{"line":202,"column":31,"offset":2366},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#fitbounds","title":null,"children":[],"data":{"hProperties":{"aria-label":"fitbounds permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"fitBounds","position":{"start":{"line":205,"column":5,"offset":2373},"end":{"line":205,"column":14,"offset":2382},"indent":[]}}],"position":{"start":{"line":205,"column":1,"offset":2369},"end":{"line":205,"column":14,"offset":2382},"indent":[]},"data":{"id":"fitbounds","htmlAttributes":{"id":"fitbounds"},"hProperties":{"id":"fitbounds"}}},{"type":"paragraph","children":[{"type":"text","value":"地图缩放到某个范围内","position":{"start":{"line":206,"column":1,"offset":2383},"end":{"line":206,"column":11,"offset":2393},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":206,"column":11,"offset":2393},"end":{"line":206,"column":17,"offset":2399},"indent":[]}},{"type":"text","value":"参数 :","position":{"start":{"line":206,"column":17,"offset":2399},"end":{"line":206,"column":21,"offset":2403},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":206,"column":21,"offset":2403},"end":{"line":206,"column":27,"offset":2409},"indent":[]}},{"type":"text","value":"  ","position":{"start":{"line":206,"column":27,"offset":2409},"end":{"line":206,"column":29,"offset":2411},"indent":[]}},{"type":"html","value":"extent","position":{"start":{"line":206,"column":29,"offset":2411},"end":{"line":206,"column":37,"offset":2419},"indent":[]}},{"type":"text","value":" { array} 经纬度范围 ","position":{"start":{"line":206,"column":37,"offset":2419},"end":{"line":206,"column":53,"offset":2435},"indent":[]}},{"type":"linkReference","identifier":"minlng,minlat,maxlng,maxlat","label":"minlng,minlat,maxlng,maxlat","referenceType":"shortcut","children":[{"type":"text","value":"minlng,minlat,maxlng,maxlat","position":{"start":{"line":206,"column":54,"offset":2436},"end":{"line":206,"column":81,"offset":2463},"indent":[]}}],"position":{"start":{"line":206,"column":53,"offset":2435},"end":{"line":206,"column":82,"offset":2464},"indent":[]}}],"position":{"start":{"line":206,"column":1,"offset":2383},"end":{"line":206,"column":82,"offset":2464},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.fitBounds([112, 32, 114, 35]);\n
","position":{"start":{"line":208,"column":1,"offset":2466},"end":{"line":210,"column":4,"offset":2517},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#removelayer","title":null,"children":[],"data":{"hProperties":{"aria-label":"removelayer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"removeLayer","position":{"start":{"line":214,"column":5,"offset":2525},"end":{"line":214,"column":16,"offset":2536},"indent":[]}}],"position":{"start":{"line":214,"column":1,"offset":2521},"end":{"line":214,"column":16,"offset":2536},"indent":[]},"data":{"id":"removelayer","htmlAttributes":{"id":"removelayer"},"hProperties":{"id":"removelayer"}}},{"type":"paragraph","children":[{"type":"text","value":"移除layer","position":{"start":{"line":215,"column":1,"offset":2537},"end":{"line":215,"column":8,"offset":2544},"indent":[]}}],"position":{"start":{"line":215,"column":1,"offset":2537},"end":{"line":215,"column":8,"offset":2544},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.removeLayer(layer);\n
","position":{"start":{"line":217,"column":1,"offset":2546},"end":{"line":219,"column":4,"offset":2588},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数 ","position":{"start":{"line":221,"column":1,"offset":2590},"end":{"line":221,"column":4,"offset":2593},"indent":[]}},{"type":"html","value":"layer","position":{"start":{"line":221,"column":4,"offset":2593},"end":{"line":221,"column":11,"offset":2600},"indent":[]}},{"type":"text","value":" {Layer}","position":{"start":{"line":221,"column":11,"offset":2600},"end":{"line":221,"column":20,"offset":2609},"indent":[]}}],"position":{"start":{"line":221,"column":1,"offset":2590},"end":{"line":221,"column":20,"offset":2609},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getlayers-1","title":null,"children":[],"data":{"hProperties":{"aria-label":"getlayers 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getLayers","position":{"start":{"line":223,"column":5,"offset":2615},"end":{"line":223,"column":14,"offset":2624},"indent":[]}}],"position":{"start":{"line":223,"column":1,"offset":2611},"end":{"line":223,"column":14,"offset":2624},"indent":[]},"data":{"id":"getlayers-1","htmlAttributes":{"id":"getlayers-1"},"hProperties":{"id":"getlayers-1"}}},{"type":"paragraph","children":[{"type":"text","value":" 获取所有的layer","position":{"start":{"line":224,"column":1,"offset":2625},"end":{"line":224,"column":12,"offset":2636},"indent":[]}}],"position":{"start":{"line":224,"column":1,"offset":2625},"end":{"line":224,"column":12,"offset":2636},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getLayers();\n
","position":{"start":{"line":226,"column":1,"offset":2638},"end":{"line":228,"column":4,"offset":2673},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return layers  {array}","position":{"start":{"line":230,"column":1,"offset":2675},"end":{"line":230,"column":24,"offset":2698},"indent":[]}}],"position":{"start":{"line":230,"column":1,"offset":2675},"end":{"line":230,"column":24,"offset":2698},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"事件","position":{"start":{"line":232,"column":4,"offset":2703},"end":{"line":232,"column":6,"offset":2705},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":2700},"end":{"line":232,"column":6,"offset":2705},"indent":[]},"data":{"id":"事件","htmlAttributes":{"id":"事件"},"hProperties":{"id":"事件"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#on","title":null,"children":[],"data":{"hProperties":{"aria-label":"on permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"on","position":{"start":{"line":235,"column":5,"offset":2712},"end":{"line":235,"column":7,"offset":2714},"indent":[]}}],"position":{"start":{"line":235,"column":1,"offset":2708},"end":{"line":235,"column":7,"offset":2714},"indent":[]},"data":{"id":"on","htmlAttributes":{"id":"on"},"hProperties":{"id":"on"}}},{"type":"paragraph","children":[{"type":"text","value":"事件监听","position":{"start":{"line":236,"column":1,"offset":2715},"end":{"line":236,"column":5,"offset":2719},"indent":[]}}],"position":{"start":{"line":236,"column":1,"offset":2715},"end":{"line":236,"column":5,"offset":2719},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#参数","title":null,"children":[],"data":{"hProperties":{"aria-label":"参数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"参数","position":{"start":{"line":238,"column":6,"offset":2726},"end":{"line":238,"column":8,"offset":2728},"indent":[]}}],"position":{"start":{"line":238,"column":1,"offset":2721},"end":{"line":238,"column":8,"offset":2728},"indent":[]},"data":{"id":"参数","htmlAttributes":{"id":"参数"},"hProperties":{"id":"参数"}}},{"type":"paragraph","children":[{"type":"html","value":"eventName","position":{"start":{"line":239,"column":1,"offset":2729},"end":{"line":239,"column":12,"offset":2740},"indent":[]}},{"type":"text","value":" {string} 事件名","position":{"start":{"line":239,"column":12,"offset":2740},"end":{"line":239,"column":26,"offset":2754},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":239,"column":26,"offset":2754},"end":{"line":239,"column":32,"offset":2760},"indent":[]}},{"type":"html","value":"hander","position":{"start":{"line":239,"column":32,"offset":2760},"end":{"line":239,"column":40,"offset":2768},"indent":[]}},{"type":"text","value":" {function } 事件回调函数","position":{"start":{"line":239,"column":40,"offset":2768},"end":{"line":239,"column":60,"offset":2788},"indent":[]}}],"position":{"start":{"line":239,"column":1,"offset":2729},"end":{"line":239,"column":60,"offset":2788},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#off","title":null,"children":[],"data":{"hProperties":{"aria-label":"off permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"off","position":{"start":{"line":242,"column":5,"offset":2795},"end":{"line":242,"column":8,"offset":2798},"indent":[]}}],"position":{"start":{"line":242,"column":1,"offset":2791},"end":{"line":242,"column":8,"offset":2798},"indent":[]},"data":{"id":"off","htmlAttributes":{"id":"off"},"hProperties":{"id":"off"}}},{"type":"paragraph","children":[{"type":"text","value":"移除事件监听","position":{"start":{"line":243,"column":1,"offset":2799},"end":{"line":243,"column":7,"offset":2805},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":243,"column":7,"offset":2805},"end":{"line":243,"column":13,"offset":2811},"indent":[]}},{"type":"html","value":"eventName","position":{"start":{"line":243,"column":13,"offset":2811},"end":{"line":243,"column":24,"offset":2822},"indent":[]}},{"type":"text","value":" {string} 事件名","position":{"start":{"line":243,"column":24,"offset":2822},"end":{"line":243,"column":38,"offset":2836},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":243,"column":38,"offset":2836},"end":{"line":243,"column":44,"offset":2842},"indent":[]}},{"type":"html","value":"hander","position":{"start":{"line":243,"column":44,"offset":2842},"end":{"line":243,"column":52,"offset":2850},"indent":[]}},{"type":"text","value":" {function } 事件回调函数","position":{"start":{"line":243,"column":52,"offset":2850},"end":{"line":243,"column":72,"offset":2870},"indent":[]}}],"position":{"start":{"line":243,"column":1,"offset":2799},"end":{"line":243,"column":72,"offset":2870},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#地图事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"地图事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地图事件","position":{"start":{"line":246,"column":5,"offset":2877},"end":{"line":246,"column":9,"offset":2881},"indent":[]}}],"position":{"start":{"line":246,"column":1,"offset":2873},"end":{"line":246,"column":9,"offset":2881},"indent":[]},"data":{"id":"地图事件","htmlAttributes":{"id":"地图事件"},"hProperties":{"id":"地图事件"}}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
","position":{"start":{"line":247,"column":1,"offset":2882},"end":{"line":255,"column":4,"offset":3219},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#鼠标事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"鼠标事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"鼠标事件","position":{"start":{"line":258,"column":5,"offset":3226},"end":{"line":258,"column":9,"offset":3230},"indent":[]}}],"position":{"start":{"line":258,"column":1,"offset":3222},"end":{"line":258,"column":9,"offset":3230},"indent":[]},"data":{"id":"鼠标事件","htmlAttributes":{"id":"鼠标事件"},"hProperties":{"id":"鼠标事件"}}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
","position":{"start":{"line":260,"column":1,"offset":3232},"end":{"line":273,"column":4,"offset":3939},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#其它事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"其它事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"其它事件","position":{"start":{"line":275,"column":5,"offset":3945},"end":{"line":275,"column":9,"offset":3949},"indent":[]}}],"position":{"start":{"line":275,"column":1,"offset":3941},"end":{"line":275,"column":9,"offset":3949},"indent":[]},"data":{"id":"其它事件","htmlAttributes":{"id":"其它事件"},"hProperties":{"id":"其它事件"}}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","position":{"start":{"line":276,"column":1,"offset":3950},"end":{"line":278,"column":4,"offset":4007},"indent":[1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":281,"column":1,"offset":4010}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a5915ca3dbf858c079586055350ffe55.json b/.cache/caches/gatsby-transformer-remark/diskstore-a5915ca3dbf858c079586055350ffe55.json deleted file mode 100644 index 833cc223a2..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a5915ca3dbf858c079586055350ffe55.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-3f73cf1f73d6b033db13763671e99dd6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":43,"offset":42},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":43,"offset":42},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":43,"offset":42}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a78416ced76046138f9eac1cd12823d7.json b/.cache/caches/gatsby-transformer-remark/diskstore-a78416ced76046138f9eac1cd12823d7.json deleted file mode 100644 index 729615bb6e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a78416ced76046138f9eac1cd12823d7.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-81330a3168163fa3728e304ac6d58e91-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#control","title":null,"children":[],"data":{"hProperties":{"aria-label":"control permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"control","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":10,"offset":9},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":10,"offset":9},"indent":[]},"data":{"id":"control","htmlAttributes":{"id":"control"},"hProperties":{"id":"control"}}},{"type":"paragraph","children":[{"type":"text","value":"地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺","position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":43,"offset":53},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":43,"offset":53},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":6,"column":4,"offset":59},"end":{"line":6,"column":8,"offset":63},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":56},"end":{"line":6,"column":8,"offset":63},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"html","lang":"javascript","meta":null,"value":"
const baseControl = new L7.Control.Base(option);\n
","position":{"start":{"line":8,"column":1,"offset":65},"end":{"line":10,"column":4,"offset":131},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#option","title":null,"children":[],"data":{"hProperties":{"aria-label":"option permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"option","position":{"start":{"line":13,"column":6,"offset":139},"end":{"line":13,"column":12,"offset":145},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":134},"end":{"line":13,"column":12,"offset":145},"indent":[]},"data":{"id":"option","htmlAttributes":{"id":"option"},"hProperties":{"id":"option"}}},{"type":"paragraph","children":[{"type":"text","value":" position: ","position":{"start":{"line":15,"column":1,"offset":147},"end":{"line":15,"column":12,"offset":158},"indent":[]}},{"type":"html","value":"string","position":{"start":{"line":15,"column":12,"offset":158},"end":{"line":15,"column":20,"offset":166},"indent":[]}},{"type":"text","value":" 控件位置支持是个方位 ","position":{"start":{"line":15,"column":20,"offset":166},"end":{"line":15,"column":32,"offset":178},"indent":[]}},{"type":"html","value":"bottomright, topright, bottomleft, topleft","position":{"start":{"line":15,"column":32,"offset":178},"end":{"line":15,"column":76,"offset":222},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":147},"end":{"line":15,"column":76,"offset":222},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#scene-内置地图组件","title":null,"children":[],"data":{"hProperties":{"aria-label":"scene 内置地图组件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"scene 内置地图组件","position":{"start":{"line":18,"column":6,"offset":230},"end":{"line":18,"column":18,"offset":242},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":225},"end":{"line":18,"column":18,"offset":242},"indent":[]},"data":{"id":"scene-内置地图组件","htmlAttributes":{"id":"scene-内置地图组件"},"hProperties":{"id":"scene-内置地图组件"}}},{"type":"paragraph","children":[{"type":"text","value":"zoom 地图放大缩小  默认添加","position":{"start":{"line":19,"column":1,"offset":243},"end":{"line":19,"column":18,"offset":260},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":19,"column":18,"offset":260},"end":{"line":19,"column":24,"offset":266},"indent":[]}},{"type":"text","value":"Scale 地图比例尺   默认添加","position":{"start":{"line":19,"column":24,"offset":266},"end":{"line":19,"column":42,"offset":284},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":19,"column":42,"offset":284},"end":{"line":19,"column":48,"offset":290},"indent":[]}},{"type":"text","value":"attribution 地图数据属性  默认添加","position":{"start":{"line":19,"column":48,"offset":290},"end":{"line":19,"column":72,"offset":314},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":19,"column":72,"offset":314},"end":{"line":19,"column":78,"offset":320},"indent":[]}},{"type":"text","value":"layer 图层列表","position":{"start":{"line":19,"column":78,"offset":320},"end":{"line":19,"column":88,"offset":330},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":243},"end":{"line":19,"column":88,"offset":330},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"scene配置项设置控件添加状态","position":{"start":{"line":21,"column":3,"offset":334},"end":{"line":21,"column":19,"offset":350},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":332},"end":{"line":21,"column":21,"offset":352},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":332},"end":{"line":21,"column":21,"offset":352},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
","position":{"start":{"line":23,"column":1,"offset":354},"end":{"line":29,"column":4,"offset":470},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#","title":null,"children":[],"data":{"hProperties":{"aria-label":" permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":31,"column":1,"offset":472},"end":{"line":31,"column":6,"offset":477},"indent":[]},"data":{"id":"","htmlAttributes":{"id":""},"hProperties":{"id":""}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#zoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"zoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Zoom","position":{"start":{"line":33,"column":6,"offset":484},"end":{"line":33,"column":10,"offset":488},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":479},"end":{"line":33,"column":10,"offset":488},"indent":[]},"data":{"id":"zoom","htmlAttributes":{"id":"zoom"},"hProperties":{"id":"zoom"}}},{"type":"paragraph","children":[{"type":"text","value":"放大缩小组件 默认 左上角","position":{"start":{"line":34,"column":1,"offset":489},"end":{"line":34,"column":14,"offset":502},"indent":[]}}],"position":{"start":{"line":34,"column":1,"offset":489},"end":{"line":34,"column":14,"offset":502},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
","position":{"start":{"line":36,"column":1,"offset":504},"end":{"line":40,"column":4,"offset":591},"indent":[1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#scale","title":null,"children":[],"data":{"hProperties":{"aria-label":"scale permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Scale","position":{"start":{"line":43,"column":6,"offset":599},"end":{"line":43,"column":11,"offset":604},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":594},"end":{"line":43,"column":11,"offset":604},"indent":[]},"data":{"id":"scale","htmlAttributes":{"id":"scale"},"hProperties":{"id":"scale"}}},{"type":"paragraph","children":[{"type":"text","value":"比例尺组件默认左下角","position":{"start":{"line":44,"column":1,"offset":605},"end":{"line":44,"column":11,"offset":615},"indent":[]}}],"position":{"start":{"line":44,"column":1,"offset":605},"end":{"line":44,"column":11,"offset":615},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
","position":{"start":{"line":46,"column":1,"offset":617},"end":{"line":50,"column":4,"offset":708},"indent":[1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#attribution","title":null,"children":[],"data":{"hProperties":{"aria-label":"attribution permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"attribution","position":{"start":{"line":53,"column":6,"offset":716},"end":{"line":53,"column":17,"offset":727},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":711},"end":{"line":53,"column":17,"offset":727},"indent":[]},"data":{"id":"attribution","htmlAttributes":{"id":"attribution"},"hProperties":{"id":"attribution"}}},{"type":"paragraph","children":[{"type":"text","value":"默认右下角","position":{"start":{"line":54,"column":1,"offset":728},"end":{"line":54,"column":6,"offset":733},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":728},"end":{"line":54,"column":6,"offset":733},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
","position":{"start":{"line":56,"column":1,"offset":735},"end":{"line":60,"column":4,"offset":831},"indent":[1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#layer","title":null,"children":[],"data":{"hProperties":{"aria-label":"layer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"layer","position":{"start":{"line":63,"column":6,"offset":839},"end":{"line":63,"column":11,"offset":844},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":834},"end":{"line":63,"column":11,"offset":844},"indent":[]},"data":{"id":"layer","htmlAttributes":{"id":"layer"},"hProperties":{"id":"layer"}}},{"type":"paragraph","children":[{"type":"text","value":"图层列表目前只支持可视化overlayers 图层控制","position":{"start":{"line":64,"column":1,"offset":845},"end":{"line":64,"column":28,"offset":872},"indent":[]}}],"position":{"start":{"line":64,"column":1,"offset":845},"end":{"line":64,"column":28,"offset":872},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
","position":{"start":{"line":66,"column":1,"offset":874},"end":{"line":74,"column":4,"offset":1032},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":77,"column":4,"offset":1038},"end":{"line":77,"column":6,"offset":1040},"indent":[]}}],"position":{"start":{"line":77,"column":1,"offset":1035},"end":{"line":77,"column":6,"offset":1040},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#onadd","title":null,"children":[],"data":{"hProperties":{"aria-label":"onadd permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"onAdd","position":{"start":{"line":79,"column":6,"offset":1047},"end":{"line":79,"column":11,"offset":1052},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":1042},"end":{"line":79,"column":11,"offset":1052},"indent":[]},"data":{"id":"onadd","htmlAttributes":{"id":"onadd"},"hProperties":{"id":"onadd"}}},{"type":"paragraph","children":[{"type":"text","value":"组件添加到地图Scene时调用，自定义组件时需要实现此方法","position":{"start":{"line":80,"column":1,"offset":1053},"end":{"line":80,"column":30,"offset":1082},"indent":[]}}],"position":{"start":{"line":80,"column":1,"offset":1053},"end":{"line":80,"column":30,"offset":1082},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#addto","title":null,"children":[],"data":{"hProperties":{"aria-label":"addto permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"addTo","position":{"start":{"line":83,"column":6,"offset":1090},"end":{"line":83,"column":11,"offset":1095},"indent":[]}}],"position":{"start":{"line":83,"column":1,"offset":1085},"end":{"line":83,"column":11,"offset":1095},"indent":[]},"data":{"id":"addto","htmlAttributes":{"id":"addto"},"hProperties":{"id":"addto"}}},{"type":"paragraph","children":[{"type":"text","value":"添加到地图scene","position":{"start":{"line":84,"column":1,"offset":1096},"end":{"line":84,"column":11,"offset":1106},"indent":[]}}],"position":{"start":{"line":84,"column":1,"offset":1096},"end":{"line":84,"column":11,"offset":1106},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
control.addTo(scene);\n
","position":{"start":{"line":86,"column":1,"offset":1108},"end":{"line":88,"column":4,"offset":1147},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#setposition","title":null,"children":[],"data":{"hProperties":{"aria-label":"setposition permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setPosition","position":{"start":{"line":91,"column":6,"offset":1155},"end":{"line":91,"column":17,"offset":1166},"indent":[]}}],"position":{"start":{"line":91,"column":1,"offset":1150},"end":{"line":91,"column":17,"offset":1166},"indent":[]},"data":{"id":"setposition","htmlAttributes":{"id":"setposition"},"hProperties":{"id":"setposition"}}},{"type":"paragraph","children":[{"type":"text","value":"设置组件位置","position":{"start":{"line":92,"column":1,"offset":1167},"end":{"line":92,"column":7,"offset":1173},"indent":[]}}],"position":{"start":{"line":92,"column":1,"offset":1167},"end":{"line":92,"column":7,"offset":1173},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
control.setPosition('bottomright');\n
","position":{"start":{"line":94,"column":1,"offset":1175},"end":{"line":96,"column":4,"offset":1228},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#remove","title":null,"children":[],"data":{"hProperties":{"aria-label":"remove permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"remove","position":{"start":{"line":99,"column":6,"offset":1236},"end":{"line":99,"column":12,"offset":1242},"indent":[]}}],"position":{"start":{"line":99,"column":1,"offset":1231},"end":{"line":99,"column":12,"offset":1242},"indent":[]},"data":{"id":"remove","htmlAttributes":{"id":"remove"},"hProperties":{"id":"remove"}}},{"type":"paragraph","children":[{"type":"text","value":"移除地图组件","position":{"start":{"line":100,"column":1,"offset":1243},"end":{"line":100,"column":7,"offset":1249},"indent":[]}}],"position":{"start":{"line":100,"column":1,"offset":1243},"end":{"line":100,"column":7,"offset":1249},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
control.remove();\n
","position":{"start":{"line":102,"column":1,"offset":1251},"end":{"line":104,"column":4,"offset":1286},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#示例代码","title":null,"children":[],"data":{"hProperties":{"aria-label":"示例代码 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"示例代码","position":{"start":{"line":108,"column":4,"offset":1293},"end":{"line":108,"column":8,"offset":1297},"indent":[]}}],"position":{"start":{"line":108,"column":1,"offset":1290},"end":{"line":108,"column":8,"offset":1297},"indent":[]},"data":{"id":"示例代码","htmlAttributes":{"id":"示例代码"},"hProperties":{"id":"示例代码"}}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#自定义图例控件","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义图例控件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"自定义图例控件","position":{"start":{"line":111,"column":6,"offset":1305},"end":{"line":111,"column":13,"offset":1312},"indent":[]}}],"position":{"start":{"line":111,"column":1,"offset":1300},"end":{"line":111,"column":13,"offset":1312},"indent":[]},"data":{"id":"自定义图例控件","htmlAttributes":{"id":"自定义图例控件"},"hProperties":{"id":"自定义图例控件"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html","children":[{"type":"text","value":"源码","position":{"start":{"line":112,"column":2,"offset":1314},"end":{"line":112,"column":4,"offset":1316},"indent":[]}}],"position":{"start":{"line":112,"column":1,"offset":1313},"end":{"line":112,"column":77,"offset":1389},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":112,"column":1,"offset":1313},"end":{"line":112,"column":77,"offset":1389},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
","position":{"start":{"line":114,"column":1,"offset":1391},"end":{"line":129,"column":4,"offset":1915},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#-1","title":null,"children":[],"data":{"hProperties":{"aria-label":" 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":131,"column":1,"offset":1917},"end":{"line":131,"column":4,"offset":1920},"indent":[]},"data":{"id":"-1","htmlAttributes":{"id":"-1"},"hProperties":{"id":"-1"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#faq","title":null,"children":[],"data":{"hProperties":{"aria-label":"faq permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"FAQ","position":{"start":{"line":133,"column":4,"offset":1925},"end":{"line":133,"column":7,"offset":1928},"indent":[]}}],"position":{"start":{"line":133,"column":1,"offset":1922},"end":{"line":133,"column":7,"offset":1928},"indent":[]},"data":{"id":"faq","htmlAttributes":{"id":"faq"},"hProperties":{"id":"faq"}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":135,"column":1,"offset":1930}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-a8313adc7b5c7ca51be7eb1193982c6e.json b/.cache/caches/gatsby-transformer-remark/diskstore-a8313adc7b5c7ca51be7eb1193982c6e.json deleted file mode 100644 index f55704287c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-a8313adc7b5c7ca51be7eb1193982c6e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-fe414ff6aa99e525f316a6218dd13c0f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-aa5104606f648fa23b131abce3fad078.json b/.cache/caches/gatsby-transformer-remark/diskstore-aa5104606f648fa23b131abce3fad078.json deleted file mode 100644 index 286676c26e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-aa5104606f648fa23b131abce3fad078.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-8bd46bd263f790754e46a98ca9891ea9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#layer","title":null,"children":[],"data":{"hProperties":{"aria-label":"layer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Layer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":8,"offset":7},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":8,"offset":7},"indent":[]},"data":{"id":"layer","htmlAttributes":{"id":"layer"},"hProperties":{"id":"layer"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":4,"column":4,"offset":13},"end":{"line":4,"column":6,"offset":15},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":10},"end":{"line":4,"column":6,"offset":15},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"L7 Layer 接口设计遵循图形语法，在可视表达上","position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":27,"offset":42},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":27,"offset":42},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"语法示例","position":{"start":{"line":7,"column":1,"offset":44},"end":{"line":7,"column":5,"offset":48},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":44},"end":{"line":7,"column":5,"offset":48},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
","position":{"start":{"line":9,"column":1,"offset":50},"end":{"line":17,"column":4,"offset":131},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":20,"column":4,"offset":137},"end":{"line":20,"column":8,"offset":141},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":134},"end":{"line":20,"column":8,"offset":141},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#配置项","title":null,"children":[],"data":{"hProperties":{"aria-label":"配置项 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"配置项","position":{"start":{"line":23,"column":4,"offset":147},"end":{"line":23,"column":7,"offset":150},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":144},"end":{"line":23,"column":7,"offset":150},"indent":[]},"data":{"id":"配置项","htmlAttributes":{"id":"配置项"},"hProperties":{"id":"配置项"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#visable","title":null,"children":[],"data":{"hProperties":{"aria-label":"visable permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"visable","position":{"start":{"line":25,"column":5,"offset":156},"end":{"line":25,"column":12,"offset":163},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":152},"end":{"line":25,"column":12,"offset":163},"indent":[]},"data":{"id":"visable","htmlAttributes":{"id":"visable"},"hProperties":{"id":"visable"}}},{"type":"paragraph","children":[{"type":"text","value":"图层是否可见   {bool } default true","position":{"start":{"line":26,"column":1,"offset":164},"end":{"line":26,"column":31,"offset":194},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":164},"end":{"line":26,"column":31,"offset":194},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#zindex","title":null,"children":[],"data":{"hProperties":{"aria-label":"zindex permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"zIndex","position":{"start":{"line":28,"column":5,"offset":200},"end":{"line":28,"column":11,"offset":206},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":196},"end":{"line":28,"column":11,"offset":206},"indent":[]},"data":{"id":"zindex","htmlAttributes":{"id":"zindex"},"hProperties":{"id":"zindex"}}},{"type":"paragraph","children":[{"type":"text","value":" 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0","position":{"start":{"line":29,"column":1,"offset":207},"end":{"line":29,"column":50,"offset":256},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":207},"end":{"line":29,"column":50,"offset":256},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#minzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"minzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"minZoom","position":{"start":{"line":30,"column":5,"offset":261},"end":{"line":30,"column":12,"offset":268},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":257},"end":{"line":30,"column":12,"offset":268},"indent":[]},"data":{"id":"minzoom","htmlAttributes":{"id":"minzoom"},"hProperties":{"id":"minzoom"}}},{"type":"paragraph","children":[{"type":"text","value":"图层显示最小缩放等级，（0-18）   {number}  default 0","position":{"start":{"line":31,"column":1,"offset":269},"end":{"line":31,"column":40,"offset":308},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":269},"end":{"line":31,"column":40,"offset":308},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#maxzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"maxzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"maxZoom","position":{"start":{"line":33,"column":5,"offset":314},"end":{"line":33,"column":12,"offset":321},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":310},"end":{"line":33,"column":12,"offset":321},"indent":[]},"data":{"id":"maxzoom","htmlAttributes":{"id":"maxzoom"},"hProperties":{"id":"maxzoom"}}},{"type":"paragraph","children":[{"type":"text","value":" 图层显示最大缩放等级 （0-18）   {number}  default 18","position":{"start":{"line":34,"column":1,"offset":322},"end":{"line":34,"column":42,"offset":363},"indent":[]}}],"position":{"start":{"line":34,"column":1,"offset":322},"end":{"line":34,"column":42,"offset":363},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#鼠标事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"鼠标事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"鼠标事件","position":{"start":{"line":37,"column":4,"offset":369},"end":{"line":37,"column":8,"offset":373},"indent":[]}}],"position":{"start":{"line":37,"column":1,"offset":366},"end":{"line":37,"column":9,"offset":374},"indent":[]},"data":{"id":"鼠标事件","htmlAttributes":{"id":"鼠标事件"},"hProperties":{"id":"鼠标事件"}}},{"type":"paragraph","children":[{"type":"text","value":"beta版当前不支持，正式版会支持","position":{"start":{"line":39,"column":1,"offset":376},"end":{"line":39,"column":18,"offset":393},"indent":[]}}],"position":{"start":{"line":39,"column":1,"offset":376},"end":{"line":39,"column":18,"offset":393},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
","position":{"start":{"line":41,"column":1,"offset":395},"end":{"line":52,"column":4,"offset":904},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":55,"column":4,"offset":910},"end":{"line":55,"column":6,"offset":912},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":907},"end":{"line":55,"column":6,"offset":912},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#source","title":null,"children":[],"data":{"hProperties":{"aria-label":"source permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"source","position":{"start":{"line":57,"column":5,"offset":918},"end":{"line":57,"column":11,"offset":924},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":914},"end":{"line":57,"column":11,"offset":924},"indent":[]},"data":{"id":"source","htmlAttributes":{"id":"source"},"hProperties":{"id":"source"}}},{"type":"paragraph","children":[{"type":"text","value":"数据源为layer设置数据 source(data,config)","position":{"start":{"line":58,"column":1,"offset":925},"end":{"line":58,"column":35,"offset":959},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":925},"end":{"line":58,"column":35,"offset":959},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"data {geojson|json|csv}","position":{"start":{"line":60,"column":3,"offset":963},"end":{"line":60,"column":26,"offset":986},"indent":[]}}],"position":{"start":{"line":60,"column":3,"offset":963},"end":{"line":60,"column":26,"offset":986},"indent":[]}}],"position":{"start":{"line":60,"column":1,"offset":961},"end":{"line":60,"column":26,"offset":986},"indent":[]}}],"position":{"start":{"line":60,"column":1,"offset":961},"end":{"line":60,"column":26,"offset":986},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"      源数据","position":{"start":{"line":63,"column":1,"offset":989},"end":{"line":63,"column":11,"offset":999},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":989},"end":{"line":63,"column":11,"offset":999},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"config  可选 数据源配置项","position":{"start":{"line":65,"column":3,"offset":1003},"end":{"line":65,"column":20,"offset":1020},"indent":[]}}],"position":{"start":{"line":65,"column":3,"offset":1003},"end":{"line":65,"column":20,"offset":1020},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"parser 数据解析，默认是解析层geojson","position":{"start":{"line":66,"column":5,"offset":1025},"end":{"line":66,"column":30,"offset":1050},"indent":[]}}],"position":{"start":{"line":66,"column":5,"offset":1025},"end":{"line":66,"column":30,"offset":1050},"indent":[]}}],"position":{"start":{"line":66,"column":3,"offset":1023},"end":{"line":66,"column":30,"offset":1050},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"transforms ","position":{"start":{"line":67,"column":5,"offset":1055},"end":{"line":67,"column":16,"offset":1066},"indent":[]}},{"type":"linkReference","identifier":"transform，transform ","label":"transform，transform ","referenceType":"shortcut","children":[{"type":"text","value":"transform，transform ","position":{"start":{"line":67,"column":17,"offset":1067},"end":{"line":67,"column":37,"offset":1087},"indent":[]}}],"position":{"start":{"line":67,"column":16,"offset":1066},"end":{"line":67,"column":38,"offset":1088},"indent":[]}},{"type":"text","value":"  数据处理转换 可设置多个","position":{"start":{"line":67,"column":38,"offset":1088},"end":{"line":67,"column":52,"offset":1102},"indent":[]}}],"position":{"start":{"line":67,"column":5,"offset":1055},"end":{"line":67,"column":52,"offset":1102},"indent":[]}}],"position":{"start":{"line":67,"column":3,"offset":1053},"end":{"line":67,"column":52,"offset":1102},"indent":[]}}],"position":{"start":{"line":66,"column":3,"offset":1023},"end":{"line":67,"column":52,"offset":1102},"indent":[3]}}],"position":{"start":{"line":65,"column":1,"offset":1001},"end":{"line":67,"column":52,"offset":1102},"indent":[1,1]}}],"position":{"start":{"line":65,"column":1,"offset":1001},"end":{"line":67,"column":52,"offset":1102},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":" parser和 transforms ","position":{"start":{"line":69,"column":1,"offset":1104},"end":{"line":69,"column":21,"offset":1124},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/l7/source","children":[{"type":"text","value":"见source文档","position":{"start":{"line":69,"column":22,"offset":1125},"end":{"line":69,"column":31,"offset":1134},"indent":[]}}],"position":{"start":{"line":69,"column":21,"offset":1124},"end":{"line":69,"column":70,"offset":1173},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":69,"column":1,"offset":1104},"end":{"line":69,"column":70,"offset":1173},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
","position":{"start":{"line":71,"column":1,"offset":1175},"end":{"line":99,"column":4,"offset":1746},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#","title":null,"children":[],"data":{"hProperties":{"aria-label":" permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":101,"column":1,"offset":1748},"end":{"line":101,"column":5,"offset":1752},"indent":[]},"data":{"id":"","htmlAttributes":{"id":""},"hProperties":{"id":""}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#scale","title":null,"children":[],"data":{"hProperties":{"aria-label":"scale permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"scale","position":{"start":{"line":103,"column":5,"offset":1758},"end":{"line":103,"column":10,"offset":1763},"indent":[]}}],"position":{"start":{"line":103,"column":1,"offset":1754},"end":{"line":103,"column":10,"offset":1763},"indent":[]},"data":{"id":"scale","htmlAttributes":{"id":"scale"},"hProperties":{"id":"scale"}}},{"type":"paragraph","children":[{"type":"text","value":"cscle('field', scaleConfig)","position":{"start":{"line":106,"column":1,"offset":1766},"end":{"line":106,"column":28,"offset":1793},"indent":[]}}],"position":{"start":{"line":106,"column":1,"offset":1766},"end":{"line":106,"column":28,"offset":1793},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"(field: string, scaleConfig: object)","position":{"start":{"line":108,"column":1,"offset":1795},"end":{"line":108,"column":37,"offset":1831},"indent":[]}}],"position":{"start":{"line":108,"column":1,"offset":1795},"end":{"line":108,"column":37,"offset":1831},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"为指定的数据字段进行列定义，返回 layer 实例。","position":{"start":{"line":110,"column":1,"offset":1833},"end":{"line":110,"column":27,"offset":1859},"indent":[]}}],"position":{"start":{"line":110,"column":1,"offset":1833},"end":{"line":110,"column":27,"offset":1859},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"field","position":{"start":{"line":114,"column":3,"offset":1865},"end":{"line":114,"column":10,"offset":1872},"indent":[]}},{"type":"text","value":" 字段名。","position":{"start":{"line":114,"column":10,"offset":1872},"end":{"line":114,"column":15,"offset":1877},"indent":[]}}],"position":{"start":{"line":114,"column":3,"offset":1865},"end":{"line":114,"column":15,"offset":1877},"indent":[]}}],"position":{"start":{"line":114,"column":1,"offset":1863},"end":{"line":115,"column":1,"offset":1878},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"scaleConfig","position":{"start":{"line":116,"column":3,"offset":1881},"end":{"line":116,"column":16,"offset":1894},"indent":[]}},{"type":"text","value":" 列定义配置，对象类型，可配置的属性如下：","position":{"start":{"line":116,"column":16,"offset":1894},"end":{"line":116,"column":37,"offset":1915},"indent":[]}}],"position":{"start":{"line":116,"column":3,"offset":1881},"end":{"line":116,"column":37,"offset":1915},"indent":[]}}],"position":{"start":{"line":116,"column":1,"offset":1879},"end":{"line":116,"column":37,"offset":1915},"indent":[]}}],"position":{"start":{"line":114,"column":1,"offset":1863},"end":{"line":116,"column":37,"offset":1915},"indent":[1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
","position":{"start":{"line":118,"column":1,"offset":1917},"end":{"line":123,"column":4,"offset":2035},"indent":[1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#size","title":null,"children":[],"data":{"hProperties":{"aria-label":"size permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size","position":{"start":{"line":125,"column":5,"offset":2041},"end":{"line":125,"column":9,"offset":2045},"indent":[]}}],"position":{"start":{"line":125,"column":1,"offset":2037},"end":{"line":125,"column":9,"offset":2045},"indent":[]},"data":{"id":"size","htmlAttributes":{"id":"size"},"hProperties":{"id":"size"}}},{"type":"paragraph","children":[{"type":"text","value":"将数据值映射到图形的大小上的方法。","position":{"start":{"line":127,"column":1,"offset":2047},"end":{"line":127,"column":18,"offset":2064},"indent":[]}}],"position":{"start":{"line":127,"column":1,"offset":2047},"end":{"line":127,"column":18,"offset":2064},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"注意：","position":{"start":{"line":129,"column":3,"offset":2068},"end":{"line":129,"column":6,"offset":2071},"indent":[]}}],"position":{"start":{"line":129,"column":1,"offset":2066},"end":{"line":129,"column":8,"offset":2073},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":129,"column":8,"offset":2073},"end":{"line":129,"column":9,"offset":2074},"indent":[]}}],"position":{"start":{"line":129,"column":1,"offset":2066},"end":{"line":129,"column":9,"offset":2074},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"不同图层的 size 的含义有所差别：","position":{"start":{"line":131,"column":1,"offset":2076},"end":{"line":131,"column":20,"offset":2095},"indent":[]}}],"position":{"start":{"line":131,"column":1,"offset":2076},"end":{"line":131,"column":20,"offset":2095},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"point 图形的 size 影响点的半径大小和高度；","position":{"start":{"line":133,"column":3,"offset":2099},"end":{"line":133,"column":30,"offset":2126},"indent":[]}}],"position":{"start":{"line":133,"column":3,"offset":2099},"end":{"line":133,"column":30,"offset":2126},"indent":[]}}],"position":{"start":{"line":133,"column":1,"offset":2097},"end":{"line":134,"column":1,"offset":2127},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"line, arc, path 中的 size 影响线的粗细,和高度；","position":{"start":{"line":135,"column":3,"offset":2130},"end":{"line":135,"column":38,"offset":2165},"indent":[]}}],"position":{"start":{"line":135,"column":3,"offset":2130},"end":{"line":135,"column":38,"offset":2165},"indent":[]}}],"position":{"start":{"line":135,"column":1,"offset":2128},"end":{"line":136,"column":1,"offset":2166},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"polygon size 影响的是高度","position":{"start":{"line":137,"column":3,"offset":2169},"end":{"line":137,"column":22,"offset":2188},"indent":[]}}],"position":{"start":{"line":137,"column":3,"offset":2169},"end":{"line":137,"column":22,"offset":2188},"indent":[]}}],"position":{"start":{"line":137,"column":1,"offset":2167},"end":{"line":137,"column":22,"offset":2188},"indent":[]}}],"position":{"start":{"line":133,"column":1,"offset":2097},"end":{"line":137,"column":22,"offset":2188},"indent":[1,1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
","position":{"start":{"line":141,"column":1,"offset":2192},"end":{"line":151,"column":4,"offset":2434},"indent":[1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#sizevalue）","title":null,"children":[],"data":{"hProperties":{"aria-label":"sizevalue） permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size(value）","position":{"start":{"line":154,"column":6,"offset":2442},"end":{"line":154,"column":17,"offset":2453},"indent":[]}}],"position":{"start":{"line":154,"column":1,"offset":2437},"end":{"line":154,"column":17,"offset":2453},"indent":[]},"data":{"id":"sizevalue）","htmlAttributes":{"id":"sizevalue）"},"hProperties":{"id":"sizevalue）"}}},{"type":"paragraph","children":[{"type":"text","value":"传入数字常量，如 ","position":{"start":{"line":156,"column":1,"offset":2455},"end":{"line":156,"column":10,"offset":2464},"indent":[]}},{"type":"html","value":"pointLayer.size(20)","position":{"start":{"line":156,"column":10,"offset":2464},"end":{"line":156,"column":31,"offset":2485},"indent":[]}}],"position":{"start":{"line":156,"column":1,"offset":2455},"end":{"line":156,"column":31,"offset":2485},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#sizefield","title":null,"children":[],"data":{"hProperties":{"aria-label":"sizefield permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size(field)","position":{"start":{"line":158,"column":6,"offset":2492},"end":{"line":158,"column":17,"offset":2503},"indent":[]}}],"position":{"start":{"line":158,"column":1,"offset":2487},"end":{"line":158,"column":17,"offset":2503},"indent":[]},"data":{"id":"sizefield","htmlAttributes":{"id":"sizefield"},"hProperties":{"id":"sizefield"}}},{"type":"paragraph","children":[{"type":"text","value":"根据 field 字段的值映射大小，使用默认的","position":{"start":{"line":159,"column":1,"offset":2504},"end":{"line":159,"column":24,"offset":2527},"indent":[]}},{"type":"html","value":"最大值 max:10","position":{"start":{"line":159,"column":24,"offset":2527},"end":{"line":159,"column":36,"offset":2539},"indent":[]}},{"type":"text","value":" 和","position":{"start":{"line":159,"column":36,"offset":2539},"end":{"line":159,"column":38,"offset":2541},"indent":[]}},{"type":"html","value":"最小值 min: 1","position":{"start":{"line":159,"column":38,"offset":2541},"end":{"line":159,"column":50,"offset":2553},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":159,"column":50,"offset":2553},"end":{"line":159,"column":51,"offset":2554},"indent":[]}}],"position":{"start":{"line":159,"column":1,"offset":2504},"end":{"line":159,"column":51,"offset":2554},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#sizefield-callback","title":null,"children":[],"data":{"hProperties":{"aria-label":"sizefield callback permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size(field, callback)","position":{"start":{"line":161,"column":6,"offset":2561},"end":{"line":161,"column":27,"offset":2582},"indent":[]}}],"position":{"start":{"line":161,"column":1,"offset":2556},"end":{"line":161,"column":27,"offset":2582},"indent":[]},"data":{"id":"sizefield-callback","htmlAttributes":{"id":"sizefield-callback"},"hProperties":{"id":"sizefield-callback"}}},{"type":"paragraph","children":[{"type":"text","value":"使用回调函数控制图形大小。","position":{"start":{"line":162,"column":1,"offset":2583},"end":{"line":162,"column":14,"offset":2596},"indent":[]}}],"position":{"start":{"line":162,"column":1,"offset":2583},"end":{"line":162,"column":14,"offset":2596},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"callback","position":{"start":{"line":164,"column":3,"offset":2600},"end":{"line":164,"column":13,"offset":2610},"indent":[]}},{"type":"text","value":": function 回调函数。","position":{"start":{"line":164,"column":13,"offset":2610},"end":{"line":164,"column":29,"offset":2626},"indent":[]}}],"position":{"start":{"line":164,"column":3,"offset":2600},"end":{"line":164,"column":29,"offset":2626},"indent":[]}}],"position":{"start":{"line":164,"column":1,"offset":2598},"end":{"line":164,"column":29,"offset":2626},"indent":[]}}],"position":{"start":{"line":164,"column":1,"offset":2598},"end":{"line":164,"column":29,"offset":2626},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
","position":{"start":{"line":166,"column":1,"offset":2628},"end":{"line":173,"column":4,"offset":2736},"indent":[1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#color","title":null,"children":[],"data":{"hProperties":{"aria-label":"color permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"color","position":{"start":{"line":175,"column":5,"offset":2742},"end":{"line":175,"column":10,"offset":2747},"indent":[]}}],"position":{"start":{"line":175,"column":1,"offset":2738},"end":{"line":175,"column":10,"offset":2747},"indent":[]},"data":{"id":"color","htmlAttributes":{"id":"color"},"hProperties":{"id":"color"}}},{"type":"paragraph","children":[{"type":"text","value":"将数据值映射到图形的颜色上的方法。","position":{"start":{"line":177,"column":1,"offset":2749},"end":{"line":177,"column":18,"offset":2766},"indent":[]}}],"position":{"start":{"line":177,"column":1,"offset":2749},"end":{"line":177,"column":18,"offset":2766},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
","position":{"start":{"line":179,"column":1,"offset":2768},"end":{"line":195,"column":4,"offset":3152},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#colorvalue","title":null,"children":[],"data":{"hProperties":{"aria-label":"colorvalue permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"color(value)","position":{"start":{"line":198,"column":6,"offset":3160},"end":{"line":198,"column":18,"offset":3172},"indent":[]}}],"position":{"start":{"line":198,"column":1,"offset":3155},"end":{"line":198,"column":18,"offset":3172},"indent":[]},"data":{"id":"colorvalue","htmlAttributes":{"id":"colorvalue"},"hProperties":{"id":"colorvalue"}}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":201,"column":1,"offset":3175},"end":{"line":201,"column":4,"offset":3178},"indent":[]}},{"type":"html","value":"value","position":{"start":{"line":201,"column":4,"offset":3178},"end":{"line":201,"column":11,"offset":3185},"indent":[]}},{"type":"text","value":" ：string\n只支持接收一个参数，value 可以是：","position":{"start":{"line":201,"column":11,"offset":3185},"end":{"line":202,"column":21,"offset":3214},"indent":[1]}}],"position":{"start":{"line":201,"column":1,"offset":3175},"end":{"line":202,"column":21,"offset":3214},"indent":[1]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。","position":{"start":{"line":204,"column":3,"offset":3218},"end":{"line":204,"column":64,"offset":3279},"indent":[]}}],"position":{"start":{"line":204,"column":3,"offset":3218},"end":{"line":204,"column":64,"offset":3279},"indent":[]}}],"position":{"start":{"line":204,"column":1,"offset":3216},"end":{"line":205,"column":1,"offset":3280},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。","position":{"start":{"line":206,"column":3,"offset":3283},"end":{"line":206,"column":80,"offset":3360},"indent":[]}}],"position":{"start":{"line":206,"column":3,"offset":3283},"end":{"line":206,"column":80,"offset":3360},"indent":[]}}],"position":{"start":{"line":206,"column":1,"offset":3281},"end":{"line":206,"column":80,"offset":3360},"indent":[]}}],"position":{"start":{"line":204,"column":1,"offset":3216},"end":{"line":206,"column":80,"offset":3360},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"示例","position":{"start":{"line":209,"column":1,"offset":3363},"end":{"line":209,"column":3,"offset":3365},"indent":[]}}],"position":{"start":{"line":209,"column":1,"offset":3363},"end":{"line":209,"column":3,"offset":3365},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
","position":{"start":{"line":210,"column":1,"offset":3366},"end":{"line":213,"column":4,"offset":3442},"indent":[1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#colorfield-colors","title":null,"children":[],"data":{"hProperties":{"aria-label":"colorfield colors permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"color(field, colors)","position":{"start":{"line":216,"column":6,"offset":3450},"end":{"line":216,"column":26,"offset":3470},"indent":[]}}],"position":{"start":{"line":216,"column":1,"offset":3445},"end":{"line":216,"column":26,"offset":3470},"indent":[]},"data":{"id":"colorfield-colors","htmlAttributes":{"id":"colorfield-colors"},"hProperties":{"id":"colorfield-colors"}}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":218,"column":1,"offset":3472},"end":{"line":218,"column":4,"offset":3475},"indent":[]}}],"position":{"start":{"line":218,"column":1,"offset":3472},"end":{"line":218,"column":4,"offset":3475},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"field","position":{"start":{"line":220,"column":3,"offset":3479},"end":{"line":220,"column":10,"offset":3486},"indent":[]}},{"type":"text","value":": stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。","position":{"start":{"line":220,"column":10,"offset":3486},"end":{"line":220,"column":50,"offset":3526},"indent":[]}}],"position":{"start":{"line":220,"column":3,"offset":3479},"end":{"line":220,"column":50,"offset":3526},"indent":[]}}],"position":{"start":{"line":220,"column":1,"offset":3477},"end":{"line":221,"column":1,"offset":3527},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" ","position":{"start":{"line":222,"column":3,"offset":3530},"end":{"line":222,"column":4,"offset":3531},"indent":[]}},{"type":"html","value":"colors","position":{"start":{"line":222,"column":4,"offset":3531},"end":{"line":222,"column":12,"offset":3539},"indent":[]}},{"type":"text","value":": string | array | function","position":{"start":{"line":222,"column":12,"offset":3539},"end":{"line":222,"column":39,"offset":3566},"indent":[]}}],"position":{"start":{"line":222,"column":3,"offset":3530},"end":{"line":222,"column":39,"offset":3566},"indent":[]}}],"position":{"start":{"line":222,"column":1,"offset":3528},"end":{"line":222,"column":39,"offset":3566},"indent":[]}}],"position":{"start":{"line":220,"column":1,"offset":3477},"end":{"line":222,"column":39,"offset":3566},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。","position":{"start":{"line":225,"column":1,"offset":3569},"end":{"line":225,"column":94,"offset":3662},"indent":[]}}],"position":{"start":{"line":225,"column":1,"offset":3569},"end":{"line":225,"column":94,"offset":3662},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
","position":{"start":{"line":227,"column":1,"offset":3664},"end":{"line":230,"column":4,"offset":3766},"indent":[1,1,1]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：","position":{"start":{"line":232,"column":3,"offset":3770},"end":{"line":232,"column":74,"offset":3841},"indent":[]}}],"position":{"start":{"line":232,"column":3,"offset":3770},"end":{"line":232,"column":74,"offset":3841},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":3768},"end":{"line":232,"column":74,"offset":3841},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":3768},"end":{"line":232,"column":74,"offset":3841},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
","position":{"start":{"line":236,"column":1,"offset":3845},"end":{"line":249,"column":4,"offset":4084},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"shape","position":{"start":{"line":251,"column":5,"offset":4090},"end":{"line":251,"column":10,"offset":4095},"indent":[]}}],"position":{"start":{"line":251,"column":1,"offset":4086},"end":{"line":251,"column":10,"offset":4095},"indent":[]},"data":{"id":"shape","htmlAttributes":{"id":"shape"},"hProperties":{"id":"shape"}}},{"type":"paragraph","children":[{"type":"text","value":"将数据值映射到图形的形状上的方法。","position":{"start":{"line":252,"column":1,"offset":4096},"end":{"line":252,"column":18,"offset":4113},"indent":[]}}],"position":{"start":{"line":252,"column":1,"offset":4096},"end":{"line":252,"column":18,"offset":4113},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"shape(shape)","position":{"start":{"line":254,"column":3,"offset":4117},"end":{"line":254,"column":15,"offset":4129},"indent":[]}}],"position":{"start":{"line":254,"column":1,"offset":4115},"end":{"line":254,"column":17,"offset":4131},"indent":[]}}],"position":{"start":{"line":254,"column":1,"offset":4115},"end":{"line":254,"column":17,"offset":4131},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"参数","position":{"start":{"line":256,"column":1,"offset":4133},"end":{"line":256,"column":3,"offset":4135},"indent":[]}},{"type":"html","value":"shape","position":{"start":{"line":256,"column":3,"offset":4135},"end":{"line":256,"column":10,"offset":4142},"indent":[]}},{"type":"text","value":" string","position":{"start":{"line":256,"column":10,"offset":4142},"end":{"line":256,"column":17,"offset":4149},"indent":[]}}],"position":{"start":{"line":256,"column":1,"offset":4133},"end":{"line":256,"column":17,"offset":4149},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状","position":{"start":{"line":258,"column":1,"offset":4151},"end":{"line":258,"column":55,"offset":4205},"indent":[]}}],"position":{"start":{"line":258,"column":1,"offset":4151},"end":{"line":258,"column":55,"offset":4205},"indent":[]}},{"type":"table","align":[null,null,null],"children":[{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"layer类型","position":{"start":{"line":260,"column":3,"offset":4209},"end":{"line":260,"column":10,"offset":4216},"indent":[]}}],"position":{"start":{"line":260,"column":3,"offset":4209},"end":{"line":260,"column":10,"offset":4216},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"shape类型","position":{"start":{"line":260,"column":13,"offset":4219},"end":{"line":260,"column":20,"offset":4226},"indent":[]}}],"position":{"start":{"line":260,"column":13,"offset":4219},"end":{"line":260,"column":20,"offset":4226},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"备注","position":{"start":{"line":260,"column":23,"offset":4229},"end":{"line":260,"column":25,"offset":4231},"indent":[]}}],"position":{"start":{"line":260,"column":23,"offset":4229},"end":{"line":260,"column":25,"offset":4231},"indent":[]}}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":260,"column":27,"offset":4233},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"point","position":{"start":{"line":262,"column":3,"offset":4256},"end":{"line":262,"column":8,"offset":4261},"indent":[]}}],"position":{"start":{"line":262,"column":3,"offset":4256},"end":{"line":262,"column":8,"offset":4261},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square","position":{"start":{"line":262,"column":11,"offset":4264},"end":{"line":262,"column":97,"offset":4350},"indent":[]}}],"position":{"start":{"line":262,"column":11,"offset":4264},"end":{"line":262,"column":97,"offset":4350},"indent":[]}},{"type":"tableCell","children":[],"position":{"start":{"line":262,"column":101,"offset":4354},"end":{"line":262,"column":101,"offset":4354},"indent":[]}}],"position":{"start":{"line":262,"column":1,"offset":4254},"end":{"line":262,"column":102,"offset":4355},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"line","position":{"start":{"line":263,"column":3,"offset":4358},"end":{"line":263,"column":7,"offset":4362},"indent":[]}}],"position":{"start":{"line":263,"column":3,"offset":4358},"end":{"line":263,"column":7,"offset":4362},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"line,arc, arc3d, greatcircle","position":{"start":{"line":263,"column":10,"offset":4365},"end":{"line":263,"column":38,"offset":4393},"indent":[]}}],"position":{"start":{"line":263,"column":10,"offset":4365},"end":{"line":263,"column":38,"offset":4393},"indent":[]}},{"type":"tableCell","children":[],"position":{"start":{"line":263,"column":42,"offset":4397},"end":{"line":263,"column":42,"offset":4397},"indent":[]}}],"position":{"start":{"line":263,"column":1,"offset":4356},"end":{"line":263,"column":43,"offset":4398},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"polygon","position":{"start":{"line":264,"column":3,"offset":4401},"end":{"line":264,"column":10,"offset":4408},"indent":[]}}],"position":{"start":{"line":264,"column":3,"offset":4401},"end":{"line":264,"column":10,"offset":4408},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"fill,line, extrude","position":{"start":{"line":264,"column":13,"offset":4411},"end":{"line":264,"column":31,"offset":4429},"indent":[]}}],"position":{"start":{"line":264,"column":13,"offset":4411},"end":{"line":264,"column":31,"offset":4429},"indent":[]}},{"type":"tableCell","children":[],"position":{"start":{"line":264,"column":35,"offset":4433},"end":{"line":264,"column":35,"offset":4433},"indent":[]}}],"position":{"start":{"line":264,"column":1,"offset":4399},"end":{"line":264,"column":36,"offset":4434},"indent":[]}}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":264,"column":36,"offset":4434},"indent":[1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"shape(field, shapes)","position":{"start":{"line":267,"column":3,"offset":4439},"end":{"line":267,"column":23,"offset":4459},"indent":[]}}],"position":{"start":{"line":267,"column":1,"offset":4437},"end":{"line":267,"column":25,"offset":4461},"indent":[]}}],"position":{"start":{"line":267,"column":1,"offset":4437},"end":{"line":267,"column":25,"offset":4461},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"shape(field, callback)","position":{"start":{"line":269,"column":3,"offset":4465},"end":{"line":269,"column":25,"offset":4487},"indent":[]}}],"position":{"start":{"line":269,"column":1,"offset":4463},"end":{"line":269,"column":27,"offset":4489},"indent":[]}}],"position":{"start":{"line":269,"column":1,"offset":4463},"end":{"line":269,"column":27,"offset":4489},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#style","title":null,"children":[],"data":{"hProperties":{"aria-label":"style permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"style","position":{"start":{"line":272,"column":5,"offset":4496},"end":{"line":272,"column":10,"offset":4501},"indent":[]}}],"position":{"start":{"line":272,"column":1,"offset":4492},"end":{"line":272,"column":10,"offset":4501},"indent":[]},"data":{"id":"style","htmlAttributes":{"id":"style"},"hProperties":{"id":"style"}}},{"type":"paragraph","children":[{"type":"text","value":"用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放","position":{"start":{"line":274,"column":1,"offset":4503},"end":{"line":274,"column":32,"offset":4534},"indent":[]}}],"position":{"start":{"line":274,"column":1,"offset":4503},"end":{"line":274,"column":32,"offset":4534},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"fill","position":{"start":{"line":276,"column":3,"offset":4538},"end":{"line":276,"column":7,"offset":4542},"indent":[]}}],"position":{"start":{"line":276,"column":3,"offset":4538},"end":{"line":276,"column":7,"offset":4542},"indent":[]}}],"position":{"start":{"line":276,"column":1,"offset":4536},"end":{"line":277,"column":1,"offset":4543},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"opacity  设置透明度","position":{"start":{"line":278,"column":3,"offset":4546},"end":{"line":278,"column":17,"offset":4560},"indent":[]}}],"position":{"start":{"line":278,"column":3,"offset":4546},"end":{"line":278,"column":17,"offset":4560},"indent":[]}}],"position":{"start":{"line":278,"column":1,"offset":4544},"end":{"line":279,"column":1,"offset":4561},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"stroke 线填充颜色","position":{"start":{"line":280,"column":3,"offset":4564},"end":{"line":280,"column":16,"offset":4577},"indent":[]}}],"position":{"start":{"line":280,"column":3,"offset":4564},"end":{"line":280,"column":16,"offset":4577},"indent":[]}}],"position":{"start":{"line":280,"column":1,"offset":4562},"end":{"line":281,"column":1,"offset":4578},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"strokeWidth 线的宽度","position":{"start":{"line":282,"column":3,"offset":4581},"end":{"line":282,"column":19,"offset":4597},"indent":[]}}],"position":{"start":{"line":282,"column":3,"offset":4581},"end":{"line":282,"column":19,"offset":4597},"indent":[]}}],"position":{"start":{"line":282,"column":1,"offset":4579},"end":{"line":282,"column":19,"offset":4597},"indent":[]}}],"position":{"start":{"line":276,"column":1,"offset":4536},"end":{"line":282,"column":19,"offset":4597},"indent":[1,1,1,1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
","position":{"start":{"line":285,"column":1,"offset":4600},"end":{"line":291,"column":4,"offset":4686},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#show","title":null,"children":[],"data":{"hProperties":{"aria-label":"show permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"show","position":{"start":{"line":294,"column":5,"offset":4693},"end":{"line":294,"column":9,"offset":4697},"indent":[]}}],"position":{"start":{"line":294,"column":1,"offset":4689},"end":{"line":294,"column":9,"offset":4697},"indent":[]},"data":{"id":"show","htmlAttributes":{"id":"show"},"hProperties":{"id":"show"}}},{"type":"paragraph","children":[{"type":"text","value":"图层显示","position":{"start":{"line":295,"column":1,"offset":4698},"end":{"line":295,"column":5,"offset":4702},"indent":[]}}],"position":{"start":{"line":295,"column":1,"offset":4698},"end":{"line":295,"column":5,"offset":4702},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.show();\n
","position":{"start":{"line":297,"column":1,"offset":4704},"end":{"line":299,"column":4,"offset":4735},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#hide","title":null,"children":[],"data":{"hProperties":{"aria-label":"hide permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"hide","position":{"start":{"line":302,"column":5,"offset":4742},"end":{"line":302,"column":9,"offset":4746},"indent":[]}}],"position":{"start":{"line":302,"column":1,"offset":4738},"end":{"line":302,"column":9,"offset":4746},"indent":[]},"data":{"id":"hide","htmlAttributes":{"id":"hide"},"hProperties":{"id":"hide"}}},{"type":"paragraph","children":[{"type":"text","value":"图层隐藏","position":{"start":{"line":304,"column":1,"offset":4748},"end":{"line":304,"column":5,"offset":4752},"indent":[]}}],"position":{"start":{"line":304,"column":1,"offset":4748},"end":{"line":304,"column":5,"offset":4752},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.hide();\n
","position":{"start":{"line":306,"column":1,"offset":4754},"end":{"line":308,"column":4,"offset":4785},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#fitbounds","title":null,"children":[],"data":{"hProperties":{"aria-label":"fitbounds permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"fitBounds","position":{"start":{"line":311,"column":5,"offset":4792},"end":{"line":311,"column":14,"offset":4801},"indent":[]}}],"position":{"start":{"line":311,"column":1,"offset":4788},"end":{"line":311,"column":14,"offset":4801},"indent":[]},"data":{"id":"fitbounds","htmlAttributes":{"id":"fitbounds"},"hProperties":{"id":"fitbounds"}}},{"type":"paragraph","children":[{"type":"text","value":"缩放到图层范围","position":{"start":{"line":313,"column":1,"offset":4803},"end":{"line":313,"column":8,"offset":4810},"indent":[]}}],"position":{"start":{"line":313,"column":1,"offset":4803},"end":{"line":313,"column":8,"offset":4810},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.fitBounds();\n
","position":{"start":{"line":315,"column":1,"offset":4812},"end":{"line":318,"column":4,"offset":4848},"indent":[1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":318,"column":4,"offset":4848}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-adee5a93a879225d78267e6ab4c4bfdb.json b/.cache/caches/gatsby-transformer-remark/diskstore-adee5a93a879225d78267e6ab4c4bfdb.json deleted file mode 100644 index ac1be52a73..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-adee5a93a879225d78267e6ab4c4bfdb.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162509000,"key":"transformer-remark-markdown-html-d472877a984a12546079e673e84f8ab3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-ae477cd5edb652fcc26be6b4880ad87d.json b/.cache/caches/gatsby-transformer-remark/diskstore-ae477cd5edb652fcc26be6b4880ad87d.json deleted file mode 100644 index a9e79b5ac1..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-ae477cd5edb652fcc26be6b4880ad87d.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-63d6f29612923eb1f263a3a7fbc0d504-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"使用方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95","aria-label":"使用方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用方法","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":7,"offset":6}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":7,"offset":6}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 提供三种使用方式：CDN、Submodule。","position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":27,"offset":34}}}],"position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":27,"offset":34}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"通过-cdn-使用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%80%9A%E8%BF%87-cdn-%E4%BD%BF%E7%94%A8","aria-label":"通过 cdn 使用 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"通过 CDN 使用","position":{"start":{"line":5,"column":4,"offset":39},"end":{"line":5,"column":13,"offset":48}}}],"position":{"start":{"line":5,"column":1,"offset":36},"end":{"line":5,"column":13,"offset":48}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"首先在 ","position":{"start":{"line":7,"column":1,"offset":50},"end":{"line":7,"column":5,"offset":54}}},{"type":"raw","value":"<head>","position":{"start":{"line":7,"column":5,"offset":54},"end":{"line":7,"column":13,"offset":62}}},{"type":"text","value":" 中引入 L7 CDN 版本的 JS 和 CSS 文件：","position":{"start":{"line":7,"column":13,"offset":62},"end":{"line":7,"column":41,"offset":90}}}],"position":{"start":{"line":7,"column":1,"offset":50},"end":{"line":7,"column":41,"offset":90}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
","position":{"start":{"line":8,"column":1,"offset":91},"end":{"line":12,"column":4,"offset":217}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 ","position":{"start":{"line":14,"column":1,"offset":219},"end":{"line":14,"column":50,"offset":268}}},{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox 文档","position":{"start":{"line":14,"column":51,"offset":269},"end":{"line":14,"column":60,"offset":278}}}],"position":{"start":{"line":14,"column":50,"offset":268},"end":{"line":14,"column":120,"offset":338}}},{"type":"text","value":"：","position":{"start":{"line":14,"column":120,"offset":338},"end":{"line":14,"column":121,"offset":339}}}],"position":{"start":{"line":14,"column":1,"offset":219},"end":{"line":14,"column":121,"offset":339}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
","position":{"start":{"line":15,"column":1,"offset":340},"end":{"line":21,"column":4,"offset":582}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️高德采用异步加载，因此不需要引入任何额外静态文件。","position":{"start":{"line":22,"column":1,"offset":583},"end":{"line":22,"column":28,"offset":610}}}],"position":{"start":{"line":22,"column":1,"offset":583},"end":{"line":22,"column":28,"offset":610}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"然后在 ","position":{"start":{"line":24,"column":1,"offset":612},"end":{"line":24,"column":5,"offset":616}}},{"type":"raw","value":"<body>","position":{"start":{"line":24,"column":5,"offset":616},"end":{"line":24,"column":13,"offset":624}}},{"type":"text","value":" 中定义一个容器并设置一个 ","position":{"start":{"line":24,"column":13,"offset":624},"end":{"line":24,"column":27,"offset":638}}},{"type":"raw","value":"id","position":{"start":{"line":24,"column":27,"offset":638},"end":{"line":24,"column":31,"offset":642}}},{"type":"text","value":"。通过全局 ","position":{"start":{"line":24,"column":31,"offset":642},"end":{"line":24,"column":37,"offset":648}}},{"type":"raw","value":"L7","position":{"start":{"line":24,"column":37,"offset":648},"end":{"line":24,"column":41,"offset":652}}},{"type":"text","value":" 这个命名空间可以获取场景 ","position":{"start":{"line":24,"column":41,"offset":652},"end":{"line":24,"column":55,"offset":666}}},{"type":"raw","value":"L7.Scene","position":{"start":{"line":24,"column":55,"offset":666},"end":{"line":24,"column":65,"offset":676}}},{"type":"text","value":" 和图层 ","position":{"start":{"line":24,"column":65,"offset":676},"end":{"line":24,"column":70,"offset":681}}},{"type":"raw","value":"L7.PolygonLayer","position":{"start":{"line":24,"column":70,"offset":681},"end":{"line":24,"column":87,"offset":698}}},{"type":"text","value":"：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 ","position":{"start":{"line":24,"column":87,"offset":698},"end":{"line":25,"column":33,"offset":732}}},{"type":"raw","value":"L7.Scene","position":{"start":{"line":25,"column":33,"offset":732},"end":{"line":25,"column":43,"offset":742}}},{"type":"text","value":" 的构造函数，获取方式如下：","position":{"start":{"line":25,"column":43,"offset":742},"end":{"line":25,"column":57,"offset":756}}}],"position":{"start":{"line":24,"column":1,"offset":612},"end":{"line":25,"column":57,"offset":756}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"高德地图开发者 Key ","position":{"start":{"line":26,"column":3,"offset":759},"end":{"line":26,"column":15,"offset":771}}},{"type":"element","tagName":"a","properties":{"href":"https://lbs.amap.com/dev/key/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"申请方法","position":{"start":{"line":26,"column":16,"offset":772},"end":{"line":26,"column":20,"offset":776}}}],"position":{"start":{"line":26,"column":15,"offset":771},"end":{"line":26,"column":52,"offset":808}}}],"position":{"start":{"line":26,"column":1,"offset":757},"end":{"line":26,"column":52,"offset":808}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox Access Tokens","position":{"start":{"line":27,"column":4,"offset":812},"end":{"line":27,"column":24,"offset":832}}}],"position":{"start":{"line":27,"column":3,"offset":811},"end":{"line":27,"column":123,"offset":931}}}],"position":{"start":{"line":27,"column":1,"offset":809},"end":{"line":27,"column":123,"offset":931}}},{"type":"text","value":"\n"}],"position":{"start":{"line":26,"column":1,"offset":757},"end":{"line":27,"column":123,"offset":931}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"通过-submodule-使用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%80%9A%E8%BF%87-submodule-%E4%BD%BF%E7%94%A8","aria-label":"通过 submodule 使用 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"通过 Submodule 使用","position":{"start":{"line":29,"column":4,"offset":936},"end":{"line":29,"column":19,"offset":951}}}],"position":{"start":{"line":29,"column":1,"offset":933},"end":{"line":29,"column":19,"offset":951}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"首先通过 ","position":{"start":{"line":31,"column":1,"offset":953},"end":{"line":31,"column":6,"offset":958}}},{"type":"raw","value":"npm/yarn","position":{"start":{"line":31,"column":6,"offset":958},"end":{"line":31,"column":16,"offset":968}}}],"position":{"start":{"line":31,"column":1,"offset":953},"end":{"line":31,"column":16,"offset":968}}},{"type":"text","value":"\n"},{"type":"raw","value":"
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
","position":{"start":{"line":32,"column":1,"offset":969},"end":{"line":37,"column":4,"offset":1047}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"然后就可以使用其中包含的场景和各类图层：","position":{"start":{"line":39,"column":1,"offset":1049},"end":{"line":39,"column":21,"offset":1069}}}],"position":{"start":{"line":39,"column":1,"offset":1049},"end":{"line":39,"column":21,"offset":1069}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
","position":{"start":{"line":40,"column":1,"offset":1070},"end":{"line":85,"column":4,"offset":1941}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：","position":{"start":{"line":88,"column":1,"offset":1944},"end":{"line":88,"column":36,"offset":1979}}}],"position":{"start":{"line":88,"column":1,"offset":1944},"end":{"line":88,"column":36,"offset":1979}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"高德地图","position":{"start":{"line":89,"column":4,"offset":1983},"end":{"line":89,"column":8,"offset":1987}}}],"position":{"start":{"line":89,"column":3,"offset":1982},"end":{"line":89,"column":88,"offset":2067}}}],"position":{"start":{"line":89,"column":1,"offset":1980},"end":{"line":89,"column":88,"offset":2067}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox","position":{"start":{"line":90,"column":4,"offset":2071},"end":{"line":90,"column":10,"offset":2077}}}],"position":{"start":{"line":90,"column":3,"offset":2070},"end":{"line":90,"column":92,"offset":2159}}}],"position":{"start":{"line":90,"column":1,"offset":2068},"end":{"line":90,"column":92,"offset":2159}}},{"type":"text","value":"\n"}],"position":{"start":{"line":89,"column":1,"offset":1980},"end":{"line":90,"column":92,"offset":2159}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"wip-react"},"children":[{"type":"element","tagName":"a","properties":{"href":"#wip-react","aria-label":"wip react permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"[WIP]","position":{"start":{"line":93,"column":5,"offset":2166},"end":{"line":93,"column":8,"offset":2169}}},{"type":"text","value":" React","position":{"start":{"line":93,"column":9,"offset":2170},"end":{"line":93,"column":15,"offset":2176}}}],"position":{"start":{"line":93,"column":1,"offset":2162},"end":{"line":93,"column":15,"offset":2176}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React 组件待开发，目前可以暂时以 Submodule 方式使用：","position":{"start":{"line":95,"column":1,"offset":2178},"end":{"line":95,"column":36,"offset":2213}}}],"position":{"start":{"line":95,"column":1,"offset":2178},"end":{"line":95,"column":36,"offset":2213}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
","position":{"start":{"line":96,"column":1,"offset":2214},"end":{"line":157,"column":4,"offset":3494}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️组件 Unmount 时需要通过 ","position":{"start":{"line":159,"column":1,"offset":3496},"end":{"line":159,"column":20,"offset":3515}}},{"type":"raw","value":"scene.destroy()","position":{"start":{"line":159,"column":20,"offset":3515},"end":{"line":159,"column":37,"offset":3532}}},{"type":"text","value":" 手动销毁场景。","position":{"start":{"line":159,"column":37,"offset":3532},"end":{"line":159,"column":45,"offset":3540}}}],"position":{"start":{"line":159,"column":1,"offset":3496},"end":{"line":159,"column":45,"offset":3540}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":161,"column":1,"offset":3542}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-b20bb489fea829fb9784d272d2b8c46b.json b/.cache/caches/gatsby-transformer-remark/diskstore-b20bb489fea829fb9784d272d2b8c46b.json deleted file mode 100644 index b5e37fc6f6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-b20bb489fea829fb9784d272d2b8c46b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-0d5e6b054ae0e4dc5ad081332b9456de-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-b211f6703f9b97c9537ab67e273e0e6d.json b/.cache/caches/gatsby-transformer-remark/diskstore-b211f6703f9b97c9537ab67e273e0e6d.json deleted file mode 100644 index 0ee5152821..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-b211f6703f9b97c9537ab67e273e0e6d.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-a47796faf1ab795c66b81908e03e735c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"热力图的变体，网格布局呈现数据分级分布的聚合现象。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-b373edf5a1b20a76e99881620f729b6e.json b/.cache/caches/gatsby-transformer-remark/diskstore-b373edf5a1b20a76e99881620f729b6e.json deleted file mode 100644 index 888d0b4cc3..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-b373edf5a1b20a76e99881620f729b6e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-2260346338778510142b6e5e0ceeb043-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-b4c59761e74ca25befcfda3971bbb66b.json b/.cache/caches/gatsby-transformer-remark/diskstore-b4c59761e74ca25befcfda3971bbb66b.json deleted file mode 100644 index ca918ddd68..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-b4c59761e74ca25befcfda3971bbb66b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-1294fb759b9f52825afbf490561c7d81-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-b77d907e6e0afca24596c62a243fa5a4.json b/.cache/caches/gatsby-transformer-remark/diskstore-b77d907e6e0afca24596c62a243fa5a4.json deleted file mode 100644 index 00b0ead213..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-b77d907e6e0afca24596c62a243fa5a4.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-1294fb759b9f52825afbf490561c7d81-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#layer","title":null,"children":[],"data":{"hProperties":{"aria-label":"layer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Layer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":8,"offset":7},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":8,"offset":7},"indent":[]},"data":{"id":"layer","htmlAttributes":{"id":"layer"},"hProperties":{"id":"layer"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":4,"column":4,"offset":13},"end":{"line":4,"column":6,"offset":15},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":10},"end":{"line":4,"column":6,"offset":15},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"L7 Layer 接口设计遵循图形语法，在可视表达上","position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":27,"offset":42},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":27,"offset":42},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"语法示例","position":{"start":{"line":7,"column":1,"offset":44},"end":{"line":7,"column":5,"offset":48},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":44},"end":{"line":7,"column":5,"offset":48},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
","position":{"start":{"line":9,"column":1,"offset":50},"end":{"line":17,"column":4,"offset":131},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":20,"column":4,"offset":137},"end":{"line":20,"column":8,"offset":141},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":134},"end":{"line":20,"column":8,"offset":141},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#配置项","title":null,"children":[],"data":{"hProperties":{"aria-label":"配置项 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"配置项","position":{"start":{"line":23,"column":4,"offset":147},"end":{"line":23,"column":7,"offset":150},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":144},"end":{"line":23,"column":7,"offset":150},"indent":[]},"data":{"id":"配置项","htmlAttributes":{"id":"配置项"},"hProperties":{"id":"配置项"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#visable","title":null,"children":[],"data":{"hProperties":{"aria-label":"visable permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"visable","position":{"start":{"line":25,"column":5,"offset":156},"end":{"line":25,"column":12,"offset":163},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":152},"end":{"line":25,"column":12,"offset":163},"indent":[]},"data":{"id":"visable","htmlAttributes":{"id":"visable"},"hProperties":{"id":"visable"}}},{"type":"paragraph","children":[{"type":"text","value":"图层是否可见   {bool } default true","position":{"start":{"line":26,"column":1,"offset":164},"end":{"line":26,"column":31,"offset":194},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":164},"end":{"line":26,"column":31,"offset":194},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#zindex","title":null,"children":[],"data":{"hProperties":{"aria-label":"zindex permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"zIndex","position":{"start":{"line":28,"column":5,"offset":200},"end":{"line":28,"column":11,"offset":206},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":196},"end":{"line":28,"column":11,"offset":206},"indent":[]},"data":{"id":"zindex","htmlAttributes":{"id":"zindex"},"hProperties":{"id":"zindex"}}},{"type":"paragraph","children":[{"type":"text","value":" 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0","position":{"start":{"line":29,"column":1,"offset":207},"end":{"line":29,"column":50,"offset":256},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":207},"end":{"line":29,"column":50,"offset":256},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#minzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"minzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"minZoom","position":{"start":{"line":30,"column":5,"offset":261},"end":{"line":30,"column":12,"offset":268},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":257},"end":{"line":30,"column":12,"offset":268},"indent":[]},"data":{"id":"minzoom","htmlAttributes":{"id":"minzoom"},"hProperties":{"id":"minzoom"}}},{"type":"paragraph","children":[{"type":"text","value":"图层显示最小缩放等级，（0-18）   {number}  default 0","position":{"start":{"line":31,"column":1,"offset":269},"end":{"line":31,"column":40,"offset":308},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":269},"end":{"line":31,"column":40,"offset":308},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#maxzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"maxzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"maxZoom","position":{"start":{"line":33,"column":5,"offset":314},"end":{"line":33,"column":12,"offset":321},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":310},"end":{"line":33,"column":12,"offset":321},"indent":[]},"data":{"id":"maxzoom","htmlAttributes":{"id":"maxzoom"},"hProperties":{"id":"maxzoom"}}},{"type":"paragraph","children":[{"type":"text","value":" 图层显示最大缩放等级 （0-18）   {number}  default 18","position":{"start":{"line":34,"column":1,"offset":322},"end":{"line":34,"column":42,"offset":363},"indent":[]}}],"position":{"start":{"line":34,"column":1,"offset":322},"end":{"line":34,"column":42,"offset":363},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#鼠标事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"鼠标事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"鼠标事件","position":{"start":{"line":37,"column":4,"offset":369},"end":{"line":37,"column":8,"offset":373},"indent":[]}}],"position":{"start":{"line":37,"column":1,"offset":366},"end":{"line":37,"column":9,"offset":374},"indent":[]},"data":{"id":"鼠标事件","htmlAttributes":{"id":"鼠标事件"},"hProperties":{"id":"鼠标事件"}}},{"type":"paragraph","children":[{"type":"text","value":"beta版当前不支持，正式版会支持","position":{"start":{"line":39,"column":1,"offset":376},"end":{"line":39,"column":18,"offset":393},"indent":[]}}],"position":{"start":{"line":39,"column":1,"offset":376},"end":{"line":39,"column":18,"offset":393},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
","position":{"start":{"line":41,"column":1,"offset":395},"end":{"line":52,"column":4,"offset":904},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":55,"column":4,"offset":910},"end":{"line":55,"column":6,"offset":912},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":907},"end":{"line":55,"column":6,"offset":912},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#source","title":null,"children":[],"data":{"hProperties":{"aria-label":"source permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"source","position":{"start":{"line":57,"column":5,"offset":918},"end":{"line":57,"column":11,"offset":924},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":914},"end":{"line":57,"column":11,"offset":924},"indent":[]},"data":{"id":"source","htmlAttributes":{"id":"source"},"hProperties":{"id":"source"}}},{"type":"paragraph","children":[{"type":"text","value":"数据源为layer设置数据 source(data,config)","position":{"start":{"line":58,"column":1,"offset":925},"end":{"line":58,"column":35,"offset":959},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":925},"end":{"line":58,"column":35,"offset":959},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"data {geojson|json|csv}","position":{"start":{"line":60,"column":3,"offset":963},"end":{"line":60,"column":26,"offset":986},"indent":[]}}],"position":{"start":{"line":60,"column":3,"offset":963},"end":{"line":60,"column":26,"offset":986},"indent":[]}}],"position":{"start":{"line":60,"column":1,"offset":961},"end":{"line":60,"column":26,"offset":986},"indent":[]}}],"position":{"start":{"line":60,"column":1,"offset":961},"end":{"line":60,"column":26,"offset":986},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"      源数据","position":{"start":{"line":63,"column":1,"offset":989},"end":{"line":63,"column":11,"offset":999},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":989},"end":{"line":63,"column":11,"offset":999},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"config  可选 数据源配置项","position":{"start":{"line":65,"column":3,"offset":1003},"end":{"line":65,"column":20,"offset":1020},"indent":[]}}],"position":{"start":{"line":65,"column":3,"offset":1003},"end":{"line":65,"column":20,"offset":1020},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"parser 数据解析，默认是解析层geojson","position":{"start":{"line":66,"column":5,"offset":1025},"end":{"line":66,"column":30,"offset":1050},"indent":[]}}],"position":{"start":{"line":66,"column":5,"offset":1025},"end":{"line":66,"column":30,"offset":1050},"indent":[]}}],"position":{"start":{"line":66,"column":3,"offset":1023},"end":{"line":66,"column":30,"offset":1050},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"transforms ","position":{"start":{"line":67,"column":5,"offset":1055},"end":{"line":67,"column":16,"offset":1066},"indent":[]}},{"type":"linkReference","identifier":"transform，transform ","label":"transform，transform ","referenceType":"shortcut","children":[{"type":"text","value":"transform，transform ","position":{"start":{"line":67,"column":17,"offset":1067},"end":{"line":67,"column":37,"offset":1087},"indent":[]}}],"position":{"start":{"line":67,"column":16,"offset":1066},"end":{"line":67,"column":38,"offset":1088},"indent":[]}},{"type":"text","value":"  数据处理转换 可设置多个","position":{"start":{"line":67,"column":38,"offset":1088},"end":{"line":67,"column":52,"offset":1102},"indent":[]}}],"position":{"start":{"line":67,"column":5,"offset":1055},"end":{"line":67,"column":52,"offset":1102},"indent":[]}}],"position":{"start":{"line":67,"column":3,"offset":1053},"end":{"line":67,"column":52,"offset":1102},"indent":[]}}],"position":{"start":{"line":66,"column":3,"offset":1023},"end":{"line":67,"column":52,"offset":1102},"indent":[3]}}],"position":{"start":{"line":65,"column":1,"offset":1001},"end":{"line":67,"column":52,"offset":1102},"indent":[1,1]}}],"position":{"start":{"line":65,"column":1,"offset":1001},"end":{"line":67,"column":52,"offset":1102},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":" parser和 transforms ","position":{"start":{"line":69,"column":1,"offset":1104},"end":{"line":69,"column":21,"offset":1124},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/l7/source","children":[{"type":"text","value":"见source文档","position":{"start":{"line":69,"column":22,"offset":1125},"end":{"line":69,"column":31,"offset":1134},"indent":[]}}],"position":{"start":{"line":69,"column":21,"offset":1124},"end":{"line":69,"column":70,"offset":1173},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":69,"column":1,"offset":1104},"end":{"line":69,"column":70,"offset":1173},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
","position":{"start":{"line":71,"column":1,"offset":1175},"end":{"line":99,"column":4,"offset":1746},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#","title":null,"children":[],"data":{"hProperties":{"aria-label":" permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}}],"position":{"start":{"line":101,"column":1,"offset":1748},"end":{"line":101,"column":5,"offset":1752},"indent":[]},"data":{"id":"","htmlAttributes":{"id":""},"hProperties":{"id":""}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#scale","title":null,"children":[],"data":{"hProperties":{"aria-label":"scale permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"scale","position":{"start":{"line":103,"column":5,"offset":1758},"end":{"line":103,"column":10,"offset":1763},"indent":[]}}],"position":{"start":{"line":103,"column":1,"offset":1754},"end":{"line":103,"column":10,"offset":1763},"indent":[]},"data":{"id":"scale","htmlAttributes":{"id":"scale"},"hProperties":{"id":"scale"}}},{"type":"paragraph","children":[{"type":"text","value":"cscle('field', scaleConfig)","position":{"start":{"line":106,"column":1,"offset":1766},"end":{"line":106,"column":28,"offset":1793},"indent":[]}}],"position":{"start":{"line":106,"column":1,"offset":1766},"end":{"line":106,"column":28,"offset":1793},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"(field: string, scaleConfig: object)","position":{"start":{"line":108,"column":1,"offset":1795},"end":{"line":108,"column":37,"offset":1831},"indent":[]}}],"position":{"start":{"line":108,"column":1,"offset":1795},"end":{"line":108,"column":37,"offset":1831},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"为指定的数据字段进行列定义，返回 layer 实例。","position":{"start":{"line":110,"column":1,"offset":1833},"end":{"line":110,"column":27,"offset":1859},"indent":[]}}],"position":{"start":{"line":110,"column":1,"offset":1833},"end":{"line":110,"column":27,"offset":1859},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"field","position":{"start":{"line":114,"column":3,"offset":1865},"end":{"line":114,"column":10,"offset":1872},"indent":[]}},{"type":"text","value":" 字段名。","position":{"start":{"line":114,"column":10,"offset":1872},"end":{"line":114,"column":15,"offset":1877},"indent":[]}}],"position":{"start":{"line":114,"column":3,"offset":1865},"end":{"line":114,"column":15,"offset":1877},"indent":[]}}],"position":{"start":{"line":114,"column":1,"offset":1863},"end":{"line":115,"column":1,"offset":1878},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"scaleConfig","position":{"start":{"line":116,"column":3,"offset":1881},"end":{"line":116,"column":16,"offset":1894},"indent":[]}},{"type":"text","value":" 列定义配置，对象类型，可配置的属性如下：","position":{"start":{"line":116,"column":16,"offset":1894},"end":{"line":116,"column":37,"offset":1915},"indent":[]}}],"position":{"start":{"line":116,"column":3,"offset":1881},"end":{"line":116,"column":37,"offset":1915},"indent":[]}}],"position":{"start":{"line":116,"column":1,"offset":1879},"end":{"line":116,"column":37,"offset":1915},"indent":[]}}],"position":{"start":{"line":114,"column":1,"offset":1863},"end":{"line":116,"column":37,"offset":1915},"indent":[1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
","position":{"start":{"line":118,"column":1,"offset":1917},"end":{"line":123,"column":4,"offset":2035},"indent":[1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#size","title":null,"children":[],"data":{"hProperties":{"aria-label":"size permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size","position":{"start":{"line":125,"column":5,"offset":2041},"end":{"line":125,"column":9,"offset":2045},"indent":[]}}],"position":{"start":{"line":125,"column":1,"offset":2037},"end":{"line":125,"column":9,"offset":2045},"indent":[]},"data":{"id":"size","htmlAttributes":{"id":"size"},"hProperties":{"id":"size"}}},{"type":"paragraph","children":[{"type":"text","value":"将数据值映射到图形的大小上的方法。","position":{"start":{"line":127,"column":1,"offset":2047},"end":{"line":127,"column":18,"offset":2064},"indent":[]}}],"position":{"start":{"line":127,"column":1,"offset":2047},"end":{"line":127,"column":18,"offset":2064},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"注意：","position":{"start":{"line":129,"column":3,"offset":2068},"end":{"line":129,"column":6,"offset":2071},"indent":[]}}],"position":{"start":{"line":129,"column":1,"offset":2066},"end":{"line":129,"column":8,"offset":2073},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":129,"column":8,"offset":2073},"end":{"line":129,"column":9,"offset":2074},"indent":[]}}],"position":{"start":{"line":129,"column":1,"offset":2066},"end":{"line":129,"column":9,"offset":2074},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"不同图层的 size 的含义有所差别：","position":{"start":{"line":131,"column":1,"offset":2076},"end":{"line":131,"column":20,"offset":2095},"indent":[]}}],"position":{"start":{"line":131,"column":1,"offset":2076},"end":{"line":131,"column":20,"offset":2095},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"point 图形的 size 影响点的半径大小和高度；","position":{"start":{"line":133,"column":3,"offset":2099},"end":{"line":133,"column":30,"offset":2126},"indent":[]}}],"position":{"start":{"line":133,"column":3,"offset":2099},"end":{"line":133,"column":30,"offset":2126},"indent":[]}}],"position":{"start":{"line":133,"column":1,"offset":2097},"end":{"line":134,"column":1,"offset":2127},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"line, arc, path 中的 size 影响线的粗细,和高度；","position":{"start":{"line":135,"column":3,"offset":2130},"end":{"line":135,"column":38,"offset":2165},"indent":[]}}],"position":{"start":{"line":135,"column":3,"offset":2130},"end":{"line":135,"column":38,"offset":2165},"indent":[]}}],"position":{"start":{"line":135,"column":1,"offset":2128},"end":{"line":136,"column":1,"offset":2166},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"polygon size 影响的是高度","position":{"start":{"line":137,"column":3,"offset":2169},"end":{"line":137,"column":22,"offset":2188},"indent":[]}}],"position":{"start":{"line":137,"column":3,"offset":2169},"end":{"line":137,"column":22,"offset":2188},"indent":[]}}],"position":{"start":{"line":137,"column":1,"offset":2167},"end":{"line":137,"column":22,"offset":2188},"indent":[]}}],"position":{"start":{"line":133,"column":1,"offset":2097},"end":{"line":137,"column":22,"offset":2188},"indent":[1,1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
","position":{"start":{"line":141,"column":1,"offset":2192},"end":{"line":151,"column":4,"offset":2434},"indent":[1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#sizevalue）","title":null,"children":[],"data":{"hProperties":{"aria-label":"sizevalue） permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size(value）","position":{"start":{"line":154,"column":6,"offset":2442},"end":{"line":154,"column":17,"offset":2453},"indent":[]}}],"position":{"start":{"line":154,"column":1,"offset":2437},"end":{"line":154,"column":17,"offset":2453},"indent":[]},"data":{"id":"sizevalue）","htmlAttributes":{"id":"sizevalue）"},"hProperties":{"id":"sizevalue）"}}},{"type":"paragraph","children":[{"type":"text","value":"传入数字常量，如 ","position":{"start":{"line":156,"column":1,"offset":2455},"end":{"line":156,"column":10,"offset":2464},"indent":[]}},{"type":"html","value":"pointLayer.size(20)","position":{"start":{"line":156,"column":10,"offset":2464},"end":{"line":156,"column":31,"offset":2485},"indent":[]}}],"position":{"start":{"line":156,"column":1,"offset":2455},"end":{"line":156,"column":31,"offset":2485},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#sizefield","title":null,"children":[],"data":{"hProperties":{"aria-label":"sizefield permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size(field)","position":{"start":{"line":158,"column":6,"offset":2492},"end":{"line":158,"column":17,"offset":2503},"indent":[]}}],"position":{"start":{"line":158,"column":1,"offset":2487},"end":{"line":158,"column":17,"offset":2503},"indent":[]},"data":{"id":"sizefield","htmlAttributes":{"id":"sizefield"},"hProperties":{"id":"sizefield"}}},{"type":"paragraph","children":[{"type":"text","value":"根据 field 字段的值映射大小，使用默认的","position":{"start":{"line":159,"column":1,"offset":2504},"end":{"line":159,"column":24,"offset":2527},"indent":[]}},{"type":"html","value":"最大值 max:10","position":{"start":{"line":159,"column":24,"offset":2527},"end":{"line":159,"column":36,"offset":2539},"indent":[]}},{"type":"text","value":" 和","position":{"start":{"line":159,"column":36,"offset":2539},"end":{"line":159,"column":38,"offset":2541},"indent":[]}},{"type":"html","value":"最小值 min: 1","position":{"start":{"line":159,"column":38,"offset":2541},"end":{"line":159,"column":50,"offset":2553},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":159,"column":50,"offset":2553},"end":{"line":159,"column":51,"offset":2554},"indent":[]}}],"position":{"start":{"line":159,"column":1,"offset":2504},"end":{"line":159,"column":51,"offset":2554},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#sizefield-callback","title":null,"children":[],"data":{"hProperties":{"aria-label":"sizefield callback permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size(field, callback)","position":{"start":{"line":161,"column":6,"offset":2561},"end":{"line":161,"column":27,"offset":2582},"indent":[]}}],"position":{"start":{"line":161,"column":1,"offset":2556},"end":{"line":161,"column":27,"offset":2582},"indent":[]},"data":{"id":"sizefield-callback","htmlAttributes":{"id":"sizefield-callback"},"hProperties":{"id":"sizefield-callback"}}},{"type":"paragraph","children":[{"type":"text","value":"使用回调函数控制图形大小。","position":{"start":{"line":162,"column":1,"offset":2583},"end":{"line":162,"column":14,"offset":2596},"indent":[]}}],"position":{"start":{"line":162,"column":1,"offset":2583},"end":{"line":162,"column":14,"offset":2596},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"callback","position":{"start":{"line":164,"column":3,"offset":2600},"end":{"line":164,"column":13,"offset":2610},"indent":[]}},{"type":"text","value":": function 回调函数。","position":{"start":{"line":164,"column":13,"offset":2610},"end":{"line":164,"column":29,"offset":2626},"indent":[]}}],"position":{"start":{"line":164,"column":3,"offset":2600},"end":{"line":164,"column":29,"offset":2626},"indent":[]}}],"position":{"start":{"line":164,"column":1,"offset":2598},"end":{"line":164,"column":29,"offset":2626},"indent":[]}}],"position":{"start":{"line":164,"column":1,"offset":2598},"end":{"line":164,"column":29,"offset":2626},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
","position":{"start":{"line":166,"column":1,"offset":2628},"end":{"line":173,"column":4,"offset":2736},"indent":[1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#color","title":null,"children":[],"data":{"hProperties":{"aria-label":"color permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"color","position":{"start":{"line":175,"column":5,"offset":2742},"end":{"line":175,"column":10,"offset":2747},"indent":[]}}],"position":{"start":{"line":175,"column":1,"offset":2738},"end":{"line":175,"column":10,"offset":2747},"indent":[]},"data":{"id":"color","htmlAttributes":{"id":"color"},"hProperties":{"id":"color"}}},{"type":"paragraph","children":[{"type":"text","value":"将数据值映射到图形的颜色上的方法。","position":{"start":{"line":177,"column":1,"offset":2749},"end":{"line":177,"column":18,"offset":2766},"indent":[]}}],"position":{"start":{"line":177,"column":1,"offset":2749},"end":{"line":177,"column":18,"offset":2766},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
","position":{"start":{"line":179,"column":1,"offset":2768},"end":{"line":195,"column":4,"offset":3152},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#colorvalue","title":null,"children":[],"data":{"hProperties":{"aria-label":"colorvalue permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"color(value)","position":{"start":{"line":198,"column":6,"offset":3160},"end":{"line":198,"column":18,"offset":3172},"indent":[]}}],"position":{"start":{"line":198,"column":1,"offset":3155},"end":{"line":198,"column":18,"offset":3172},"indent":[]},"data":{"id":"colorvalue","htmlAttributes":{"id":"colorvalue"},"hProperties":{"id":"colorvalue"}}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":201,"column":1,"offset":3175},"end":{"line":201,"column":4,"offset":3178},"indent":[]}},{"type":"html","value":"value","position":{"start":{"line":201,"column":4,"offset":3178},"end":{"line":201,"column":11,"offset":3185},"indent":[]}},{"type":"text","value":" ：string\n只支持接收一个参数，value 可以是：","position":{"start":{"line":201,"column":11,"offset":3185},"end":{"line":202,"column":21,"offset":3214},"indent":[1]}}],"position":{"start":{"line":201,"column":1,"offset":3175},"end":{"line":202,"column":21,"offset":3214},"indent":[1]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。","position":{"start":{"line":204,"column":3,"offset":3218},"end":{"line":204,"column":64,"offset":3279},"indent":[]}}],"position":{"start":{"line":204,"column":3,"offset":3218},"end":{"line":204,"column":64,"offset":3279},"indent":[]}}],"position":{"start":{"line":204,"column":1,"offset":3216},"end":{"line":205,"column":1,"offset":3280},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。","position":{"start":{"line":206,"column":3,"offset":3283},"end":{"line":206,"column":80,"offset":3360},"indent":[]}}],"position":{"start":{"line":206,"column":3,"offset":3283},"end":{"line":206,"column":80,"offset":3360},"indent":[]}}],"position":{"start":{"line":206,"column":1,"offset":3281},"end":{"line":206,"column":80,"offset":3360},"indent":[]}}],"position":{"start":{"line":204,"column":1,"offset":3216},"end":{"line":206,"column":80,"offset":3360},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"示例","position":{"start":{"line":209,"column":1,"offset":3363},"end":{"line":209,"column":3,"offset":3365},"indent":[]}}],"position":{"start":{"line":209,"column":1,"offset":3363},"end":{"line":209,"column":3,"offset":3365},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
","position":{"start":{"line":210,"column":1,"offset":3366},"end":{"line":213,"column":4,"offset":3442},"indent":[1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#colorfield-colors","title":null,"children":[],"data":{"hProperties":{"aria-label":"colorfield colors permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"color(field, colors)","position":{"start":{"line":216,"column":6,"offset":3450},"end":{"line":216,"column":26,"offset":3470},"indent":[]}}],"position":{"start":{"line":216,"column":1,"offset":3445},"end":{"line":216,"column":26,"offset":3470},"indent":[]},"data":{"id":"colorfield-colors","htmlAttributes":{"id":"colorfield-colors"},"hProperties":{"id":"colorfield-colors"}}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":218,"column":1,"offset":3472},"end":{"line":218,"column":4,"offset":3475},"indent":[]}}],"position":{"start":{"line":218,"column":1,"offset":3472},"end":{"line":218,"column":4,"offset":3475},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"field","position":{"start":{"line":220,"column":3,"offset":3479},"end":{"line":220,"column":10,"offset":3486},"indent":[]}},{"type":"text","value":": stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。","position":{"start":{"line":220,"column":10,"offset":3486},"end":{"line":220,"column":50,"offset":3526},"indent":[]}}],"position":{"start":{"line":220,"column":3,"offset":3479},"end":{"line":220,"column":50,"offset":3526},"indent":[]}}],"position":{"start":{"line":220,"column":1,"offset":3477},"end":{"line":221,"column":1,"offset":3527},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" ","position":{"start":{"line":222,"column":3,"offset":3530},"end":{"line":222,"column":4,"offset":3531},"indent":[]}},{"type":"html","value":"colors","position":{"start":{"line":222,"column":4,"offset":3531},"end":{"line":222,"column":12,"offset":3539},"indent":[]}},{"type":"text","value":": string | array | function","position":{"start":{"line":222,"column":12,"offset":3539},"end":{"line":222,"column":39,"offset":3566},"indent":[]}}],"position":{"start":{"line":222,"column":3,"offset":3530},"end":{"line":222,"column":39,"offset":3566},"indent":[]}}],"position":{"start":{"line":222,"column":1,"offset":3528},"end":{"line":222,"column":39,"offset":3566},"indent":[]}}],"position":{"start":{"line":220,"column":1,"offset":3477},"end":{"line":222,"column":39,"offset":3566},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。","position":{"start":{"line":225,"column":1,"offset":3569},"end":{"line":225,"column":94,"offset":3662},"indent":[]}}],"position":{"start":{"line":225,"column":1,"offset":3569},"end":{"line":225,"column":94,"offset":3662},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
","position":{"start":{"line":227,"column":1,"offset":3664},"end":{"line":230,"column":4,"offset":3766},"indent":[1,1,1]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：","position":{"start":{"line":232,"column":3,"offset":3770},"end":{"line":232,"column":74,"offset":3841},"indent":[]}}],"position":{"start":{"line":232,"column":3,"offset":3770},"end":{"line":232,"column":74,"offset":3841},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":3768},"end":{"line":232,"column":74,"offset":3841},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":3768},"end":{"line":232,"column":74,"offset":3841},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
","position":{"start":{"line":236,"column":1,"offset":3845},"end":{"line":249,"column":4,"offset":4084},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"shape","position":{"start":{"line":251,"column":5,"offset":4090},"end":{"line":251,"column":10,"offset":4095},"indent":[]}}],"position":{"start":{"line":251,"column":1,"offset":4086},"end":{"line":251,"column":10,"offset":4095},"indent":[]},"data":{"id":"shape","htmlAttributes":{"id":"shape"},"hProperties":{"id":"shape"}}},{"type":"paragraph","children":[{"type":"text","value":"将数据值映射到图形的形状上的方法。","position":{"start":{"line":252,"column":1,"offset":4096},"end":{"line":252,"column":18,"offset":4113},"indent":[]}}],"position":{"start":{"line":252,"column":1,"offset":4096},"end":{"line":252,"column":18,"offset":4113},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"shape(shape)","position":{"start":{"line":254,"column":3,"offset":4117},"end":{"line":254,"column":15,"offset":4129},"indent":[]}}],"position":{"start":{"line":254,"column":1,"offset":4115},"end":{"line":254,"column":17,"offset":4131},"indent":[]}}],"position":{"start":{"line":254,"column":1,"offset":4115},"end":{"line":254,"column":17,"offset":4131},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"参数","position":{"start":{"line":256,"column":1,"offset":4133},"end":{"line":256,"column":3,"offset":4135},"indent":[]}},{"type":"html","value":"shape","position":{"start":{"line":256,"column":3,"offset":4135},"end":{"line":256,"column":10,"offset":4142},"indent":[]}},{"type":"text","value":" string","position":{"start":{"line":256,"column":10,"offset":4142},"end":{"line":256,"column":17,"offset":4149},"indent":[]}}],"position":{"start":{"line":256,"column":1,"offset":4133},"end":{"line":256,"column":17,"offset":4149},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状","position":{"start":{"line":258,"column":1,"offset":4151},"end":{"line":258,"column":55,"offset":4205},"indent":[]}}],"position":{"start":{"line":258,"column":1,"offset":4151},"end":{"line":258,"column":55,"offset":4205},"indent":[]}},{"type":"table","align":[null,null,null],"children":[{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"layer类型","position":{"start":{"line":260,"column":3,"offset":4209},"end":{"line":260,"column":10,"offset":4216},"indent":[]}}],"position":{"start":{"line":260,"column":3,"offset":4209},"end":{"line":260,"column":10,"offset":4216},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"shape类型","position":{"start":{"line":260,"column":13,"offset":4219},"end":{"line":260,"column":20,"offset":4226},"indent":[]}}],"position":{"start":{"line":260,"column":13,"offset":4219},"end":{"line":260,"column":20,"offset":4226},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"备注","position":{"start":{"line":260,"column":23,"offset":4229},"end":{"line":260,"column":25,"offset":4231},"indent":[]}}],"position":{"start":{"line":260,"column":23,"offset":4229},"end":{"line":260,"column":25,"offset":4231},"indent":[]}}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":260,"column":27,"offset":4233},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"point","position":{"start":{"line":262,"column":3,"offset":4256},"end":{"line":262,"column":8,"offset":4261},"indent":[]}}],"position":{"start":{"line":262,"column":3,"offset":4256},"end":{"line":262,"column":8,"offset":4261},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square","position":{"start":{"line":262,"column":11,"offset":4264},"end":{"line":262,"column":97,"offset":4350},"indent":[]}}],"position":{"start":{"line":262,"column":11,"offset":4264},"end":{"line":262,"column":97,"offset":4350},"indent":[]}},{"type":"tableCell","children":[],"position":{"start":{"line":262,"column":101,"offset":4354},"end":{"line":262,"column":101,"offset":4354},"indent":[]}}],"position":{"start":{"line":262,"column":1,"offset":4254},"end":{"line":262,"column":102,"offset":4355},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"line","position":{"start":{"line":263,"column":3,"offset":4358},"end":{"line":263,"column":7,"offset":4362},"indent":[]}}],"position":{"start":{"line":263,"column":3,"offset":4358},"end":{"line":263,"column":7,"offset":4362},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"line,arc, arc3d, greatcircle","position":{"start":{"line":263,"column":10,"offset":4365},"end":{"line":263,"column":38,"offset":4393},"indent":[]}}],"position":{"start":{"line":263,"column":10,"offset":4365},"end":{"line":263,"column":38,"offset":4393},"indent":[]}},{"type":"tableCell","children":[],"position":{"start":{"line":263,"column":42,"offset":4397},"end":{"line":263,"column":42,"offset":4397},"indent":[]}}],"position":{"start":{"line":263,"column":1,"offset":4356},"end":{"line":263,"column":43,"offset":4398},"indent":[]}},{"type":"tableRow","children":[{"type":"tableCell","children":[{"type":"text","value":"polygon","position":{"start":{"line":264,"column":3,"offset":4401},"end":{"line":264,"column":10,"offset":4408},"indent":[]}}],"position":{"start":{"line":264,"column":3,"offset":4401},"end":{"line":264,"column":10,"offset":4408},"indent":[]}},{"type":"tableCell","children":[{"type":"text","value":"fill,line, extrude","position":{"start":{"line":264,"column":13,"offset":4411},"end":{"line":264,"column":31,"offset":4429},"indent":[]}}],"position":{"start":{"line":264,"column":13,"offset":4411},"end":{"line":264,"column":31,"offset":4429},"indent":[]}},{"type":"tableCell","children":[],"position":{"start":{"line":264,"column":35,"offset":4433},"end":{"line":264,"column":35,"offset":4433},"indent":[]}}],"position":{"start":{"line":264,"column":1,"offset":4399},"end":{"line":264,"column":36,"offset":4434},"indent":[]}}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":264,"column":36,"offset":4434},"indent":[1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"shape(field, shapes)","position":{"start":{"line":267,"column":3,"offset":4439},"end":{"line":267,"column":23,"offset":4459},"indent":[]}}],"position":{"start":{"line":267,"column":1,"offset":4437},"end":{"line":267,"column":25,"offset":4461},"indent":[]}}],"position":{"start":{"line":267,"column":1,"offset":4437},"end":{"line":267,"column":25,"offset":4461},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"shape(field, callback)","position":{"start":{"line":269,"column":3,"offset":4465},"end":{"line":269,"column":25,"offset":4487},"indent":[]}}],"position":{"start":{"line":269,"column":1,"offset":4463},"end":{"line":269,"column":27,"offset":4489},"indent":[]}}],"position":{"start":{"line":269,"column":1,"offset":4463},"end":{"line":269,"column":27,"offset":4489},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#style","title":null,"children":[],"data":{"hProperties":{"aria-label":"style permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"style","position":{"start":{"line":272,"column":5,"offset":4496},"end":{"line":272,"column":10,"offset":4501},"indent":[]}}],"position":{"start":{"line":272,"column":1,"offset":4492},"end":{"line":272,"column":10,"offset":4501},"indent":[]},"data":{"id":"style","htmlAttributes":{"id":"style"},"hProperties":{"id":"style"}}},{"type":"paragraph","children":[{"type":"text","value":"用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放","position":{"start":{"line":274,"column":1,"offset":4503},"end":{"line":274,"column":32,"offset":4534},"indent":[]}}],"position":{"start":{"line":274,"column":1,"offset":4503},"end":{"line":274,"column":32,"offset":4534},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"fill","position":{"start":{"line":276,"column":3,"offset":4538},"end":{"line":276,"column":7,"offset":4542},"indent":[]}}],"position":{"start":{"line":276,"column":3,"offset":4538},"end":{"line":276,"column":7,"offset":4542},"indent":[]}}],"position":{"start":{"line":276,"column":1,"offset":4536},"end":{"line":277,"column":1,"offset":4543},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"opacity  设置透明度","position":{"start":{"line":278,"column":3,"offset":4546},"end":{"line":278,"column":17,"offset":4560},"indent":[]}}],"position":{"start":{"line":278,"column":3,"offset":4546},"end":{"line":278,"column":17,"offset":4560},"indent":[]}}],"position":{"start":{"line":278,"column":1,"offset":4544},"end":{"line":279,"column":1,"offset":4561},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"stroke 线填充颜色","position":{"start":{"line":280,"column":3,"offset":4564},"end":{"line":280,"column":16,"offset":4577},"indent":[]}}],"position":{"start":{"line":280,"column":3,"offset":4564},"end":{"line":280,"column":16,"offset":4577},"indent":[]}}],"position":{"start":{"line":280,"column":1,"offset":4562},"end":{"line":281,"column":1,"offset":4578},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"strokeWidth 线的宽度","position":{"start":{"line":282,"column":3,"offset":4581},"end":{"line":282,"column":19,"offset":4597},"indent":[]}}],"position":{"start":{"line":282,"column":3,"offset":4581},"end":{"line":282,"column":19,"offset":4597},"indent":[]}}],"position":{"start":{"line":282,"column":1,"offset":4579},"end":{"line":282,"column":19,"offset":4597},"indent":[]}}],"position":{"start":{"line":276,"column":1,"offset":4536},"end":{"line":282,"column":19,"offset":4597},"indent":[1,1,1,1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
","position":{"start":{"line":285,"column":1,"offset":4600},"end":{"line":291,"column":4,"offset":4686},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#show","title":null,"children":[],"data":{"hProperties":{"aria-label":"show permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"show","position":{"start":{"line":294,"column":5,"offset":4693},"end":{"line":294,"column":9,"offset":4697},"indent":[]}}],"position":{"start":{"line":294,"column":1,"offset":4689},"end":{"line":294,"column":9,"offset":4697},"indent":[]},"data":{"id":"show","htmlAttributes":{"id":"show"},"hProperties":{"id":"show"}}},{"type":"paragraph","children":[{"type":"text","value":"图层显示","position":{"start":{"line":295,"column":1,"offset":4698},"end":{"line":295,"column":5,"offset":4702},"indent":[]}}],"position":{"start":{"line":295,"column":1,"offset":4698},"end":{"line":295,"column":5,"offset":4702},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.show();\n
","position":{"start":{"line":297,"column":1,"offset":4704},"end":{"line":299,"column":4,"offset":4735},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#hide","title":null,"children":[],"data":{"hProperties":{"aria-label":"hide permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"hide","position":{"start":{"line":302,"column":5,"offset":4742},"end":{"line":302,"column":9,"offset":4746},"indent":[]}}],"position":{"start":{"line":302,"column":1,"offset":4738},"end":{"line":302,"column":9,"offset":4746},"indent":[]},"data":{"id":"hide","htmlAttributes":{"id":"hide"},"hProperties":{"id":"hide"}}},{"type":"paragraph","children":[{"type":"text","value":"图层隐藏","position":{"start":{"line":304,"column":1,"offset":4748},"end":{"line":304,"column":5,"offset":4752},"indent":[]}}],"position":{"start":{"line":304,"column":1,"offset":4748},"end":{"line":304,"column":5,"offset":4752},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.hide();\n
","position":{"start":{"line":306,"column":1,"offset":4754},"end":{"line":308,"column":4,"offset":4785},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#fitbounds","title":null,"children":[],"data":{"hProperties":{"aria-label":"fitbounds permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"fitBounds","position":{"start":{"line":311,"column":5,"offset":4792},"end":{"line":311,"column":14,"offset":4801},"indent":[]}}],"position":{"start":{"line":311,"column":1,"offset":4788},"end":{"line":311,"column":14,"offset":4801},"indent":[]},"data":{"id":"fitbounds","htmlAttributes":{"id":"fitbounds"},"hProperties":{"id":"fitbounds"}}},{"type":"paragraph","children":[{"type":"text","value":"缩放到图层范围","position":{"start":{"line":313,"column":1,"offset":4803},"end":{"line":313,"column":8,"offset":4810},"indent":[]}}],"position":{"start":{"line":313,"column":1,"offset":4803},"end":{"line":313,"column":8,"offset":4810},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.fitBounds();\n
","position":{"start":{"line":315,"column":1,"offset":4812},"end":{"line":318,"column":4,"offset":4848},"indent":[1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":318,"column":4,"offset":4848}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-b784ae409e25da4eab19f7ac590f9d32.json b/.cache/caches/gatsby-transformer-remark/diskstore-b784ae409e25da4eab19f7ac590f9d32.json deleted file mode 100644 index 0ab33c7559..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-b784ae409e25da4eab19f7ac590f9d32.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-43103af0e6fac5c913a4ee2d647171d6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-b98709850b300298b6cac354f011e2cd.json b/.cache/caches/gatsby-transformer-remark/diskstore-b98709850b300298b6cac354f011e2cd.json deleted file mode 100644 index 128ac8b4bd..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-b98709850b300298b6cac354f011e2cd.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-3b51eb4af3d4a5698e9dc244ba9364a5-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#geojson-数据介绍","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson 数据介绍 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"geojson 数据介绍","position":{"start":{"line":3,"column":3,"offset":4},"end":{"line":3,"column":15,"offset":16},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":15,"offset":16},"indent":[]},"data":{"id":"geojson-数据介绍","htmlAttributes":{"id":"geojson-数据介绍"},"hProperties":{"id":"geojson-数据介绍"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":6,"column":4,"offset":22},"end":{"line":6,"column":6,"offset":24},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":19},"end":{"line":6,"column":6,"offset":24},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"paragraph","children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":8,"column":1,"offset":26},"end":{"line":8,"column":126,"offset":151},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":26},"end":{"line":8,"column":126,"offset":151},"indent":[]}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"","children":[{"type":"text","value":"geojson详细文档","position":{"start":{"line":10,"column":2,"offset":154},"end":{"line":10,"column":13,"offset":165},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":153},"end":{"line":10,"column":16,"offset":168},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":153},"end":{"line":10,"column":16,"offset":168},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#geojson相关的js库","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson相关的js库 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Geojson相关的JS库","position":{"start":{"line":12,"column":4,"offset":173},"end":{"line":12,"column":17,"offset":186},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":170},"end":{"line":12,"column":17,"offset":186},"indent":[]},"data":{"id":"geojson相关的js库","htmlAttributes":{"id":"geojson相关的js库"},"hProperties":{"id":"geojson相关的js库"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#地理统计分析工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"地理统计分析工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":14,"column":5,"offset":192},"end":{"line":14,"column":13,"offset":200},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":188},"end":{"line":14,"column":13,"offset":200},"indent":[]},"data":{"id":"地理统计分析工具","htmlAttributes":{"id":"地理统计分析工具"},"hProperties":{"id":"地理统计分析工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://turfjs.org/","children":[{"type":"text","value":"turfjs","position":{"start":{"line":16,"column":2,"offset":203},"end":{"line":16,"column":8,"offset":209},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":202},"end":{"line":16,"column":29,"offset":230},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":16,"column":29,"offset":230},"end":{"line":16,"column":60,"offset":261},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":202},"end":{"line":16,"column":60,"offset":261},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#在线工具：","title":null,"children":[],"data":{"hProperties":{"aria-label":"在线工具： permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"在线工具：","position":{"start":{"line":19,"column":5,"offset":268},"end":{"line":19,"column":10,"offset":273},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":264},"end":{"line":19,"column":10,"offset":273},"indent":[]},"data":{"id":"在线工具：","htmlAttributes":{"id":"在线工具："},"hProperties":{"id":"在线工具："}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://geojson.io/","children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":21,"column":2,"offset":276},"end":{"line":21,"column":20,"offset":294},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":275},"end":{"line":21,"column":41,"offset":315},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":21,"column":41,"offset":315},"end":{"line":21,"column":66,"offset":340},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":275},"end":{"line":21,"column":66,"offset":340},"indent":[]}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://mapshaper.org/","children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":23,"column":2,"offset":343},"end":{"line":23,"column":24,"offset":365},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":342},"end":{"line":23,"column":49,"offset":390},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":23,"column":49,"offset":390},"end":{"line":23,"column":80,"offset":421},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":342},"end":{"line":23,"column":80,"offset":421},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":24,"column":1,"offset":422}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-b9aeeecabe460b475afd8132946ce7bd.json b/.cache/caches/gatsby-transformer-remark/diskstore-b9aeeecabe460b475afd8132946ce7bd.json deleted file mode 100644 index 1c1b44ab67..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-b9aeeecabe460b475afd8132946ce7bd.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-0b3dfbbedf9555fe75466ff56f3ff5db-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"imagelayer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#imagelayer","aria-label":"imagelayer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"ImageLayer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":13,"offset":12}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":13,"offset":12}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":3,"column":4,"offset":17},"end":{"line":3,"column":6,"offset":19}}}],"position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":3,"column":6,"offset":19}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将图片添加到地图上，需要指定图片的经纬度范围","position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42}}}],"position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"代码示例"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B","aria-label":"代码示例 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"代码示例","position":{"start":{"line":6,"column":5,"offset":48},"end":{"line":6,"column":9,"offset":52}}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":9,"offset":52}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","position":{"start":{"line":8,"column":1,"offset":54},"end":{"line":19,"column":4,"offset":297}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":20,"column":1,"offset":298}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-bbecf11844506c5b01a8a81546741bc2.json b/.cache/caches/gatsby-transformer-remark/diskstore-bbecf11844506c5b01a8a81546741bc2.json deleted file mode 100644 index 2014e7a817..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-bbecf11844506c5b01a8a81546741bc2.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-0869a152e4c719c14970127d11b61364-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-bd0eb29faadb27b24fc50f33a010d985.json b/.cache/caches/gatsby-transformer-remark/diskstore-bd0eb29faadb27b24fc50f33a010d985.json deleted file mode 100644 index 3df5048469..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-bd0eb29faadb27b24fc50f33a010d985.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-cdcfb792dd144bc64fd4506a40146af7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"l7-地理空间数据可视分析引擎"},"children":[{"type":"element","tagName":"a","properties":{"href":"#l7-%E5%9C%B0%E7%90%86%E7%A9%BA%E9%97%B4%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%88%86%E6%9E%90%E5%BC%95%E6%93%8E","aria-label":"l7 地理空间数据可视分析引擎 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"L7 地理空间数据可视分析引擎","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":18,"offset":18}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":18,"offset":18}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"2.0.beta 版本目前有些功能还未完善，","position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42}}}],"position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":60,"offset":103}}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":60,"offset":103}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️ 1.x 版本的用户需求我们持续跟进 ","position":{"start":{"line":8,"column":1,"offset":105},"end":{"line":8,"column":22,"offset":126}}},{"type":"element","tagName":"a","properties":{"href":"https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"旧版官网地址","position":{"start":{"line":8,"column":23,"offset":127},"end":{"line":8,"column":29,"offset":133}}}],"position":{"start":{"line":8,"column":22,"offset":126},"end":{"line":8,"column":84,"offset":188}}}],"position":{"start":{"line":8,"column":1,"offset":105},"end":{"line":8,"column":84,"offset":188}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。","position":{"start":{"line":10,"column":1,"offset":190},"end":{"line":10,"column":173,"offset":362}}}],"position":{"start":{"line":10,"column":1,"offset":190},"end":{"line":10,"column":173,"offset":362}}},{"type":"text","value":"\n"},{"type":"raw","value":"","position":{"start":{"line":12,"column":1,"offset":364},"end":{"line":17,"column":9,"offset":937}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"核心特性"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%A0%B8%E5%BF%83%E7%89%B9%E6%80%A7","aria-label":"核心特性 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"核心特性","position":{"start":{"line":19,"column":4,"offset":942},"end":{"line":19,"column":8,"offset":946}}}],"position":{"start":{"line":19,"column":1,"offset":939},"end":{"line":19,"column":8,"offset":946}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"🌏 数据驱动可视化展示","position":{"start":{"line":22,"column":1,"offset":949},"end":{"line":22,"column":13,"offset":961}}}],"position":{"start":{"line":22,"column":1,"offset":949},"end":{"line":22,"column":13,"offset":961}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。","position":{"start":{"line":24,"column":1,"offset":963},"end":{"line":24,"column":31,"offset":993}}}],"position":{"start":{"line":24,"column":1,"offset":963},"end":{"line":24,"column":31,"offset":993}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"🌏 2D，3D 一体化的海量数据高性能渲染","position":{"start":{"line":26,"column":1,"offset":995},"end":{"line":26,"column":23,"offset":1017}}}],"position":{"start":{"line":26,"column":1,"offset":995},"end":{"line":26,"column":23,"offset":1017}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"百万级空间数据实时，动态渲染。","position":{"start":{"line":28,"column":1,"offset":1019},"end":{"line":28,"column":16,"offset":1034}}}],"position":{"start":{"line":28,"column":1,"offset":1019},"end":{"line":28,"column":16,"offset":1034}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"🌏 简单灵活的数据接入","position":{"start":{"line":30,"column":1,"offset":1036},"end":{"line":30,"column":13,"offset":1048}}}],"position":{"start":{"line":30,"column":1,"offset":1036},"end":{"line":30,"column":13,"offset":1048}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。","position":{"start":{"line":32,"column":1,"offset":1050},"end":{"line":32,"column":53,"offset":1102}}}],"position":{"start":{"line":32,"column":1,"offset":1050},"end":{"line":32,"column":53,"offset":1102}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 🌏 多地图底图支持，支持离线内网部署","position":{"start":{"line":34,"column":1,"offset":1104},"end":{"line":34,"column":21,"offset":1124}}}],"position":{"start":{"line":34,"column":1,"offset":1104},"end":{"line":34,"column":21,"offset":1124}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。","position":{"start":{"line":36,"column":1,"offset":1126},"end":{"line":36,"column":34,"offset":1159}}}],"position":{"start":{"line":36,"column":1,"offset":1126},"end":{"line":36,"column":34,"offset":1159}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"支持丰富的图表类型"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%94%AF%E6%8C%81%E4%B8%B0%E5%AF%8C%E7%9A%84%E5%9B%BE%E8%A1%A8%E7%B1%BB%E5%9E%8B","aria-label":"支持丰富的图表类型 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"支持丰富的图表类型","position":{"start":{"line":38,"column":4,"offset":1164},"end":{"line":38,"column":13,"offset":1173}}}],"position":{"start":{"line":38,"column":1,"offset":1161},"end":{"line":38,"column":13,"offset":1173}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"点图层"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%82%B9%E5%9B%BE%E5%B1%82","aria-label":"点图层 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"点图层","position":{"start":{"line":40,"column":5,"offset":1179},"end":{"line":40,"column":8,"offset":1182}}}],"position":{"start":{"line":40,"column":1,"offset":1175},"end":{"line":40,"column":8,"offset":1182}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"气泡图","position":{"start":{"line":42,"column":4,"offset":1188},"end":{"line":42,"column":7,"offset":1191}}}],"position":{"start":{"line":42,"column":1,"offset":1185},"end":{"line":42,"column":7,"offset":1191}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"散点图","position":{"start":{"line":43,"column":4,"offset":1195},"end":{"line":43,"column":7,"offset":1198}}}],"position":{"start":{"line":43,"column":1,"offset":1192},"end":{"line":43,"column":7,"offset":1198}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"符号地图","position":{"start":{"line":44,"column":4,"offset":1202},"end":{"line":44,"column":8,"offset":1206}}}],"position":{"start":{"line":44,"column":1,"offset":1199},"end":{"line":44,"column":8,"offset":1206}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"3D柱状地图","position":{"start":{"line":45,"column":4,"offset":1210},"end":{"line":45,"column":10,"offset":1216}}}],"position":{"start":{"line":45,"column":1,"offset":1207},"end":{"line":45,"column":10,"offset":1216}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"聚合地图","position":{"start":{"line":46,"column":4,"offset":1220},"end":{"line":46,"column":8,"offset":1224}}}],"position":{"start":{"line":46,"column":1,"offset":1217},"end":{"line":46,"column":8,"offset":1224}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"复合图表地图","position":{"start":{"line":47,"column":4,"offset":1228},"end":{"line":47,"column":10,"offset":1234}}}],"position":{"start":{"line":47,"column":1,"offset":1225},"end":{"line":47,"column":10,"offset":1234}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"自定义Marker","position":{"start":{"line":48,"column":4,"offset":1238},"end":{"line":48,"column":13,"offset":1247}}}],"position":{"start":{"line":48,"column":1,"offset":1235},"end":{"line":48,"column":13,"offset":1247}}},{"type":"text","value":"\n"}],"position":{"start":{"line":42,"column":1,"offset":1185},"end":{"line":48,"column":13,"offset":1247}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"线图层"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%BA%BF%E5%9B%BE%E5%B1%82","aria-label":"线图层 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"线图层","position":{"start":{"line":50,"column":5,"offset":1253},"end":{"line":50,"column":8,"offset":1256}}}],"position":{"start":{"line":50,"column":1,"offset":1249},"end":{"line":50,"column":8,"offset":1256}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"路径地图","position":{"start":{"line":52,"column":3,"offset":1260},"end":{"line":52,"column":7,"offset":1264}}}],"position":{"start":{"line":52,"column":1,"offset":1258},"end":{"line":52,"column":7,"offset":1264}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"弧线，支持2D弧线、3D弧线以及大圆航线","position":{"start":{"line":53,"column":3,"offset":1267},"end":{"line":53,"column":23,"offset":1287}}}],"position":{"start":{"line":53,"column":1,"offset":1265},"end":{"line":53,"column":23,"offset":1287}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"等值线","position":{"start":{"line":54,"column":3,"offset":1290},"end":{"line":54,"column":6,"offset":1293}}}],"position":{"start":{"line":54,"column":1,"offset":1288},"end":{"line":54,"column":6,"offset":1293}}},{"type":"text","value":"\n"}],"position":{"start":{"line":52,"column":1,"offset":1258},"end":{"line":54,"column":6,"offset":1293}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"面图层"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%9D%A2%E5%9B%BE%E5%B1%82","aria-label":"面图层 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"面图层","position":{"start":{"line":56,"column":5,"offset":1299},"end":{"line":56,"column":8,"offset":1302}}}],"position":{"start":{"line":56,"column":1,"offset":1295},"end":{"line":56,"column":8,"offset":1302}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"填充图","position":{"start":{"line":58,"column":3,"offset":1306},"end":{"line":58,"column":6,"offset":1309}}}],"position":{"start":{"line":58,"column":1,"offset":1304},"end":{"line":58,"column":6,"offset":1309}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"3D填充图","position":{"start":{"line":59,"column":3,"offset":1312},"end":{"line":59,"column":8,"offset":1317}}}],"position":{"start":{"line":59,"column":1,"offset":1310},"end":{"line":59,"column":8,"offset":1317}}},{"type":"text","value":"\n"}],"position":{"start":{"line":58,"column":1,"offset":1304},"end":{"line":59,"column":8,"offset":1317}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"热力图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%83%AD%E5%8A%9B%E5%9B%BE","aria-label":"热力图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"热力图","position":{"start":{"line":61,"column":5,"offset":1323},"end":{"line":61,"column":8,"offset":1326}}}],"position":{"start":{"line":61,"column":1,"offset":1319},"end":{"line":61,"column":8,"offset":1326}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"经典热力图","position":{"start":{"line":63,"column":3,"offset":1330},"end":{"line":63,"column":8,"offset":1335}}}],"position":{"start":{"line":63,"column":1,"offset":1328},"end":{"line":63,"column":8,"offset":1335}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"蜂窝热力图","position":{"start":{"line":64,"column":3,"offset":1338},"end":{"line":64,"column":8,"offset":1343}}}],"position":{"start":{"line":64,"column":1,"offset":1336},"end":{"line":64,"column":8,"offset":1343}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"网格热力图","position":{"start":{"line":65,"column":3,"offset":1346},"end":{"line":65,"column":8,"offset":1351}}}],"position":{"start":{"line":65,"column":1,"offset":1344},"end":{"line":65,"column":8,"offset":1351}}},{"type":"text","value":"\n"}],"position":{"start":{"line":63,"column":1,"offset":1328},"end":{"line":65,"column":8,"offset":1351}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"栅格地图"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%A0%85%E6%A0%BC%E5%9C%B0%E5%9B%BE","aria-label":"栅格地图 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"栅格地图","position":{"start":{"line":67,"column":5,"offset":1357},"end":{"line":67,"column":9,"offset":1361}}}],"position":{"start":{"line":67,"column":1,"offset":1353},"end":{"line":67,"column":9,"offset":1361}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"图片","position":{"start":{"line":68,"column":3,"offset":1364},"end":{"line":68,"column":5,"offset":1366}}}],"position":{"start":{"line":68,"column":1,"offset":1362},"end":{"line":68,"column":5,"offset":1366}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Raster","position":{"start":{"line":69,"column":3,"offset":1369},"end":{"line":69,"column":9,"offset":1375}}}],"position":{"start":{"line":69,"column":1,"offset":1367},"end":{"line":69,"column":9,"offset":1375}}},{"type":"text","value":"\n"}],"position":{"start":{"line":68,"column":1,"offset":1362},"end":{"line":69,"column":9,"offset":1375}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"l7-20-roadmap"},"children":[{"type":"element","tagName":"a","properties":{"href":"#l7-20-roadmap","aria-label":"l7 20 roadmap permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"L7 2.0 Roadmap","position":{"start":{"line":71,"column":4,"offset":1380},"end":{"line":71,"column":18,"offset":1394}}}],"position":{"start":{"line":71,"column":1,"offset":1377},"end":{"line":71,"column":18,"offset":1394}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ","alt":"L7 Road Map"},"children":[],"position":{"start":{"line":73,"column":1,"offset":1396},"end":{"line":73,"column":101,"offset":1496}}}],"position":{"start":{"line":73,"column":1,"offset":1396},"end":{"line":73,"column":101,"offset":1496}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"更多技术细节，详细进展，请关注 ","position":{"start":{"line":76,"column":1,"offset":1499},"end":{"line":76,"column":17,"offset":1515}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"GitHub","position":{"start":{"line":76,"column":18,"offset":1516},"end":{"line":76,"column":24,"offset":1522}}}],"position":{"start":{"line":76,"column":17,"offset":1515},"end":{"line":76,"column":55,"offset":1553}}},{"type":"text","value":"，欢迎大家来给点点 Star，让更多人看到这个开源的项目。","position":{"start":{"line":76,"column":55,"offset":1553},"end":{"line":76,"column":84,"offset":1582}}}],"position":{"start":{"line":76,"column":1,"offset":1499},"end":{"line":76,"column":84,"offset":1582}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"技术支持服务群"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%8A%80%E6%9C%AF%E6%94%AF%E6%8C%81%E6%9C%8D%E5%8A%A1%E7%BE%A4","aria-label":"技术支持服务群 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"技术支持服务群","position":{"start":{"line":78,"column":5,"offset":1588},"end":{"line":78,"column":12,"offset":1595}}}],"position":{"start":{"line":78,"column":1,"offset":1584},"end":{"line":78,"column":12,"offset":1595}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 相关技术问题，需求反馈，我们会及时响应\n","position":{"start":{"line":79,"column":1,"offset":1596},"end":{"line":80,"column":1,"offset":1619}}},{"type":"element","tagName":"img","properties":{"src":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*REc9Qrttrg8AAAAAAAAAAABkARQnAQ","alt":"地理空间可视化L7支持群"},"children":[],"position":{"start":{"line":80,"column":1,"offset":1619},"end":{"line":80,"column":102,"offset":1720}}}],"position":{"start":{"line":79,"column":1,"offset":1596},"end":{"line":80,"column":102,"offset":1720}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":81,"column":1,"offset":1721}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-bd3f7b87eaef645cd17873e1e5b05fdf.json b/.cache/caches/gatsby-transformer-remark/diskstore-bd3f7b87eaef645cd17873e1e5b05fdf.json deleted file mode 100644 index 1e97bc3c0b..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-bd3f7b87eaef645cd17873e1e5b05fdf.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-caf747b54e8159809c3beb2b46e148a0-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#使用方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"使用方法","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":7,"offset":6},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":7,"offset":6},"indent":[]},"data":{"id":"使用方法","htmlAttributes":{"id":"使用方法"},"hProperties":{"id":"使用方法"}}},{"type":"paragraph","children":[{"type":"text","value":"L7 提供三种使用方式：CDN、Submodule。","position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":27,"offset":34},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":27,"offset":34},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#通过-cdn-使用","title":null,"children":[],"data":{"hProperties":{"aria-label":"通过 cdn 使用 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"通过 CDN 使用","position":{"start":{"line":5,"column":4,"offset":39},"end":{"line":5,"column":13,"offset":48},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":36},"end":{"line":5,"column":13,"offset":48},"indent":[]},"data":{"id":"通过-cdn-使用","htmlAttributes":{"id":"通过-cdn-使用"},"hProperties":{"id":"通过-cdn-使用"}}},{"type":"paragraph","children":[{"type":"text","value":"首先在 ","position":{"start":{"line":7,"column":1,"offset":50},"end":{"line":7,"column":5,"offset":54},"indent":[]}},{"type":"html","value":"<head>","position":{"start":{"line":7,"column":5,"offset":54},"end":{"line":7,"column":13,"offset":62},"indent":[]}},{"type":"text","value":" 中引入 L7 CDN 版本的 JS 和 CSS 文件：","position":{"start":{"line":7,"column":13,"offset":62},"end":{"line":7,"column":41,"offset":90},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":50},"end":{"line":7,"column":41,"offset":90},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
","position":{"start":{"line":8,"column":1,"offset":91},"end":{"line":12,"column":4,"offset":217},"indent":[1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 ","position":{"start":{"line":14,"column":1,"offset":219},"end":{"line":14,"column":50,"offset":268},"indent":[]}},{"type":"link","title":null,"url":"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart","children":[{"type":"text","value":"Mapbox 文档","position":{"start":{"line":14,"column":51,"offset":269},"end":{"line":14,"column":60,"offset":278},"indent":[]}}],"position":{"start":{"line":14,"column":50,"offset":268},"end":{"line":14,"column":120,"offset":338},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"：","position":{"start":{"line":14,"column":120,"offset":338},"end":{"line":14,"column":121,"offset":339},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":219},"end":{"line":14,"column":121,"offset":339},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
","position":{"start":{"line":15,"column":1,"offset":340},"end":{"line":21,"column":4,"offset":582},"indent":[1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️高德采用异步加载，因此不需要引入任何额外静态文件。","position":{"start":{"line":22,"column":1,"offset":583},"end":{"line":22,"column":28,"offset":610},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":583},"end":{"line":22,"column":28,"offset":610},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"然后在 ","position":{"start":{"line":24,"column":1,"offset":612},"end":{"line":24,"column":5,"offset":616},"indent":[]}},{"type":"html","value":"<body>","position":{"start":{"line":24,"column":5,"offset":616},"end":{"line":24,"column":13,"offset":624},"indent":[]}},{"type":"text","value":" 中定义一个容器并设置一个 ","position":{"start":{"line":24,"column":13,"offset":624},"end":{"line":24,"column":27,"offset":638},"indent":[]}},{"type":"html","value":"id","position":{"start":{"line":24,"column":27,"offset":638},"end":{"line":24,"column":31,"offset":642},"indent":[]}},{"type":"text","value":"。通过全局 ","position":{"start":{"line":24,"column":31,"offset":642},"end":{"line":24,"column":37,"offset":648},"indent":[]}},{"type":"html","value":"L7","position":{"start":{"line":24,"column":37,"offset":648},"end":{"line":24,"column":41,"offset":652},"indent":[]}},{"type":"text","value":" 这个命名空间可以获取场景 ","position":{"start":{"line":24,"column":41,"offset":652},"end":{"line":24,"column":55,"offset":666},"indent":[]}},{"type":"html","value":"L7.Scene","position":{"start":{"line":24,"column":55,"offset":666},"end":{"line":24,"column":65,"offset":676},"indent":[]}},{"type":"text","value":" 和图层 ","position":{"start":{"line":24,"column":65,"offset":676},"end":{"line":24,"column":70,"offset":681},"indent":[]}},{"type":"html","value":"L7.PolygonLayer","position":{"start":{"line":24,"column":70,"offset":681},"end":{"line":24,"column":87,"offset":698},"indent":[]}},{"type":"text","value":"：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 ","position":{"start":{"line":24,"column":87,"offset":698},"end":{"line":25,"column":33,"offset":732},"indent":[1]}},{"type":"html","value":"L7.Scene","position":{"start":{"line":25,"column":33,"offset":732},"end":{"line":25,"column":43,"offset":742},"indent":[]}},{"type":"text","value":" 的构造函数，获取方式如下：","position":{"start":{"line":25,"column":43,"offset":742},"end":{"line":25,"column":57,"offset":756},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":612},"end":{"line":25,"column":57,"offset":756},"indent":[1]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"高德地图开发者 Key ","position":{"start":{"line":26,"column":3,"offset":759},"end":{"line":26,"column":15,"offset":771},"indent":[]}},{"type":"link","title":null,"url":"https://lbs.amap.com/dev/key/","children":[{"type":"text","value":"申请方法","position":{"start":{"line":26,"column":16,"offset":772},"end":{"line":26,"column":20,"offset":776},"indent":[]}}],"position":{"start":{"line":26,"column":15,"offset":771},"end":{"line":26,"column":52,"offset":808},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":26,"column":3,"offset":759},"end":{"line":26,"column":52,"offset":808},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":757},"end":{"line":26,"column":52,"offset":808},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens","children":[{"type":"text","value":"Mapbox Access Tokens","position":{"start":{"line":27,"column":4,"offset":812},"end":{"line":27,"column":24,"offset":832},"indent":[]}}],"position":{"start":{"line":27,"column":3,"offset":811},"end":{"line":27,"column":123,"offset":931},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":27,"column":3,"offset":811},"end":{"line":27,"column":123,"offset":931},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":809},"end":{"line":27,"column":123,"offset":931},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":757},"end":{"line":27,"column":123,"offset":931},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#通过-submodule-使用","title":null,"children":[],"data":{"hProperties":{"aria-label":"通过 submodule 使用 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"通过 Submodule 使用","position":{"start":{"line":29,"column":4,"offset":936},"end":{"line":29,"column":19,"offset":951},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":933},"end":{"line":29,"column":19,"offset":951},"indent":[]},"data":{"id":"通过-submodule-使用","htmlAttributes":{"id":"通过-submodule-使用"},"hProperties":{"id":"通过-submodule-使用"}}},{"type":"paragraph","children":[{"type":"text","value":"首先通过 ","position":{"start":{"line":31,"column":1,"offset":953},"end":{"line":31,"column":6,"offset":958},"indent":[]}},{"type":"html","value":"npm/yarn","position":{"start":{"line":31,"column":6,"offset":958},"end":{"line":31,"column":16,"offset":968},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":953},"end":{"line":31,"column":16,"offset":968},"indent":[]}},{"type":"html","lang":"bash","meta":null,"value":"
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
","position":{"start":{"line":32,"column":1,"offset":969},"end":{"line":37,"column":4,"offset":1047},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"然后就可以使用其中包含的场景和各类图层：","position":{"start":{"line":39,"column":1,"offset":1049},"end":{"line":39,"column":21,"offset":1069},"indent":[]}}],"position":{"start":{"line":39,"column":1,"offset":1049},"end":{"line":39,"column":21,"offset":1069},"indent":[]}},{"type":"html","lang":"typescript","meta":null,"value":"
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
","position":{"start":{"line":40,"column":1,"offset":1070},"end":{"line":85,"column":4,"offset":1941},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：","position":{"start":{"line":88,"column":1,"offset":1944},"end":{"line":88,"column":36,"offset":1979},"indent":[]}}],"position":{"start":{"line":88,"column":1,"offset":1944},"end":{"line":88,"column":36,"offset":1979},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx","children":[{"type":"text","value":"高德地图","position":{"start":{"line":89,"column":4,"offset":1983},"end":{"line":89,"column":8,"offset":1987},"indent":[]}}],"position":{"start":{"line":89,"column":3,"offset":1982},"end":{"line":89,"column":88,"offset":2067},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":89,"column":3,"offset":1982},"end":{"line":89,"column":88,"offset":2067},"indent":[]}}],"position":{"start":{"line":89,"column":1,"offset":1980},"end":{"line":89,"column":88,"offset":2067},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx","children":[{"type":"text","value":"Mapbox","position":{"start":{"line":90,"column":4,"offset":2071},"end":{"line":90,"column":10,"offset":2077},"indent":[]}}],"position":{"start":{"line":90,"column":3,"offset":2070},"end":{"line":90,"column":92,"offset":2159},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":90,"column":3,"offset":2070},"end":{"line":90,"column":92,"offset":2159},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":2068},"end":{"line":90,"column":92,"offset":2159},"indent":[]}}],"position":{"start":{"line":89,"column":1,"offset":1980},"end":{"line":90,"column":92,"offset":2159},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#wip-react","title":null,"children":[],"data":{"hProperties":{"aria-label":"wip react permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"linkReference","identifier":"wip","label":"WIP","referenceType":"shortcut","children":[{"type":"text","value":"WIP","position":{"start":{"line":93,"column":5,"offset":2166},"end":{"line":93,"column":8,"offset":2169},"indent":[]}}],"position":{"start":{"line":93,"column":4,"offset":2165},"end":{"line":93,"column":9,"offset":2170},"indent":[]}},{"type":"text","value":" React","position":{"start":{"line":93,"column":9,"offset":2170},"end":{"line":93,"column":15,"offset":2176},"indent":[]}}],"position":{"start":{"line":93,"column":1,"offset":2162},"end":{"line":93,"column":15,"offset":2176},"indent":[]},"data":{"id":"wip-react","htmlAttributes":{"id":"wip-react"},"hProperties":{"id":"wip-react"}}},{"type":"paragraph","children":[{"type":"text","value":"React 组件待开发，目前可以暂时以 Submodule 方式使用：","position":{"start":{"line":95,"column":1,"offset":2178},"end":{"line":95,"column":36,"offset":2213},"indent":[]}}],"position":{"start":{"line":95,"column":1,"offset":2178},"end":{"line":95,"column":36,"offset":2213},"indent":[]}},{"type":"html","lang":"tsx","meta":null,"value":"
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
","position":{"start":{"line":96,"column":1,"offset":2214},"end":{"line":157,"column":4,"offset":3494},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️组件 Unmount 时需要通过 ","position":{"start":{"line":159,"column":1,"offset":3496},"end":{"line":159,"column":20,"offset":3515},"indent":[]}},{"type":"html","value":"scene.destroy()","position":{"start":{"line":159,"column":20,"offset":3515},"end":{"line":159,"column":37,"offset":3532},"indent":[]}},{"type":"text","value":" 手动销毁场景。","position":{"start":{"line":159,"column":37,"offset":3532},"end":{"line":159,"column":45,"offset":3540},"indent":[]}}],"position":{"start":{"line":159,"column":1,"offset":3496},"end":{"line":159,"column":45,"offset":3540},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":161,"column":1,"offset":3542}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-bd909a1b0d41d0f5daaeeade3366c971.json b/.cache/caches/gatsby-transformer-remark/diskstore-bd909a1b0d41d0f5daaeeade3366c971.json deleted file mode 100644 index 73d4af4d9b..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-bd909a1b0d41d0f5daaeeade3366c971.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-47b0d92f07e7d22128274908bbd41917-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-c2ca3ca37432ac96249733181081cb05.json b/.cache/caches/gatsby-transformer-remark/diskstore-c2ca3ca37432ac96249733181081cb05.json deleted file mode 100644 index b3b8940a67..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-c2ca3ca37432ac96249733181081cb05.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-8bd46bd263f790754e46a98ca9891ea9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"layer"},"children":[{"type":"element","tagName":"a","properties":{"href":"#layer","aria-label":"layer permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Layer","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":8,"offset":7}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":8,"offset":7}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"简介"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%AE%80%E4%BB%8B","aria-label":"简介 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"简介","position":{"start":{"line":4,"column":4,"offset":13},"end":{"line":4,"column":6,"offset":15}}}],"position":{"start":{"line":4,"column":1,"offset":10},"end":{"line":4,"column":6,"offset":15}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 Layer 接口设计遵循图形语法，在可视表达上","position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":27,"offset":42}}}],"position":{"start":{"line":5,"column":1,"offset":16},"end":{"line":5,"column":27,"offset":42}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"语法示例","position":{"start":{"line":7,"column":1,"offset":44},"end":{"line":7,"column":5,"offset":48}}}],"position":{"start":{"line":7,"column":1,"offset":44},"end":{"line":7,"column":5,"offset":48}}},{"type":"text","value":"\n"},{"type":"raw","value":"
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
","position":{"start":{"line":9,"column":1,"offset":50},"end":{"line":17,"column":4,"offset":131}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":20,"column":4,"offset":137},"end":{"line":20,"column":8,"offset":141}}}],"position":{"start":{"line":20,"column":1,"offset":134},"end":{"line":20,"column":8,"offset":141}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"配置项"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%85%8D%E7%BD%AE%E9%A1%B9","aria-label":"配置项 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"配置项","position":{"start":{"line":23,"column":4,"offset":147},"end":{"line":23,"column":7,"offset":150}}}],"position":{"start":{"line":23,"column":1,"offset":144},"end":{"line":23,"column":7,"offset":150}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"visable"},"children":[{"type":"element","tagName":"a","properties":{"href":"#visable","aria-label":"visable permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"visable","position":{"start":{"line":25,"column":5,"offset":156},"end":{"line":25,"column":12,"offset":163}}}],"position":{"start":{"line":25,"column":1,"offset":152},"end":{"line":25,"column":12,"offset":163}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层是否可见   {bool } default true","position":{"start":{"line":26,"column":1,"offset":164},"end":{"line":26,"column":31,"offset":194}}}],"position":{"start":{"line":26,"column":1,"offset":164},"end":{"line":26,"column":31,"offset":194}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zindex"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zindex","aria-label":"zindex permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"zIndex","position":{"start":{"line":28,"column":5,"offset":200},"end":{"line":28,"column":11,"offset":206}}}],"position":{"start":{"line":28,"column":1,"offset":196},"end":{"line":28,"column":11,"offset":206}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0","position":{"start":{"line":29,"column":1,"offset":207},"end":{"line":29,"column":50,"offset":256}}}],"position":{"start":{"line":29,"column":1,"offset":207},"end":{"line":29,"column":50,"offset":256}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"minzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#minzoom","aria-label":"minzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"minZoom","position":{"start":{"line":30,"column":5,"offset":261},"end":{"line":30,"column":12,"offset":268}}}],"position":{"start":{"line":30,"column":1,"offset":257},"end":{"line":30,"column":12,"offset":268}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层显示最小缩放等级，（0-18）   {number}  default 0","position":{"start":{"line":31,"column":1,"offset":269},"end":{"line":31,"column":40,"offset":308}}}],"position":{"start":{"line":31,"column":1,"offset":269},"end":{"line":31,"column":40,"offset":308}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"maxzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#maxzoom","aria-label":"maxzoom permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"maxZoom","position":{"start":{"line":33,"column":5,"offset":314},"end":{"line":33,"column":12,"offset":321}}}],"position":{"start":{"line":33,"column":1,"offset":310},"end":{"line":33,"column":12,"offset":321}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 图层显示最大缩放等级 （0-18）   {number}  default 18","position":{"start":{"line":34,"column":1,"offset":322},"end":{"line":34,"column":42,"offset":363}}}],"position":{"start":{"line":34,"column":1,"offset":322},"end":{"line":34,"column":42,"offset":363}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"鼠标事件"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6","aria-label":"鼠标事件 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"鼠标事件","position":{"start":{"line":37,"column":4,"offset":369},"end":{"line":37,"column":8,"offset":373}}}],"position":{"start":{"line":37,"column":1,"offset":366},"end":{"line":37,"column":9,"offset":374}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"beta版当前不支持，正式版会支持","position":{"start":{"line":39,"column":1,"offset":376},"end":{"line":39,"column":18,"offset":393}}}],"position":{"start":{"line":39,"column":1,"offset":376},"end":{"line":39,"column":18,"offset":393}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
","position":{"start":{"line":41,"column":1,"offset":395},"end":{"line":52,"column":4,"offset":904}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":55,"column":4,"offset":910},"end":{"line":55,"column":6,"offset":912}}}],"position":{"start":{"line":55,"column":1,"offset":907},"end":{"line":55,"column":6,"offset":912}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"source"},"children":[{"type":"element","tagName":"a","properties":{"href":"#source","aria-label":"source permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"source","position":{"start":{"line":57,"column":5,"offset":918},"end":{"line":57,"column":11,"offset":924}}}],"position":{"start":{"line":57,"column":1,"offset":914},"end":{"line":57,"column":11,"offset":924}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"数据源为layer设置数据 source(data,config)","position":{"start":{"line":58,"column":1,"offset":925},"end":{"line":58,"column":35,"offset":959}}}],"position":{"start":{"line":58,"column":1,"offset":925},"end":{"line":58,"column":35,"offset":959}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"data {geojson|json|csv}","position":{"start":{"line":60,"column":3,"offset":963},"end":{"line":60,"column":26,"offset":986}}}],"position":{"start":{"line":60,"column":1,"offset":961},"end":{"line":60,"column":26,"offset":986}}},{"type":"text","value":"\n"}],"position":{"start":{"line":60,"column":1,"offset":961},"end":{"line":60,"column":26,"offset":986}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"      源数据","position":{"start":{"line":63,"column":1,"offset":989},"end":{"line":63,"column":11,"offset":999}}}],"position":{"start":{"line":63,"column":1,"offset":989},"end":{"line":63,"column":11,"offset":999}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"config  可选 数据源配置项","position":{"start":{"line":65,"column":3,"offset":1003},"end":{"line":65,"column":20,"offset":1020}}}],"position":{"start":{"line":65,"column":3,"offset":1003},"end":{"line":65,"column":20,"offset":1020}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"parser 数据解析，默认是解析层geojson","position":{"start":{"line":66,"column":5,"offset":1025},"end":{"line":66,"column":30,"offset":1050}}}],"position":{"start":{"line":66,"column":3,"offset":1023},"end":{"line":66,"column":30,"offset":1050}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"transforms ","position":{"start":{"line":67,"column":5,"offset":1055},"end":{"line":67,"column":16,"offset":1066}}},{"type":"text","value":"[transform，transform ]","position":{"start":{"line":67,"column":17,"offset":1067},"end":{"line":67,"column":37,"offset":1087}}},{"type":"text","value":"  数据处理转换 可设置多个","position":{"start":{"line":67,"column":38,"offset":1088},"end":{"line":67,"column":52,"offset":1102}}}],"position":{"start":{"line":67,"column":3,"offset":1053},"end":{"line":67,"column":52,"offset":1102}}},{"type":"text","value":"\n"}],"position":{"start":{"line":66,"column":3,"offset":1023},"end":{"line":67,"column":52,"offset":1102}}},{"type":"text","value":"\n"}],"position":{"start":{"line":65,"column":1,"offset":1001},"end":{"line":67,"column":52,"offset":1102}}},{"type":"text","value":"\n"}],"position":{"start":{"line":65,"column":1,"offset":1001},"end":{"line":67,"column":52,"offset":1102}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" parser和 transforms ","position":{"start":{"line":69,"column":1,"offset":1104},"end":{"line":69,"column":21,"offset":1124}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/l7/source","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"见source文档","position":{"start":{"line":69,"column":22,"offset":1125},"end":{"line":69,"column":31,"offset":1134}}}],"position":{"start":{"line":69,"column":21,"offset":1124},"end":{"line":69,"column":70,"offset":1173}}}],"position":{"start":{"line":69,"column":1,"offset":1104},"end":{"line":69,"column":70,"offset":1173}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
","position":{"start":{"line":71,"column":1,"offset":1175},"end":{"line":99,"column":4,"offset":1746}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":""},"children":[{"type":"element","tagName":"a","properties":{"href":"#","aria-label":" permalink","class":"anchor"},"children":[{"type":"raw","value":""}]}],"position":{"start":{"line":101,"column":1,"offset":1748},"end":{"line":101,"column":5,"offset":1752}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"scale"},"children":[{"type":"element","tagName":"a","properties":{"href":"#scale","aria-label":"scale permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"scale","position":{"start":{"line":103,"column":5,"offset":1758},"end":{"line":103,"column":10,"offset":1763}}}],"position":{"start":{"line":103,"column":1,"offset":1754},"end":{"line":103,"column":10,"offset":1763}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"cscle('field', scaleConfig)","position":{"start":{"line":106,"column":1,"offset":1766},"end":{"line":106,"column":28,"offset":1793}}}],"position":{"start":{"line":106,"column":1,"offset":1766},"end":{"line":106,"column":28,"offset":1793}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"(field: string, scaleConfig: object)","position":{"start":{"line":108,"column":1,"offset":1795},"end":{"line":108,"column":37,"offset":1831}}}],"position":{"start":{"line":108,"column":1,"offset":1795},"end":{"line":108,"column":37,"offset":1831}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为指定的数据字段进行列定义，返回 layer 实例。","position":{"start":{"line":110,"column":1,"offset":1833},"end":{"line":110,"column":27,"offset":1859}}}],"position":{"start":{"line":110,"column":1,"offset":1833},"end":{"line":110,"column":27,"offset":1859}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"field","position":{"start":{"line":114,"column":3,"offset":1865},"end":{"line":114,"column":10,"offset":1872}}},{"type":"text","value":" 字段名。","position":{"start":{"line":114,"column":10,"offset":1872},"end":{"line":114,"column":15,"offset":1877}}}],"position":{"start":{"line":114,"column":1,"offset":1863},"end":{"line":115,"column":1,"offset":1878}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"scaleConfig","position":{"start":{"line":116,"column":3,"offset":1881},"end":{"line":116,"column":16,"offset":1894}}},{"type":"text","value":" 列定义配置，对象类型，可配置的属性如下：","position":{"start":{"line":116,"column":16,"offset":1894},"end":{"line":116,"column":37,"offset":1915}}}],"position":{"start":{"line":116,"column":1,"offset":1879},"end":{"line":116,"column":37,"offset":1915}}},{"type":"text","value":"\n"}],"position":{"start":{"line":114,"column":1,"offset":1863},"end":{"line":116,"column":37,"offset":1915}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
","position":{"start":{"line":118,"column":1,"offset":1917},"end":{"line":123,"column":4,"offset":2035}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"size"},"children":[{"type":"element","tagName":"a","properties":{"href":"#size","aria-label":"size permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size","position":{"start":{"line":125,"column":5,"offset":2041},"end":{"line":125,"column":9,"offset":2045}}}],"position":{"start":{"line":125,"column":1,"offset":2037},"end":{"line":125,"column":9,"offset":2045}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将数据值映射到图形的大小上的方法。","position":{"start":{"line":127,"column":1,"offset":2047},"end":{"line":127,"column":18,"offset":2064}}}],"position":{"start":{"line":127,"column":1,"offset":2047},"end":{"line":127,"column":18,"offset":2064}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"注意：","position":{"start":{"line":129,"column":3,"offset":2068},"end":{"line":129,"column":6,"offset":2071}}}],"position":{"start":{"line":129,"column":1,"offset":2066},"end":{"line":129,"column":8,"offset":2073}}},{"type":"text","value":" ","position":{"start":{"line":129,"column":8,"offset":2073},"end":{"line":129,"column":9,"offset":2074}}}],"position":{"start":{"line":129,"column":1,"offset":2066},"end":{"line":129,"column":9,"offset":2074}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"不同图层的 size 的含义有所差别：","position":{"start":{"line":131,"column":1,"offset":2076},"end":{"line":131,"column":20,"offset":2095}}}],"position":{"start":{"line":131,"column":1,"offset":2076},"end":{"line":131,"column":20,"offset":2095}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"point 图形的 size 影响点的半径大小和高度；","position":{"start":{"line":133,"column":3,"offset":2099},"end":{"line":133,"column":30,"offset":2126}}}],"position":{"start":{"line":133,"column":1,"offset":2097},"end":{"line":134,"column":1,"offset":2127}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"line, arc, path 中的 size 影响线的粗细,和高度；","position":{"start":{"line":135,"column":3,"offset":2130},"end":{"line":135,"column":38,"offset":2165}}}],"position":{"start":{"line":135,"column":1,"offset":2128},"end":{"line":136,"column":1,"offset":2166}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"polygon size 影响的是高度","position":{"start":{"line":137,"column":3,"offset":2169},"end":{"line":137,"column":22,"offset":2188}}}],"position":{"start":{"line":137,"column":1,"offset":2167},"end":{"line":137,"column":22,"offset":2188}}},{"type":"text","value":"\n"}],"position":{"start":{"line":133,"column":1,"offset":2097},"end":{"line":137,"column":22,"offset":2188}}},{"type":"text","value":"\n"},{"type":"raw","value":"
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
","position":{"start":{"line":141,"column":1,"offset":2192},"end":{"line":151,"column":4,"offset":2434}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"sizevalue）"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sizevalue%EF%BC%89","aria-label":"sizevalue） permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size(value）","position":{"start":{"line":154,"column":6,"offset":2442},"end":{"line":154,"column":17,"offset":2453}}}],"position":{"start":{"line":154,"column":1,"offset":2437},"end":{"line":154,"column":17,"offset":2453}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"传入数字常量，如 ","position":{"start":{"line":156,"column":1,"offset":2455},"end":{"line":156,"column":10,"offset":2464}}},{"type":"raw","value":"pointLayer.size(20)","position":{"start":{"line":156,"column":10,"offset":2464},"end":{"line":156,"column":31,"offset":2485}}}],"position":{"start":{"line":156,"column":1,"offset":2455},"end":{"line":156,"column":31,"offset":2485}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"sizefield"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sizefield","aria-label":"sizefield permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size(field)","position":{"start":{"line":158,"column":6,"offset":2492},"end":{"line":158,"column":17,"offset":2503}}}],"position":{"start":{"line":158,"column":1,"offset":2487},"end":{"line":158,"column":17,"offset":2503}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"根据 field 字段的值映射大小，使用默认的","position":{"start":{"line":159,"column":1,"offset":2504},"end":{"line":159,"column":24,"offset":2527}}},{"type":"raw","value":"最大值 max:10","position":{"start":{"line":159,"column":24,"offset":2527},"end":{"line":159,"column":36,"offset":2539}}},{"type":"text","value":" 和","position":{"start":{"line":159,"column":36,"offset":2539},"end":{"line":159,"column":38,"offset":2541}}},{"type":"raw","value":"最小值 min: 1","position":{"start":{"line":159,"column":38,"offset":2541},"end":{"line":159,"column":50,"offset":2553}}},{"type":"text","value":"。","position":{"start":{"line":159,"column":50,"offset":2553},"end":{"line":159,"column":51,"offset":2554}}}],"position":{"start":{"line":159,"column":1,"offset":2504},"end":{"line":159,"column":51,"offset":2554}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"sizefield-callback"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sizefield-callback","aria-label":"sizefield callback permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size(field, callback)","position":{"start":{"line":161,"column":6,"offset":2561},"end":{"line":161,"column":27,"offset":2582}}}],"position":{"start":{"line":161,"column":1,"offset":2556},"end":{"line":161,"column":27,"offset":2582}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"使用回调函数控制图形大小。","position":{"start":{"line":162,"column":1,"offset":2583},"end":{"line":162,"column":14,"offset":2596}}}],"position":{"start":{"line":162,"column":1,"offset":2583},"end":{"line":162,"column":14,"offset":2596}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"callback","position":{"start":{"line":164,"column":3,"offset":2600},"end":{"line":164,"column":13,"offset":2610}}},{"type":"text","value":": function 回调函数。","position":{"start":{"line":164,"column":13,"offset":2610},"end":{"line":164,"column":29,"offset":2626}}}],"position":{"start":{"line":164,"column":1,"offset":2598},"end":{"line":164,"column":29,"offset":2626}}},{"type":"text","value":"\n"}],"position":{"start":{"line":164,"column":1,"offset":2598},"end":{"line":164,"column":29,"offset":2626}}},{"type":"text","value":"\n"},{"type":"raw","value":"
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
","position":{"start":{"line":166,"column":1,"offset":2628},"end":{"line":173,"column":4,"offset":2736}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"color"},"children":[{"type":"element","tagName":"a","properties":{"href":"#color","aria-label":"color permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"color","position":{"start":{"line":175,"column":5,"offset":2742},"end":{"line":175,"column":10,"offset":2747}}}],"position":{"start":{"line":175,"column":1,"offset":2738},"end":{"line":175,"column":10,"offset":2747}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将数据值映射到图形的颜色上的方法。","position":{"start":{"line":177,"column":1,"offset":2749},"end":{"line":177,"column":18,"offset":2766}}}],"position":{"start":{"line":177,"column":1,"offset":2749},"end":{"line":177,"column":18,"offset":2766}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
","position":{"start":{"line":179,"column":1,"offset":2768},"end":{"line":195,"column":4,"offset":3152}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"colorvalue"},"children":[{"type":"element","tagName":"a","properties":{"href":"#colorvalue","aria-label":"colorvalue permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"color(value)","position":{"start":{"line":198,"column":6,"offset":3160},"end":{"line":198,"column":18,"offset":3172}}}],"position":{"start":{"line":198,"column":1,"offset":3155},"end":{"line":198,"column":18,"offset":3172}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":201,"column":1,"offset":3175},"end":{"line":201,"column":4,"offset":3178}}},{"type":"raw","value":"value","position":{"start":{"line":201,"column":4,"offset":3178},"end":{"line":201,"column":11,"offset":3185}}},{"type":"text","value":" ：string\n只支持接收一个参数，value 可以是：","position":{"start":{"line":201,"column":11,"offset":3185},"end":{"line":202,"column":21,"offset":3214}}}],"position":{"start":{"line":201,"column":1,"offset":3175},"end":{"line":202,"column":21,"offset":3214}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。","position":{"start":{"line":204,"column":3,"offset":3218},"end":{"line":204,"column":64,"offset":3279}}}],"position":{"start":{"line":204,"column":1,"offset":3216},"end":{"line":205,"column":1,"offset":3280}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。","position":{"start":{"line":206,"column":3,"offset":3283},"end":{"line":206,"column":80,"offset":3360}}}],"position":{"start":{"line":206,"column":1,"offset":3281},"end":{"line":206,"column":80,"offset":3360}}},{"type":"text","value":"\n"}],"position":{"start":{"line":204,"column":1,"offset":3216},"end":{"line":206,"column":80,"offset":3360}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"示例","position":{"start":{"line":209,"column":1,"offset":3363},"end":{"line":209,"column":3,"offset":3365}}}],"position":{"start":{"line":209,"column":1,"offset":3363},"end":{"line":209,"column":3,"offset":3365}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
","position":{"start":{"line":210,"column":1,"offset":3366},"end":{"line":213,"column":4,"offset":3442}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"colorfield-colors"},"children":[{"type":"element","tagName":"a","properties":{"href":"#colorfield-colors","aria-label":"colorfield colors permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"color(field, colors)","position":{"start":{"line":216,"column":6,"offset":3450},"end":{"line":216,"column":26,"offset":3470}}}],"position":{"start":{"line":216,"column":1,"offset":3445},"end":{"line":216,"column":26,"offset":3470}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数：","position":{"start":{"line":218,"column":1,"offset":3472},"end":{"line":218,"column":4,"offset":3475}}}],"position":{"start":{"line":218,"column":1,"offset":3472},"end":{"line":218,"column":4,"offset":3475}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"field","position":{"start":{"line":220,"column":3,"offset":3479},"end":{"line":220,"column":10,"offset":3486}}},{"type":"text","value":": stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。","position":{"start":{"line":220,"column":10,"offset":3486},"end":{"line":220,"column":50,"offset":3526}}}],"position":{"start":{"line":220,"column":1,"offset":3477},"end":{"line":221,"column":1,"offset":3527}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" ","position":{"start":{"line":222,"column":3,"offset":3530},"end":{"line":222,"column":4,"offset":3531}}},{"type":"raw","value":"colors","position":{"start":{"line":222,"column":4,"offset":3531},"end":{"line":222,"column":12,"offset":3539}}},{"type":"text","value":": string | array | function","position":{"start":{"line":222,"column":12,"offset":3539},"end":{"line":222,"column":39,"offset":3566}}}],"position":{"start":{"line":222,"column":1,"offset":3528},"end":{"line":222,"column":39,"offset":3566}}},{"type":"text","value":"\n"}],"position":{"start":{"line":220,"column":1,"offset":3477},"end":{"line":222,"column":39,"offset":3566}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。","position":{"start":{"line":225,"column":1,"offset":3569},"end":{"line":225,"column":94,"offset":3662}}}],"position":{"start":{"line":225,"column":1,"offset":3569},"end":{"line":225,"column":94,"offset":3662}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
","position":{"start":{"line":227,"column":1,"offset":3664},"end":{"line":230,"column":4,"offset":3766}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：","position":{"start":{"line":232,"column":3,"offset":3770},"end":{"line":232,"column":74,"offset":3841}}}],"position":{"start":{"line":232,"column":1,"offset":3768},"end":{"line":232,"column":74,"offset":3841}}},{"type":"text","value":"\n"}],"position":{"start":{"line":232,"column":1,"offset":3768},"end":{"line":232,"column":74,"offset":3841}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
","position":{"start":{"line":236,"column":1,"offset":3845},"end":{"line":249,"column":4,"offset":4084}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"shape"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shape","aria-label":"shape permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"shape","position":{"start":{"line":251,"column":5,"offset":4090},"end":{"line":251,"column":10,"offset":4095}}}],"position":{"start":{"line":251,"column":1,"offset":4086},"end":{"line":251,"column":10,"offset":4095}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将数据值映射到图形的形状上的方法。","position":{"start":{"line":252,"column":1,"offset":4096},"end":{"line":252,"column":18,"offset":4113}}}],"position":{"start":{"line":252,"column":1,"offset":4096},"end":{"line":252,"column":18,"offset":4113}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"shape(shape)","position":{"start":{"line":254,"column":3,"offset":4117},"end":{"line":254,"column":15,"offset":4129}}}],"position":{"start":{"line":254,"column":1,"offset":4115},"end":{"line":254,"column":17,"offset":4131}}}],"position":{"start":{"line":254,"column":1,"offset":4115},"end":{"line":254,"column":17,"offset":4131}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":256,"column":1,"offset":4133},"end":{"line":256,"column":3,"offset":4135}}},{"type":"raw","value":"shape","position":{"start":{"line":256,"column":3,"offset":4135},"end":{"line":256,"column":10,"offset":4142}}},{"type":"text","value":" string","position":{"start":{"line":256,"column":10,"offset":4142},"end":{"line":256,"column":17,"offset":4149}}}],"position":{"start":{"line":256,"column":1,"offset":4133},"end":{"line":256,"column":17,"offset":4149}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状","position":{"start":{"line":258,"column":1,"offset":4151},"end":{"line":258,"column":55,"offset":4205}}}],"position":{"start":{"line":258,"column":1,"offset":4151},"end":{"line":258,"column":55,"offset":4205}}},{"type":"text","value":"\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"thead","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"layer类型","position":{"start":{"line":260,"column":3,"offset":4209},"end":{"line":260,"column":10,"offset":4216}}}],"position":{"start":{"line":260,"column":3,"offset":4209},"end":{"line":260,"column":10,"offset":4216}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"shape类型","position":{"start":{"line":260,"column":13,"offset":4219},"end":{"line":260,"column":20,"offset":4226}}}],"position":{"start":{"line":260,"column":13,"offset":4219},"end":{"line":260,"column":20,"offset":4226}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"备注","position":{"start":{"line":260,"column":23,"offset":4229},"end":{"line":260,"column":25,"offset":4231}}}],"position":{"start":{"line":260,"column":23,"offset":4229},"end":{"line":260,"column":25,"offset":4231}}},{"type":"text","value":"\n"}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":260,"column":27,"offset":4233}}},{"type":"text","value":"\n"}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":260,"column":27,"offset":4233}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"point","position":{"start":{"line":262,"column":3,"offset":4256},"end":{"line":262,"column":8,"offset":4261}}}],"position":{"start":{"line":262,"column":3,"offset":4256},"end":{"line":262,"column":8,"offset":4261}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square","position":{"start":{"line":262,"column":11,"offset":4264},"end":{"line":262,"column":97,"offset":4350}}}],"position":{"start":{"line":262,"column":11,"offset":4264},"end":{"line":262,"column":97,"offset":4350}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[],"position":{"start":{"line":262,"column":101,"offset":4354},"end":{"line":262,"column":101,"offset":4354}}},{"type":"text","value":"\n"}],"position":{"start":{"line":262,"column":1,"offset":4254},"end":{"line":262,"column":102,"offset":4355}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"line","position":{"start":{"line":263,"column":3,"offset":4358},"end":{"line":263,"column":7,"offset":4362}}}],"position":{"start":{"line":263,"column":3,"offset":4358},"end":{"line":263,"column":7,"offset":4362}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"line,arc, arc3d, greatcircle","position":{"start":{"line":263,"column":10,"offset":4365},"end":{"line":263,"column":38,"offset":4393}}}],"position":{"start":{"line":263,"column":10,"offset":4365},"end":{"line":263,"column":38,"offset":4393}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[],"position":{"start":{"line":263,"column":42,"offset":4397},"end":{"line":263,"column":42,"offset":4397}}},{"type":"text","value":"\n"}],"position":{"start":{"line":263,"column":1,"offset":4356},"end":{"line":263,"column":43,"offset":4398}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"polygon","position":{"start":{"line":264,"column":3,"offset":4401},"end":{"line":264,"column":10,"offset":4408}}}],"position":{"start":{"line":264,"column":3,"offset":4401},"end":{"line":264,"column":10,"offset":4408}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"fill,line, extrude","position":{"start":{"line":264,"column":13,"offset":4411},"end":{"line":264,"column":31,"offset":4429}}}],"position":{"start":{"line":264,"column":13,"offset":4411},"end":{"line":264,"column":31,"offset":4429}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[],"position":{"start":{"line":264,"column":35,"offset":4433},"end":{"line":264,"column":35,"offset":4433}}},{"type":"text","value":"\n"}],"position":{"start":{"line":264,"column":1,"offset":4399},"end":{"line":264,"column":36,"offset":4434}}},{"type":"text","value":"\n"}],"position":{"start":{"line":262,"column":1,"offset":4254},"end":{"line":264,"column":36,"offset":4434}}},{"type":"text","value":"\n"}],"position":{"start":{"line":260,"column":1,"offset":4207},"end":{"line":264,"column":36,"offset":4434}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"shape(field, shapes)","position":{"start":{"line":267,"column":3,"offset":4439},"end":{"line":267,"column":23,"offset":4459}}}],"position":{"start":{"line":267,"column":1,"offset":4437},"end":{"line":267,"column":25,"offset":4461}}}],"position":{"start":{"line":267,"column":1,"offset":4437},"end":{"line":267,"column":25,"offset":4461}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"shape(field, callback)","position":{"start":{"line":269,"column":3,"offset":4465},"end":{"line":269,"column":25,"offset":4487}}}],"position":{"start":{"line":269,"column":1,"offset":4463},"end":{"line":269,"column":27,"offset":4489}}}],"position":{"start":{"line":269,"column":1,"offset":4463},"end":{"line":269,"column":27,"offset":4489}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"style"},"children":[{"type":"element","tagName":"a","properties":{"href":"#style","aria-label":"style permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"style","position":{"start":{"line":272,"column":5,"offset":4496},"end":{"line":272,"column":10,"offset":4501}}}],"position":{"start":{"line":272,"column":1,"offset":4492},"end":{"line":272,"column":10,"offset":4501}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放","position":{"start":{"line":274,"column":1,"offset":4503},"end":{"line":274,"column":32,"offset":4534}}}],"position":{"start":{"line":274,"column":1,"offset":4503},"end":{"line":274,"column":32,"offset":4534}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"fill","position":{"start":{"line":276,"column":3,"offset":4538},"end":{"line":276,"column":7,"offset":4542}}}],"position":{"start":{"line":276,"column":1,"offset":4536},"end":{"line":277,"column":1,"offset":4543}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"opacity  设置透明度","position":{"start":{"line":278,"column":3,"offset":4546},"end":{"line":278,"column":17,"offset":4560}}}],"position":{"start":{"line":278,"column":1,"offset":4544},"end":{"line":279,"column":1,"offset":4561}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"stroke 线填充颜色","position":{"start":{"line":280,"column":3,"offset":4564},"end":{"line":280,"column":16,"offset":4577}}}],"position":{"start":{"line":280,"column":1,"offset":4562},"end":{"line":281,"column":1,"offset":4578}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"strokeWidth 线的宽度","position":{"start":{"line":282,"column":3,"offset":4581},"end":{"line":282,"column":19,"offset":4597}}}],"position":{"start":{"line":282,"column":1,"offset":4579},"end":{"line":282,"column":19,"offset":4597}}},{"type":"text","value":"\n"}],"position":{"start":{"line":276,"column":1,"offset":4536},"end":{"line":282,"column":19,"offset":4597}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
","position":{"start":{"line":285,"column":1,"offset":4600},"end":{"line":291,"column":4,"offset":4686}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"show"},"children":[{"type":"element","tagName":"a","properties":{"href":"#show","aria-label":"show permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"show","position":{"start":{"line":294,"column":5,"offset":4693},"end":{"line":294,"column":9,"offset":4697}}}],"position":{"start":{"line":294,"column":1,"offset":4689},"end":{"line":294,"column":9,"offset":4697}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层显示","position":{"start":{"line":295,"column":1,"offset":4698},"end":{"line":295,"column":5,"offset":4702}}}],"position":{"start":{"line":295,"column":1,"offset":4698},"end":{"line":295,"column":5,"offset":4702}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.show();\n
","position":{"start":{"line":297,"column":1,"offset":4704},"end":{"line":299,"column":4,"offset":4735}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"hide"},"children":[{"type":"element","tagName":"a","properties":{"href":"#hide","aria-label":"hide permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"hide","position":{"start":{"line":302,"column":5,"offset":4742},"end":{"line":302,"column":9,"offset":4746}}}],"position":{"start":{"line":302,"column":1,"offset":4738},"end":{"line":302,"column":9,"offset":4746}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图层隐藏","position":{"start":{"line":304,"column":1,"offset":4748},"end":{"line":304,"column":5,"offset":4752}}}],"position":{"start":{"line":304,"column":1,"offset":4748},"end":{"line":304,"column":5,"offset":4752}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.hide();\n
","position":{"start":{"line":306,"column":1,"offset":4754},"end":{"line":308,"column":4,"offset":4785}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"fitbounds"},"children":[{"type":"element","tagName":"a","properties":{"href":"#fitbounds","aria-label":"fitbounds permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"fitBounds","position":{"start":{"line":311,"column":5,"offset":4792},"end":{"line":311,"column":14,"offset":4801}}}],"position":{"start":{"line":311,"column":1,"offset":4788},"end":{"line":311,"column":14,"offset":4801}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"缩放到图层范围","position":{"start":{"line":313,"column":1,"offset":4803},"end":{"line":313,"column":8,"offset":4810}}}],"position":{"start":{"line":313,"column":1,"offset":4803},"end":{"line":313,"column":8,"offset":4810}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.fitBounds();\n
","position":{"start":{"line":315,"column":1,"offset":4812},"end":{"line":318,"column":4,"offset":4848}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":318,"column":4,"offset":4848}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-c309b588e33a2d84ba3dd6ece29f9742.json b/.cache/caches/gatsby-transformer-remark/diskstore-c309b588e33a2d84ba3dd6ece29f9742.json deleted file mode 100644 index 9cf0aa5c59..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-c309b588e33a2d84ba3dd6ece29f9742.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-c233b77d35e08201ab64c4861488d352-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-c4d745c68c644508cc6dce6517d64284.json b/.cache/caches/gatsby-transformer-remark/diskstore-c4d745c68c644508cc6dce6517d64284.json deleted file mode 100644 index f1bcc4e669..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-c4d745c68c644508cc6dce6517d64284.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-3f73cf1f73d6b033db13763671e99dd6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":43,"offset":42}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":43,"offset":42}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":43,"offset":42}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-c63a1ee088cc0e260a7088d7a5ee2905.json b/.cache/caches/gatsby-transformer-remark/diskstore-c63a1ee088cc0e260a7088d7a5ee2905.json deleted file mode 100644 index 2da91d25a4..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-c63a1ee088cc0e260a7088d7a5ee2905.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-0ce38f6fc0207c9629c6165b2f176cd7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-c8fc915904de53e00b44741daabb21aa.json b/.cache/caches/gatsby-transformer-remark/diskstore-c8fc915904de53e00b44741daabb21aa.json deleted file mode 100644 index 6fae984d42..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-c8fc915904de53e00b44741daabb21aa.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-6333af3553efc2c96b5dfd41fa526318-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"source"},"children":[{"type":"element","tagName":"a","properties":{"href":"#source","aria-label":"source permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"Source","position":{"start":{"line":3,"column":3,"offset":4},"end":{"line":3,"column":9,"offset":10}}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":9,"offset":10}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"概述"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%A6%82%E8%BF%B0","aria-label":"概述 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"概述","position":{"start":{"line":6,"column":5,"offset":17},"end":{"line":6,"column":7,"offset":19}}}],"position":{"start":{"line":6,"column":1,"offset":13},"end":{"line":6,"column":7,"offset":19}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);","position":{"start":{"line":8,"column":1,"offset":21},"end":{"line":8,"column":51,"offset":71}}}],"position":{"start":{"line":8,"column":1,"offset":21},"end":{"line":8,"column":51,"offset":71}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"parser:","position":{"start":{"line":10,"column":3,"offset":75},"end":{"line":10,"column":10,"offset":82}}}],"position":{"start":{"line":10,"column":1,"offset":73},"end":{"line":10,"column":12,"offset":84}}}],"position":{"start":{"line":10,"column":1,"offset":73},"end":{"line":10,"column":12,"offset":84}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。","position":{"start":{"line":12,"column":1,"offset":86},"end":{"line":12,"column":83,"offset":168}}}],"position":{"start":{"line":12,"column":1,"offset":86},"end":{"line":12,"column":83,"offset":168}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"transform","position":{"start":{"line":14,"column":3,"offset":172},"end":{"line":14,"column":12,"offset":181}}}],"position":{"start":{"line":14,"column":1,"offset":170},"end":{"line":14,"column":14,"offset":183}}}],"position":{"start":{"line":14,"column":1,"offset":170},"end":{"line":14,"column":14,"offset":183}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"数据转换，数据统计，网格布局，数据聚合等数据操作。","position":{"start":{"line":16,"column":1,"offset":185},"end":{"line":16,"column":26,"offset":210}}}],"position":{"start":{"line":16,"column":1,"offset":185},"end":{"line":16,"column":26,"offset":210}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"api"},"children":[{"type":"element","tagName":"a","properties":{"href":"#api","aria-label":"api permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"API","position":{"start":{"line":19,"column":4,"offset":216},"end":{"line":19,"column":7,"offset":219}}}],"position":{"start":{"line":19,"column":1,"offset":213},"end":{"line":19,"column":7,"offset":219}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"parser"},"children":[{"type":"element","tagName":"a","properties":{"href":"#parser","aria-label":"parser permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"parser","position":{"start":{"line":21,"column":5,"offset":225},"end":{"line":21,"column":11,"offset":231}}}],"position":{"start":{"line":21,"column":1,"offset":221},"end":{"line":21,"column":11,"offset":231}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"空间数据分矢量数据和栅格数据两大类","position":{"start":{"line":23,"column":1,"offset":233},"end":{"line":23,"column":18,"offset":250}}}],"position":{"start":{"line":23,"column":1,"offset":233},"end":{"line":23,"column":18,"offset":250}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"矢量数据 支持 csv，geojson，json 三种数据类型","position":{"start":{"line":25,"column":3,"offset":254},"end":{"line":25,"column":34,"offset":285}}}],"position":{"start":{"line":25,"column":1,"offset":252},"end":{"line":26,"column":1,"offset":286}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"栅格数据 支持 image，Raster","position":{"start":{"line":27,"column":3,"offset":289},"end":{"line":27,"column":24,"offset":310}}}],"position":{"start":{"line":27,"column":1,"offset":287},"end":{"line":27,"column":24,"offset":310}}},{"type":"text","value":"\n"}],"position":{"start":{"line":25,"column":1,"offset":252},"end":{"line":27,"column":24,"offset":310}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"geojson"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson","aria-label":"geojson permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"geojson","position":{"start":{"line":31,"column":6,"offset":319},"end":{"line":31,"column":13,"offset":326}}}],"position":{"start":{"line":31,"column":1,"offset":314},"end":{"line":31,"column":13,"offset":326}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/l7/dm2zll","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"geojson","position":{"start":{"line":33,"column":2,"offset":329},"end":{"line":33,"column":9,"offset":336}}}],"position":{"start":{"line":33,"column":1,"offset":328},"end":{"line":33,"column":48,"offset":375}}},{"type":"text","value":" 数据为默认数据格式，可以","position":{"start":{"line":33,"column":48,"offset":375},"end":{"line":33,"column":61,"offset":388}}}],"position":{"start":{"line":33,"column":1,"offset":328},"end":{"line":33,"column":61,"offset":388}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"不需要设置parser 参数","position":{"start":{"line":35,"column":1,"offset":390},"end":{"line":35,"column":15,"offset":404}}}],"position":{"start":{"line":35,"column":1,"offset":390},"end":{"line":35,"column":15,"offset":404}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(data);\n
","position":{"start":{"line":37,"column":1,"offset":406},"end":{"line":39,"column":4,"offset":442}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"json"},"children":[{"type":"element","tagName":"a","properties":{"href":"#json","aria-label":"json permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"json","position":{"start":{"line":42,"column":6,"offset":450},"end":{"line":42,"column":10,"offset":454}}}],"position":{"start":{"line":42,"column":1,"offset":445},"end":{"line":42,"column":10,"offset":454}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"json 不是标准的地理数据结构，因此需要设置对应的经纬度字段","position":{"start":{"line":44,"column":1,"offset":456},"end":{"line":44,"column":33,"offset":488}}}],"position":{"start":{"line":44,"column":1,"offset":456},"end":{"line":44,"column":33,"offset":488}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"点数据","position":{"start":{"line":46,"column":3,"offset":492},"end":{"line":46,"column":6,"offset":495}}}],"position":{"start":{"line":46,"column":1,"offset":490},"end":{"line":46,"column":8,"offset":497}}}],"position":{"start":{"line":46,"column":1,"offset":490},"end":{"line":46,"column":8,"offset":497}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"x: 经度字段 ","position":{"start":{"line":48,"column":1,"offset":499},"end":{"line":48,"column":9,"offset":507}}}],"position":{"start":{"line":48,"column":1,"offset":499},"end":{"line":48,"column":9,"offset":507}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"y: 纬度字段","position":{"start":{"line":50,"column":1,"offset":509},"end":{"line":50,"column":8,"offset":516}}}],"position":{"start":{"line":50,"column":1,"offset":509},"end":{"line":50,"column":8,"offset":516}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
","position":{"start":{"line":52,"column":1,"offset":518},"end":{"line":74,"column":4,"offset":763}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"线段数据","position":{"start":{"line":76,"column":3,"offset":767},"end":{"line":76,"column":7,"offset":771}}}],"position":{"start":{"line":76,"column":1,"offset":765},"end":{"line":76,"column":9,"offset":773}}}],"position":{"start":{"line":76,"column":1,"offset":765},"end":{"line":76,"column":9,"offset":773}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" type: json","position":{"start":{"line":78,"column":1,"offset":775},"end":{"line":78,"column":12,"offset":786}}}],"position":{"start":{"line":78,"column":1,"offset":775},"end":{"line":78,"column":12,"offset":786}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标","position":{"start":{"line":80,"column":1,"offset":788},"end":{"line":80,"column":44,"offset":831}}}],"position":{"start":{"line":80,"column":1,"offset":788},"end":{"line":80,"column":44,"offset":831}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度","position":{"start":{"line":82,"column":1,"offset":833},"end":{"line":85,"column":16,"offset":889}}}],"position":{"start":{"line":82,"column":1,"offset":833},"end":{"line":85,"column":16,"offset":889}}},{"type":"text","value":"\n"},{"type":"raw","value":"
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
","position":{"start":{"line":87,"column":1,"offset":891},"end":{"line":115,"column":4,"offset":1251}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"面数据","position":{"start":{"line":117,"column":3,"offset":1255},"end":{"line":117,"column":6,"offset":1258}}}],"position":{"start":{"line":117,"column":1,"offset":1253},"end":{"line":117,"column":8,"offset":1260}}}],"position":{"start":{"line":117,"column":1,"offset":1253},"end":{"line":117,"column":8,"offset":1260}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"需要指定coordinates 字段, coordinates据格式","position":{"start":{"line":119,"column":1,"offset":1262},"end":{"line":119,"column":35,"offset":1296}}}],"position":{"start":{"line":119,"column":1,"offset":1262},"end":{"line":119,"column":35,"offset":1296}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"注意面数据 coord  是三层数据结构","position":{"start":{"line":121,"column":3,"offset":1300},"end":{"line":121,"column":23,"offset":1320}}}],"position":{"start":{"line":121,"column":1,"offset":1298},"end":{"line":121,"column":25,"offset":1322}}}],"position":{"start":{"line":121,"column":1,"offset":1298},"end":{"line":121,"column":25,"offset":1322}}},{"type":"text","value":"\n"},{"type":"raw","value":"
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
","position":{"start":{"line":123,"column":1,"offset":1324},"end":{"line":164,"column":4,"offset":2103}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"csv"},"children":[{"type":"element","tagName":"a","properties":{"href":"#csv","aria-label":"csv permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"csv","position":{"start":{"line":169,"column":6,"offset":2113},"end":{"line":169,"column":9,"offset":2116}}}],"position":{"start":{"line":169,"column":1,"offset":2108},"end":{"line":169,"column":9,"offset":2116}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"点，线数据配置项同json数据类型","position":{"start":{"line":170,"column":1,"offset":2117},"end":{"line":170,"column":18,"offset":2134}}}],"position":{"start":{"line":170,"column":1,"offset":2117},"end":{"line":170,"column":18,"offset":2134}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
","position":{"start":{"line":172,"column":1,"offset":2136},"end":{"line":184,"column":4,"offset":2300}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"栅格数据类型**","position":{"start":{"line":186,"column":3,"offset":2304},"end":{"line":186,"column":11,"offset":2312}}}],"position":{"start":{"line":186,"column":1,"offset":2302},"end":{"line":186,"column":13,"offset":2314}}}],"position":{"start":{"line":186,"column":1,"offset":2302},"end":{"line":186,"column":13,"offset":2314}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"image"},"children":[{"type":"element","tagName":"a","properties":{"href":"#image","aria-label":"image permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"image","position":{"start":{"line":188,"column":6,"offset":2321},"end":{"line":188,"column":11,"offset":2326}}}],"position":{"start":{"line":188,"column":1,"offset":2316},"end":{"line":188,"column":11,"offset":2326}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" 根据图片的经纬度范围，将图片添加到地图上。 配置项","position":{"start":{"line":189,"column":1,"offset":2327},"end":{"line":189,"column":27,"offset":2353}}}],"position":{"start":{"line":189,"column":1,"offset":2327},"end":{"line":189,"column":27,"offset":2353}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" type: image","position":{"start":{"line":191,"column":3,"offset":2357},"end":{"line":191,"column":15,"offset":2369}}}],"position":{"start":{"line":191,"column":1,"offset":2355},"end":{"line":191,"column":15,"offset":2369}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" extent: 图像的经纬度范围 []","position":{"start":{"line":192,"column":3,"offset":2372},"end":{"line":192,"column":23,"offset":2392}}}],"position":{"start":{"line":192,"column":1,"offset":2370},"end":{"line":192,"column":23,"offset":2392}}},{"type":"text","value":"\n"}],"position":{"start":{"line":191,"column":1,"offset":2355},"end":{"line":192,"column":23,"offset":2392}}},{"type":"text","value":"\n"},{"type":"raw","value":"
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","position":{"start":{"line":194,"column":1,"offset":2394},"end":{"line":202,"column":4,"offset":2608}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"raster"},"children":[{"type":"element","tagName":"a","properties":{"href":"#raster","aria-label":"raster permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"raster","position":{"start":{"line":205,"column":6,"offset":2617},"end":{"line":205,"column":12,"offset":2623}}}],"position":{"start":{"line":205,"column":1,"offset":2612},"end":{"line":205,"column":12,"offset":2623}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项","position":{"start":{"line":206,"column":1,"offset":2624},"end":{"line":206,"column":44,"offset":2667}}}],"position":{"start":{"line":206,"column":1,"offset":2624},"end":{"line":206,"column":44,"offset":2667}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"type  raster","position":{"start":{"line":208,"column":3,"offset":2671},"end":{"line":208,"column":15,"offset":2683}}}],"position":{"start":{"line":208,"column":1,"offset":2669},"end":{"line":208,"column":15,"offset":2683}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"width  数据宽度二维矩阵 columns ","position":{"start":{"line":209,"column":3,"offset":2686},"end":{"line":209,"column":27,"offset":2710}}}],"position":{"start":{"line":209,"column":1,"offset":2684},"end":{"line":209,"column":27,"offset":2710}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"height 数据高度","position":{"start":{"line":210,"column":3,"offset":2713},"end":{"line":210,"column":14,"offset":2724}}}],"position":{"start":{"line":210,"column":1,"offset":2711},"end":{"line":210,"column":14,"offset":2724}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"min 数据最大值","position":{"start":{"line":211,"column":3,"offset":2727},"end":{"line":211,"column":12,"offset":2736}}}],"position":{"start":{"line":211,"column":1,"offset":2725},"end":{"line":211,"column":12,"offset":2736}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"max 数据最小值","position":{"start":{"line":212,"column":3,"offset":2739},"end":{"line":212,"column":12,"offset":2748}}}],"position":{"start":{"line":212,"column":1,"offset":2737},"end":{"line":212,"column":12,"offset":2748}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"extent 经纬度范围","position":{"start":{"line":213,"column":3,"offset":2751},"end":{"line":213,"column":15,"offset":2763}}}],"position":{"start":{"line":213,"column":1,"offset":2749},"end":{"line":213,"column":15,"offset":2763}}},{"type":"text","value":"\n"}],"position":{"start":{"line":208,"column":1,"offset":2669},"end":{"line":213,"column":15,"offset":2763}}},{"type":"text","value":"\n"},{"type":"raw","value":"
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
","position":{"start":{"line":215,"column":1,"offset":2765},"end":{"line":226,"column":4,"offset":3014}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"transforms"},"children":[{"type":"element","tagName":"a","properties":{"href":"#transforms","aria-label":"transforms permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"transforms","position":{"start":{"line":229,"column":5,"offset":3021},"end":{"line":229,"column":15,"offset":3031}}}],"position":{"start":{"line":229,"column":1,"offset":3017},"end":{"line":229,"column":15,"offset":3031}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"目前支持三种数据处理方法 map，grid，hexagon transform配置项","position":{"start":{"line":230,"column":1,"offset":3032},"end":{"line":230,"column":43,"offset":3074}}}],"position":{"start":{"line":230,"column":1,"offset":3032},"end":{"line":230,"column":43,"offset":3074}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"type 数据处理类型","position":{"start":{"line":232,"column":3,"offset":3078},"end":{"line":232,"column":14,"offset":3089}}}],"position":{"start":{"line":232,"column":1,"offset":3076},"end":{"line":232,"column":14,"offset":3089}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" tansform cfg  数据处理配置项","position":{"start":{"line":233,"column":3,"offset":3092},"end":{"line":233,"column":25,"offset":3114}}}],"position":{"start":{"line":233,"column":1,"offset":3090},"end":{"line":233,"column":25,"offset":3114}}},{"type":"text","value":"\n"}],"position":{"start":{"line":232,"column":1,"offset":3076},"end":{"line":233,"column":25,"offset":3114}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"map"},"children":[{"type":"element","tagName":"a","properties":{"href":"#map","aria-label":"map permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"map","position":{"start":{"line":236,"column":6,"offset":3122},"end":{"line":236,"column":9,"offset":3125}}}],"position":{"start":{"line":236,"column":1,"offset":3117},"end":{"line":236,"column":9,"offset":3125}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"数据处理，支持自定义callback函数","position":{"start":{"line":237,"column":1,"offset":3126},"end":{"line":237,"column":21,"offset":3146}}}],"position":{"start":{"line":237,"column":1,"offset":3126},"end":{"line":237,"column":21,"offset":3146}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"callback:function 回调函数","position":{"start":{"line":239,"column":3,"offset":3150},"end":{"line":239,"column":25,"offset":3172}}}],"position":{"start":{"line":239,"column":1,"offset":3148},"end":{"line":239,"column":25,"offset":3172}}},{"type":"text","value":"\n"}],"position":{"start":{"line":239,"column":1,"offset":3148},"end":{"line":239,"column":25,"offset":3172}}},{"type":"text","value":"\n"},{"type":"raw","value":"
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
","position":{"start":{"line":241,"column":1,"offset":3174},"end":{"line":256,"column":4,"offset":3536}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"grid"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grid","aria-label":"grid permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"grid","position":{"start":{"line":259,"column":6,"offset":3544},"end":{"line":259,"column":10,"offset":3548}}}],"position":{"start":{"line":259,"column":1,"offset":3539},"end":{"line":259,"column":10,"offset":3548}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"生成方格网布局，根据数据字段统计，主要在网格热力图中使用","position":{"start":{"line":261,"column":1,"offset":3550},"end":{"line":261,"column":29,"offset":3578}}}],"position":{"start":{"line":261,"column":1,"offset":3550},"end":{"line":261,"column":29,"offset":3578}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" type: 'grid',","position":{"start":{"line":263,"column":3,"offset":3582},"end":{"line":263,"column":17,"offset":3596}}}],"position":{"start":{"line":263,"column":1,"offset":3580},"end":{"line":263,"column":17,"offset":3596}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" size: 网格半径","position":{"start":{"line":264,"column":3,"offset":3599},"end":{"line":264,"column":14,"offset":3610}}}],"position":{"start":{"line":264,"column":1,"offset":3597},"end":{"line":264,"column":14,"offset":3610}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" field: 数据统计字段","position":{"start":{"line":265,"column":3,"offset":3613},"end":{"line":265,"column":17,"offset":3627}}}],"position":{"start":{"line":265,"column":1,"offset":3611},"end":{"line":265,"column":17,"offset":3627}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" method:聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":266,"column":3,"offset":3630},"end":{"line":266,"column":45,"offset":3672}}}],"position":{"start":{"line":266,"column":1,"offset":3628},"end":{"line":266,"column":45,"offset":3672}}},{"type":"text","value":"\n"}],"position":{"start":{"line":263,"column":1,"offset":3580},"end":{"line":266,"column":45,"offset":3672}}},{"type":"text","value":"\n"},{"type":"raw","value":"
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
","position":{"start":{"line":268,"column":1,"offset":3674},"end":{"line":279,"column":4,"offset":3847}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"hexagon"},"children":[{"type":"element","tagName":"a","properties":{"href":"#hexagon","aria-label":"hexagon permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"hexagon","position":{"start":{"line":282,"column":6,"offset":3855},"end":{"line":282,"column":13,"offset":3862}}}],"position":{"start":{"line":282,"column":1,"offset":3850},"end":{"line":282,"column":13,"offset":3862}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"生成六边形网格布局，根据数据字段统计","position":{"start":{"line":283,"column":1,"offset":3863},"end":{"line":283,"column":19,"offset":3881}}}],"position":{"start":{"line":283,"column":1,"offset":3863},"end":{"line":283,"column":19,"offset":3881}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" type: 'hexagon',","position":{"start":{"line":285,"column":3,"offset":3885},"end":{"line":285,"column":20,"offset":3902}}}],"position":{"start":{"line":285,"column":1,"offset":3883},"end":{"line":285,"column":20,"offset":3902}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" size: 网格半径","position":{"start":{"line":286,"column":3,"offset":3905},"end":{"line":286,"column":14,"offset":3916}}}],"position":{"start":{"line":286,"column":1,"offset":3903},"end":{"line":286,"column":14,"offset":3916}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" field: 数据统计字段","position":{"start":{"line":287,"column":3,"offset":3919},"end":{"line":287,"column":17,"offset":3933}}}],"position":{"start":{"line":287,"column":1,"offset":3917},"end":{"line":287,"column":17,"offset":3933}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":" method:聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":288,"column":3,"offset":3936},"end":{"line":288,"column":45,"offset":3978}}}],"position":{"start":{"line":288,"column":1,"offset":3934},"end":{"line":288,"column":45,"offset":3978}}},{"type":"text","value":"\n"}],"position":{"start":{"line":285,"column":1,"offset":3883},"end":{"line":288,"column":45,"offset":3978}}},{"type":"text","value":"\n"},{"type":"raw","value":"
","position":{"start":{"line":291,"column":1,"offset":3981},"end":{"line":295,"column":1,"offset":3988}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":295,"column":1,"offset":3988}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-c90a0b1d67cad2f0a17ba5f249b1813f.json b/.cache/caches/gatsby-transformer-remark/diskstore-c90a0b1d67cad2f0a17ba5f249b1813f.json deleted file mode 100644 index c8d9f82ddb..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-c90a0b1d67cad2f0a17ba5f249b1813f.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-8ba6e770aca269ce1a09e219ea919f44-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Marker 地图标注 目前只支持2D dom标注","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":26,"offset":26}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":26,"offset":26}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"构造函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0","aria-label":"构造函数 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"构造函数","position":{"start":{"line":5,"column":4,"offset":32},"end":{"line":5,"column":8,"offset":36}}}],"position":{"start":{"line":5,"column":1,"offset":29},"end":{"line":5,"column":8,"offset":36}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Marker","position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":7,"offset":43}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":7,"offset":43},"end":{"line":6,"column":13,"offset":49}}},{"type":"raw","value":"const Marker = new L7.Marker(option)","position":{"start":{"line":6,"column":13,"offset":49},"end":{"line":6,"column":51,"offset":87}}}],"position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":51,"offset":87}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"option"},"children":[{"type":"element","tagName":"a","properties":{"href":"#option","aria-label":"option permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"option","position":{"start":{"line":9,"column":6,"offset":95},"end":{"line":9,"column":12,"offset":101}}}],"position":{"start":{"line":9,"column":1,"offset":90},"end":{"line":9,"column":12,"offset":101}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"color        ","position":{"start":{"line":11,"column":3,"offset":105},"end":{"line":11,"column":16,"offset":118}}},{"type":"raw","value":"string","position":{"start":{"line":11,"column":16,"offset":118},"end":{"line":11,"column":25,"offset":127}}},{"type":"text","value":"   ","position":{"start":{"line":11,"column":25,"offset":127},"end":{"line":11,"column":28,"offset":130}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32","alt":"map-marker.png"},"children":[],"position":{"start":{"line":11,"column":28,"offset":130},"end":{"line":11,"column":264,"offset":366}}},{"type":"text","value":" 设置默认marker的颜色","position":{"start":{"line":11,"column":264,"offset":366},"end":{"line":11,"column":278,"offset":380}}}],"position":{"start":{"line":11,"column":1,"offset":103},"end":{"line":11,"column":278,"offset":380}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"element    ","position":{"start":{"line":12,"column":3,"offset":383},"end":{"line":12,"column":14,"offset":394}}},{"type":"raw","value":"Dom|string","position":{"start":{"line":12,"column":14,"offset":394},"end":{"line":12,"column":26,"offset":406}}},{"type":"text","value":"    自定义marker Dom节点，可以是dom实例，也可以是dom id","position":{"start":{"line":12,"column":26,"offset":406},"end":{"line":12,"column":65,"offset":445}}}],"position":{"start":{"line":12,"column":1,"offset":381},"end":{"line":12,"column":65,"offset":445}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"anchor     ","position":{"start":{"line":13,"column":3,"offset":448},"end":{"line":13,"column":14,"offset":459}}},{"type":"raw","value":"string","position":{"start":{"line":13,"column":14,"offset":459},"end":{"line":13,"column":22,"offset":467}}},{"type":"text","value":"  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right","position":{"start":{"line":13,"column":22,"offset":467},"end":{"line":13,"column":135,"offset":580}}}],"position":{"start":{"line":13,"column":1,"offset":446},"end":{"line":13,"column":135,"offset":580}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"offset    ","position":{"start":{"line":14,"column":3,"offset":583},"end":{"line":14,"column":13,"offset":593}}},{"type":"raw","value":"Array","position":{"start":{"line":14,"column":13,"offset":593},"end":{"line":14,"column":20,"offset":600}}},{"type":"text","value":"  偏移量 ","position":{"start":{"line":14,"column":20,"offset":600},"end":{"line":14,"column":26,"offset":606}}},{"type":"text","value":"[ 0, 0 ]","position":{"start":{"line":14,"column":27,"offset":607},"end":{"line":14,"column":33,"offset":613}}},{"type":"text","value":" 分别表示 X, Y 的偏移量","position":{"start":{"line":14,"column":34,"offset":614},"end":{"line":14,"column":49,"offset":629}}}],"position":{"start":{"line":14,"column":1,"offset":581},"end":{"line":14,"column":49,"offset":629}}},{"type":"text","value":"\n"}],"position":{"start":{"line":11,"column":1,"offset":103},"end":{"line":14,"column":49,"offset":629}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%96%B9%E6%B3%95","aria-label":"方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"方法","position":{"start":{"line":17,"column":4,"offset":635},"end":{"line":17,"column":6,"offset":637}}}],"position":{"start":{"line":17,"column":1,"offset":632},"end":{"line":17,"column":6,"offset":637}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"setlnglat"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setlnglat","aria-label":"setlnglat permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setLnglat","position":{"start":{"line":19,"column":6,"offset":644},"end":{"line":19,"column":15,"offset":653}}}],"position":{"start":{"line":19,"column":1,"offset":639},"end":{"line":19,"column":15,"offset":653}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置marker经纬度位置","position":{"start":{"line":20,"column":1,"offset":654},"end":{"line":20,"column":14,"offset":667}}}],"position":{"start":{"line":20,"column":1,"offset":654},"end":{"line":20,"column":14,"offset":667}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"addto"},"children":[{"type":"element","tagName":"a","properties":{"href":"#addto","aria-label":"addto permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"addTo","position":{"start":{"line":22,"column":6,"offset":674},"end":{"line":22,"column":11,"offset":679}}}],"position":{"start":{"line":22,"column":1,"offset":669},"end":{"line":22,"column":11,"offset":679}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将marker添加到地图Scene","position":{"start":{"line":23,"column":1,"offset":680},"end":{"line":23,"column":18,"offset":697}}}],"position":{"start":{"line":23,"column":1,"offset":680},"end":{"line":23,"column":18,"offset":697}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"remove"},"children":[{"type":"element","tagName":"a","properties":{"href":"#remove","aria-label":"remove permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"remove","position":{"start":{"line":25,"column":6,"offset":704},"end":{"line":25,"column":12,"offset":710}}}],"position":{"start":{"line":25,"column":1,"offset":699},"end":{"line":25,"column":12,"offset":710}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除marker","position":{"start":{"line":26,"column":1,"offset":711},"end":{"line":26,"column":9,"offset":719}}}],"position":{"start":{"line":26,"column":1,"offset":711},"end":{"line":26,"column":9,"offset":719}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"getelement"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getelement","aria-label":"getelement permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getElement","position":{"start":{"line":28,"column":6,"offset":726},"end":{"line":28,"column":16,"offset":736}}}],"position":{"start":{"line":28,"column":1,"offset":721},"end":{"line":28,"column":16,"offset":736}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取marker dom Element","position":{"start":{"line":29,"column":1,"offset":737},"end":{"line":29,"column":21,"offset":757}}}],"position":{"start":{"line":29,"column":1,"offset":737},"end":{"line":29,"column":21,"offset":757}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"getlnglat"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getlnglat","aria-label":"getlnglat permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getLngLat","position":{"start":{"line":31,"column":6,"offset":764},"end":{"line":31,"column":15,"offset":773}}}],"position":{"start":{"line":31,"column":1,"offset":759},"end":{"line":31,"column":15,"offset":773}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取marker经纬度坐标","position":{"start":{"line":32,"column":1,"offset":774},"end":{"line":32,"column":14,"offset":787}}}],"position":{"start":{"line":32,"column":1,"offset":774},"end":{"line":32,"column":14,"offset":787}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"togglepopup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#togglepopup","aria-label":"togglepopup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"togglePopup","position":{"start":{"line":34,"column":6,"offset":794},"end":{"line":34,"column":17,"offset":805}}}],"position":{"start":{"line":34,"column":1,"offset":789},"end":{"line":34,"column":17,"offset":805}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"开启或者关闭marker弹出框","position":{"start":{"line":35,"column":1,"offset":806},"end":{"line":35,"column":16,"offset":821}}}],"position":{"start":{"line":35,"column":1,"offset":806},"end":{"line":35,"column":16,"offset":821}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"setpopup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setpopup","aria-label":"setpopup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"setPopup","position":{"start":{"line":37,"column":6,"offset":828},"end":{"line":37,"column":14,"offset":836}}}],"position":{"start":{"line":37,"column":1,"offset":823},"end":{"line":37,"column":14,"offset":836}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为marker设置popup","position":{"start":{"line":38,"column":1,"offset":837},"end":{"line":38,"column":15,"offset":851}}}],"position":{"start":{"line":38,"column":1,"offset":837},"end":{"line":38,"column":15,"offset":851}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"getpopup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getpopup","aria-label":"getpopup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"getPopup","position":{"start":{"line":40,"column":6,"offset":858},"end":{"line":40,"column":14,"offset":866}}}],"position":{"start":{"line":40,"column":1,"offset":853},"end":{"line":40,"column":14,"offset":866}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取marker弹出框","position":{"start":{"line":41,"column":1,"offset":867},"end":{"line":41,"column":12,"offset":878}}}],"position":{"start":{"line":41,"column":1,"offset":867},"end":{"line":41,"column":12,"offset":878}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"示例代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81","aria-label":"示例代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"示例代码","position":{"start":{"line":44,"column":4,"offset":884},"end":{"line":44,"column":8,"offset":888}}}],"position":{"start":{"line":44,"column":1,"offset":881},"end":{"line":44,"column":8,"offset":888}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"默认marker"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%BB%98%E8%AE%A4marker","aria-label":"默认marker permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"默认Marker","position":{"start":{"line":46,"column":6,"offset":895},"end":{"line":46,"column":14,"offset":903}}}],"position":{"start":{"line":46,"column":1,"offset":890},"end":{"line":46,"column":14,"offset":903}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"**","position":{"start":{"line":47,"column":1,"offset":904},"end":{"line":47,"column":3,"offset":906}}},{"type":"raw","value":"
","position":{"start":{"line":47,"column":3,"offset":906},"end":{"line":47,"column":9,"offset":912}}},{"type":"raw","value":"const marker = new L7.Marker({color:'blue'})","position":{"start":{"line":47,"column":9,"offset":912},"end":{"line":47,"column":56,"offset":959}}}],"position":{"start":{"line":47,"column":1,"offset":904},"end":{"line":47,"column":56,"offset":959}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"自定义marker"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%87%AA%E5%AE%9A%E4%B9%89marker","aria-label":"自定义marker permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"自定义Marker","position":{"start":{"line":50,"column":6,"offset":967},"end":{"line":50,"column":15,"offset":976}}}],"position":{"start":{"line":50,"column":1,"offset":962},"end":{"line":50,"column":15,"offset":976}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
","position":{"start":{"line":52,"column":1,"offset":978},"end":{"line":62,"column":4,"offset":1281}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"设置-popup"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%AE%BE%E7%BD%AE-popup","aria-label":"设置 popup permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"设置 popup","position":{"start":{"line":65,"column":6,"offset":1289},"end":{"line":65,"column":14,"offset":1297}}}],"position":{"start":{"line":65,"column":1,"offset":1284},"end":{"line":65,"column":14,"offset":1297}}},{"type":"text","value":"\n"},{"type":"raw","value":"
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","position":{"start":{"line":67,"column":1,"offset":1299},"end":{"line":77,"column":4,"offset":1499}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":80,"column":1,"offset":1502}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-c9573ff52f9cf1e7cf37924880786e9d.json b/.cache/caches/gatsby-transformer-remark/diskstore-c9573ff52f9cf1e7cf37924880786e9d.json deleted file mode 100644 index e45e453d77..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-c9573ff52f9cf1e7cf37924880786e9d.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-e8ed7f4cc4b01ba1be50f819d1d1fcae-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":47,"offset":46},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":47,"offset":46},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":47,"offset":46}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-c975de8bd59792a04d51f45b6e5ffc32.json b/.cache/caches/gatsby-transformer-remark/diskstore-c975de8bd59792a04d51f45b6e5ffc32.json deleted file mode 100644 index e7e8ac8f0a..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-c975de8bd59792a04d51f45b6e5ffc32.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-99f9daf26f7bf831e47b400f65746195-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-cb38fc17ac1aedac963d210067deed96.json b/.cache/caches/gatsby-transformer-remark/diskstore-cb38fc17ac1aedac963d210067deed96.json deleted file mode 100644 index 554f916af2..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-cb38fc17ac1aedac963d210067deed96.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-caf747b54e8159809c3beb2b46e148a0-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"使用方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95","aria-label":"使用方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用方法","position":{"start":{"line":1,"column":3,"offset":2},"end":{"line":1,"column":7,"offset":6}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":7,"offset":6}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 提供三种使用方式：CDN、Submodule。","position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":27,"offset":34}}}],"position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":27,"offset":34}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"通过-cdn-使用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%80%9A%E8%BF%87-cdn-%E4%BD%BF%E7%94%A8","aria-label":"通过 cdn 使用 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"通过 CDN 使用","position":{"start":{"line":5,"column":4,"offset":39},"end":{"line":5,"column":13,"offset":48}}}],"position":{"start":{"line":5,"column":1,"offset":36},"end":{"line":5,"column":13,"offset":48}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"首先在 ","position":{"start":{"line":7,"column":1,"offset":50},"end":{"line":7,"column":5,"offset":54}}},{"type":"raw","value":"<head>","position":{"start":{"line":7,"column":5,"offset":54},"end":{"line":7,"column":13,"offset":62}}},{"type":"text","value":" 中引入 L7 CDN 版本的 JS 和 CSS 文件：","position":{"start":{"line":7,"column":13,"offset":62},"end":{"line":7,"column":41,"offset":90}}}],"position":{"start":{"line":7,"column":1,"offset":50},"end":{"line":7,"column":41,"offset":90}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
","position":{"start":{"line":8,"column":1,"offset":91},"end":{"line":12,"column":4,"offset":217}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 ","position":{"start":{"line":14,"column":1,"offset":219},"end":{"line":14,"column":50,"offset":268}}},{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox 文档","position":{"start":{"line":14,"column":51,"offset":269},"end":{"line":14,"column":60,"offset":278}}}],"position":{"start":{"line":14,"column":50,"offset":268},"end":{"line":14,"column":120,"offset":338}}},{"type":"text","value":"：","position":{"start":{"line":14,"column":120,"offset":338},"end":{"line":14,"column":121,"offset":339}}}],"position":{"start":{"line":14,"column":1,"offset":219},"end":{"line":14,"column":121,"offset":339}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
","position":{"start":{"line":15,"column":1,"offset":340},"end":{"line":21,"column":4,"offset":582}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️高德采用异步加载，因此不需要引入任何额外静态文件。","position":{"start":{"line":22,"column":1,"offset":583},"end":{"line":22,"column":28,"offset":610}}}],"position":{"start":{"line":22,"column":1,"offset":583},"end":{"line":22,"column":28,"offset":610}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"然后在 ","position":{"start":{"line":24,"column":1,"offset":612},"end":{"line":24,"column":5,"offset":616}}},{"type":"raw","value":"<body>","position":{"start":{"line":24,"column":5,"offset":616},"end":{"line":24,"column":13,"offset":624}}},{"type":"text","value":" 中定义一个容器并设置一个 ","position":{"start":{"line":24,"column":13,"offset":624},"end":{"line":24,"column":27,"offset":638}}},{"type":"raw","value":"id","position":{"start":{"line":24,"column":27,"offset":638},"end":{"line":24,"column":31,"offset":642}}},{"type":"text","value":"。通过全局 ","position":{"start":{"line":24,"column":31,"offset":642},"end":{"line":24,"column":37,"offset":648}}},{"type":"raw","value":"L7","position":{"start":{"line":24,"column":37,"offset":648},"end":{"line":24,"column":41,"offset":652}}},{"type":"text","value":" 这个命名空间可以获取场景 ","position":{"start":{"line":24,"column":41,"offset":652},"end":{"line":24,"column":55,"offset":666}}},{"type":"raw","value":"L7.Scene","position":{"start":{"line":24,"column":55,"offset":666},"end":{"line":24,"column":65,"offset":676}}},{"type":"text","value":" 和图层 ","position":{"start":{"line":24,"column":65,"offset":676},"end":{"line":24,"column":70,"offset":681}}},{"type":"raw","value":"L7.PolygonLayer","position":{"start":{"line":24,"column":70,"offset":681},"end":{"line":24,"column":87,"offset":698}}},{"type":"text","value":"：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 ","position":{"start":{"line":24,"column":87,"offset":698},"end":{"line":25,"column":33,"offset":732}}},{"type":"raw","value":"L7.Scene","position":{"start":{"line":25,"column":33,"offset":732},"end":{"line":25,"column":43,"offset":742}}},{"type":"text","value":" 的构造函数，获取方式如下：","position":{"start":{"line":25,"column":43,"offset":742},"end":{"line":25,"column":57,"offset":756}}}],"position":{"start":{"line":24,"column":1,"offset":612},"end":{"line":25,"column":57,"offset":756}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"高德地图开发者 Key ","position":{"start":{"line":26,"column":3,"offset":759},"end":{"line":26,"column":15,"offset":771}}},{"type":"element","tagName":"a","properties":{"href":"https://lbs.amap.com/dev/key/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"申请方法","position":{"start":{"line":26,"column":16,"offset":772},"end":{"line":26,"column":20,"offset":776}}}],"position":{"start":{"line":26,"column":15,"offset":771},"end":{"line":26,"column":52,"offset":808}}}],"position":{"start":{"line":26,"column":1,"offset":757},"end":{"line":26,"column":52,"offset":808}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox Access Tokens","position":{"start":{"line":27,"column":4,"offset":812},"end":{"line":27,"column":24,"offset":832}}}],"position":{"start":{"line":27,"column":3,"offset":811},"end":{"line":27,"column":123,"offset":931}}}],"position":{"start":{"line":27,"column":1,"offset":809},"end":{"line":27,"column":123,"offset":931}}},{"type":"text","value":"\n"}],"position":{"start":{"line":26,"column":1,"offset":757},"end":{"line":27,"column":123,"offset":931}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"通过-submodule-使用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%80%9A%E8%BF%87-submodule-%E4%BD%BF%E7%94%A8","aria-label":"通过 submodule 使用 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"通过 Submodule 使用","position":{"start":{"line":29,"column":4,"offset":936},"end":{"line":29,"column":19,"offset":951}}}],"position":{"start":{"line":29,"column":1,"offset":933},"end":{"line":29,"column":19,"offset":951}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"首先通过 ","position":{"start":{"line":31,"column":1,"offset":953},"end":{"line":31,"column":6,"offset":958}}},{"type":"raw","value":"npm/yarn","position":{"start":{"line":31,"column":6,"offset":958},"end":{"line":31,"column":16,"offset":968}}}],"position":{"start":{"line":31,"column":1,"offset":953},"end":{"line":31,"column":16,"offset":968}}},{"type":"text","value":"\n"},{"type":"raw","value":"
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
","position":{"start":{"line":32,"column":1,"offset":969},"end":{"line":37,"column":4,"offset":1047}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"然后就可以使用其中包含的场景和各类图层：","position":{"start":{"line":39,"column":1,"offset":1049},"end":{"line":39,"column":21,"offset":1069}}}],"position":{"start":{"line":39,"column":1,"offset":1049},"end":{"line":39,"column":21,"offset":1069}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
","position":{"start":{"line":40,"column":1,"offset":1070},"end":{"line":85,"column":4,"offset":1941}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：","position":{"start":{"line":88,"column":1,"offset":1944},"end":{"line":88,"column":36,"offset":1979}}}],"position":{"start":{"line":88,"column":1,"offset":1944},"end":{"line":88,"column":36,"offset":1979}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"高德地图","position":{"start":{"line":89,"column":4,"offset":1983},"end":{"line":89,"column":8,"offset":1987}}}],"position":{"start":{"line":89,"column":3,"offset":1982},"end":{"line":89,"column":88,"offset":2067}}}],"position":{"start":{"line":89,"column":1,"offset":1980},"end":{"line":89,"column":88,"offset":2067}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox","position":{"start":{"line":90,"column":4,"offset":2071},"end":{"line":90,"column":10,"offset":2077}}}],"position":{"start":{"line":90,"column":3,"offset":2070},"end":{"line":90,"column":92,"offset":2159}}}],"position":{"start":{"line":90,"column":1,"offset":2068},"end":{"line":90,"column":92,"offset":2159}}},{"type":"text","value":"\n"}],"position":{"start":{"line":89,"column":1,"offset":1980},"end":{"line":90,"column":92,"offset":2159}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"wip-react"},"children":[{"type":"element","tagName":"a","properties":{"href":"#wip-react","aria-label":"wip react permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"[WIP]","position":{"start":{"line":93,"column":5,"offset":2166},"end":{"line":93,"column":8,"offset":2169}}},{"type":"text","value":" React","position":{"start":{"line":93,"column":9,"offset":2170},"end":{"line":93,"column":15,"offset":2176}}}],"position":{"start":{"line":93,"column":1,"offset":2162},"end":{"line":93,"column":15,"offset":2176}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React 组件待开发，目前可以暂时以 Submodule 方式使用：","position":{"start":{"line":95,"column":1,"offset":2178},"end":{"line":95,"column":36,"offset":2213}}}],"position":{"start":{"line":95,"column":1,"offset":2178},"end":{"line":95,"column":36,"offset":2213}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
","position":{"start":{"line":96,"column":1,"offset":2214},"end":{"line":157,"column":4,"offset":3494}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️组件 Unmount 时需要通过 ","position":{"start":{"line":159,"column":1,"offset":3496},"end":{"line":159,"column":20,"offset":3515}}},{"type":"raw","value":"scene.destroy()","position":{"start":{"line":159,"column":20,"offset":3515},"end":{"line":159,"column":37,"offset":3532}}},{"type":"text","value":" 手动销毁场景。","position":{"start":{"line":159,"column":37,"offset":3532},"end":{"line":159,"column":45,"offset":3540}}}],"position":{"start":{"line":159,"column":1,"offset":3496},"end":{"line":159,"column":45,"offset":3540}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":161,"column":1,"offset":3542}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-cb507663b64034994ee125635c9150c1.json b/.cache/caches/gatsby-transformer-remark/diskstore-cb507663b64034994ee125635c9150c1.json deleted file mode 100644 index ba857eaddb..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-cb507663b64034994ee125635c9150c1.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-feeb976cc6200a213384f1f2a7b3760a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-cd51d02e9ed93225c9d3e8b7f4cced96.json b/.cache/caches/gatsby-transformer-remark/diskstore-cd51d02e9ed93225c9d3e8b7f4cced96.json deleted file mode 100644 index ce6b07a988..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-cd51d02e9ed93225c9d3e8b7f4cced96.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-b71d02195b585681f9cbb3853782db83-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-cdb9677b75a4a03c7b42231461299165.json b/.cache/caches/gatsby-transformer-remark/diskstore-cdb9677b75a4a03c7b42231461299165.json deleted file mode 100644 index 0901e0c79e..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-cdb9677b75a4a03c7b42231461299165.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-b547ac3a0b516aef90927b09bdc0a22c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-cdf20b3acc4010cbbed78951e294f78d.json b/.cache/caches/gatsby-transformer-remark/diskstore-cdf20b3acc4010cbbed78951e294f78d.json deleted file mode 100644 index a3f4e9c4bf..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-cdf20b3acc4010cbbed78951e294f78d.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-c78275703877b4c8457c7b54e97316df-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#线图层","title":null,"children":[],"data":{"hProperties":{"aria-label":"线图层 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"线图层","position":{"start":{"line":1,"column":4,"offset":3},"end":{"line":1,"column":7,"offset":6},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":7,"offset":6},"indent":[]},"data":{"id":"线图层","htmlAttributes":{"id":"线图层"},"hProperties":{"id":"线图层"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"shape","position":{"start":{"line":3,"column":5,"offset":12},"end":{"line":3,"column":10,"offset":17},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":10,"offset":17},"indent":[]},"data":{"id":"shape","htmlAttributes":{"id":"shape"},"hProperties":{"id":"shape"}}},{"type":"paragraph","children":[{"type":"text","value":"线图层支持4种 shape","position":{"start":{"line":5,"column":1,"offset":19},"end":{"line":5,"column":14,"offset":32},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":19},"end":{"line":5,"column":14,"offset":32},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"line 绘制路径图，","position":{"start":{"line":7,"column":3,"offset":36},"end":{"line":7,"column":14,"offset":47},"indent":[]}}],"position":{"start":{"line":7,"column":3,"offset":36},"end":{"line":7,"column":14,"offset":47},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":34},"end":{"line":7,"column":14,"offset":47},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"arc 绘制弧线 通过贝塞尔曲线算法技术弧线","position":{"start":{"line":8,"column":3,"offset":50},"end":{"line":8,"column":25,"offset":72},"indent":[]}}],"position":{"start":{"line":8,"column":3,"offset":50},"end":{"line":8,"column":25,"offset":72},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":48},"end":{"line":8,"column":25,"offset":72},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线","position":{"start":{"line":9,"column":3,"offset":75},"end":{"line":9,"column":44,"offset":116},"indent":[]}}],"position":{"start":{"line":9,"column":3,"offset":75},"end":{"line":9,"column":44,"offset":116},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":73},"end":{"line":9,"column":44,"offset":116},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"arc3d 3d弧线地图 3D视角","position":{"start":{"line":10,"column":3,"offset":119},"end":{"line":10,"column":21,"offset":137},"indent":[]}}],"position":{"start":{"line":10,"column":3,"offset":119},"end":{"line":10,"column":21,"offset":137},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":117},"end":{"line":10,"column":21,"offset":137},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":34},"end":{"line":10,"column":21,"offset":137},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ 弧线只需要设置起始点坐标即可","position":{"start":{"line":12,"column":1,"offset":139},"end":{"line":12,"column":18,"offset":156},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":139},"end":{"line":12,"column":18,"offset":156},"indent":[]}},{"type":"html","lang":null,"meta":null,"value":"
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
","position":{"start":{"line":14,"column":1,"offset":158},"end":{"line":25,"column":4,"offset":376},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点","position":{"start":{"line":27,"column":1,"offset":378},"end":{"line":27,"column":46,"offset":423},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":378},"end":{"line":27,"column":46,"offset":423},"indent":[]}},{"type":"html","lang":null,"meta":null,"value":"
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
","position":{"start":{"line":28,"column":1,"offset":424},"end":{"line":52,"column":4,"offset":798},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#size","title":null,"children":[],"data":{"hProperties":{"aria-label":"size permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"size","position":{"start":{"line":54,"column":5,"offset":804},"end":{"line":54,"column":9,"offset":808},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":800},"end":{"line":54,"column":9,"offset":808},"indent":[]},"data":{"id":"size","htmlAttributes":{"id":"size"},"hProperties":{"id":"size"}}},{"type":"paragraph","children":[{"type":"text","value":"线图层 可以设置高度","position":{"start":{"line":56,"column":1,"offset":810},"end":{"line":56,"column":11,"offset":820},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":810},"end":{"line":56,"column":11,"offset":820},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"size 类型为number 则表示 line的宽度","position":{"start":{"line":58,"column":3,"offset":824},"end":{"line":58,"column":29,"offset":850},"indent":[]}}],"position":{"start":{"line":58,"column":3,"offset":824},"end":{"line":58,"column":29,"offset":850},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":822},"end":{"line":58,"column":29,"offset":850},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"size 类型为 ","position":{"start":{"line":59,"column":3,"offset":853},"end":{"line":59,"column":12,"offset":862},"indent":[]}},{"type":"linkReference","identifier":"number , number","label":"number , number","referenceType":"shortcut","children":[{"type":"text","value":"number , number","position":{"start":{"line":59,"column":13,"offset":863},"end":{"line":59,"column":28,"offset":878},"indent":[]}}],"position":{"start":{"line":59,"column":12,"offset":862},"end":{"line":59,"column":29,"offset":879},"indent":[]}},{"type":"text","value":" 分别表示宽度和高度","position":{"start":{"line":59,"column":29,"offset":879},"end":{"line":59,"column":39,"offset":889},"indent":[]}}],"position":{"start":{"line":59,"column":3,"offset":853},"end":{"line":59,"column":39,"offset":889},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":851},"end":{"line":59,"column":39,"offset":889},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":822},"end":{"line":59,"column":39,"offset":889},"indent":[1]}},{"type":"html","lang":"javascript","meta":null,"value":"
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","position":{"start":{"line":61,"column":1,"offset":891},"end":{"line":66,"column":4,"offset":975},"indent":[1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":69,"column":1,"offset":978}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d03dfa9d01508540bfc68ced794e49aa.json b/.cache/caches/gatsby-transformer-remark/diskstore-d03dfa9d01508540bfc68ced794e49aa.json deleted file mode 100644 index 56ed8e9104..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d03dfa9d01508540bfc68ced794e49aa.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-e214775bf910f98457136a5495aca2a9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":2,"column":1,"offset":1}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d06cd1da1159ccacc62fa08d540d7db3.json b/.cache/caches/gatsby-transformer-remark/diskstore-d06cd1da1159ccacc62fa08d540d7db3.json deleted file mode 100644 index 45852e10d4..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d06cd1da1159ccacc62fa08d540d7db3.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-3fdafdf445bd057a86b5717b80c92ebf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d0a28dd23163767ed21d9101aacf9192.json b/.cache/caches/gatsby-transformer-remark/diskstore-d0a28dd23163767ed21d9101aacf9192.json deleted file mode 100644 index 568b596790..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d0a28dd23163767ed21d9101aacf9192.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-7bb76714df549123e99e9b48d8d6822f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d0b4d2fb3fabbb674567c8b7490f1094.json b/.cache/caches/gatsby-transformer-remark/diskstore-d0b4d2fb3fabbb674567c8b7490f1094.json deleted file mode 100644 index a1a0d330af..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d0b4d2fb3fabbb674567c8b7490f1094.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-3b07088eb203c170b157e52c4c57f5c9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d2d3b8ea303e1882acb5631436945883.json b/.cache/caches/gatsby-transformer-remark/diskstore-d2d3b8ea303e1882acb5631436945883.json deleted file mode 100644 index b597dc1171..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d2d3b8ea303e1882acb5631436945883.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-d1d3303c6f92e074c20c0fbe3324ba42-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"线图层"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%BA%BF%E5%9B%BE%E5%B1%82","aria-label":"线图层 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"线图层","position":{"start":{"line":1,"column":4,"offset":3},"end":{"line":1,"column":7,"offset":6}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":7,"offset":6}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"shape"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shape","aria-label":"shape permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"shape","position":{"start":{"line":3,"column":5,"offset":12},"end":{"line":3,"column":10,"offset":17}}}],"position":{"start":{"line":3,"column":1,"offset":8},"end":{"line":3,"column":10,"offset":17}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"线图层支持4种 shape","position":{"start":{"line":5,"column":1,"offset":19},"end":{"line":5,"column":14,"offset":32}}}],"position":{"start":{"line":5,"column":1,"offset":19},"end":{"line":5,"column":14,"offset":32}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"line 绘制路径图，","position":{"start":{"line":7,"column":3,"offset":36},"end":{"line":7,"column":14,"offset":47}}}],"position":{"start":{"line":7,"column":1,"offset":34},"end":{"line":7,"column":14,"offset":47}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"arc 绘制弧线 通过贝塞尔曲线算法技术弧线","position":{"start":{"line":8,"column":3,"offset":50},"end":{"line":8,"column":25,"offset":72}}}],"position":{"start":{"line":8,"column":1,"offset":48},"end":{"line":8,"column":25,"offset":72}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线","position":{"start":{"line":9,"column":3,"offset":75},"end":{"line":9,"column":44,"offset":116}}}],"position":{"start":{"line":9,"column":1,"offset":73},"end":{"line":9,"column":44,"offset":116}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"arc3d 3d弧线地图 3D视角","position":{"start":{"line":10,"column":3,"offset":119},"end":{"line":10,"column":21,"offset":137}}}],"position":{"start":{"line":10,"column":1,"offset":117},"end":{"line":10,"column":21,"offset":137}}},{"type":"text","value":"\n"}],"position":{"start":{"line":7,"column":1,"offset":34},"end":{"line":10,"column":21,"offset":137}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️ 弧线只需要设置起始点坐标即可","position":{"start":{"line":12,"column":1,"offset":139},"end":{"line":12,"column":18,"offset":156}}}],"position":{"start":{"line":12,"column":1,"offset":139},"end":{"line":12,"column":18,"offset":156}}},{"type":"text","value":"\n"},{"type":"raw","value":"
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
","position":{"start":{"line":14,"column":1,"offset":158},"end":{"line":25,"column":4,"offset":375}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点","position":{"start":{"line":27,"column":1,"offset":377},"end":{"line":27,"column":46,"offset":422}}}],"position":{"start":{"line":27,"column":1,"offset":377},"end":{"line":27,"column":46,"offset":422}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
","position":{"start":{"line":28,"column":1,"offset":423},"end":{"line":52,"column":4,"offset":797}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"size"},"children":[{"type":"element","tagName":"a","properties":{"href":"#size","aria-label":"size permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"size","position":{"start":{"line":54,"column":5,"offset":803},"end":{"line":54,"column":9,"offset":807}}}],"position":{"start":{"line":54,"column":1,"offset":799},"end":{"line":54,"column":9,"offset":807}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"线图层 可以设置高度","position":{"start":{"line":56,"column":1,"offset":809},"end":{"line":56,"column":11,"offset":819}}}],"position":{"start":{"line":56,"column":1,"offset":809},"end":{"line":56,"column":11,"offset":819}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"size 类型为number 则表示 line的宽度","position":{"start":{"line":58,"column":3,"offset":823},"end":{"line":58,"column":29,"offset":849}}}],"position":{"start":{"line":58,"column":1,"offset":821},"end":{"line":58,"column":29,"offset":849}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"size 类型为 ","position":{"start":{"line":59,"column":3,"offset":852},"end":{"line":59,"column":12,"offset":861}}},{"type":"text","value":"[number , number]","position":{"start":{"line":59,"column":13,"offset":862},"end":{"line":59,"column":28,"offset":877}}},{"type":"text","value":" 分别表示宽度和高度","position":{"start":{"line":59,"column":29,"offset":878},"end":{"line":59,"column":39,"offset":888}}}],"position":{"start":{"line":59,"column":1,"offset":850},"end":{"line":59,"column":39,"offset":888}}},{"type":"text","value":"\n"}],"position":{"start":{"line":58,"column":1,"offset":821},"end":{"line":59,"column":39,"offset":888}}},{"type":"text","value":"\n"},{"type":"raw","value":"
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","position":{"start":{"line":61,"column":1,"offset":890},"end":{"line":66,"column":4,"offset":974}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":69,"column":1,"offset":977}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d6884425e6ba127a1ea0c052a7ed2a15.json b/.cache/caches/gatsby-transformer-remark/diskstore-d6884425e6ba127a1ea0c052a7ed2a15.json deleted file mode 100644 index ea64254329..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d6884425e6ba127a1ea0c052a7ed2a15.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-119e3104d715d1fff21c8aae318c2c39-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d7e562664c65de121b827a30e7eab764.json b/.cache/caches/gatsby-transformer-remark/diskstore-d7e562664c65de121b827a30e7eab764.json deleted file mode 100644 index 835073a737..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d7e562664c65de121b827a30e7eab764.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-60d822501ed69ef0096233b3fb440654-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d8ad3580ecd1bda1abff4d09a0a150bf.json b/.cache/caches/gatsby-transformer-remark/diskstore-d8ad3580ecd1bda1abff4d09a0a150bf.json deleted file mode 100644 index f4e815ee0a..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d8ad3580ecd1bda1abff4d09a0a150bf.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-b71d02195b585681f9cbb3853782db83-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d8c35555fc06a5133fcf13957b41e691.json b/.cache/caches/gatsby-transformer-remark/diskstore-d8c35555fc06a5133fcf13957b41e691.json deleted file mode 100644 index 287bbb4f98..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d8c35555fc06a5133fcf13957b41e691.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-39727a14ec623ec7ff2e3240d0462862-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#使用方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"使用方法","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":7,"offset":7},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":7,"offset":7},"indent":[]},"data":{"id":"使用方法","htmlAttributes":{"id":"使用方法"},"hProperties":{"id":"使用方法"}}},{"type":"paragraph","children":[{"type":"text","value":"L7 提供三种使用方式：CDN、Submodule。","position":{"start":{"line":4,"column":1,"offset":9},"end":{"line":4,"column":27,"offset":35},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":9},"end":{"line":4,"column":27,"offset":35},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#通过-cdn-使用","title":null,"children":[],"data":{"hProperties":{"aria-label":"通过 cdn 使用 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"通过 CDN 使用","position":{"start":{"line":6,"column":4,"offset":40},"end":{"line":6,"column":13,"offset":49},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":13,"offset":49},"indent":[]},"data":{"id":"通过-cdn-使用","htmlAttributes":{"id":"通过-cdn-使用"},"hProperties":{"id":"通过-cdn-使用"}}},{"type":"paragraph","children":[{"type":"text","value":"首先在 ","position":{"start":{"line":8,"column":1,"offset":51},"end":{"line":8,"column":5,"offset":55},"indent":[]}},{"type":"html","value":"<head>","position":{"start":{"line":8,"column":5,"offset":55},"end":{"line":8,"column":13,"offset":63},"indent":[]}},{"type":"text","value":" 中引入 L7 CDN 版本的 JS 和 CSS 文件：","position":{"start":{"line":8,"column":13,"offset":63},"end":{"line":8,"column":41,"offset":91},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":51},"end":{"line":8,"column":41,"offset":91},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
","position":{"start":{"line":9,"column":1,"offset":92},"end":{"line":13,"column":4,"offset":218},"indent":[1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 ","position":{"start":{"line":15,"column":1,"offset":220},"end":{"line":15,"column":50,"offset":269},"indent":[]}},{"type":"link","title":null,"url":"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart","children":[{"type":"text","value":"Mapbox 文档","position":{"start":{"line":15,"column":51,"offset":270},"end":{"line":15,"column":60,"offset":279},"indent":[]}}],"position":{"start":{"line":15,"column":50,"offset":269},"end":{"line":15,"column":120,"offset":339},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"：","position":{"start":{"line":15,"column":120,"offset":339},"end":{"line":15,"column":121,"offset":340},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":220},"end":{"line":15,"column":121,"offset":340},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
","position":{"start":{"line":16,"column":1,"offset":341},"end":{"line":22,"column":4,"offset":583},"indent":[1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️高德采用异步加载，因此不需要引入任何额外静态文件。","position":{"start":{"line":23,"column":1,"offset":584},"end":{"line":23,"column":28,"offset":611},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":584},"end":{"line":23,"column":28,"offset":611},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"然后在 ","position":{"start":{"line":25,"column":1,"offset":613},"end":{"line":25,"column":5,"offset":617},"indent":[]}},{"type":"html","value":"<body>","position":{"start":{"line":25,"column":5,"offset":617},"end":{"line":25,"column":13,"offset":625},"indent":[]}},{"type":"text","value":" 中定义一个容器并设置一个 ","position":{"start":{"line":25,"column":13,"offset":625},"end":{"line":25,"column":27,"offset":639},"indent":[]}},{"type":"html","value":"id","position":{"start":{"line":25,"column":27,"offset":639},"end":{"line":25,"column":31,"offset":643},"indent":[]}},{"type":"text","value":"。通过全局 ","position":{"start":{"line":25,"column":31,"offset":643},"end":{"line":25,"column":37,"offset":649},"indent":[]}},{"type":"html","value":"L7","position":{"start":{"line":25,"column":37,"offset":649},"end":{"line":25,"column":41,"offset":653},"indent":[]}},{"type":"text","value":" 这个命名空间可以获取场景 ","position":{"start":{"line":25,"column":41,"offset":653},"end":{"line":25,"column":55,"offset":667},"indent":[]}},{"type":"html","value":"L7.Scene","position":{"start":{"line":25,"column":55,"offset":667},"end":{"line":25,"column":65,"offset":677},"indent":[]}},{"type":"text","value":" 和图层 ","position":{"start":{"line":25,"column":65,"offset":677},"end":{"line":25,"column":70,"offset":682},"indent":[]}},{"type":"html","value":"L7.PolygonLayer","position":{"start":{"line":25,"column":70,"offset":682},"end":{"line":25,"column":87,"offset":699},"indent":[]}},{"type":"text","value":"：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 ","position":{"start":{"line":25,"column":87,"offset":699},"end":{"line":26,"column":33,"offset":733},"indent":[1]}},{"type":"html","value":"L7.Scene","position":{"start":{"line":26,"column":33,"offset":733},"end":{"line":26,"column":43,"offset":743},"indent":[]}},{"type":"text","value":" 的构造函数，获取方式如下：","position":{"start":{"line":26,"column":43,"offset":743},"end":{"line":26,"column":57,"offset":757},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":613},"end":{"line":26,"column":57,"offset":757},"indent":[1]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"高德地图开发者 Key ","position":{"start":{"line":27,"column":3,"offset":760},"end":{"line":27,"column":15,"offset":772},"indent":[]}},{"type":"link","title":null,"url":"https://lbs.amap.com/dev/key/","children":[{"type":"text","value":"申请方法","position":{"start":{"line":27,"column":16,"offset":773},"end":{"line":27,"column":20,"offset":777},"indent":[]}}],"position":{"start":{"line":27,"column":15,"offset":772},"end":{"line":27,"column":52,"offset":809},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":27,"column":3,"offset":760},"end":{"line":27,"column":52,"offset":809},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":758},"end":{"line":27,"column":52,"offset":809},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens","children":[{"type":"text","value":"Mapbox Access Tokens","position":{"start":{"line":28,"column":4,"offset":813},"end":{"line":28,"column":24,"offset":833},"indent":[]}}],"position":{"start":{"line":28,"column":3,"offset":812},"end":{"line":28,"column":123,"offset":932},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":28,"column":3,"offset":812},"end":{"line":28,"column":123,"offset":932},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":810},"end":{"line":28,"column":123,"offset":932},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":758},"end":{"line":28,"column":123,"offset":932},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#通过-submodule-使用","title":null,"children":[],"data":{"hProperties":{"aria-label":"通过 submodule 使用 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"通过 Submodule 使用","position":{"start":{"line":30,"column":4,"offset":937},"end":{"line":30,"column":19,"offset":952},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":934},"end":{"line":30,"column":19,"offset":952},"indent":[]},"data":{"id":"通过-submodule-使用","htmlAttributes":{"id":"通过-submodule-使用"},"hProperties":{"id":"通过-submodule-使用"}}},{"type":"paragraph","children":[{"type":"text","value":"首先通过 ","position":{"start":{"line":32,"column":1,"offset":954},"end":{"line":32,"column":6,"offset":959},"indent":[]}},{"type":"html","value":"npm/yarn","position":{"start":{"line":32,"column":6,"offset":959},"end":{"line":32,"column":16,"offset":969},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":954},"end":{"line":32,"column":16,"offset":969},"indent":[]}},{"type":"html","lang":"bash","meta":null,"value":"
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
","position":{"start":{"line":33,"column":1,"offset":970},"end":{"line":38,"column":4,"offset":1048},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"然后就可以使用其中包含的场景和各类图层：","position":{"start":{"line":40,"column":1,"offset":1050},"end":{"line":40,"column":21,"offset":1070},"indent":[]}}],"position":{"start":{"line":40,"column":1,"offset":1050},"end":{"line":40,"column":21,"offset":1070},"indent":[]}},{"type":"html","lang":"typescript","meta":null,"value":"
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
","position":{"start":{"line":41,"column":1,"offset":1071},"end":{"line":86,"column":4,"offset":1942},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：","position":{"start":{"line":89,"column":1,"offset":1945},"end":{"line":89,"column":36,"offset":1980},"indent":[]}}],"position":{"start":{"line":89,"column":1,"offset":1945},"end":{"line":89,"column":36,"offset":1980},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx","children":[{"type":"text","value":"高德地图","position":{"start":{"line":90,"column":4,"offset":1984},"end":{"line":90,"column":8,"offset":1988},"indent":[]}}],"position":{"start":{"line":90,"column":3,"offset":1983},"end":{"line":90,"column":88,"offset":2068},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":90,"column":3,"offset":1983},"end":{"line":90,"column":88,"offset":2068},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":1981},"end":{"line":90,"column":88,"offset":2068},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx","children":[{"type":"text","value":"Mapbox","position":{"start":{"line":91,"column":4,"offset":2072},"end":{"line":91,"column":10,"offset":2078},"indent":[]}}],"position":{"start":{"line":91,"column":3,"offset":2071},"end":{"line":91,"column":92,"offset":2160},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":91,"column":3,"offset":2071},"end":{"line":91,"column":92,"offset":2160},"indent":[]}}],"position":{"start":{"line":91,"column":1,"offset":2069},"end":{"line":91,"column":92,"offset":2160},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":1981},"end":{"line":91,"column":92,"offset":2160},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#wip-react","title":null,"children":[],"data":{"hProperties":{"aria-label":"wip react permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"linkReference","identifier":"wip","label":"WIP","referenceType":"shortcut","children":[{"type":"text","value":"WIP","position":{"start":{"line":94,"column":5,"offset":2167},"end":{"line":94,"column":8,"offset":2170},"indent":[]}}],"position":{"start":{"line":94,"column":4,"offset":2166},"end":{"line":94,"column":9,"offset":2171},"indent":[]}},{"type":"text","value":" React","position":{"start":{"line":94,"column":9,"offset":2171},"end":{"line":94,"column":15,"offset":2177},"indent":[]}}],"position":{"start":{"line":94,"column":1,"offset":2163},"end":{"line":94,"column":15,"offset":2177},"indent":[]},"data":{"id":"wip-react","htmlAttributes":{"id":"wip-react"},"hProperties":{"id":"wip-react"}}},{"type":"paragraph","children":[{"type":"text","value":"React 组件待开发，目前可以暂时以 Submodule 方式使用：","position":{"start":{"line":96,"column":1,"offset":2179},"end":{"line":96,"column":36,"offset":2214},"indent":[]}}],"position":{"start":{"line":96,"column":1,"offset":2179},"end":{"line":96,"column":36,"offset":2214},"indent":[]}},{"type":"html","lang":"tsx","meta":null,"value":"
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
","position":{"start":{"line":97,"column":1,"offset":2215},"end":{"line":158,"column":4,"offset":3495},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️组件 Unmount 时需要通过 ","position":{"start":{"line":160,"column":1,"offset":3497},"end":{"line":160,"column":20,"offset":3516},"indent":[]}},{"type":"html","value":"scene.destroy()","position":{"start":{"line":160,"column":20,"offset":3516},"end":{"line":160,"column":37,"offset":3533},"indent":[]}},{"type":"text","value":" 手动销毁场景。","position":{"start":{"line":160,"column":37,"offset":3533},"end":{"line":160,"column":45,"offset":3541},"indent":[]}}],"position":{"start":{"line":160,"column":1,"offset":3497},"end":{"line":160,"column":45,"offset":3541},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":162,"column":1,"offset":3543}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d9892f004e1aea2cec790986ba7ab953.json b/.cache/caches/gatsby-transformer-remark/diskstore-d9892f004e1aea2cec790986ba7ab953.json deleted file mode 100644 index 89f310449c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d9892f004e1aea2cec790986ba7ab953.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-3f73cf1f73d6b033db13763671e99dd6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-d9c827cf058986dd5a99d504e97c1306.json b/.cache/caches/gatsby-transformer-remark/diskstore-d9c827cf058986dd5a99d504e97c1306.json deleted file mode 100644 index c39f2d53b6..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-d9c827cf058986dd5a99d504e97c1306.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-3fdafdf445bd057a86b5717b80c92ebf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#简介","title":null,"children":[],"data":{"hProperties":{"aria-label":"简介 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"简介","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":5,"offset":5},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":5,"offset":5},"indent":[]},"data":{"id":"简介","htmlAttributes":{"id":"简介"},"hProperties":{"id":"简介"}}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#scene","title":null,"children":[],"data":{"hProperties":{"aria-label":"scene permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Scene","position":{"start":{"line":4,"column":4,"offset":10},"end":{"line":4,"column":9,"offset":15},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":7},"end":{"line":4,"column":9,"offset":15},"indent":[]},"data":{"id":"scene","htmlAttributes":{"id":"scene"},"hProperties":{"id":"scene"}}},{"type":"paragraph","children":[{"type":"text","value":"L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理","position":{"start":{"line":6,"column":1,"offset":17},"end":{"line":6,"column":48,"offset":64},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":17},"end":{"line":6,"column":48,"offset":64},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#map","title":null,"children":[],"data":{"hProperties":{"aria-label":"map permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Map","position":{"start":{"line":9,"column":4,"offset":70},"end":{"line":9,"column":7,"offset":73},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":67},"end":{"line":9,"column":7,"offset":73},"indent":[]},"data":{"id":"map","htmlAttributes":{"id":"map"},"hProperties":{"id":"map"}}},{"type":"paragraph","children":[{"type":"text","value":" L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n 只需要通过Scene传入地图配置项即可。","position":{"start":{"line":11,"column":1,"offset":75},"end":{"line":12,"column":22,"offset":155},"indent":[1]}}],"position":{"start":{"line":11,"column":1,"offset":75},"end":{"line":12,"column":22,"offset":155},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"目前L7 支持两种地图底图","position":{"start":{"line":14,"column":1,"offset":157},"end":{"line":14,"column":14,"offset":170},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":157},"end":{"line":14,"column":14,"offset":170},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"高德地图 国内业务场景 合规中国地图","position":{"start":{"line":16,"column":3,"offset":174},"end":{"line":16,"column":21,"offset":192},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":174},"end":{"line":16,"column":21,"offset":192},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":172},"end":{"line":16,"column":21,"offset":192},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"MapBox 国际业务，或者内网离线部署场景","position":{"start":{"line":17,"column":3,"offset":195},"end":{"line":17,"column":25,"offset":217},"indent":[]}}],"position":{"start":{"line":17,"column":3,"offset":195},"end":{"line":17,"column":25,"offset":217},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":193},"end":{"line":17,"column":25,"offset":217},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":172},"end":{"line":17,"column":25,"offset":217},"indent":[1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#map-1","title":null,"children":[],"data":{"hProperties":{"aria-label":"map 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"map","position":{"start":{"line":20,"column":6,"offset":225},"end":{"line":20,"column":9,"offset":228},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":220},"end":{"line":20,"column":9,"offset":228},"indent":[]},"data":{"id":"map-1","htmlAttributes":{"id":"map-1"},"hProperties":{"id":"map-1"}}},{"type":"paragraph","children":[{"type":"text","value":"可以通过scene map 属性获取 map实例","position":{"start":{"line":22,"column":1,"offset":230},"end":{"line":22,"column":25,"offset":254},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":230},"end":{"line":22,"column":25,"offset":254},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const map = scene.map;\n
","position":{"start":{"line":24,"column":1,"offset":256},"end":{"line":27,"column":4,"offset":297},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。","position":{"start":{"line":28,"column":1,"offset":298},"end":{"line":28,"column":78,"offset":375},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":298},"end":{"line":28,"column":78,"offset":375},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"示例代码","position":{"start":{"line":30,"column":1,"offset":377},"end":{"line":30,"column":5,"offset":381},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":377},"end":{"line":30,"column":5,"offset":381},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
","position":{"start":{"line":32,"column":1,"offset":383},"end":{"line":40,"column":4,"offset":551},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#构造函数","title":null,"children":[],"data":{"hProperties":{"aria-label":"构造函数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"构造函数","position":{"start":{"line":43,"column":5,"offset":558},"end":{"line":43,"column":9,"offset":562},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":554},"end":{"line":43,"column":9,"offset":562},"indent":[]},"data":{"id":"构造函数","htmlAttributes":{"id":"构造函数"},"hProperties":{"id":"构造函数"}}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Scene","position":{"start":{"line":45,"column":3,"offset":566},"end":{"line":45,"column":8,"offset":571},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":564},"end":{"line":45,"column":10,"offset":573},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":45,"column":10,"offset":573},"end":{"line":45,"column":11,"offset":574},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":564},"end":{"line":45,"column":11,"offset":574},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#配置项","title":null,"children":[],"data":{"hProperties":{"aria-label":"配置项 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"配置项","position":{"start":{"line":50,"column":4,"offset":582},"end":{"line":50,"column":7,"offset":585},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":579},"end":{"line":50,"column":7,"offset":585},"indent":[]},"data":{"id":"配置项","htmlAttributes":{"id":"配置项"},"hProperties":{"id":"配置项"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#地图配置项","title":null,"children":[],"data":{"hProperties":{"aria-label":"地图配置项 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地图配置项","position":{"start":{"line":52,"column":5,"offset":591},"end":{"line":52,"column":10,"offset":596},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":587},"end":{"line":52,"column":10,"offset":596},"indent":[]},"data":{"id":"地图配置项","htmlAttributes":{"id":"地图配置项"},"hProperties":{"id":"地图配置项"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#id","title":null,"children":[],"data":{"hProperties":{"aria-label":"id permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"id","position":{"start":{"line":54,"column":5,"offset":602},"end":{"line":54,"column":7,"offset":604},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":598},"end":{"line":54,"column":7,"offset":604},"indent":[]},"data":{"id":"id","htmlAttributes":{"id":"id"},"hProperties":{"id":"id"}}},{"type":"paragraph","children":[{"type":"text","value":"需传入 dom 容器或者容器 id  {domObject || string} ","position":{"start":{"line":55,"column":1,"offset":605},"end":{"line":55,"column":42,"offset":646},"indent":[]}},{"type":"linkReference","identifier":"必选","label":"必选","referenceType":"shortcut","children":[{"type":"text","value":"必选","position":{"start":{"line":55,"column":43,"offset":647},"end":{"line":55,"column":45,"offset":649},"indent":[]}}],"position":{"start":{"line":55,"column":42,"offset":646},"end":{"line":55,"column":46,"offset":650},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":605},"end":{"line":55,"column":46,"offset":650},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#zoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"zoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"zoom","position":{"start":{"line":58,"column":5,"offset":657},"end":{"line":58,"column":9,"offset":661},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":653},"end":{"line":58,"column":9,"offset":661},"indent":[]},"data":{"id":"zoom","htmlAttributes":{"id":"zoom"},"hProperties":{"id":"zoom"}}},{"type":"paragraph","children":[{"type":"text","value":"地图初始显示级别 {number} （0-22）","position":{"start":{"line":59,"column":1,"offset":662},"end":{"line":59,"column":26,"offset":687},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":662},"end":{"line":59,"column":26,"offset":687},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#center","title":null,"children":[],"data":{"hProperties":{"aria-label":"center permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"center","position":{"start":{"line":61,"column":5,"offset":693},"end":{"line":61,"column":11,"offset":699},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":689},"end":{"line":61,"column":11,"offset":699},"indent":[]},"data":{"id":"center","htmlAttributes":{"id":"center"},"hProperties":{"id":"center"}}},{"type":"paragraph","children":[{"type":"text","value":"地图初始中心经纬度 {Lnglat}","position":{"start":{"line":62,"column":1,"offset":700},"end":{"line":62,"column":19,"offset":718},"indent":[]}}],"position":{"start":{"line":62,"column":1,"offset":700},"end":{"line":62,"column":19,"offset":718},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#pitch","title":null,"children":[],"data":{"hProperties":{"aria-label":"pitch permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"pitch","position":{"start":{"line":64,"column":5,"offset":724},"end":{"line":64,"column":10,"offset":729},"indent":[]}}],"position":{"start":{"line":64,"column":1,"offset":720},"end":{"line":64,"column":10,"offset":729},"indent":[]},"data":{"id":"pitch","htmlAttributes":{"id":"pitch"},"hProperties":{"id":"pitch"}}},{"type":"paragraph","children":[{"type":"text","value":"地图初始俯仰角度 {number}  default 0","position":{"start":{"line":65,"column":1,"offset":730},"end":{"line":65,"column":29,"offset":758},"indent":[]}}],"position":{"start":{"line":65,"column":1,"offset":730},"end":{"line":65,"column":29,"offset":758},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#style","title":null,"children":[],"data":{"hProperties":{"aria-label":"style permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"style","position":{"start":{"line":67,"column":5,"offset":764},"end":{"line":67,"column":10,"offset":769},"indent":[]}}],"position":{"start":{"line":67,"column":1,"offset":760},"end":{"line":67,"column":10,"offset":769},"indent":[]},"data":{"id":"style","htmlAttributes":{"id":"style"},"hProperties":{"id":"style"}}},{"type":"paragraph","children":[{"type":"text","value":"简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用","position":{"start":{"line":69,"column":1,"offset":771},"end":{"line":69,"column":40,"offset":810},"indent":[]}}],"position":{"start":{"line":69,"column":1,"offset":771},"end":{"line":69,"column":40,"offset":810},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"dark","position":{"start":{"line":70,"column":3,"offset":813},"end":{"line":70,"column":7,"offset":817},"indent":[]}}],"position":{"start":{"line":70,"column":3,"offset":813},"end":{"line":70,"column":7,"offset":817},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":811},"end":{"line":70,"column":7,"offset":817},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"light","position":{"start":{"line":71,"column":3,"offset":820},"end":{"line":71,"column":8,"offset":825},"indent":[]}}],"position":{"start":{"line":71,"column":3,"offset":820},"end":{"line":71,"column":8,"offset":825},"indent":[]}}],"position":{"start":{"line":71,"column":1,"offset":818},"end":{"line":71,"column":8,"offset":825},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"normal","position":{"start":{"line":72,"column":3,"offset":828},"end":{"line":72,"column":9,"offset":834},"indent":[]}}],"position":{"start":{"line":72,"column":3,"offset":828},"end":{"line":72,"column":9,"offset":834},"indent":[]}}],"position":{"start":{"line":72,"column":1,"offset":826},"end":{"line":72,"column":9,"offset":834},"indent":[]}}],"position":{"start":{"line":70,"column":1,"offset":811},"end":{"line":72,"column":9,"offset":834},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"除了内置的样式，你也可以传入自定义的其他属性。","position":{"start":{"line":74,"column":1,"offset":836},"end":{"line":74,"column":24,"offset":859},"indent":[]}}],"position":{"start":{"line":74,"column":1,"offset":836},"end":{"line":74,"column":24,"offset":859},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"比如高德地图","position":{"start":{"line":76,"column":1,"offset":861},"end":{"line":76,"column":7,"offset":867},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":861},"end":{"line":76,"column":7,"offset":867},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
","position":{"start":{"line":78,"column":1,"offset":869},"end":{"line":83,"column":4,"offset":980},"indent":[1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#minzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"minzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"minZoom","position":{"start":{"line":86,"column":5,"offset":987},"end":{"line":86,"column":12,"offset":994},"indent":[]}}],"position":{"start":{"line":86,"column":1,"offset":983},"end":{"line":86,"column":12,"offset":994},"indent":[]},"data":{"id":"minzoom","htmlAttributes":{"id":"minzoom"},"hProperties":{"id":"minzoom"}}},{"type":"paragraph","children":[{"type":"text","value":"地图最小缩放等级 {number}  default 0 (0-22)","position":{"start":{"line":87,"column":1,"offset":995},"end":{"line":87,"column":37,"offset":1031},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":995},"end":{"line":87,"column":37,"offset":1031},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#maxzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"maxzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"maxZoom","position":{"start":{"line":89,"column":5,"offset":1037},"end":{"line":89,"column":12,"offset":1044},"indent":[]}}],"position":{"start":{"line":89,"column":1,"offset":1033},"end":{"line":89,"column":12,"offset":1044},"indent":[]},"data":{"id":"maxzoom","htmlAttributes":{"id":"maxzoom"},"hProperties":{"id":"maxzoom"}}},{"type":"paragraph","children":[{"type":"text","value":"地图最大缩放等级 {number}  default 22 (0-22)","position":{"start":{"line":90,"column":1,"offset":1045},"end":{"line":90,"column":38,"offset":1082},"indent":[]}}],"position":{"start":{"line":90,"column":1,"offset":1045},"end":{"line":90,"column":38,"offset":1082},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#rotateenable","title":null,"children":[],"data":{"hProperties":{"aria-label":"rotateenable permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"rotateEnable","position":{"start":{"line":92,"column":5,"offset":1088},"end":{"line":92,"column":17,"offset":1100},"indent":[]}}],"position":{"start":{"line":92,"column":1,"offset":1084},"end":{"line":92,"column":17,"offset":1100},"indent":[]},"data":{"id":"rotateenable","htmlAttributes":{"id":"rotateenable"},"hProperties":{"id":"rotateenable"}}},{"type":"paragraph","children":[{"type":"text","value":"地图是否可旋转 {Boolean} default true","position":{"start":{"line":93,"column":1,"offset":1101},"end":{"line":93,"column":31,"offset":1131},"indent":[]}}],"position":{"start":{"line":93,"column":1,"offset":1101},"end":{"line":93,"column":31,"offset":1131},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#方法","title":null,"children":[],"data":{"hProperties":{"aria-label":"方法 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"方法","position":{"start":{"line":98,"column":4,"offset":1139},"end":{"line":98,"column":6,"offset":1141},"indent":[]}}],"position":{"start":{"line":98,"column":1,"offset":1136},"end":{"line":98,"column":6,"offset":1141},"indent":[]},"data":{"id":"方法","htmlAttributes":{"id":"方法"},"hProperties":{"id":"方法"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getzoom","title":null,"children":[],"data":{"hProperties":{"aria-label":"getzoom permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getZoom","position":{"start":{"line":100,"column":5,"offset":1147},"end":{"line":100,"column":12,"offset":1154},"indent":[]}}],"position":{"start":{"line":100,"column":1,"offset":1143},"end":{"line":100,"column":12,"offset":1154},"indent":[]},"data":{"id":"getzoom","htmlAttributes":{"id":"getzoom"},"hProperties":{"id":"getzoom"}}},{"type":"paragraph","children":[{"type":"text","value":"获取当前缩放等级","position":{"start":{"line":101,"column":1,"offset":1155},"end":{"line":101,"column":9,"offset":1163},"indent":[]}}],"position":{"start":{"line":101,"column":1,"offset":1155},"end":{"line":101,"column":9,"offset":1163},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getZoom();\n
","position":{"start":{"line":103,"column":1,"offset":1165},"end":{"line":105,"column":4,"offset":1199},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return {float}  当前缩放等级","position":{"start":{"line":107,"column":1,"offset":1201},"end":{"line":107,"column":24,"offset":1224},"indent":[]}}],"position":{"start":{"line":107,"column":1,"offset":1201},"end":{"line":107,"column":24,"offset":1224},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getlayers","title":null,"children":[],"data":{"hProperties":{"aria-label":"getlayers permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getLayers()","position":{"start":{"line":109,"column":5,"offset":1230},"end":{"line":109,"column":16,"offset":1241},"indent":[]}}],"position":{"start":{"line":109,"column":1,"offset":1226},"end":{"line":109,"column":16,"offset":1241},"indent":[]},"data":{"id":"getlayers","htmlAttributes":{"id":"getlayers"},"hProperties":{"id":"getlayers"}}},{"type":"paragraph","children":[{"type":"text","value":"获取所有的地图图层","position":{"start":{"line":110,"column":1,"offset":1242},"end":{"line":110,"column":10,"offset":1251},"indent":[]}}],"position":{"start":{"line":110,"column":1,"offset":1242},"end":{"line":110,"column":10,"offset":1251},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getLayers();\n
","position":{"start":{"line":111,"column":1,"offset":1252},"end":{"line":113,"column":4,"offset":1288},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return 图层数组 {Array}","position":{"start":{"line":115,"column":1,"offset":1290},"end":{"line":115,"column":21,"offset":1310},"indent":[]}}],"position":{"start":{"line":115,"column":1,"offset":1290},"end":{"line":115,"column":21,"offset":1310},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getcenter","title":null,"children":[],"data":{"hProperties":{"aria-label":"getcenter permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getCenter()","position":{"start":{"line":118,"column":5,"offset":1317},"end":{"line":118,"column":16,"offset":1328},"indent":[]}}],"position":{"start":{"line":118,"column":1,"offset":1313},"end":{"line":118,"column":16,"offset":1328},"indent":[]},"data":{"id":"getcenter","htmlAttributes":{"id":"getcenter"},"hProperties":{"id":"getcenter"}}},{"type":"paragraph","children":[{"type":"text","value":"获取地图中心点","position":{"start":{"line":119,"column":1,"offset":1329},"end":{"line":119,"column":8,"offset":1336},"indent":[]}}],"position":{"start":{"line":119,"column":1,"offset":1329},"end":{"line":119,"column":8,"offset":1336},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getCenter();\n
","position":{"start":{"line":120,"column":1,"offset":1337},"end":{"line":122,"column":4,"offset":1372},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return {Lnglat} :地图中心点","position":{"start":{"line":124,"column":1,"offset":1374},"end":{"line":124,"column":23,"offset":1396},"indent":[]}}],"position":{"start":{"line":124,"column":1,"offset":1374},"end":{"line":124,"column":23,"offset":1396},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getsize","title":null,"children":[],"data":{"hProperties":{"aria-label":"getsize permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getSize()","position":{"start":{"line":126,"column":5,"offset":1402},"end":{"line":126,"column":14,"offset":1411},"indent":[]}}],"position":{"start":{"line":126,"column":1,"offset":1398},"end":{"line":126,"column":14,"offset":1411},"indent":[]},"data":{"id":"getsize","htmlAttributes":{"id":"getsize"},"hProperties":{"id":"getsize"}}},{"type":"paragraph","children":[{"type":"text","value":"获取地图容器大小","position":{"start":{"line":127,"column":1,"offset":1412},"end":{"line":127,"column":9,"offset":1420},"indent":[]}}],"position":{"start":{"line":127,"column":1,"offset":1412},"end":{"line":127,"column":9,"offset":1420},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getSize();\n
","position":{"start":{"line":128,"column":1,"offset":1421},"end":{"line":130,"column":4,"offset":1454},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return { Object } 地图容器的 width,height","position":{"start":{"line":131,"column":1,"offset":1455},"end":{"line":131,"column":37,"offset":1491},"indent":[]}}],"position":{"start":{"line":131,"column":1,"offset":1455},"end":{"line":131,"column":37,"offset":1491},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getpitch","title":null,"children":[],"data":{"hProperties":{"aria-label":"getpitch permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getPitch()","position":{"start":{"line":133,"column":5,"offset":1497},"end":{"line":133,"column":15,"offset":1507},"indent":[]}}],"position":{"start":{"line":133,"column":1,"offset":1493},"end":{"line":133,"column":15,"offset":1507},"indent":[]},"data":{"id":"getpitch","htmlAttributes":{"id":"getpitch"},"hProperties":{"id":"getpitch"}}},{"type":"paragraph","children":[{"type":"text","value":"获取地图俯仰角","position":{"start":{"line":134,"column":1,"offset":1508},"end":{"line":134,"column":8,"offset":1515},"indent":[]}}],"position":{"start":{"line":134,"column":1,"offset":1508},"end":{"line":134,"column":8,"offset":1515},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getPitch();\n
","position":{"start":{"line":135,"column":1,"offset":1516},"end":{"line":137,"column":4,"offset":1551},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return {number} pitch","position":{"start":{"line":139,"column":1,"offset":1553},"end":{"line":139,"column":22,"offset":1574},"indent":[]}}],"position":{"start":{"line":139,"column":1,"offset":1553},"end":{"line":139,"column":22,"offset":1574},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#setcenter","title":null,"children":[],"data":{"hProperties":{"aria-label":"setcenter permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setCenter()","position":{"start":{"line":141,"column":5,"offset":1580},"end":{"line":141,"column":16,"offset":1591},"indent":[]}}],"position":{"start":{"line":141,"column":1,"offset":1576},"end":{"line":141,"column":16,"offset":1591},"indent":[]},"data":{"id":"setcenter","htmlAttributes":{"id":"setcenter"},"hProperties":{"id":"setcenter"}}},{"type":"paragraph","children":[{"type":"text","value":"设置地图中心点坐标","position":{"start":{"line":142,"column":1,"offset":1592},"end":{"line":142,"column":10,"offset":1601},"indent":[]}}],"position":{"start":{"line":142,"column":1,"offset":1592},"end":{"line":142,"column":10,"offset":1601},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.setCenter([lng, lat]);\n
","position":{"start":{"line":144,"column":1,"offset":1603},"end":{"line":146,"column":4,"offset":1647},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":148,"column":1,"offset":1649},"end":{"line":148,"column":4,"offset":1652},"indent":[]}},{"type":"html","value":"center","position":{"start":{"line":148,"column":4,"offset":1652},"end":{"line":148,"column":12,"offset":1660},"indent":[]}},{"type":"text","value":" {LngLat} 地图中心点","position":{"start":{"line":148,"column":12,"offset":1660},"end":{"line":148,"column":28,"offset":1676},"indent":[]}}],"position":{"start":{"line":148,"column":1,"offset":1649},"end":{"line":148,"column":28,"offset":1676},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#setzoomandcenter","title":null,"children":[],"data":{"hProperties":{"aria-label":"setzoomandcenter permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setZoomAndCenter","position":{"start":{"line":151,"column":5,"offset":1683},"end":{"line":151,"column":21,"offset":1699},"indent":[]}}],"position":{"start":{"line":151,"column":1,"offset":1679},"end":{"line":151,"column":21,"offset":1699},"indent":[]},"data":{"id":"setzoomandcenter","htmlAttributes":{"id":"setzoomandcenter"},"hProperties":{"id":"setzoomandcenter"}}},{"type":"paragraph","children":[{"type":"text","value":"设置地图等级和中心","position":{"start":{"line":152,"column":1,"offset":1700},"end":{"line":152,"column":10,"offset":1709},"indent":[]}}],"position":{"start":{"line":152,"column":1,"offset":1700},"end":{"line":152,"column":10,"offset":1709},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.setZoomAndCenter(zoom, center);\n
","position":{"start":{"line":153,"column":1,"offset":1710},"end":{"line":155,"column":4,"offset":1763},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数：zoom {number}","position":{"start":{"line":157,"column":1,"offset":1765},"end":{"line":157,"column":17,"offset":1781},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":157,"column":17,"offset":1781},"end":{"line":157,"column":23,"offset":1787},"indent":[]}},{"type":"text","value":"center {LngLat}","position":{"start":{"line":157,"column":23,"offset":1787},"end":{"line":157,"column":38,"offset":1802},"indent":[]}}],"position":{"start":{"line":157,"column":1,"offset":1765},"end":{"line":157,"column":38,"offset":1802},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#setrotation","title":null,"children":[],"data":{"hProperties":{"aria-label":"setrotation permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setRotation","position":{"start":{"line":160,"column":5,"offset":1809},"end":{"line":160,"column":16,"offset":1820},"indent":[]}}],"position":{"start":{"line":160,"column":1,"offset":1805},"end":{"line":160,"column":16,"offset":1820},"indent":[]},"data":{"id":"setrotation","htmlAttributes":{"id":"setrotation"},"hProperties":{"id":"setrotation"}}},{"type":"paragraph","children":[{"type":"text","value":"设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 ","position":{"start":{"line":161,"column":1,"offset":1821},"end":{"line":161,"column":31,"offset":1851},"indent":[]}},{"type":"linkReference","identifier":"0-360","label":"0-360","referenceType":"shortcut","children":[{"type":"text","value":"0-360","position":{"start":{"line":161,"column":32,"offset":1852},"end":{"line":161,"column":37,"offset":1857},"indent":[]}}],"position":{"start":{"line":161,"column":31,"offset":1851},"end":{"line":161,"column":38,"offset":1858},"indent":[]}}],"position":{"start":{"line":161,"column":1,"offset":1821},"end":{"line":161,"column":38,"offset":1858},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.setRotation(rotation);\n
","position":{"start":{"line":162,"column":1,"offset":1859},"end":{"line":164,"column":4,"offset":1904},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数： ","position":{"start":{"line":166,"column":1,"offset":1906},"end":{"line":166,"column":5,"offset":1910},"indent":[]}},{"type":"html","value":"rotation","position":{"start":{"line":166,"column":5,"offset":1910},"end":{"line":166,"column":15,"offset":1920},"indent":[]}},{"type":"text","value":" {number}","position":{"start":{"line":166,"column":15,"offset":1920},"end":{"line":166,"column":26,"offset":1931},"indent":[]}}],"position":{"start":{"line":166,"column":1,"offset":1906},"end":{"line":166,"column":26,"offset":1931},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#zoomin","title":null,"children":[],"data":{"hProperties":{"aria-label":"zoomin permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"zoomIn","position":{"start":{"line":168,"column":5,"offset":1937},"end":{"line":168,"column":11,"offset":1943},"indent":[]}}],"position":{"start":{"line":168,"column":1,"offset":1933},"end":{"line":168,"column":11,"offset":1943},"indent":[]},"data":{"id":"zoomin","htmlAttributes":{"id":"zoomin"},"hProperties":{"id":"zoomin"}}},{"type":"paragraph","children":[{"type":"text","value":"地图放大一级","position":{"start":{"line":169,"column":1,"offset":1944},"end":{"line":169,"column":7,"offset":1950},"indent":[]}}],"position":{"start":{"line":169,"column":1,"offset":1944},"end":{"line":169,"column":7,"offset":1950},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.zoomIn();\n
","position":{"start":{"line":170,"column":1,"offset":1951},"end":{"line":172,"column":4,"offset":1983},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#zoomout","title":null,"children":[],"data":{"hProperties":{"aria-label":"zoomout permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"zoomOut","position":{"start":{"line":174,"column":5,"offset":1989},"end":{"line":174,"column":12,"offset":1996},"indent":[]}}],"position":{"start":{"line":174,"column":1,"offset":1985},"end":{"line":174,"column":12,"offset":1996},"indent":[]},"data":{"id":"zoomout","htmlAttributes":{"id":"zoomout"},"hProperties":{"id":"zoomout"}}},{"type":"paragraph","children":[{"type":"text","value":"地图缩小一级","position":{"start":{"line":175,"column":1,"offset":1997},"end":{"line":175,"column":7,"offset":2003},"indent":[]}}],"position":{"start":{"line":175,"column":1,"offset":1997},"end":{"line":175,"column":7,"offset":2003},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.ZoomOUt();\n
","position":{"start":{"line":176,"column":1,"offset":2004},"end":{"line":178,"column":4,"offset":2037},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#panto","title":null,"children":[],"data":{"hProperties":{"aria-label":"panto permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"panTo","position":{"start":{"line":180,"column":5,"offset":2043},"end":{"line":180,"column":10,"offset":2048},"indent":[]}}],"position":{"start":{"line":180,"column":1,"offset":2039},"end":{"line":180,"column":10,"offset":2048},"indent":[]},"data":{"id":"panto","htmlAttributes":{"id":"panto"},"hProperties":{"id":"panto"}}},{"type":"paragraph","children":[{"type":"text","value":"地图平移到指定的位置","position":{"start":{"line":181,"column":1,"offset":2049},"end":{"line":181,"column":11,"offset":2059},"indent":[]}}],"position":{"start":{"line":181,"column":1,"offset":2049},"end":{"line":181,"column":11,"offset":2059},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.panTo(LngLat);\n
","position":{"start":{"line":182,"column":1,"offset":2060},"end":{"line":184,"column":4,"offset":2097},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":186,"column":1,"offset":2099},"end":{"line":186,"column":4,"offset":2102},"indent":[]}},{"type":"html","value":"center","position":{"start":{"line":186,"column":4,"offset":2102},"end":{"line":186,"column":12,"offset":2110},"indent":[]}},{"type":"text","value":" LngLat 中心位置坐标","position":{"start":{"line":186,"column":12,"offset":2110},"end":{"line":186,"column":27,"offset":2125},"indent":[]}}],"position":{"start":{"line":186,"column":1,"offset":2099},"end":{"line":186,"column":27,"offset":2125},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#panby","title":null,"children":[],"data":{"hProperties":{"aria-label":"panby permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"panBy","position":{"start":{"line":188,"column":5,"offset":2131},"end":{"line":188,"column":10,"offset":2136},"indent":[]}}],"position":{"start":{"line":188,"column":1,"offset":2127},"end":{"line":188,"column":10,"offset":2136},"indent":[]},"data":{"id":"panby","htmlAttributes":{"id":"panby"},"hProperties":{"id":"panby"}}},{"type":"paragraph","children":[{"type":"text","value":"以像素为单位沿X方向和Y方向移动地图","position":{"start":{"line":189,"column":1,"offset":2137},"end":{"line":189,"column":19,"offset":2155},"indent":[]}}],"position":{"start":{"line":189,"column":1,"offset":2137},"end":{"line":189,"column":19,"offset":2155},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.panBy(x, y);\n
","position":{"start":{"line":190,"column":1,"offset":2156},"end":{"line":192,"column":4,"offset":2190},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数：","position":{"start":{"line":193,"column":1,"offset":2191},"end":{"line":193,"column":4,"offset":2194},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":193,"column":4,"offset":2194},"end":{"line":193,"column":10,"offset":2200},"indent":[]}},{"type":"html","value":"x","position":{"start":{"line":193,"column":10,"offset":2200},"end":{"line":193,"column":13,"offset":2203},"indent":[]}},{"type":"text","value":" {number} 水平方向移动像素 向右为正方向","position":{"start":{"line":193,"column":13,"offset":2203},"end":{"line":193,"column":38,"offset":2228},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":193,"column":38,"offset":2228},"end":{"line":193,"column":44,"offset":2234},"indent":[]}},{"type":"text","value":"      ","position":{"start":{"line":193,"column":44,"offset":2234},"end":{"line":193,"column":50,"offset":2240},"indent":[]}},{"type":"html","value":"y","position":{"start":{"line":193,"column":50,"offset":2240},"end":{"line":193,"column":53,"offset":2243},"indent":[]}},{"type":"text","value":" {number} 垂直方向移动像素 向下为正方向","position":{"start":{"line":193,"column":53,"offset":2243},"end":{"line":193,"column":79,"offset":2269},"indent":[]}}],"position":{"start":{"line":193,"column":1,"offset":2191},"end":{"line":193,"column":79,"offset":2269},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#setpitch","title":null,"children":[],"data":{"hProperties":{"aria-label":"setpitch permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"setPitch","position":{"start":{"line":196,"column":5,"offset":2276},"end":{"line":196,"column":13,"offset":2284},"indent":[]}}],"position":{"start":{"line":196,"column":1,"offset":2272},"end":{"line":196,"column":13,"offset":2284},"indent":[]},"data":{"id":"setpitch","htmlAttributes":{"id":"setpitch"},"hProperties":{"id":"setpitch"}}},{"type":"paragraph","children":[{"type":"text","value":"设置地图仰俯角度","position":{"start":{"line":197,"column":1,"offset":2285},"end":{"line":197,"column":9,"offset":2293},"indent":[]}}],"position":{"start":{"line":197,"column":1,"offset":2285},"end":{"line":197,"column":9,"offset":2293},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.setPitch(pitch);\n
","position":{"start":{"line":198,"column":1,"offset":2294},"end":{"line":200,"column":4,"offset":2333},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数 :","position":{"start":{"line":202,"column":1,"offset":2335},"end":{"line":202,"column":5,"offset":2339},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":202,"column":5,"offset":2339},"end":{"line":202,"column":11,"offset":2345},"indent":[]}},{"type":"text","value":"   ","position":{"start":{"line":202,"column":11,"offset":2345},"end":{"line":202,"column":14,"offset":2348},"indent":[]}},{"type":"html","value":"pitch","position":{"start":{"line":202,"column":14,"offset":2348},"end":{"line":202,"column":21,"offset":2355},"indent":[]}},{"type":"text","value":" {number}","position":{"start":{"line":202,"column":21,"offset":2355},"end":{"line":202,"column":31,"offset":2365},"indent":[]}}],"position":{"start":{"line":202,"column":1,"offset":2335},"end":{"line":202,"column":31,"offset":2365},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#fitbounds","title":null,"children":[],"data":{"hProperties":{"aria-label":"fitbounds permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"fitBounds","position":{"start":{"line":205,"column":5,"offset":2372},"end":{"line":205,"column":14,"offset":2381},"indent":[]}}],"position":{"start":{"line":205,"column":1,"offset":2368},"end":{"line":205,"column":14,"offset":2381},"indent":[]},"data":{"id":"fitbounds","htmlAttributes":{"id":"fitbounds"},"hProperties":{"id":"fitbounds"}}},{"type":"paragraph","children":[{"type":"text","value":"地图缩放到某个范围内","position":{"start":{"line":206,"column":1,"offset":2382},"end":{"line":206,"column":11,"offset":2392},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":206,"column":11,"offset":2392},"end":{"line":206,"column":17,"offset":2398},"indent":[]}},{"type":"text","value":"参数 :","position":{"start":{"line":206,"column":17,"offset":2398},"end":{"line":206,"column":21,"offset":2402},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":206,"column":21,"offset":2402},"end":{"line":206,"column":27,"offset":2408},"indent":[]}},{"type":"text","value":"  ","position":{"start":{"line":206,"column":27,"offset":2408},"end":{"line":206,"column":29,"offset":2410},"indent":[]}},{"type":"html","value":"extent","position":{"start":{"line":206,"column":29,"offset":2410},"end":{"line":206,"column":37,"offset":2418},"indent":[]}},{"type":"text","value":" { array} 经纬度范围 ","position":{"start":{"line":206,"column":37,"offset":2418},"end":{"line":206,"column":53,"offset":2434},"indent":[]}},{"type":"linkReference","identifier":"minlng,minlat,maxlng,maxlat","label":"minlng,minlat,maxlng,maxlat","referenceType":"shortcut","children":[{"type":"text","value":"minlng,minlat,maxlng,maxlat","position":{"start":{"line":206,"column":54,"offset":2435},"end":{"line":206,"column":81,"offset":2462},"indent":[]}}],"position":{"start":{"line":206,"column":53,"offset":2434},"end":{"line":206,"column":82,"offset":2463},"indent":[]}}],"position":{"start":{"line":206,"column":1,"offset":2382},"end":{"line":206,"column":82,"offset":2463},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.fitBounds([112, 32, 114, 35]);\n
","position":{"start":{"line":208,"column":1,"offset":2465},"end":{"line":210,"column":4,"offset":2516},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#removelayer","title":null,"children":[],"data":{"hProperties":{"aria-label":"removelayer permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"removeLayer","position":{"start":{"line":214,"column":5,"offset":2524},"end":{"line":214,"column":16,"offset":2535},"indent":[]}}],"position":{"start":{"line":214,"column":1,"offset":2520},"end":{"line":214,"column":16,"offset":2535},"indent":[]},"data":{"id":"removelayer","htmlAttributes":{"id":"removelayer"},"hProperties":{"id":"removelayer"}}},{"type":"paragraph","children":[{"type":"text","value":"移除layer","position":{"start":{"line":215,"column":1,"offset":2536},"end":{"line":215,"column":8,"offset":2543},"indent":[]}}],"position":{"start":{"line":215,"column":1,"offset":2536},"end":{"line":215,"column":8,"offset":2543},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.removeLayer(layer);\n
","position":{"start":{"line":217,"column":1,"offset":2545},"end":{"line":219,"column":4,"offset":2587},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"参数 ","position":{"start":{"line":221,"column":1,"offset":2589},"end":{"line":221,"column":4,"offset":2592},"indent":[]}},{"type":"html","value":"layer","position":{"start":{"line":221,"column":4,"offset":2592},"end":{"line":221,"column":11,"offset":2599},"indent":[]}},{"type":"text","value":" {Layer}","position":{"start":{"line":221,"column":11,"offset":2599},"end":{"line":221,"column":20,"offset":2608},"indent":[]}}],"position":{"start":{"line":221,"column":1,"offset":2589},"end":{"line":221,"column":20,"offset":2608},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getlayers-1","title":null,"children":[],"data":{"hProperties":{"aria-label":"getlayers 1 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getLayers","position":{"start":{"line":223,"column":5,"offset":2614},"end":{"line":223,"column":14,"offset":2623},"indent":[]}}],"position":{"start":{"line":223,"column":1,"offset":2610},"end":{"line":223,"column":14,"offset":2623},"indent":[]},"data":{"id":"getlayers-1","htmlAttributes":{"id":"getlayers-1"},"hProperties":{"id":"getlayers-1"}}},{"type":"paragraph","children":[{"type":"text","value":" 获取所有的layer","position":{"start":{"line":224,"column":1,"offset":2624},"end":{"line":224,"column":12,"offset":2635},"indent":[]}}],"position":{"start":{"line":224,"column":1,"offset":2624},"end":{"line":224,"column":12,"offset":2635},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.getLayers();\n
","position":{"start":{"line":226,"column":1,"offset":2637},"end":{"line":228,"column":4,"offset":2672},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"return layers  {array}","position":{"start":{"line":230,"column":1,"offset":2674},"end":{"line":230,"column":24,"offset":2697},"indent":[]}}],"position":{"start":{"line":230,"column":1,"offset":2674},"end":{"line":230,"column":24,"offset":2697},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"事件","position":{"start":{"line":232,"column":4,"offset":2702},"end":{"line":232,"column":6,"offset":2704},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":2699},"end":{"line":232,"column":6,"offset":2704},"indent":[]},"data":{"id":"事件","htmlAttributes":{"id":"事件"},"hProperties":{"id":"事件"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#on","title":null,"children":[],"data":{"hProperties":{"aria-label":"on permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"on","position":{"start":{"line":235,"column":5,"offset":2711},"end":{"line":235,"column":7,"offset":2713},"indent":[]}}],"position":{"start":{"line":235,"column":1,"offset":2707},"end":{"line":235,"column":7,"offset":2713},"indent":[]},"data":{"id":"on","htmlAttributes":{"id":"on"},"hProperties":{"id":"on"}}},{"type":"paragraph","children":[{"type":"text","value":"事件监听","position":{"start":{"line":236,"column":1,"offset":2714},"end":{"line":236,"column":5,"offset":2718},"indent":[]}}],"position":{"start":{"line":236,"column":1,"offset":2714},"end":{"line":236,"column":5,"offset":2718},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#参数","title":null,"children":[],"data":{"hProperties":{"aria-label":"参数 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"参数","position":{"start":{"line":238,"column":6,"offset":2725},"end":{"line":238,"column":8,"offset":2727},"indent":[]}}],"position":{"start":{"line":238,"column":1,"offset":2720},"end":{"line":238,"column":8,"offset":2727},"indent":[]},"data":{"id":"参数","htmlAttributes":{"id":"参数"},"hProperties":{"id":"参数"}}},{"type":"paragraph","children":[{"type":"html","value":"eventName","position":{"start":{"line":239,"column":1,"offset":2728},"end":{"line":239,"column":12,"offset":2739},"indent":[]}},{"type":"text","value":" {string} 事件名","position":{"start":{"line":239,"column":12,"offset":2739},"end":{"line":239,"column":26,"offset":2753},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":239,"column":26,"offset":2753},"end":{"line":239,"column":32,"offset":2759},"indent":[]}},{"type":"html","value":"hander","position":{"start":{"line":239,"column":32,"offset":2759},"end":{"line":239,"column":40,"offset":2767},"indent":[]}},{"type":"text","value":" {function } 事件回调函数","position":{"start":{"line":239,"column":40,"offset":2767},"end":{"line":239,"column":60,"offset":2787},"indent":[]}}],"position":{"start":{"line":239,"column":1,"offset":2728},"end":{"line":239,"column":60,"offset":2787},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#off","title":null,"children":[],"data":{"hProperties":{"aria-label":"off permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"off","position":{"start":{"line":242,"column":5,"offset":2794},"end":{"line":242,"column":8,"offset":2797},"indent":[]}}],"position":{"start":{"line":242,"column":1,"offset":2790},"end":{"line":242,"column":8,"offset":2797},"indent":[]},"data":{"id":"off","htmlAttributes":{"id":"off"},"hProperties":{"id":"off"}}},{"type":"paragraph","children":[{"type":"text","value":"移除事件监听","position":{"start":{"line":243,"column":1,"offset":2798},"end":{"line":243,"column":7,"offset":2804},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":243,"column":7,"offset":2804},"end":{"line":243,"column":13,"offset":2810},"indent":[]}},{"type":"html","value":"eventName","position":{"start":{"line":243,"column":13,"offset":2810},"end":{"line":243,"column":24,"offset":2821},"indent":[]}},{"type":"text","value":" {string} 事件名","position":{"start":{"line":243,"column":24,"offset":2821},"end":{"line":243,"column":38,"offset":2835},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":243,"column":38,"offset":2835},"end":{"line":243,"column":44,"offset":2841},"indent":[]}},{"type":"html","value":"hander","position":{"start":{"line":243,"column":44,"offset":2841},"end":{"line":243,"column":52,"offset":2849},"indent":[]}},{"type":"text","value":" {function } 事件回调函数","position":{"start":{"line":243,"column":52,"offset":2849},"end":{"line":243,"column":72,"offset":2869},"indent":[]}}],"position":{"start":{"line":243,"column":1,"offset":2798},"end":{"line":243,"column":72,"offset":2869},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#地图事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"地图事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地图事件","position":{"start":{"line":246,"column":5,"offset":2876},"end":{"line":246,"column":9,"offset":2880},"indent":[]}}],"position":{"start":{"line":246,"column":1,"offset":2872},"end":{"line":246,"column":9,"offset":2880},"indent":[]},"data":{"id":"地图事件","htmlAttributes":{"id":"地图事件"},"hProperties":{"id":"地图事件"}}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
","position":{"start":{"line":247,"column":1,"offset":2881},"end":{"line":255,"column":4,"offset":3218},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#鼠标事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"鼠标事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"鼠标事件","position":{"start":{"line":258,"column":5,"offset":3225},"end":{"line":258,"column":9,"offset":3229},"indent":[]}}],"position":{"start":{"line":258,"column":1,"offset":3221},"end":{"line":258,"column":9,"offset":3229},"indent":[]},"data":{"id":"鼠标事件","htmlAttributes":{"id":"鼠标事件"},"hProperties":{"id":"鼠标事件"}}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
","position":{"start":{"line":260,"column":1,"offset":3231},"end":{"line":273,"column":4,"offset":3938},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#其它事件","title":null,"children":[],"data":{"hProperties":{"aria-label":"其它事件 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"其它事件","position":{"start":{"line":275,"column":5,"offset":3944},"end":{"line":275,"column":9,"offset":3948},"indent":[]}}],"position":{"start":{"line":275,"column":1,"offset":3940},"end":{"line":275,"column":9,"offset":3948},"indent":[]},"data":{"id":"其它事件","htmlAttributes":{"id":"其它事件"},"hProperties":{"id":"其它事件"}}},{"type":"html","lang":"javascript","meta":null,"value":"
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","position":{"start":{"line":276,"column":1,"offset":3949},"end":{"line":278,"column":4,"offset":4006},"indent":[1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":281,"column":1,"offset":4009}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-da2c6fc178d9fc33b173fcca2771e581.json b/.cache/caches/gatsby-transformer-remark/diskstore-da2c6fc178d9fc33b173fcca2771e581.json deleted file mode 100644 index 9be432b808..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-da2c6fc178d9fc33b173fcca2771e581.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-c233b77d35e08201ab64c4861488d352-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"填充地图的增强实现，通过三维视角中的高度体现数据差异。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":28,"offset":27}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":28,"offset":27}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":28,"offset":27}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-db9924878832c31a9d0a882417ee6a0a.json b/.cache/caches/gatsby-transformer-remark/diskstore-db9924878832c31a9d0a882417ee6a0a.json deleted file mode 100644 index 23d6e47e05..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-db9924878832c31a9d0a882417ee6a0a.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-22d5cfaea43f5168ac21fe86d535648f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-dbe0ee5d7ebfa4ca76fc1ccda7c97ca3.json b/.cache/caches/gatsby-transformer-remark/diskstore-dbe0ee5d7ebfa4ca76fc1ccda7c97ca3.json deleted file mode 100644 index 1c84659b62..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-dbe0ee5d7ebfa4ca76fc1ccda7c97ca3.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-ed91d2618bada36e0008fd0df5fb212b-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-dc62a3a75f5101902ca890ed0c3080dc.json b/.cache/caches/gatsby-transformer-remark/diskstore-dc62a3a75f5101902ca890ed0c3080dc.json deleted file mode 100644 index 86c028c68c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-dc62a3a75f5101902ca890ed0c3080dc.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-6568f22928a964a9957c4e79f5b8594d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-dcb07baf6d018b48f81f6eb6e7d1be6e.json b/.cache/caches/gatsby-transformer-remark/diskstore-dcb07baf6d018b48f81f6eb6e7d1be6e.json deleted file mode 100644 index da56eee59c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-dcb07baf6d018b48f81f6eb6e7d1be6e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ae8ca280973abba413957dfdb0e37173-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-dcb1102c4de39ef38f6e65f1a5a5454c.json b/.cache/caches/gatsby-transformer-remark/diskstore-dcb1102c4de39ef38f6e65f1a5a5454c.json deleted file mode 100644 index 6fbb90a8ad..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-dcb1102c4de39ef38f6e65f1a5a5454c.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-ae8ca280973abba413957dfdb0e37173-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-dcbbd283395e3766076d6c4060eac887.json b/.cache/caches/gatsby-transformer-remark/diskstore-dcbbd283395e3766076d6c4060eac887.json deleted file mode 100644 index 3847474032..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-dcbbd283395e3766076d6c4060eac887.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-4ddb72039f738ffb6fc8c7ca02770db1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-dd1b8c4b41ec48d63541614b3d425352.json b/.cache/caches/gatsby-transformer-remark/diskstore-dd1b8c4b41ec48d63541614b3d425352.json deleted file mode 100644 index ccaa929671..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-dd1b8c4b41ec48d63541614b3d425352.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-81330a3168163fa3728e304ac6d58e91-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-e113e1a02fba3a881a66fabb364887a5.json b/.cache/caches/gatsby-transformer-remark/diskstore-e113e1a02fba3a881a66fabb364887a5.json deleted file mode 100644 index 1694501678..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-e113e1a02fba3a881a66fabb364887a5.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162511000,"key":"transformer-remark-markdown-html-397422a40e7fc67301e3758910fccfaf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-e4516cc3f8245e9841fe420f773631f0.json b/.cache/caches/gatsby-transformer-remark/diskstore-e4516cc3f8245e9841fe420f773631f0.json deleted file mode 100644 index f24b913bf3..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-e4516cc3f8245e9841fe420f773631f0.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-6333af3553efc2c96b5dfd41fa526318-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#source","title":null,"children":[],"data":{"hProperties":{"aria-label":"source permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"Source","position":{"start":{"line":3,"column":3,"offset":4},"end":{"line":3,"column":9,"offset":10},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":9,"offset":10},"indent":[]},"data":{"id":"source","htmlAttributes":{"id":"source"},"hProperties":{"id":"source"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#概述","title":null,"children":[],"data":{"hProperties":{"aria-label":"概述 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"概述","position":{"start":{"line":6,"column":5,"offset":17},"end":{"line":6,"column":7,"offset":19},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":13},"end":{"line":6,"column":7,"offset":19},"indent":[]},"data":{"id":"概述","htmlAttributes":{"id":"概述"},"hProperties":{"id":"概述"}}},{"type":"paragraph","children":[{"type":"text","value":"source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);","position":{"start":{"line":8,"column":1,"offset":21},"end":{"line":8,"column":51,"offset":71},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":21},"end":{"line":8,"column":51,"offset":71},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"parser:","position":{"start":{"line":10,"column":3,"offset":75},"end":{"line":10,"column":10,"offset":82},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":73},"end":{"line":10,"column":12,"offset":84},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":73},"end":{"line":10,"column":12,"offset":84},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。","position":{"start":{"line":12,"column":1,"offset":86},"end":{"line":12,"column":83,"offset":168},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":86},"end":{"line":12,"column":83,"offset":168},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"transform","position":{"start":{"line":14,"column":3,"offset":172},"end":{"line":14,"column":12,"offset":181},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":170},"end":{"line":14,"column":14,"offset":183},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":170},"end":{"line":14,"column":14,"offset":183},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"数据转换，数据统计，网格布局，数据聚合等数据操作。","position":{"start":{"line":16,"column":1,"offset":185},"end":{"line":16,"column":26,"offset":210},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":185},"end":{"line":16,"column":26,"offset":210},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#api","title":null,"children":[],"data":{"hProperties":{"aria-label":"api permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"API","position":{"start":{"line":19,"column":4,"offset":216},"end":{"line":19,"column":7,"offset":219},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":213},"end":{"line":19,"column":7,"offset":219},"indent":[]},"data":{"id":"api","htmlAttributes":{"id":"api"},"hProperties":{"id":"api"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#parser","title":null,"children":[],"data":{"hProperties":{"aria-label":"parser permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"parser","position":{"start":{"line":21,"column":5,"offset":225},"end":{"line":21,"column":11,"offset":231},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":221},"end":{"line":21,"column":11,"offset":231},"indent":[]},"data":{"id":"parser","htmlAttributes":{"id":"parser"},"hProperties":{"id":"parser"}}},{"type":"paragraph","children":[{"type":"text","value":"空间数据分矢量数据和栅格数据两大类","position":{"start":{"line":23,"column":1,"offset":233},"end":{"line":23,"column":18,"offset":250},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":233},"end":{"line":23,"column":18,"offset":250},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":true,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"矢量数据 支持 csv，geojson，json 三种数据类型","position":{"start":{"line":25,"column":3,"offset":254},"end":{"line":25,"column":34,"offset":285},"indent":[]}}],"position":{"start":{"line":25,"column":3,"offset":254},"end":{"line":25,"column":34,"offset":285},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":252},"end":{"line":26,"column":1,"offset":286},"indent":[1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"栅格数据 支持 image，Raster","position":{"start":{"line":27,"column":3,"offset":289},"end":{"line":27,"column":24,"offset":310},"indent":[]}}],"position":{"start":{"line":27,"column":3,"offset":289},"end":{"line":27,"column":24,"offset":310},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":287},"end":{"line":27,"column":24,"offset":310},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":252},"end":{"line":27,"column":24,"offset":310},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#geojson","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"geojson","position":{"start":{"line":31,"column":6,"offset":319},"end":{"line":31,"column":13,"offset":326},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":314},"end":{"line":31,"column":13,"offset":326},"indent":[]},"data":{"id":"geojson","htmlAttributes":{"id":"geojson"},"hProperties":{"id":"geojson"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://www.yuque.com/antv/l7/dm2zll","children":[{"type":"text","value":"geojson","position":{"start":{"line":33,"column":2,"offset":329},"end":{"line":33,"column":9,"offset":336},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":328},"end":{"line":33,"column":48,"offset":375},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 数据为默认数据格式，可以","position":{"start":{"line":33,"column":48,"offset":375},"end":{"line":33,"column":61,"offset":388},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":328},"end":{"line":33,"column":61,"offset":388},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"不需要设置parser 参数","position":{"start":{"line":35,"column":1,"offset":390},"end":{"line":35,"column":15,"offset":404},"indent":[]}}],"position":{"start":{"line":35,"column":1,"offset":390},"end":{"line":35,"column":15,"offset":404},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(data);\n
","position":{"start":{"line":37,"column":1,"offset":406},"end":{"line":39,"column":4,"offset":442},"indent":[1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#json","title":null,"children":[],"data":{"hProperties":{"aria-label":"json permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"json","position":{"start":{"line":42,"column":6,"offset":450},"end":{"line":42,"column":10,"offset":454},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":445},"end":{"line":42,"column":10,"offset":454},"indent":[]},"data":{"id":"json","htmlAttributes":{"id":"json"},"hProperties":{"id":"json"}}},{"type":"paragraph","children":[{"type":"text","value":"json 不是标准的地理数据结构，因此需要设置对应的经纬度字段","position":{"start":{"line":44,"column":1,"offset":456},"end":{"line":44,"column":33,"offset":488},"indent":[]}}],"position":{"start":{"line":44,"column":1,"offset":456},"end":{"line":44,"column":33,"offset":488},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"点数据","position":{"start":{"line":46,"column":3,"offset":492},"end":{"line":46,"column":6,"offset":495},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":490},"end":{"line":46,"column":8,"offset":497},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":490},"end":{"line":46,"column":8,"offset":497},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"x: 经度字段 ","position":{"start":{"line":48,"column":1,"offset":499},"end":{"line":48,"column":9,"offset":507},"indent":[]}}],"position":{"start":{"line":48,"column":1,"offset":499},"end":{"line":48,"column":9,"offset":507},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"y: 纬度字段","position":{"start":{"line":50,"column":1,"offset":509},"end":{"line":50,"column":8,"offset":516},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":509},"end":{"line":50,"column":8,"offset":516},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
","position":{"start":{"line":52,"column":1,"offset":518},"end":{"line":74,"column":4,"offset":763},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"线段数据","position":{"start":{"line":76,"column":3,"offset":767},"end":{"line":76,"column":7,"offset":771},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":765},"end":{"line":76,"column":9,"offset":773},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":765},"end":{"line":76,"column":9,"offset":773},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":" type: json","position":{"start":{"line":78,"column":1,"offset":775},"end":{"line":78,"column":12,"offset":786},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":775},"end":{"line":78,"column":12,"offset":786},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标","position":{"start":{"line":80,"column":1,"offset":788},"end":{"line":80,"column":44,"offset":831},"indent":[]}}],"position":{"start":{"line":80,"column":1,"offset":788},"end":{"line":80,"column":44,"offset":831},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":" x:经度字段 起点经度\n y:纬度字段 起点纬度\n x1:经度字段 终点经度\n y1:纬度字段 终点纬度","position":{"start":{"line":82,"column":1,"offset":833},"end":{"line":85,"column":16,"offset":889},"indent":[1,1,1]}}],"position":{"start":{"line":82,"column":1,"offset":833},"end":{"line":85,"column":16,"offset":889},"indent":[1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
","position":{"start":{"line":87,"column":1,"offset":891},"end":{"line":115,"column":4,"offset":1251},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"面数据","position":{"start":{"line":117,"column":3,"offset":1255},"end":{"line":117,"column":6,"offset":1258},"indent":[]}}],"position":{"start":{"line":117,"column":1,"offset":1253},"end":{"line":117,"column":8,"offset":1260},"indent":[]}}],"position":{"start":{"line":117,"column":1,"offset":1253},"end":{"line":117,"column":8,"offset":1260},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"需要指定coordinates 字段, coordinates据格式","position":{"start":{"line":119,"column":1,"offset":1262},"end":{"line":119,"column":35,"offset":1296},"indent":[]}}],"position":{"start":{"line":119,"column":1,"offset":1262},"end":{"line":119,"column":35,"offset":1296},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"注意面数据 coord  是三层数据结构","position":{"start":{"line":121,"column":3,"offset":1300},"end":{"line":121,"column":23,"offset":1320},"indent":[]}}],"position":{"start":{"line":121,"column":1,"offset":1298},"end":{"line":121,"column":25,"offset":1322},"indent":[]}}],"position":{"start":{"line":121,"column":1,"offset":1298},"end":{"line":121,"column":25,"offset":1322},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
","position":{"start":{"line":123,"column":1,"offset":1324},"end":{"line":164,"column":4,"offset":2103},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#csv","title":null,"children":[],"data":{"hProperties":{"aria-label":"csv permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"csv","position":{"start":{"line":169,"column":6,"offset":2113},"end":{"line":169,"column":9,"offset":2116},"indent":[]}}],"position":{"start":{"line":169,"column":1,"offset":2108},"end":{"line":169,"column":9,"offset":2116},"indent":[]},"data":{"id":"csv","htmlAttributes":{"id":"csv"},"hProperties":{"id":"csv"}}},{"type":"paragraph","children":[{"type":"text","value":"点，线数据配置项同json数据类型","position":{"start":{"line":170,"column":1,"offset":2117},"end":{"line":170,"column":18,"offset":2134},"indent":[]}}],"position":{"start":{"line":170,"column":1,"offset":2117},"end":{"line":170,"column":18,"offset":2134},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
","position":{"start":{"line":172,"column":1,"offset":2136},"end":{"line":184,"column":4,"offset":2300},"indent":[1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"栅格数据类型**","position":{"start":{"line":186,"column":3,"offset":2304},"end":{"line":186,"column":11,"offset":2312},"indent":[]}}],"position":{"start":{"line":186,"column":1,"offset":2302},"end":{"line":186,"column":13,"offset":2314},"indent":[]}}],"position":{"start":{"line":186,"column":1,"offset":2302},"end":{"line":186,"column":13,"offset":2314},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#image","title":null,"children":[],"data":{"hProperties":{"aria-label":"image permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"image","position":{"start":{"line":188,"column":6,"offset":2321},"end":{"line":188,"column":11,"offset":2326},"indent":[]}}],"position":{"start":{"line":188,"column":1,"offset":2316},"end":{"line":188,"column":11,"offset":2326},"indent":[]},"data":{"id":"image","htmlAttributes":{"id":"image"},"hProperties":{"id":"image"}}},{"type":"paragraph","children":[{"type":"text","value":" 根据图片的经纬度范围，将图片添加到地图上。 配置项","position":{"start":{"line":189,"column":1,"offset":2327},"end":{"line":189,"column":27,"offset":2353},"indent":[]}}],"position":{"start":{"line":189,"column":1,"offset":2327},"end":{"line":189,"column":27,"offset":2353},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" type: image","position":{"start":{"line":191,"column":3,"offset":2357},"end":{"line":191,"column":15,"offset":2369},"indent":[]}}],"position":{"start":{"line":191,"column":3,"offset":2357},"end":{"line":191,"column":15,"offset":2369},"indent":[]}}],"position":{"start":{"line":191,"column":1,"offset":2355},"end":{"line":191,"column":15,"offset":2369},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" extent: 图像的经纬度范围 []","position":{"start":{"line":192,"column":3,"offset":2372},"end":{"line":192,"column":23,"offset":2392},"indent":[]}}],"position":{"start":{"line":192,"column":3,"offset":2372},"end":{"line":192,"column":23,"offset":2392},"indent":[]}}],"position":{"start":{"line":192,"column":1,"offset":2370},"end":{"line":192,"column":23,"offset":2392},"indent":[]}}],"position":{"start":{"line":191,"column":1,"offset":2355},"end":{"line":192,"column":23,"offset":2392},"indent":[1]}},{"type":"html","lang":"javascript","meta":null,"value":"
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","position":{"start":{"line":194,"column":1,"offset":2394},"end":{"line":202,"column":4,"offset":2608},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#raster","title":null,"children":[],"data":{"hProperties":{"aria-label":"raster permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"raster","position":{"start":{"line":205,"column":6,"offset":2617},"end":{"line":205,"column":12,"offset":2623},"indent":[]}}],"position":{"start":{"line":205,"column":1,"offset":2612},"end":{"line":205,"column":12,"offset":2623},"indent":[]},"data":{"id":"raster","htmlAttributes":{"id":"raster"},"hProperties":{"id":"raster"}}},{"type":"paragraph","children":[{"type":"text","value":"栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项","position":{"start":{"line":206,"column":1,"offset":2624},"end":{"line":206,"column":44,"offset":2667},"indent":[]}}],"position":{"start":{"line":206,"column":1,"offset":2624},"end":{"line":206,"column":44,"offset":2667},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"type  raster","position":{"start":{"line":208,"column":3,"offset":2671},"end":{"line":208,"column":15,"offset":2683},"indent":[]}}],"position":{"start":{"line":208,"column":3,"offset":2671},"end":{"line":208,"column":15,"offset":2683},"indent":[]}}],"position":{"start":{"line":208,"column":1,"offset":2669},"end":{"line":208,"column":15,"offset":2683},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"width  数据宽度二维矩阵 columns ","position":{"start":{"line":209,"column":3,"offset":2686},"end":{"line":209,"column":27,"offset":2710},"indent":[]}}],"position":{"start":{"line":209,"column":3,"offset":2686},"end":{"line":209,"column":27,"offset":2710},"indent":[]}}],"position":{"start":{"line":209,"column":1,"offset":2684},"end":{"line":209,"column":27,"offset":2710},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"height 数据高度","position":{"start":{"line":210,"column":3,"offset":2713},"end":{"line":210,"column":14,"offset":2724},"indent":[]}}],"position":{"start":{"line":210,"column":3,"offset":2713},"end":{"line":210,"column":14,"offset":2724},"indent":[]}}],"position":{"start":{"line":210,"column":1,"offset":2711},"end":{"line":210,"column":14,"offset":2724},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"min 数据最大值","position":{"start":{"line":211,"column":3,"offset":2727},"end":{"line":211,"column":12,"offset":2736},"indent":[]}}],"position":{"start":{"line":211,"column":3,"offset":2727},"end":{"line":211,"column":12,"offset":2736},"indent":[]}}],"position":{"start":{"line":211,"column":1,"offset":2725},"end":{"line":211,"column":12,"offset":2736},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"max 数据最小值","position":{"start":{"line":212,"column":3,"offset":2739},"end":{"line":212,"column":12,"offset":2748},"indent":[]}}],"position":{"start":{"line":212,"column":3,"offset":2739},"end":{"line":212,"column":12,"offset":2748},"indent":[]}}],"position":{"start":{"line":212,"column":1,"offset":2737},"end":{"line":212,"column":12,"offset":2748},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"extent 经纬度范围","position":{"start":{"line":213,"column":3,"offset":2751},"end":{"line":213,"column":15,"offset":2763},"indent":[]}}],"position":{"start":{"line":213,"column":3,"offset":2751},"end":{"line":213,"column":15,"offset":2763},"indent":[]}}],"position":{"start":{"line":213,"column":1,"offset":2749},"end":{"line":213,"column":15,"offset":2763},"indent":[]}}],"position":{"start":{"line":208,"column":1,"offset":2669},"end":{"line":213,"column":15,"offset":2763},"indent":[1,1,1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
","position":{"start":{"line":215,"column":1,"offset":2765},"end":{"line":226,"column":4,"offset":3014},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#transforms","title":null,"children":[],"data":{"hProperties":{"aria-label":"transforms permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"transforms","position":{"start":{"line":229,"column":5,"offset":3021},"end":{"line":229,"column":15,"offset":3031},"indent":[]}}],"position":{"start":{"line":229,"column":1,"offset":3017},"end":{"line":229,"column":15,"offset":3031},"indent":[]},"data":{"id":"transforms","htmlAttributes":{"id":"transforms"},"hProperties":{"id":"transforms"}}},{"type":"paragraph","children":[{"type":"text","value":"目前支持三种数据处理方法 map，grid，hexagon transform配置项","position":{"start":{"line":230,"column":1,"offset":3032},"end":{"line":230,"column":43,"offset":3074},"indent":[]}}],"position":{"start":{"line":230,"column":1,"offset":3032},"end":{"line":230,"column":43,"offset":3074},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"type 数据处理类型","position":{"start":{"line":232,"column":3,"offset":3078},"end":{"line":232,"column":14,"offset":3089},"indent":[]}}],"position":{"start":{"line":232,"column":3,"offset":3078},"end":{"line":232,"column":14,"offset":3089},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":3076},"end":{"line":232,"column":14,"offset":3089},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" tansform cfg  数据处理配置项","position":{"start":{"line":233,"column":3,"offset":3092},"end":{"line":233,"column":25,"offset":3114},"indent":[]}}],"position":{"start":{"line":233,"column":3,"offset":3092},"end":{"line":233,"column":25,"offset":3114},"indent":[]}}],"position":{"start":{"line":233,"column":1,"offset":3090},"end":{"line":233,"column":25,"offset":3114},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":3076},"end":{"line":233,"column":25,"offset":3114},"indent":[1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#map","title":null,"children":[],"data":{"hProperties":{"aria-label":"map permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"map","position":{"start":{"line":236,"column":6,"offset":3122},"end":{"line":236,"column":9,"offset":3125},"indent":[]}}],"position":{"start":{"line":236,"column":1,"offset":3117},"end":{"line":236,"column":9,"offset":3125},"indent":[]},"data":{"id":"map","htmlAttributes":{"id":"map"},"hProperties":{"id":"map"}}},{"type":"paragraph","children":[{"type":"text","value":"数据处理，支持自定义callback函数","position":{"start":{"line":237,"column":1,"offset":3126},"end":{"line":237,"column":21,"offset":3146},"indent":[]}}],"position":{"start":{"line":237,"column":1,"offset":3126},"end":{"line":237,"column":21,"offset":3146},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"callback:function 回调函数","position":{"start":{"line":239,"column":3,"offset":3150},"end":{"line":239,"column":25,"offset":3172},"indent":[]}}],"position":{"start":{"line":239,"column":3,"offset":3150},"end":{"line":239,"column":25,"offset":3172},"indent":[]}}],"position":{"start":{"line":239,"column":1,"offset":3148},"end":{"line":239,"column":25,"offset":3172},"indent":[]}}],"position":{"start":{"line":239,"column":1,"offset":3148},"end":{"line":239,"column":25,"offset":3172},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
","position":{"start":{"line":241,"column":1,"offset":3174},"end":{"line":256,"column":4,"offset":3536},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#grid","title":null,"children":[],"data":{"hProperties":{"aria-label":"grid permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"grid","position":{"start":{"line":259,"column":6,"offset":3544},"end":{"line":259,"column":10,"offset":3548},"indent":[]}}],"position":{"start":{"line":259,"column":1,"offset":3539},"end":{"line":259,"column":10,"offset":3548},"indent":[]},"data":{"id":"grid","htmlAttributes":{"id":"grid"},"hProperties":{"id":"grid"}}},{"type":"paragraph","children":[{"type":"text","value":"生成方格网布局，根据数据字段统计，主要在网格热力图中使用","position":{"start":{"line":261,"column":1,"offset":3550},"end":{"line":261,"column":29,"offset":3578},"indent":[]}}],"position":{"start":{"line":261,"column":1,"offset":3550},"end":{"line":261,"column":29,"offset":3578},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" type: 'grid',","position":{"start":{"line":263,"column":3,"offset":3582},"end":{"line":263,"column":17,"offset":3596},"indent":[]}}],"position":{"start":{"line":263,"column":3,"offset":3582},"end":{"line":263,"column":17,"offset":3596},"indent":[]}}],"position":{"start":{"line":263,"column":1,"offset":3580},"end":{"line":263,"column":17,"offset":3596},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" size: 网格半径","position":{"start":{"line":264,"column":3,"offset":3599},"end":{"line":264,"column":14,"offset":3610},"indent":[]}}],"position":{"start":{"line":264,"column":3,"offset":3599},"end":{"line":264,"column":14,"offset":3610},"indent":[]}}],"position":{"start":{"line":264,"column":1,"offset":3597},"end":{"line":264,"column":14,"offset":3610},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" field: 数据统计字段","position":{"start":{"line":265,"column":3,"offset":3613},"end":{"line":265,"column":17,"offset":3627},"indent":[]}}],"position":{"start":{"line":265,"column":3,"offset":3613},"end":{"line":265,"column":17,"offset":3627},"indent":[]}}],"position":{"start":{"line":265,"column":1,"offset":3611},"end":{"line":265,"column":17,"offset":3627},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" method:聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":266,"column":3,"offset":3630},"end":{"line":266,"column":45,"offset":3672},"indent":[]}}],"position":{"start":{"line":266,"column":3,"offset":3630},"end":{"line":266,"column":45,"offset":3672},"indent":[]}}],"position":{"start":{"line":266,"column":1,"offset":3628},"end":{"line":266,"column":45,"offset":3672},"indent":[]}}],"position":{"start":{"line":263,"column":1,"offset":3580},"end":{"line":266,"column":45,"offset":3672},"indent":[1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
","position":{"start":{"line":268,"column":1,"offset":3674},"end":{"line":279,"column":4,"offset":3847},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#hexagon","title":null,"children":[],"data":{"hProperties":{"aria-label":"hexagon permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"hexagon","position":{"start":{"line":282,"column":6,"offset":3855},"end":{"line":282,"column":13,"offset":3862},"indent":[]}}],"position":{"start":{"line":282,"column":1,"offset":3850},"end":{"line":282,"column":13,"offset":3862},"indent":[]},"data":{"id":"hexagon","htmlAttributes":{"id":"hexagon"},"hProperties":{"id":"hexagon"}}},{"type":"paragraph","children":[{"type":"text","value":"生成六边形网格布局，根据数据字段统计","position":{"start":{"line":283,"column":1,"offset":3863},"end":{"line":283,"column":19,"offset":3881},"indent":[]}}],"position":{"start":{"line":283,"column":1,"offset":3863},"end":{"line":283,"column":19,"offset":3881},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" type: 'hexagon',","position":{"start":{"line":285,"column":3,"offset":3885},"end":{"line":285,"column":20,"offset":3902},"indent":[]}}],"position":{"start":{"line":285,"column":3,"offset":3885},"end":{"line":285,"column":20,"offset":3902},"indent":[]}}],"position":{"start":{"line":285,"column":1,"offset":3883},"end":{"line":285,"column":20,"offset":3902},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" size: 网格半径","position":{"start":{"line":286,"column":3,"offset":3905},"end":{"line":286,"column":14,"offset":3916},"indent":[]}}],"position":{"start":{"line":286,"column":3,"offset":3905},"end":{"line":286,"column":14,"offset":3916},"indent":[]}}],"position":{"start":{"line":286,"column":1,"offset":3903},"end":{"line":286,"column":14,"offset":3916},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" field: 数据统计字段","position":{"start":{"line":287,"column":3,"offset":3919},"end":{"line":287,"column":17,"offset":3933},"indent":[]}}],"position":{"start":{"line":287,"column":3,"offset":3919},"end":{"line":287,"column":17,"offset":3933},"indent":[]}}],"position":{"start":{"line":287,"column":1,"offset":3917},"end":{"line":287,"column":17,"offset":3933},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":" method:聚合方法  count,max,min,sum,mean5个统计维度","position":{"start":{"line":288,"column":3,"offset":3936},"end":{"line":288,"column":45,"offset":3978},"indent":[]}}],"position":{"start":{"line":288,"column":3,"offset":3936},"end":{"line":288,"column":45,"offset":3978},"indent":[]}}],"position":{"start":{"line":288,"column":1,"offset":3934},"end":{"line":288,"column":45,"offset":3978},"indent":[]}}],"position":{"start":{"line":285,"column":1,"offset":3883},"end":{"line":288,"column":45,"offset":3978},"indent":[1,1,1]}},{"type":"html","lang":null,"meta":null,"value":"
","position":{"start":{"line":291,"column":1,"offset":3981},"end":{"line":295,"column":1,"offset":3988},"indent":[1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":295,"column":1,"offset":3988}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-e90e43e15b2e3231290b6b169ad423f5.json b/.cache/caches/gatsby-transformer-remark/diskstore-e90e43e15b2e3231290b6b169ad423f5.json deleted file mode 100644 index 41ebb76d00..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-e90e43e15b2e3231290b6b169ad423f5.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-81330a3168163fa3728e304ac6d58e91-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-eacb6066def7ff77d1a051a164dd521a.json b/.cache/caches/gatsby-transformer-remark/diskstore-eacb6066def7ff77d1a051a164dd521a.json deleted file mode 100644 index 836fdfcc42..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-eacb6066def7ff77d1a051a164dd521a.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-cdcfb792dd144bc64fd4506a40146af7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":1,"children":[{"type":"link","url":"#l7-地理空间数据可视分析引擎","title":null,"children":[],"data":{"hProperties":{"aria-label":"l7 地理空间数据可视分析引擎 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"L7 地理空间数据可视分析引擎","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":18,"offset":18},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":18,"offset":18},"indent":[]},"data":{"id":"l7-地理空间数据可视分析引擎","htmlAttributes":{"id":"l7-地理空间数据可视分析引擎"},"hProperties":{"id":"l7-地理空间数据可视分析引擎"}}},{"type":"paragraph","children":[{"type":"text","value":"2.0.beta 版本目前有些功能还未完善，","position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":20},"end":{"line":4,"column":23,"offset":42},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":60,"offset":103},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":60,"offset":103},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ 1.x 版本的用户需求我们持续跟进 ","position":{"start":{"line":8,"column":1,"offset":105},"end":{"line":8,"column":22,"offset":126},"indent":[]}},{"type":"link","title":null,"url":"https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html","children":[{"type":"text","value":"旧版官网地址","position":{"start":{"line":8,"column":23,"offset":127},"end":{"line":8,"column":29,"offset":133},"indent":[]}}],"position":{"start":{"line":8,"column":22,"offset":126},"end":{"line":8,"column":84,"offset":188},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}}],"position":{"start":{"line":8,"column":1,"offset":105},"end":{"line":8,"column":84,"offset":188},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。","position":{"start":{"line":10,"column":1,"offset":190},"end":{"line":10,"column":173,"offset":362},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":190},"end":{"line":10,"column":173,"offset":362},"indent":[]}},{"type":"html","value":"","position":{"start":{"line":12,"column":1,"offset":364},"end":{"line":17,"column":9,"offset":937},"indent":[1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#核心特性","title":null,"children":[],"data":{"hProperties":{"aria-label":"核心特性 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"核心特性","position":{"start":{"line":19,"column":4,"offset":942},"end":{"line":19,"column":8,"offset":946},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":939},"end":{"line":19,"column":8,"offset":946},"indent":[]},"data":{"id":"核心特性","htmlAttributes":{"id":"核心特性"},"hProperties":{"id":"核心特性"}}},{"type":"paragraph","children":[{"type":"text","value":"🌏 数据驱动可视化展示","position":{"start":{"line":22,"column":1,"offset":949},"end":{"line":22,"column":13,"offset":961},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":949},"end":{"line":22,"column":13,"offset":961},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。","position":{"start":{"line":24,"column":1,"offset":963},"end":{"line":24,"column":31,"offset":993},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":963},"end":{"line":24,"column":31,"offset":993},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"🌏 2D，3D 一体化的海量数据高性能渲染","position":{"start":{"line":26,"column":1,"offset":995},"end":{"line":26,"column":23,"offset":1017},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":995},"end":{"line":26,"column":23,"offset":1017},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"百万级空间数据实时，动态渲染。","position":{"start":{"line":28,"column":1,"offset":1019},"end":{"line":28,"column":16,"offset":1034},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":1019},"end":{"line":28,"column":16,"offset":1034},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"🌏 简单灵活的数据接入","position":{"start":{"line":30,"column":1,"offset":1036},"end":{"line":30,"column":13,"offset":1048},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":1036},"end":{"line":30,"column":13,"offset":1048},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。","position":{"start":{"line":32,"column":1,"offset":1050},"end":{"line":32,"column":53,"offset":1102},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":1050},"end":{"line":32,"column":53,"offset":1102},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":" 🌏 多地图底图支持，支持离线内网部署","position":{"start":{"line":34,"column":1,"offset":1104},"end":{"line":34,"column":21,"offset":1124},"indent":[]}}],"position":{"start":{"line":34,"column":1,"offset":1104},"end":{"line":34,"column":21,"offset":1124},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。","position":{"start":{"line":36,"column":1,"offset":1126},"end":{"line":36,"column":34,"offset":1159},"indent":[]}}],"position":{"start":{"line":36,"column":1,"offset":1126},"end":{"line":36,"column":34,"offset":1159},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#支持丰富的图表类型","title":null,"children":[],"data":{"hProperties":{"aria-label":"支持丰富的图表类型 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"支持丰富的图表类型","position":{"start":{"line":38,"column":4,"offset":1164},"end":{"line":38,"column":13,"offset":1173},"indent":[]}}],"position":{"start":{"line":38,"column":1,"offset":1161},"end":{"line":38,"column":13,"offset":1173},"indent":[]},"data":{"id":"支持丰富的图表类型","htmlAttributes":{"id":"支持丰富的图表类型"},"hProperties":{"id":"支持丰富的图表类型"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#点图层","title":null,"children":[],"data":{"hProperties":{"aria-label":"点图层 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"点图层","position":{"start":{"line":40,"column":5,"offset":1179},"end":{"line":40,"column":8,"offset":1182},"indent":[]}}],"position":{"start":{"line":40,"column":1,"offset":1175},"end":{"line":40,"column":8,"offset":1182},"indent":[]},"data":{"id":"点图层","htmlAttributes":{"id":"点图层"},"hProperties":{"id":"点图层"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"气泡图","position":{"start":{"line":42,"column":4,"offset":1188},"end":{"line":42,"column":7,"offset":1191},"indent":[]}}],"position":{"start":{"line":42,"column":4,"offset":1188},"end":{"line":42,"column":7,"offset":1191},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":1185},"end":{"line":42,"column":7,"offset":1191},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"散点图","position":{"start":{"line":43,"column":4,"offset":1195},"end":{"line":43,"column":7,"offset":1198},"indent":[]}}],"position":{"start":{"line":43,"column":4,"offset":1195},"end":{"line":43,"column":7,"offset":1198},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":1192},"end":{"line":43,"column":7,"offset":1198},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"符号地图","position":{"start":{"line":44,"column":4,"offset":1202},"end":{"line":44,"column":8,"offset":1206},"indent":[]}}],"position":{"start":{"line":44,"column":4,"offset":1202},"end":{"line":44,"column":8,"offset":1206},"indent":[]}}],"position":{"start":{"line":44,"column":1,"offset":1199},"end":{"line":44,"column":8,"offset":1206},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"3D柱状地图","position":{"start":{"line":45,"column":4,"offset":1210},"end":{"line":45,"column":10,"offset":1216},"indent":[]}}],"position":{"start":{"line":45,"column":4,"offset":1210},"end":{"line":45,"column":10,"offset":1216},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":1207},"end":{"line":45,"column":10,"offset":1216},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"聚合地图","position":{"start":{"line":46,"column":4,"offset":1220},"end":{"line":46,"column":8,"offset":1224},"indent":[]}}],"position":{"start":{"line":46,"column":4,"offset":1220},"end":{"line":46,"column":8,"offset":1224},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":1217},"end":{"line":46,"column":8,"offset":1224},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"复合图表地图","position":{"start":{"line":47,"column":4,"offset":1228},"end":{"line":47,"column":10,"offset":1234},"indent":[]}}],"position":{"start":{"line":47,"column":4,"offset":1228},"end":{"line":47,"column":10,"offset":1234},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":1225},"end":{"line":47,"column":10,"offset":1234},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"自定义Marker","position":{"start":{"line":48,"column":4,"offset":1238},"end":{"line":48,"column":13,"offset":1247},"indent":[]}}],"position":{"start":{"line":48,"column":4,"offset":1238},"end":{"line":48,"column":13,"offset":1247},"indent":[]}}],"position":{"start":{"line":48,"column":1,"offset":1235},"end":{"line":48,"column":13,"offset":1247},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":1185},"end":{"line":48,"column":13,"offset":1247},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#线图层","title":null,"children":[],"data":{"hProperties":{"aria-label":"线图层 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"线图层","position":{"start":{"line":50,"column":5,"offset":1253},"end":{"line":50,"column":8,"offset":1256},"indent":[]}}],"position":{"start":{"line":50,"column":1,"offset":1249},"end":{"line":50,"column":8,"offset":1256},"indent":[]},"data":{"id":"线图层","htmlAttributes":{"id":"线图层"},"hProperties":{"id":"线图层"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"路径地图","position":{"start":{"line":52,"column":3,"offset":1260},"end":{"line":52,"column":7,"offset":1264},"indent":[]}}],"position":{"start":{"line":52,"column":3,"offset":1260},"end":{"line":52,"column":7,"offset":1264},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":1258},"end":{"line":52,"column":7,"offset":1264},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"弧线，支持2D弧线、3D弧线以及大圆航线","position":{"start":{"line":53,"column":3,"offset":1267},"end":{"line":53,"column":23,"offset":1287},"indent":[]}}],"position":{"start":{"line":53,"column":3,"offset":1267},"end":{"line":53,"column":23,"offset":1287},"indent":[]}}],"position":{"start":{"line":53,"column":1,"offset":1265},"end":{"line":53,"column":23,"offset":1287},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"等值线","position":{"start":{"line":54,"column":3,"offset":1290},"end":{"line":54,"column":6,"offset":1293},"indent":[]}}],"position":{"start":{"line":54,"column":3,"offset":1290},"end":{"line":54,"column":6,"offset":1293},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":1288},"end":{"line":54,"column":6,"offset":1293},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":1258},"end":{"line":54,"column":6,"offset":1293},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#面图层","title":null,"children":[],"data":{"hProperties":{"aria-label":"面图层 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"面图层","position":{"start":{"line":56,"column":5,"offset":1299},"end":{"line":56,"column":8,"offset":1302},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":1295},"end":{"line":56,"column":8,"offset":1302},"indent":[]},"data":{"id":"面图层","htmlAttributes":{"id":"面图层"},"hProperties":{"id":"面图层"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"填充图","position":{"start":{"line":58,"column":3,"offset":1306},"end":{"line":58,"column":6,"offset":1309},"indent":[]}}],"position":{"start":{"line":58,"column":3,"offset":1306},"end":{"line":58,"column":6,"offset":1309},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":1304},"end":{"line":58,"column":6,"offset":1309},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"3D填充图","position":{"start":{"line":59,"column":3,"offset":1312},"end":{"line":59,"column":8,"offset":1317},"indent":[]}}],"position":{"start":{"line":59,"column":3,"offset":1312},"end":{"line":59,"column":8,"offset":1317},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":1310},"end":{"line":59,"column":8,"offset":1317},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":1304},"end":{"line":59,"column":8,"offset":1317},"indent":[1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#热力图","title":null,"children":[],"data":{"hProperties":{"aria-label":"热力图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"热力图","position":{"start":{"line":61,"column":5,"offset":1323},"end":{"line":61,"column":8,"offset":1326},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":1319},"end":{"line":61,"column":8,"offset":1326},"indent":[]},"data":{"id":"热力图","htmlAttributes":{"id":"热力图"},"hProperties":{"id":"热力图"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"经典热力图","position":{"start":{"line":63,"column":3,"offset":1330},"end":{"line":63,"column":8,"offset":1335},"indent":[]}}],"position":{"start":{"line":63,"column":3,"offset":1330},"end":{"line":63,"column":8,"offset":1335},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":1328},"end":{"line":63,"column":8,"offset":1335},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"蜂窝热力图","position":{"start":{"line":64,"column":3,"offset":1338},"end":{"line":64,"column":8,"offset":1343},"indent":[]}}],"position":{"start":{"line":64,"column":3,"offset":1338},"end":{"line":64,"column":8,"offset":1343},"indent":[]}}],"position":{"start":{"line":64,"column":1,"offset":1336},"end":{"line":64,"column":8,"offset":1343},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"网格热力图","position":{"start":{"line":65,"column":3,"offset":1346},"end":{"line":65,"column":8,"offset":1351},"indent":[]}}],"position":{"start":{"line":65,"column":3,"offset":1346},"end":{"line":65,"column":8,"offset":1351},"indent":[]}}],"position":{"start":{"line":65,"column":1,"offset":1344},"end":{"line":65,"column":8,"offset":1351},"indent":[]}}],"position":{"start":{"line":63,"column":1,"offset":1328},"end":{"line":65,"column":8,"offset":1351},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#栅格地图","title":null,"children":[],"data":{"hProperties":{"aria-label":"栅格地图 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"栅格地图","position":{"start":{"line":67,"column":5,"offset":1357},"end":{"line":67,"column":9,"offset":1361},"indent":[]}}],"position":{"start":{"line":67,"column":1,"offset":1353},"end":{"line":67,"column":9,"offset":1361},"indent":[]},"data":{"id":"栅格地图","htmlAttributes":{"id":"栅格地图"},"hProperties":{"id":"栅格地图"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"图片","position":{"start":{"line":68,"column":3,"offset":1364},"end":{"line":68,"column":5,"offset":1366},"indent":[]}}],"position":{"start":{"line":68,"column":3,"offset":1364},"end":{"line":68,"column":5,"offset":1366},"indent":[]}}],"position":{"start":{"line":68,"column":1,"offset":1362},"end":{"line":68,"column":5,"offset":1366},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Raster","position":{"start":{"line":69,"column":3,"offset":1369},"end":{"line":69,"column":9,"offset":1375},"indent":[]}}],"position":{"start":{"line":69,"column":3,"offset":1369},"end":{"line":69,"column":9,"offset":1375},"indent":[]}}],"position":{"start":{"line":69,"column":1,"offset":1367},"end":{"line":69,"column":9,"offset":1375},"indent":[]}}],"position":{"start":{"line":68,"column":1,"offset":1362},"end":{"line":69,"column":9,"offset":1375},"indent":[1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#l7-20-roadmap","title":null,"children":[],"data":{"hProperties":{"aria-label":"l7 20 roadmap permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"L7 2.0 Roadmap","position":{"start":{"line":71,"column":4,"offset":1380},"end":{"line":71,"column":18,"offset":1394},"indent":[]}}],"position":{"start":{"line":71,"column":1,"offset":1377},"end":{"line":71,"column":18,"offset":1394},"indent":[]},"data":{"id":"l7-20-roadmap","htmlAttributes":{"id":"l7-20-roadmap"},"hProperties":{"id":"l7-20-roadmap"}}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ","alt":"L7 Road Map","position":{"start":{"line":73,"column":1,"offset":1396},"end":{"line":73,"column":101,"offset":1496},"indent":[]}}],"position":{"start":{"line":73,"column":1,"offset":1396},"end":{"line":73,"column":101,"offset":1496},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"更多技术细节，详细进展，请关注 ","position":{"start":{"line":76,"column":1,"offset":1499},"end":{"line":76,"column":17,"offset":1515},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/antvis/L7","children":[{"type":"text","value":"GitHub","position":{"start":{"line":76,"column":18,"offset":1516},"end":{"line":76,"column":24,"offset":1522},"indent":[]}}],"position":{"start":{"line":76,"column":17,"offset":1515},"end":{"line":76,"column":55,"offset":1553},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"，欢迎大家来给点点 Star，让更多人看到这个开源的项目。","position":{"start":{"line":76,"column":55,"offset":1553},"end":{"line":76,"column":84,"offset":1582},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":1499},"end":{"line":76,"column":84,"offset":1582},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#技术支持服务群","title":null,"children":[],"data":{"hProperties":{"aria-label":"技术支持服务群 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"技术支持服务群","position":{"start":{"line":78,"column":5,"offset":1588},"end":{"line":78,"column":12,"offset":1595},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":1584},"end":{"line":78,"column":12,"offset":1595},"indent":[]},"data":{"id":"技术支持服务群","htmlAttributes":{"id":"技术支持服务群"},"hProperties":{"id":"技术支持服务群"}}},{"type":"paragraph","children":[{"type":"text","value":"L7 相关技术问题，需求反馈，我们会及时响应\n","position":{"start":{"line":79,"column":1,"offset":1596},"end":{"line":80,"column":1,"offset":1619},"indent":[1]}},{"type":"image","title":null,"url":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*REc9Qrttrg8AAAAAAAAAAABkARQnAQ","alt":"地理空间可视化L7支持群","position":{"start":{"line":80,"column":1,"offset":1619},"end":{"line":80,"column":102,"offset":1720},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":1596},"end":{"line":80,"column":102,"offset":1720},"indent":[1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":81,"column":1,"offset":1721}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-eb30c96d5ebf33936a627e67ba0c1be3.json b/.cache/caches/gatsby-transformer-remark/diskstore-eb30c96d5ebf33936a627e67ba0c1be3.json deleted file mode 100644 index a077b83b4f..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-eb30c96d5ebf33936a627e67ba0c1be3.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-97fa88c11aed2c1192f7b349cbb69969-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-eb5be0c64e83c084dfbecabb9bfbc769.json b/.cache/caches/gatsby-transformer-remark/diskstore-eb5be0c64e83c084dfbecabb9bfbc769.json deleted file mode 100644 index 84ddb9d94a..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-eb5be0c64e83c084dfbecabb9bfbc769.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-99f9daf26f7bf831e47b400f65746195-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":3,"column":1,"offset":2}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-ec2be8b606ed2c70f7bad54feb4bef3b.json b/.cache/caches/gatsby-transformer-remark/diskstore-ec2be8b606ed2c70f7bad54feb4bef3b.json deleted file mode 100644 index 963cdf8ca7..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-ec2be8b606ed2c70f7bad54feb4bef3b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-fe414ff6aa99e525f316a6218dd13c0f-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-ef1f86df777064d0f785548990d6c7e9.json b/.cache/caches/gatsby-transformer-remark/diskstore-ef1f86df777064d0f785548990d6c7e9.json deleted file mode 100644 index c524d1c88b..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-ef1f86df777064d0f785548990d6c7e9.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-3b51eb4af3d4a5698e9dc244ba9364a5-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f05faa44fadebc99e0fb8ddb0e193597.json b/.cache/caches/gatsby-transformer-remark/diskstore-f05faa44fadebc99e0fb8ddb0e193597.json deleted file mode 100644 index 9adf50172b..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f05faa44fadebc99e0fb8ddb0e193597.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-9bb7ce1cef5d17f8dfef5ffe696b4753-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#数据","title":null,"children":[],"data":{"hProperties":{"aria-label":"数据 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"数据","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":6,"offset":6},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":6,"offset":6},"indent":[]},"data":{"id":"数据","htmlAttributes":{"id":"数据"},"hProperties":{"id":"数据"}}},{"type":"paragraph","children":[{"type":"text","value":"目前L7支持的数据格式有GeoJson,CSV,JSon Image","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"GeoJSON 支持点、线、面，等所有的空间数据格式。","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":28,"offset":71},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":28,"offset":71},"end":{"line":6,"column":34,"offset":77},"indent":[]}},{"type":"text","value":"CSV 支持，点，线段，弧线的支持。","position":{"start":{"line":6,"column":34,"offset":77},"end":{"line":6,"column":52,"offset":95},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":52,"offset":95},"end":{"line":6,"column":58,"offset":101},"indent":[]}},{"type":"text","value":"JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。","position":{"start":{"line":6,"column":58,"offset":101},"end":{"line":6,"column":91,"offset":134},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":91,"offset":134},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#geojson","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"GeoJSON","position":{"start":{"line":9,"column":4,"offset":140},"end":{"line":9,"column":11,"offset":147},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":137},"end":{"line":9,"column":11,"offset":147},"indent":[]},"data":{"id":"geojson","htmlAttributes":{"id":"geojson"},"hProperties":{"id":"geojson"}}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":149},"end":{"line":11,"column":128,"offset":276},"indent":[]}},{"type":"html","lang":"json","meta":null,"value":"
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
","position":{"start":{"line":15,"column":1,"offset":280},"end":{"line":52,"column":4,"offset":980},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#地理统计分析工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"地理统计分析工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":54,"column":4,"offset":985},"end":{"line":54,"column":12,"offset":993},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":982},"end":{"line":54,"column":12,"offset":993},"indent":[]},"data":{"id":"地理统计分析工具","htmlAttributes":{"id":"地理统计分析工具"},"hProperties":{"id":"地理统计分析工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://turfjs.org/","children":[{"type":"text","value":"turfjs","position":{"start":{"line":55,"column":2,"offset":995},"end":{"line":55,"column":8,"offset":1001},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":29,"offset":1022},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":55,"column":29,"offset":1022},"end":{"line":55,"column":60,"offset":1053},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":60,"offset":1053},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#在线工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"在线工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"在线工具","position":{"start":{"line":57,"column":4,"offset":1058},"end":{"line":57,"column":8,"offset":1062},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1055},"end":{"line":57,"column":8,"offset":1062},"indent":[]},"data":{"id":"在线工具","htmlAttributes":{"id":"在线工具"},"hProperties":{"id":"在线工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://geojson.io/","children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":59,"column":2,"offset":1065},"end":{"line":59,"column":20,"offset":1083},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":41,"offset":1104},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":59,"column":41,"offset":1104},"end":{"line":59,"column":66,"offset":1129},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":66,"offset":1129},"indent":[]}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://mapshaper.org/","children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":61,"column":2,"offset":1132},"end":{"line":61,"column":24,"offset":1154},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":49,"offset":1179},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"  可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":61,"column":49,"offset":1179},"end":{"line":61,"column":80,"offset":1210},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":80,"offset":1210},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":62,"column":1,"offset":1211}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f12a459702b0d8c7577fbfc59b437333.json b/.cache/caches/gatsby-transformer-remark/diskstore-f12a459702b0d8c7577fbfc59b437333.json deleted file mode 100644 index 1f5d820529..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f12a459702b0d8c7577fbfc59b437333.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-25eb056d4a67acb0b49cfbe659e280c1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
"} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f16676dc5853024b0c855f40d3693b8e.json b/.cache/caches/gatsby-transformer-remark/diskstore-f16676dc5853024b0c855f40d3693b8e.json deleted file mode 100644 index 6f5c149c7d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f16676dc5853024b0c855f40d3693b8e.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-1ff9a1ea479245d5ce9c273f5fc64ec3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f24e93b6934904f4e30836b23c475759.json b/.cache/caches/gatsby-transformer-remark/diskstore-f24e93b6934904f4e30836b23c475759.json deleted file mode 100644 index 82f3582d2d..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f24e93b6934904f4e30836b23c475759.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157449000,"key":"transformer-remark-markdown-toc-31fce8e43ac00c6448c028e5a94f3913-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f27dbffdb33eaeb8e87241d0d6e12b87.json b/.cache/caches/gatsby-transformer-remark/diskstore-f27dbffdb33eaeb8e87241d0d6e12b87.json deleted file mode 100644 index 84ee3eb933..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f27dbffdb33eaeb8e87241d0d6e12b87.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829162510000,"key":"transformer-remark-markdown-html-1ff9a1ea479245d5ce9c273f5fc64ec3-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f34d1b847541b9e66e3b1d199c8ed7cf.json b/.cache/caches/gatsby-transformer-remark/diskstore-f34d1b847541b9e66e3b1d199c8ed7cf.json deleted file mode 100644 index 7d357fe0fa..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f34d1b847541b9e66e3b1d199c8ed7cf.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-c4cd085970d775329dc03e58519d79fd-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":2,"column":1,"offset":1}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f382ad2e27949d6da2ba419e73909a52.json b/.cache/caches/gatsby-transformer-remark/diskstore-f382ad2e27949d6da2ba419e73909a52.json deleted file mode 100644 index 30a6690f39..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f382ad2e27949d6da2ba419e73909a52.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-47b0d92f07e7d22128274908bbd41917-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#数据","title":null,"children":[],"data":{"hProperties":{"aria-label":"数据 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"数据","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":6,"offset":6},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":6,"offset":6},"indent":[]},"data":{"id":"数据","htmlAttributes":{"id":"数据"},"hProperties":{"id":"数据"}}},{"type":"paragraph","children":[{"type":"text","value":"目前L7支持的数据格式有GeoJson,CSV,JSon Image","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"GeoJSON 支持点、线、面，等所有的空间数据格式。","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":28,"offset":71},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":28,"offset":71},"end":{"line":6,"column":34,"offset":77},"indent":[]}},{"type":"text","value":"CSV 支持，点，线段，弧线的支持。","position":{"start":{"line":6,"column":34,"offset":77},"end":{"line":6,"column":52,"offset":95},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":6,"column":52,"offset":95},"end":{"line":6,"column":58,"offset":101},"indent":[]}},{"type":"text","value":"JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。","position":{"start":{"line":6,"column":58,"offset":101},"end":{"line":6,"column":91,"offset":134},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":91,"offset":134},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#geojson","title":null,"children":[],"data":{"hProperties":{"aria-label":"geojson permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"GeoJSON","position":{"start":{"line":9,"column":4,"offset":140},"end":{"line":9,"column":11,"offset":147},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":137},"end":{"line":9,"column":11,"offset":147},"indent":[]},"data":{"id":"geojson","htmlAttributes":{"id":"geojson"},"hProperties":{"id":"geojson"}}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":149},"end":{"line":11,"column":128,"offset":276},"indent":[]}},{"type":"html","lang":"json","meta":null,"value":"
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
","position":{"start":{"line":15,"column":1,"offset":280},"end":{"line":52,"column":4,"offset":980},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#地理统计分析工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"地理统计分析工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":54,"column":4,"offset":985},"end":{"line":54,"column":12,"offset":993},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":982},"end":{"line":54,"column":12,"offset":993},"indent":[]},"data":{"id":"地理统计分析工具","htmlAttributes":{"id":"地理统计分析工具"},"hProperties":{"id":"地理统计分析工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://turfjs.org/","children":[{"type":"text","value":"turfjs","position":{"start":{"line":55,"column":2,"offset":995},"end":{"line":55,"column":8,"offset":1001},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":29,"offset":1022},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":55,"column":29,"offset":1022},"end":{"line":55,"column":60,"offset":1053},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":60,"offset":1053},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#在线工具","title":null,"children":[],"data":{"hProperties":{"aria-label":"在线工具 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"在线工具","position":{"start":{"line":57,"column":4,"offset":1058},"end":{"line":57,"column":8,"offset":1062},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1055},"end":{"line":57,"column":8,"offset":1062},"indent":[]},"data":{"id":"在线工具","htmlAttributes":{"id":"在线工具"},"hProperties":{"id":"在线工具"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"http://geojson.io/","children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":59,"column":2,"offset":1065},"end":{"line":59,"column":20,"offset":1083},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":41,"offset":1104},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":59,"column":41,"offset":1104},"end":{"line":59,"column":66,"offset":1129},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":66,"offset":1129},"indent":[]}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://mapshaper.org/","children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":61,"column":2,"offset":1132},"end":{"line":61,"column":24,"offset":1154},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":49,"offset":1179},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"  可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":61,"column":49,"offset":1179},"end":{"line":61,"column":80,"offset":1210},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":80,"offset":1210},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":62,"column":1,"offset":1211}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f3c66b8f878a23140c6a9b8df2ac8e27.json b/.cache/caches/gatsby-transformer-remark/diskstore-f3c66b8f878a23140c6a9b8df2ac8e27.json deleted file mode 100644 index 9abb314d75..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f3c66b8f878a23140c6a9b8df2ac8e27.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-43103af0e6fac5c913a4ee2d647171d6-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":67,"offset":66}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":67,"offset":66}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":67,"offset":66}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f40f52608f044d7641728347ae72e9e9.json b/.cache/caches/gatsby-transformer-remark/diskstore-f40f52608f044d7641728347ae72e9e9.json deleted file mode 100644 index 2c18824652..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f40f52608f044d7641728347ae72e9e9.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-a47796faf1ab795c66b81908e03e735c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"热力图的变体，网格布局呈现数据分级分布的聚合现象。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f415582576ea327942cbe53ff24f1f06.json b/.cache/caches/gatsby-transformer-remark/diskstore-f415582576ea327942cbe53ff24f1f06.json deleted file mode 100644 index bccc6c5d12..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f415582576ea327942cbe53ff24f1f06.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-119e3104d715d1fff21c8aae318c2c39-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h1","properties":{"id":"使用方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95","aria-label":"使用方法 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"使用方法","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":7,"offset":7}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":7,"offset":7}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 提供三种使用方式：CDN、Submodule。","position":{"start":{"line":4,"column":1,"offset":9},"end":{"line":4,"column":27,"offset":35}}}],"position":{"start":{"line":4,"column":1,"offset":9},"end":{"line":4,"column":27,"offset":35}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"通过-cdn-使用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%80%9A%E8%BF%87-cdn-%E4%BD%BF%E7%94%A8","aria-label":"通过 cdn 使用 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"通过 CDN 使用","position":{"start":{"line":6,"column":4,"offset":40},"end":{"line":6,"column":13,"offset":49}}}],"position":{"start":{"line":6,"column":1,"offset":37},"end":{"line":6,"column":13,"offset":49}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"首先在 ","position":{"start":{"line":8,"column":1,"offset":51},"end":{"line":8,"column":5,"offset":55}}},{"type":"raw","value":"<head>","position":{"start":{"line":8,"column":5,"offset":55},"end":{"line":8,"column":13,"offset":63}}},{"type":"text","value":" 中引入 L7 CDN 版本的 JS 和 CSS 文件：","position":{"start":{"line":8,"column":13,"offset":63},"end":{"line":8,"column":41,"offset":91}}}],"position":{"start":{"line":8,"column":1,"offset":51},"end":{"line":8,"column":41,"offset":91}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
","position":{"start":{"line":9,"column":1,"offset":92},"end":{"line":13,"column":4,"offset":218}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 ","position":{"start":{"line":15,"column":1,"offset":220},"end":{"line":15,"column":50,"offset":269}}},{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox 文档","position":{"start":{"line":15,"column":51,"offset":270},"end":{"line":15,"column":60,"offset":279}}}],"position":{"start":{"line":15,"column":50,"offset":269},"end":{"line":15,"column":120,"offset":339}}},{"type":"text","value":"：","position":{"start":{"line":15,"column":120,"offset":339},"end":{"line":15,"column":121,"offset":340}}}],"position":{"start":{"line":15,"column":1,"offset":220},"end":{"line":15,"column":121,"offset":340}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
","position":{"start":{"line":16,"column":1,"offset":341},"end":{"line":22,"column":4,"offset":583}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️高德采用异步加载，因此不需要引入任何额外静态文件。","position":{"start":{"line":23,"column":1,"offset":584},"end":{"line":23,"column":28,"offset":611}}}],"position":{"start":{"line":23,"column":1,"offset":584},"end":{"line":23,"column":28,"offset":611}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"然后在 ","position":{"start":{"line":25,"column":1,"offset":613},"end":{"line":25,"column":5,"offset":617}}},{"type":"raw","value":"<body>","position":{"start":{"line":25,"column":5,"offset":617},"end":{"line":25,"column":13,"offset":625}}},{"type":"text","value":" 中定义一个容器并设置一个 ","position":{"start":{"line":25,"column":13,"offset":625},"end":{"line":25,"column":27,"offset":639}}},{"type":"raw","value":"id","position":{"start":{"line":25,"column":27,"offset":639},"end":{"line":25,"column":31,"offset":643}}},{"type":"text","value":"。通过全局 ","position":{"start":{"line":25,"column":31,"offset":643},"end":{"line":25,"column":37,"offset":649}}},{"type":"raw","value":"L7","position":{"start":{"line":25,"column":37,"offset":649},"end":{"line":25,"column":41,"offset":653}}},{"type":"text","value":" 这个命名空间可以获取场景 ","position":{"start":{"line":25,"column":41,"offset":653},"end":{"line":25,"column":55,"offset":667}}},{"type":"raw","value":"L7.Scene","position":{"start":{"line":25,"column":55,"offset":667},"end":{"line":25,"column":65,"offset":677}}},{"type":"text","value":" 和图层 ","position":{"start":{"line":25,"column":65,"offset":677},"end":{"line":25,"column":70,"offset":682}}},{"type":"raw","value":"L7.PolygonLayer","position":{"start":{"line":25,"column":70,"offset":682},"end":{"line":25,"column":87,"offset":699}}},{"type":"text","value":"：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 ","position":{"start":{"line":25,"column":87,"offset":699},"end":{"line":26,"column":33,"offset":733}}},{"type":"raw","value":"L7.Scene","position":{"start":{"line":26,"column":33,"offset":733},"end":{"line":26,"column":43,"offset":743}}},{"type":"text","value":" 的构造函数，获取方式如下：","position":{"start":{"line":26,"column":43,"offset":743},"end":{"line":26,"column":57,"offset":757}}}],"position":{"start":{"line":25,"column":1,"offset":613},"end":{"line":26,"column":57,"offset":757}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"高德地图开发者 Key ","position":{"start":{"line":27,"column":3,"offset":760},"end":{"line":27,"column":15,"offset":772}}},{"type":"element","tagName":"a","properties":{"href":"https://lbs.amap.com/dev/key/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"申请方法","position":{"start":{"line":27,"column":16,"offset":773},"end":{"line":27,"column":20,"offset":777}}}],"position":{"start":{"line":27,"column":15,"offset":772},"end":{"line":27,"column":52,"offset":809}}}],"position":{"start":{"line":27,"column":1,"offset":758},"end":{"line":27,"column":52,"offset":809}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox Access Tokens","position":{"start":{"line":28,"column":4,"offset":813},"end":{"line":28,"column":24,"offset":833}}}],"position":{"start":{"line":28,"column":3,"offset":812},"end":{"line":28,"column":123,"offset":932}}}],"position":{"start":{"line":28,"column":1,"offset":810},"end":{"line":28,"column":123,"offset":932}}},{"type":"text","value":"\n"}],"position":{"start":{"line":27,"column":1,"offset":758},"end":{"line":28,"column":123,"offset":932}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"通过-submodule-使用"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%80%9A%E8%BF%87-submodule-%E4%BD%BF%E7%94%A8","aria-label":"通过 submodule 使用 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"通过 Submodule 使用","position":{"start":{"line":30,"column":4,"offset":937},"end":{"line":30,"column":19,"offset":952}}}],"position":{"start":{"line":30,"column":1,"offset":934},"end":{"line":30,"column":19,"offset":952}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"首先通过 ","position":{"start":{"line":32,"column":1,"offset":954},"end":{"line":32,"column":6,"offset":959}}},{"type":"raw","value":"npm/yarn","position":{"start":{"line":32,"column":6,"offset":959},"end":{"line":32,"column":16,"offset":969}}}],"position":{"start":{"line":32,"column":1,"offset":954},"end":{"line":32,"column":16,"offset":969}}},{"type":"text","value":"\n"},{"type":"raw","value":"
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
","position":{"start":{"line":33,"column":1,"offset":970},"end":{"line":38,"column":4,"offset":1048}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"然后就可以使用其中包含的场景和各类图层：","position":{"start":{"line":40,"column":1,"offset":1050},"end":{"line":40,"column":21,"offset":1070}}}],"position":{"start":{"line":40,"column":1,"offset":1050},"end":{"line":40,"column":21,"offset":1070}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
","position":{"start":{"line":41,"column":1,"offset":1071},"end":{"line":86,"column":4,"offset":1942}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：","position":{"start":{"line":89,"column":1,"offset":1945},"end":{"line":89,"column":36,"offset":1980}}}],"position":{"start":{"line":89,"column":1,"offset":1945},"end":{"line":89,"column":36,"offset":1980}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"高德地图","position":{"start":{"line":90,"column":4,"offset":1984},"end":{"line":90,"column":8,"offset":1988}}}],"position":{"start":{"line":90,"column":3,"offset":1983},"end":{"line":90,"column":88,"offset":2068}}}],"position":{"start":{"line":90,"column":1,"offset":1981},"end":{"line":90,"column":88,"offset":2068}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Mapbox","position":{"start":{"line":91,"column":4,"offset":2072},"end":{"line":91,"column":10,"offset":2078}}}],"position":{"start":{"line":91,"column":3,"offset":2071},"end":{"line":91,"column":92,"offset":2160}}}],"position":{"start":{"line":91,"column":1,"offset":2069},"end":{"line":91,"column":92,"offset":2160}}},{"type":"text","value":"\n"}],"position":{"start":{"line":90,"column":1,"offset":1981},"end":{"line":91,"column":92,"offset":2160}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"wip-react"},"children":[{"type":"element","tagName":"a","properties":{"href":"#wip-react","aria-label":"wip react permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"[WIP]","position":{"start":{"line":94,"column":5,"offset":2167},"end":{"line":94,"column":8,"offset":2170}}},{"type":"text","value":" React","position":{"start":{"line":94,"column":9,"offset":2171},"end":{"line":94,"column":15,"offset":2177}}}],"position":{"start":{"line":94,"column":1,"offset":2163},"end":{"line":94,"column":15,"offset":2177}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"React 组件待开发，目前可以暂时以 Submodule 方式使用：","position":{"start":{"line":96,"column":1,"offset":2179},"end":{"line":96,"column":36,"offset":2214}}}],"position":{"start":{"line":96,"column":1,"offset":2179},"end":{"line":96,"column":36,"offset":2214}}},{"type":"text","value":"\n"},{"type":"raw","value":"
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
","position":{"start":{"line":97,"column":1,"offset":2215},"end":{"line":158,"column":4,"offset":3495}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"⚠️组件 Unmount 时需要通过 ","position":{"start":{"line":160,"column":1,"offset":3497},"end":{"line":160,"column":20,"offset":3516}}},{"type":"raw","value":"scene.destroy()","position":{"start":{"line":160,"column":20,"offset":3516},"end":{"line":160,"column":37,"offset":3533}}},{"type":"text","value":" 手动销毁场景。","position":{"start":{"line":160,"column":37,"offset":3533},"end":{"line":160,"column":45,"offset":3541}}}],"position":{"start":{"line":160,"column":1,"offset":3497},"end":{"line":160,"column":45,"offset":3541}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":162,"column":1,"offset":3543}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f4282c76fb8254f95de85ee51752acfb.json b/.cache/caches/gatsby-transformer-remark/diskstore-f4282c76fb8254f95de85ee51752acfb.json deleted file mode 100644 index cc9793bd0f..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f4282c76fb8254f95de85ee51752acfb.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157450000,"key":"transformer-remark-markdown-toc-6333af3553efc2c96b5dfd41fa526318-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-{\"heading\":null,\"maxDepth\":6,\"pathToSlugField\":\"fields.slug\"}-","val":""} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-f584285771d847ce1243526613a4dd57.json b/.cache/caches/gatsby-transformer-remark/diskstore-f584285771d847ce1243526613a4dd57.json deleted file mode 100644 index 524b64056a..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-f584285771d847ce1243526613a4dd57.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-89764a64063045f6021242fe828f7bb0-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":41,"offset":40}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":41,"offset":40}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":41,"offset":40}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-fb59dadd543d2df34bf8934dea36729b.json b/.cache/caches/gatsby-transformer-remark/diskstore-fb59dadd543d2df34bf8934dea36729b.json deleted file mode 100644 index 166e0494bf..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-fb59dadd543d2df34bf8934dea36729b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-2260346338778510142b6e5e0ceeb043-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。","position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":26,"offset":25}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-fbe4c540a043039a31117058a387c2e2.json b/.cache/caches/gatsby-transformer-remark/diskstore-fbe4c540a043039a31117058a387c2e2.json deleted file mode 100644 index cfc3e87c56..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-fbe4c540a043039a31117058a387c2e2.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-ast-48a94297bc9dd247077cfc25bb30bedf-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-ff18c51a1a7c8dbcbf21245be7442b9b.json b/.cache/caches/gatsby-transformer-remark/diskstore-ff18c51a1a7c8dbcbf21245be7442b9b.json deleted file mode 100644 index 09623d145c..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-ff18c51a1a7c8dbcbf21245be7442b9b.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-ast-9bb7ce1cef5d17f8dfef5ffe696b4753-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"数据"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%95%B0%E6%8D%AE","aria-label":"数据 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"数据","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":6,"offset":6}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":6,"offset":6}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"目前L7支持的数据格式有GeoJson,CSV,JSon Image","position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42}}}],"position":{"start":{"line":4,"column":1,"offset":8},"end":{"line":4,"column":35,"offset":42}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON 支持点、线、面，等所有的空间数据格式。","position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":28,"offset":71}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":28,"offset":71},"end":{"line":6,"column":34,"offset":77}}},{"type":"text","value":"CSV 支持，点，线段，弧线的支持。","position":{"start":{"line":6,"column":34,"offset":77},"end":{"line":6,"column":52,"offset":95}}},{"type":"raw","value":"
","position":{"start":{"line":6,"column":52,"offset":95},"end":{"line":6,"column":58,"offset":101}}},{"type":"text","value":"JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。","position":{"start":{"line":6,"column":58,"offset":101},"end":{"line":6,"column":91,"offset":134}}}],"position":{"start":{"line":6,"column":1,"offset":44},"end":{"line":6,"column":91,"offset":134}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"geojson"},"children":[{"type":"element","tagName":"a","properties":{"href":"#geojson","aria-label":"geojson permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"GeoJSON","position":{"start":{"line":9,"column":4,"offset":140},"end":{"line":9,"column":11,"offset":147}}}],"position":{"start":{"line":9,"column":1,"offset":137},"end":{"line":9,"column":11,"offset":147}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。","position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276}}}],"position":{"start":{"line":11,"column":3,"offset":151},"end":{"line":11,"column":128,"offset":276}}},{"type":"text","value":"\n"}],"position":{"start":{"line":11,"column":1,"offset":149},"end":{"line":11,"column":128,"offset":276}}},{"type":"text","value":"\n"},{"type":"raw","value":"
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
","position":{"start":{"line":15,"column":1,"offset":280},"end":{"line":52,"column":4,"offset":980}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"地理统计分析工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7","aria-label":"地理统计分析工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"地理统计分析工具","position":{"start":{"line":54,"column":4,"offset":985},"end":{"line":54,"column":12,"offset":993}}}],"position":{"start":{"line":54,"column":1,"offset":982},"end":{"line":54,"column":12,"offset":993}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://turfjs.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"turfjs","position":{"start":{"line":55,"column":2,"offset":995},"end":{"line":55,"column":8,"offset":1001}}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":29,"offset":1022}}},{"type":"text","value":":  地理数据计算，处理，统计，分析的Javascript 库","position":{"start":{"line":55,"column":29,"offset":1022},"end":{"line":55,"column":60,"offset":1053}}}],"position":{"start":{"line":55,"column":1,"offset":994},"end":{"line":55,"column":60,"offset":1053}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"在线工具"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7","aria-label":"在线工具 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"在线工具","position":{"start":{"line":57,"column":4,"offset":1058},"end":{"line":57,"column":8,"offset":1062}}}],"position":{"start":{"line":57,"column":1,"offset":1055},"end":{"line":57,"column":8,"offset":1062}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://geojson.io/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"http://geojson.io/","position":{"start":{"line":59,"column":2,"offset":1065},"end":{"line":59,"column":20,"offset":1083}}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":41,"offset":1104}}},{"type":"text","value":"    可以在线查看，绘制，修改GeoJSON数据","position":{"start":{"line":59,"column":41,"offset":1104},"end":{"line":59,"column":66,"offset":1129}}}],"position":{"start":{"line":59,"column":1,"offset":1064},"end":{"line":59,"column":66,"offset":1129}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://mapshaper.org/","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"https://mapshaper.org/","position":{"start":{"line":61,"column":2,"offset":1132},"end":{"line":61,"column":24,"offset":1154}}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":49,"offset":1179}}},{"type":"text","value":"  可以查看较大的geojson，还能够简化GeoJSON数据","position":{"start":{"line":61,"column":49,"offset":1179},"end":{"line":61,"column":80,"offset":1210}}}],"position":{"start":{"line":61,"column":1,"offset":1131},"end":{"line":61,"column":80,"offset":1210}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":62,"column":1,"offset":1211}}}} \ No newline at end of file diff --git a/.cache/caches/gatsby-transformer-remark/diskstore-ff76fd841fc9f6cc981d19febe8a1768.json b/.cache/caches/gatsby-transformer-remark/diskstore-ff76fd841fc9f6cc981d19febe8a1768.json deleted file mode 100644 index 5779a2e307..0000000000 --- a/.cache/caches/gatsby-transformer-remark/diskstore-ff76fd841fc9f6cc981d19febe8a1768.json +++ /dev/null @@ -1 +0,0 @@ -{"expireTime":9007200829157445000,"key":"transformer-remark-markdown-html-2260346338778510142b6e5e0ceeb043-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

"} \ No newline at end of file diff --git a/.cache/commonjs/api-runner-browser-plugins.js b/.cache/commonjs/api-runner-browser-plugins.js deleted file mode 100644 index 856ca4608f..0000000000 --- a/.cache/commonjs/api-runner-browser-plugins.js +++ /dev/null @@ -1,15 +0,0 @@ -"use strict"; - -// During bootstrap, we write requires at top of this file which looks -// basically like: -// module.exports = [ -// { -// plugin: require("/path/to/plugin1/gatsby-browser.js"), -// options: { ... }, -// }, -// { -// plugin: require("/path/to/plugin2/gatsby-browser.js"), -// options: { ... }, -// }, -// ] -module.exports = []; \ No newline at end of file diff --git a/.cache/commonjs/api-runner-browser.js b/.cache/commonjs/api-runner-browser.js deleted file mode 100644 index fb76cb89a6..0000000000 --- a/.cache/commonjs/api-runner-browser.js +++ /dev/null @@ -1,61 +0,0 @@ -"use strict"; - -const plugins = require(`./api-runner-browser-plugins`); - -const { - getResourcesForPathname, - getResourcesForPathnameSync, - getResourceURLsForPathname, - loadPage, - loadPageSync -} = require(`./loader`).publicLoader; - -exports.apiRunner = (api, args = {}, defaultReturn, argTransform) => { - // Hooks for gatsby-cypress's API handler - if (process.env.CYPRESS_SUPPORT) { - if (window.___apiHandler) { - window.___apiHandler(api); - } else if (window.___resolvedAPIs) { - window.___resolvedAPIs.push(api); - } else { - window.___resolvedAPIs = [api]; - } - } - - let results = plugins.map(plugin => { - if (!plugin.plugin[api]) { - return undefined; - } // Deprecated April 2019. Use `loadPageSync` instead - - - args.getResourcesForPathnameSync = getResourcesForPathnameSync; // Deprecated April 2019. Use `loadPage` instead - - args.getResourcesForPathname = getResourcesForPathname; - args.getResourceURLsForPathname = getResourceURLsForPathname; - args.loadPage = loadPage; - args.loadPageSync = loadPageSync; - const result = plugin.plugin[api](args, plugin.options); - - if (result && argTransform) { - args = argTransform({ - args, - result, - plugin - }); - } - - return result; - }); // Filter out undefined results. - - results = results.filter(result => typeof result !== `undefined`); - - if (results.length > 0) { - return results; - } else if (defaultReturn) { - return [defaultReturn]; - } else { - return []; - } -}; - -exports.apiRunnerAsync = (api, args, defaultReturn) => plugins.reduce((previous, next) => next.plugin[api] ? previous.then(() => next.plugin[api](args, next.options)) : previous, Promise.resolve()); \ No newline at end of file diff --git a/.cache/commonjs/api-runner-ssr.js b/.cache/commonjs/api-runner-ssr.js deleted file mode 100644 index ba6125debe..0000000000 --- a/.cache/commonjs/api-runner-ssr.js +++ /dev/null @@ -1,48 +0,0 @@ -"use strict"; - -// During bootstrap, we write requires at top of this file which looks like: -// var plugins = [ -// { -// plugin: require("/path/to/plugin1/gatsby-ssr.js"), -// options: { ... }, -// }, -// { -// plugin: require("/path/to/plugin2/gatsby-ssr.js"), -// options: { ... }, -// }, -// ] -const apis = require(`./api-ssr-docs`); // Run the specified API in any plugins that have implemented it - - -module.exports = (api, args, defaultReturn, argTransform) => { - if (!apis[api]) { - console.log(`This API doesn't exist`, api); - } // Run each plugin in series. - // eslint-disable-next-line no-undef - - - let results = plugins.map(plugin => { - if (!plugin.plugin[api]) { - return undefined; - } - - const result = plugin.plugin[api](args, plugin.options); - - if (result && argTransform) { - args = argTransform({ - args, - result - }); - } - - return result; - }); // Filter out undefined results. - - results = results.filter(result => typeof result !== `undefined`); - - if (results.length > 0) { - return results; - } else { - return [defaultReturn]; - } -}; \ No newline at end of file diff --git a/.cache/commonjs/api-ssr-docs.js b/.cache/commonjs/api-ssr-docs.js deleted file mode 100644 index d1c15c4174..0000000000 --- a/.cache/commonjs/api-ssr-docs.js +++ /dev/null @@ -1,200 +0,0 @@ -"use strict"; - -/** - * Object containing options defined in `gatsby-config.js` - * @typedef {object} pluginOptions - */ - -/** - * Replace the default server renderer. This is useful for integration with - * Redux, css-in-js libraries, etc. that need custom setups for server - * rendering. - * @param {object} $0 - * @param {string} $0.pathname The pathname of the page currently being rendered. - * @param {function} $0.replaceBodyHTMLString Call this with the HTML string - * you render. **WARNING** if multiple plugins implement this API it's the - * last plugin that "wins". TODO implement an automated warning against this. - * @param {function} $0.setHeadComponents Takes an array of components as its - * first argument which are added to the `headComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setHtmlAttributes Takes an object of props which will - * spread into the `` component. - * @param {function} $0.setBodyAttributes Takes an object of props which will - * spread into the `` component. - * @param {function} $0.setPreBodyComponents Takes an array of components as its - * first argument which are added to the `preBodyComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setPostBodyComponents Takes an array of components as its - * first argument which are added to the `postBodyComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setBodyProps Takes an object of data which - * is merged with other body props and passed to `html.js` as `bodyProps`. - * @param {pluginOptions} pluginOptions - * @example - * // From gatsby-plugin-glamor - * const { renderToString } = require("react-dom/server") - * const inline = require("glamor-inline") - * - * exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { - * const bodyHTML = renderToString(bodyComponent) - * const inlinedHTML = inline(bodyHTML) - * - * replaceBodyHTMLString(inlinedHTML) - * } - */ -exports.replaceRenderer = true; -/** - * Called after every page Gatsby server renders while building HTML so you can - * set head and body components to be rendered in your `html.js`. - * - * Gatsby does a two-pass render for HTML. It loops through your pages first - * rendering only the body and then takes the result body HTML string and - * passes it as the `body` prop to your `html.js` to complete the render. - * - * It's often handy to be able to send custom components to your `html.js`. - * For example, it's a very common pattern for React.js libraries that - * support server rendering to pull out data generated during the render to - * add to your HTML. - * - * Using this API over [`replaceRenderer`](#replaceRenderer) is preferable as - * multiple plugins can implement this API where only one plugin can take - * over server rendering. However, if your plugin requires taking over server - * rendering then that's the one to - * use - * @param {object} $0 - * @param {string} $0.pathname The pathname of the page currently being rendered. - * @param {function} $0.setHeadComponents Takes an array of components as its - * first argument which are added to the `headComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setHtmlAttributes Takes an object of props which will - * spread into the `` component. - * @param {function} $0.setBodyAttributes Takes an object of props which will - * spread into the `` component. - * @param {function} $0.setPreBodyComponents Takes an array of components as its - * first argument which are added to the `preBodyComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setPostBodyComponents Takes an array of components as its - * first argument which are added to the `postBodyComponents` array which is passed - * to the `html.js` component. - * @param {function} $0.setBodyProps Takes an object of data which - * is merged with other body props and passed to `html.js` as `bodyProps`. - * @param {pluginOptions} pluginOptions - * @example - * const { Helmet } = require("react-helmet") - * - * exports.onRenderBody = ( - * { setHeadComponents, setHtmlAttributes, setBodyAttributes }, - * pluginOptions - * ) => { - * const helmet = Helmet.renderStatic() - * setHtmlAttributes(helmet.htmlAttributes.toComponent()) - * setBodyAttributes(helmet.bodyAttributes.toComponent()) - * setHeadComponents([ - * helmet.title.toComponent(), - * helmet.link.toComponent(), - * helmet.meta.toComponent(), - * helmet.noscript.toComponent(), - * helmet.script.toComponent(), - * helmet.style.toComponent(), - * ]) - * } - */ - -exports.onRenderBody = true; -/** - * Called after every page Gatsby server renders while building HTML so you can - * replace head components to be rendered in your `html.js`. This is useful if - * you need to reorder scripts or styles added by other plugins. - * @param {object} $0 - * @param {string} $0.pathname The pathname of the page currently being rendered. - * @param {Array} $0.getHeadComponents Returns the current `headComponents` array. - * @param {function} $0.replaceHeadComponents Takes an array of components as its - * first argument which replace the `headComponents` array which is passed - * to the `html.js` component. **WARNING** if multiple plugins implement this - * API it's the last plugin that "wins". - * @param {Array} $0.getPreBodyComponents Returns the current `preBodyComponents` array. - * @param {function} $0.replacePreBodyComponents Takes an array of components as its - * first argument which replace the `preBodyComponents` array which is passed - * to the `html.js` component. **WARNING** if multiple plugins implement this - * API it's the last plugin that "wins". - * @param {Array} $0.getPostBodyComponents Returns the current `postBodyComponents` array. - * @param {function} $0.replacePostBodyComponents Takes an array of components as its - * first argument which replace the `postBodyComponents` array which is passed - * to the `html.js` component. **WARNING** if multiple plugins implement this - * API it's the last plugin that "wins". - * @param {pluginOptions} pluginOptions - * @example - * // Move Typography.js styles to the top of the head section so they're loaded first. - * exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => { - * const headComponents = getHeadComponents() - * headComponents.sort((x, y) => { - * if (x.key === 'TypographyStyle') { - * return -1 - * } else if (y.key === 'TypographyStyle') { - * return 1 - * } - * return 0 - * }) - * replaceHeadComponents(headComponents) - * } - */ - -exports.onPreRenderHTML = true; -/** - * Allow a plugin to wrap the page element. - * - * This is useful for setting wrapper components around pages that won't get - * unmounted on page changes. For setting Provider components, use [wrapRootElement](#wrapRootElement). - * - * _Note:_ - * There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapPageElement). - * It is recommended to use both APIs together. - * For example usage, check out [Using i18n](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n). - * @param {object} $0 - * @param {ReactNode} $0.element The "Page" React Element built by Gatsby. - * @param {object} $0.props Props object used by page. - * @param {pluginOptions} pluginOptions - * @returns {ReactNode} Wrapped element - * @example - * const React = require("react") - * const Layout = require("./src/components/layout").default - * - * exports.wrapPageElement = ({ element, props }) => { - * // props provide same data to Layout as Page element will get - * // including location, data, etc - you don't need to pass it - * return {element} - * } - */ - -exports.wrapPageElement = true; -/** - * Allow a plugin to wrap the root element. - * - * This is useful to set up any Provider components that will wrap your application. - * For setting persistent UI elements around pages use [wrapPageElement](#wrapPageElement). - * - * _Note:_ - * There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapRootElement). - * It is recommended to use both APIs together. - * For example usage, check out [Using redux](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux). - * @param {object} $0 - * @param {ReactNode} $0.element The "Root" React Element built by Gatsby. - * @param {pluginOptions} pluginOptions - * @returns {ReactNode} Wrapped element - * @example - * const React = require("react") - * const { Provider } = require("react-redux") - * - * const createStore = require("./src/state/createStore") - * const store = createStore() - * - * exports.wrapRootElement = ({ element }) => { - * return ( - * - * {element} - * - * ) - * } - */ - -exports.wrapRootElement = true; \ No newline at end of file diff --git a/.cache/commonjs/app.js b/.cache/commonjs/app.js deleted file mode 100644 index 59707c697b..0000000000 --- a/.cache/commonjs/app.js +++ /dev/null @@ -1,69 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -var _react = _interopRequireDefault(require("react")); - -var _reactDom = _interopRequireDefault(require("react-dom")); - -var _domready = _interopRequireDefault(require("@mikaelkristiansson/domready")); - -var _socketIo = _interopRequireDefault(require("./socketIo")); - -var _emitter = _interopRequireDefault(require("./emitter")); - -var _apiRunnerBrowser = require("./api-runner-browser"); - -var _loader = require("./loader"); - -var _devLoader = _interopRequireDefault(require("./dev-loader")); - -var _syncRequires = _interopRequireDefault(require("./sync-requires")); - -var _matchPaths = _interopRequireDefault(require("./match-paths.json")); - -// Generated during bootstrap -window.___emitter = _emitter.default; -const loader = new _devLoader.default(_syncRequires.default, _matchPaths.default); -(0, _loader.setLoader)(loader); -loader.setApiRunner(_apiRunnerBrowser.apiRunner); -window.___loader = _loader.publicLoader; // Let the site/plugins run code very early. - -(0, _apiRunnerBrowser.apiRunnerAsync)(`onClientEntry`).then(() => { - // Hook up the client to socket.io on server - const socket = (0, _socketIo.default)(); - - if (socket) { - socket.on(`reload`, () => { - window.location.reload(); - }); - } - /** - * Service Workers are persistent by nature. They stick around, - * serving a cached version of the site if they aren't removed. - * This is especially frustrating when you need to test the - * production build on your local machine. - * - * Let's warn if we find service workers in development. - */ - - - if (`serviceWorker` in navigator) { - navigator.serviceWorker.getRegistrations().then(registrations => { - if (registrations.length > 0) console.warn(`Warning: found one or more service workers present.`, `If your site isn't behaving as expected, you might want to remove these.`, registrations); - }); - } - - const rootElement = document.getElementById(`___gatsby`); - const renderer = (0, _apiRunnerBrowser.apiRunner)(`replaceHydrateFunction`, undefined, _reactDom.default.render)[0]; - Promise.all([loader.loadPage(`/dev-404-page/`), loader.loadPage(`/404.html`), loader.loadPage(window.location.pathname)]).then(() => { - const preferDefault = m => m && m.default || m; - - let Root = preferDefault(require(`./root`)); - (0, _domready.default)(() => { - renderer(_react.default.createElement(Root, null), rootElement, () => { - (0, _apiRunnerBrowser.apiRunner)(`onInitialClientRender`); - }); - }); - }); -}); \ No newline at end of file diff --git a/.cache/commonjs/create-react-context.js b/.cache/commonjs/create-react-context.js deleted file mode 100644 index d8f31c4c3a..0000000000 --- a/.cache/commonjs/create-react-context.js +++ /dev/null @@ -1,11 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = void 0; - -var _react = _interopRequireDefault(require("react")); - -var _default = _react.default.createContext; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/default-html.js b/.cache/commonjs/default-html.js deleted file mode 100644 index bb6e0bf77e..0000000000 --- a/.cache/commonjs/default-html.js +++ /dev/null @@ -1,40 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = HTML; - -var _react = _interopRequireDefault(require("react")); - -var _propTypes = _interopRequireDefault(require("prop-types")); - -function HTML(props) { - return _react.default.createElement("html", props.htmlAttributes, _react.default.createElement("head", null, _react.default.createElement("meta", { - charSet: "utf-8" - }), _react.default.createElement("meta", { - httpEquiv: "x-ua-compatible", - content: "ie=edge" - }), _react.default.createElement("meta", { - name: "viewport", - content: "width=device-width, initial-scale=1, shrink-to-fit=no" - }), props.headComponents), _react.default.createElement("body", props.bodyAttributes, props.preBodyComponents, _react.default.createElement("noscript", { - key: "noscript", - id: "gatsby-noscript" - }, "This app works best with JavaScript enabled."), _react.default.createElement("div", { - key: `body`, - id: "___gatsby", - dangerouslySetInnerHTML: { - __html: props.body - } - }), props.postBodyComponents)); -} - -HTML.propTypes = { - htmlAttributes: _propTypes.default.object, - headComponents: _propTypes.default.array, - bodyAttributes: _propTypes.default.object, - preBodyComponents: _propTypes.default.array, - body: _propTypes.default.string, - postBodyComponents: _propTypes.default.array -}; \ No newline at end of file diff --git a/.cache/commonjs/dev-loader.js b/.cache/commonjs/dev-loader.js deleted file mode 100644 index e122372a0e..0000000000 --- a/.cache/commonjs/dev-loader.js +++ /dev/null @@ -1,41 +0,0 @@ -"use strict"; - -exports.__esModule = true; -exports.default = void 0; - -var _loader = require("./loader"); - -var _findPath = require("./find-path"); - -class DevLoader extends _loader.BaseLoader { - constructor(syncRequires, matchPaths) { - const loadComponent = chunkName => Promise.resolve(syncRequires.components[chunkName]); - - super(loadComponent, matchPaths); - } - - loadPage(pagePath) { - const realPath = (0, _findPath.findPath)(pagePath); - return super.loadPage(realPath).then(result => require(`./socketIo`).getPageData(realPath).then(() => result)); - } - - loadPageDataJson(rawPath) { - return super.loadPageDataJson(rawPath).then(data => { - // when we can't find a proper 404.html we fallback to dev-404-page - // we need to make sure to mark it as not found. - if (data.status === `failure`) { - return this.loadPageDataJson(`/dev-404-page/`).then(result => Object.assign({}, data, result)); - } - - return data; - }); - } - - doPrefetch(pagePath) { - return Promise.resolve(require(`./socketIo`).getPageData(pagePath)); - } - -} - -var _default = DevLoader; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/develop-static-entry.js b/.cache/commonjs/develop-static-entry.js deleted file mode 100644 index 948fea5484..0000000000 --- a/.cache/commonjs/develop-static-entry.js +++ /dev/null @@ -1,135 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = void 0; - -var _react = _interopRequireDefault(require("react")); - -var _server = require("react-dom/server"); - -var _lodash = require("lodash"); - -var _apiRunnerSsr = _interopRequireDefault(require("./api-runner-ssr")); - -// import testRequireError from "./test-require-error" -// For some extremely mysterious reason, webpack adds the above module *after* -// this module so that when this code runs, testRequireError is undefined. -// So in the meantime, we'll just inline it. -const testRequireError = (moduleName, err) => { - const regex = new RegExp(`Error: Cannot find module\\s.${moduleName}`); - const firstLine = err.toString().split(`\n`)[0]; - return regex.test(firstLine); -}; - -let Html; - -try { - Html = require(`../src/html`); -} catch (err) { - if (testRequireError(`../src/html`, err)) { - Html = require(`./default-html`); - } else { - console.log(`There was an error requiring "src/html.js"\n\n`, err, `\n\n`); - process.exit(); - } -} - -Html = Html && Html.__esModule ? Html.default : Html; - -var _default = (pagePath, callback) => { - let headComponents = [_react.default.createElement("meta", { - key: "environment", - name: "note", - content: "environment=development" - })]; - let htmlAttributes = {}; - let bodyAttributes = {}; - let preBodyComponents = []; - let postBodyComponents = []; - let bodyProps = {}; - let htmlStr; - - const setHeadComponents = components => { - headComponents = headComponents.concat(components); - }; - - const setHtmlAttributes = attributes => { - htmlAttributes = (0, _lodash.merge)(htmlAttributes, attributes); - }; - - const setBodyAttributes = attributes => { - bodyAttributes = (0, _lodash.merge)(bodyAttributes, attributes); - }; - - const setPreBodyComponents = components => { - preBodyComponents = preBodyComponents.concat(components); - }; - - const setPostBodyComponents = components => { - postBodyComponents = postBodyComponents.concat(components); - }; - - const setBodyProps = props => { - bodyProps = (0, _lodash.merge)({}, bodyProps, props); - }; - - const getHeadComponents = () => headComponents; - - const replaceHeadComponents = components => { - headComponents = components; - }; - - const getPreBodyComponents = () => preBodyComponents; - - const replacePreBodyComponents = components => { - preBodyComponents = components; - }; - - const getPostBodyComponents = () => postBodyComponents; - - const replacePostBodyComponents = components => { - postBodyComponents = components; - }; - - (0, _apiRunnerSsr.default)(`onRenderBody`, { - setHeadComponents, - setHtmlAttributes, - setBodyAttributes, - setPreBodyComponents, - setPostBodyComponents, - setBodyProps, - pathname: pagePath - }); - (0, _apiRunnerSsr.default)(`onPreRenderHTML`, { - getHeadComponents, - replaceHeadComponents, - getPreBodyComponents, - replacePreBodyComponents, - getPostBodyComponents, - replacePostBodyComponents, - pathname: pagePath - }); - - const htmlElement = _react.default.createElement(Html, Object.assign({}, bodyProps, { - body: ``, - headComponents: headComponents.concat([_react.default.createElement("script", { - key: `io`, - src: "/socket.io/socket.io.js" - })]), - htmlAttributes, - bodyAttributes, - preBodyComponents, - postBodyComponents: postBodyComponents.concat([_react.default.createElement("script", { - key: `commons`, - src: "/commons.js" - })]) - })); - - htmlStr = (0, _server.renderToStaticMarkup)(htmlElement); - htmlStr = `${htmlStr}`; - callback(null, htmlStr); -}; - -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/emitter.js b/.cache/commonjs/emitter.js deleted file mode 100644 index eaac98b5f3..0000000000 --- a/.cache/commonjs/emitter.js +++ /dev/null @@ -1,12 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = void 0; - -var _mitt = _interopRequireDefault(require("mitt")); - -const emitter = (0, _mitt.default)(); -var _default = emitter; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/ensure-resources.js b/.cache/commonjs/ensure-resources.js deleted file mode 100644 index b6dcecc354..0000000000 --- a/.cache/commonjs/ensure-resources.js +++ /dev/null @@ -1,94 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = void 0; - -var _react = _interopRequireDefault(require("react")); - -var _loader = _interopRequireDefault(require("./loader")); - -var _shallowCompare = _interopRequireDefault(require("shallow-compare")); - -class EnsureResources extends _react.default.Component { - constructor(props) { - super(); - const { - location, - pageResources - } = props; - this.state = { - location: Object.assign({}, location), - pageResources: pageResources || _loader.default.loadPageSync(location.pathname) - }; - } - - static getDerivedStateFromProps({ - location - }, prevState) { - if (prevState.location.href !== location.href) { - const pageResources = _loader.default.loadPageSync(location.pathname); - - return { - pageResources, - location: Object.assign({}, location) - }; - } - - return { - location: Object.assign({}, location) - }; - } - - loadResources(rawPath) { - _loader.default.loadPage(rawPath).then(pageResources => { - if (pageResources && pageResources.status !== `error`) { - this.setState({ - location: Object.assign({}, window.location), - pageResources - }); - } else { - window.history.replaceState({}, ``, location.href); - window.location = rawPath; - } - }); - } - - shouldComponentUpdate(nextProps, nextState) { - // Always return false if we're missing resources. - if (!nextState.pageResources) { - this.loadResources(nextProps.location.pathname); - return false; - } // Check if the component or json have changed. - - - if (this.state.pageResources !== nextState.pageResources) { - return true; - } - - if (this.state.pageResources.component !== nextState.pageResources.component) { - return true; - } - - if (this.state.pageResources.json !== nextState.pageResources.json) { - return true; - } // Check if location has changed on a page using internal routing - // via matchPath configuration. - - - if (this.state.location.key !== nextState.location.key && nextState.pageResources.page && (nextState.pageResources.page.matchPath || nextState.pageResources.page.path)) { - return true; - } - - return (0, _shallowCompare.default)(this, nextProps, nextState); - } - - render() { - return this.props.children(this.state); - } - -} - -var _default = EnsureResources; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/error-overlay-handler.js b/.cache/commonjs/error-overlay-handler.js deleted file mode 100644 index 41785a572d..0000000000 --- a/.cache/commonjs/error-overlay-handler.js +++ /dev/null @@ -1,67 +0,0 @@ -"use strict"; - -var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); - -exports.__esModule = true; -exports.errorMap = exports.reportError = exports.clearError = void 0; - -var ErrorOverlay = _interopRequireWildcard(require("react-error-overlay")); - -// Report runtime errors -ErrorOverlay.startReportingRuntimeErrors({ - onError: () => {}, - filename: `/commons.js` -}); -ErrorOverlay.setEditorHandler(errorLocation => window.fetch(`/__open-stack-frame-in-editor?fileName=` + window.encodeURIComponent(errorLocation.fileName) + `&lineNumber=` + window.encodeURIComponent(errorLocation.lineNumber || 1))); -const errorMap = {}; -exports.errorMap = errorMap; - -function flat(arr) { - return Array.prototype.flat ? arr.flat() : [].concat(...arr); -} - -const handleErrorOverlay = () => { - const errors = Object.values(errorMap); - let errorStringsToDisplay = []; - - if (errors.length > 0) { - errorStringsToDisplay = flat(errors).map(error => { - if (typeof error === `string`) { - return error; - } else if (typeof error === `object`) { - const errorStrBuilder = [error.text]; - - if (error.filePath) { - errorStrBuilder.push(`File: ${error.filePath}`); - } - - return errorStrBuilder.join(`\n\n`); - } - - return null; - }).filter(Boolean); - } - - if (errorStringsToDisplay.length > 0) { - ErrorOverlay.reportBuildError(errorStringsToDisplay.join(`\n\n`)); - } else { - ErrorOverlay.dismissBuildError(); - } -}; - -const clearError = errorID => { - delete errorMap[errorID]; - handleErrorOverlay(); -}; - -exports.clearError = clearError; - -const reportError = (errorID, error) => { - if (error) { - errorMap[errorID] = error; - } - - handleErrorOverlay(); -}; - -exports.reportError = reportError; \ No newline at end of file diff --git a/.cache/commonjs/find-path.js b/.cache/commonjs/find-path.js deleted file mode 100644 index 6b4d0c9dff..0000000000 --- a/.cache/commonjs/find-path.js +++ /dev/null @@ -1,111 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.cleanPath = exports.findPath = exports.findMatchPath = exports.setMatchPaths = void 0; - -var _utils = require("@reach/router/lib/utils"); - -var _stripPrefix = _interopRequireDefault(require("./strip-prefix")); - -var _normalizePagePath = _interopRequireDefault(require("./normalize-page-path")); - -const pathCache = new Map(); -let matchPaths = []; - -const trimPathname = rawPathname => { - const pathname = decodeURIComponent(rawPathname); // Remove the pathPrefix from the pathname. - - const trimmedPathname = (0, _stripPrefix.default)(pathname, __BASE_PATH__) // Remove any hashfragment - .split(`#`)[0] // Remove search query - .split(`?`)[0]; - return trimmedPathname; -}; -/** - * Set list of matchPaths - * - * @param {Array<{path: string, matchPath: string}>} value collection of matchPaths - */ - - -const setMatchPaths = value => { - matchPaths = value; -}; -/** - * Return a matchpath url - * if `match-paths.json` contains `{ "/foo*": "/page1", ...}`, then - * `/foo?bar=far` => `/page1` - * - * @param {string} rawPathname A raw pathname - * @return {string|null} - */ - - -exports.setMatchPaths = setMatchPaths; - -const findMatchPath = rawPathname => { - const trimmedPathname = cleanPath(rawPathname); - - for (const { - matchPath, - path - } of matchPaths) { - if ((0, _utils.match)(matchPath, trimmedPathname)) { - return (0, _normalizePagePath.default)(path); - } - } - - return null; -}; // Given a raw URL path, returns the cleaned version of it (trim off -// `#` and query params), or if it matches an entry in -// `match-paths.json`, its matched path is returned -// -// E.g. `/foo?bar=far` => `/foo` -// -// Or if `match-paths.json` contains `{ "/foo*": "/page1", ...}`, then -// `/foo?bar=far` => `/page1` - - -exports.findMatchPath = findMatchPath; - -const findPath = rawPathname => { - const trimmedPathname = trimPathname(rawPathname); - - if (pathCache.has(trimmedPathname)) { - return pathCache.get(trimmedPathname); - } - - let foundPath = findMatchPath(trimmedPathname); - - if (!foundPath) { - foundPath = cleanPath(rawPathname); - } - - pathCache.set(trimmedPathname, foundPath); - return foundPath; -}; -/** - * Clean a url and converts /index.html => / - * E.g. `/foo?bar=far` => `/foo` - * - * @param {string} rawPathname A raw pathname - * @return {string} - */ - - -exports.findPath = findPath; - -const cleanPath = rawPathname => { - const trimmedPathname = trimPathname(rawPathname); - let foundPath = trimmedPathname; - - if (foundPath === `/index.html`) { - foundPath = `/`; - } - - foundPath = (0, _normalizePagePath.default)(foundPath); - return foundPath; -}; - -exports.cleanPath = cleanPath; \ No newline at end of file diff --git a/.cache/commonjs/gatsby-browser-entry.js b/.cache/commonjs/gatsby-browser-entry.js deleted file mode 100644 index d2dc9823f4..0000000000 --- a/.cache/commonjs/gatsby-browser-entry.js +++ /dev/null @@ -1,90 +0,0 @@ -"use strict"; - -var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.graphql = graphql; -exports.prefetchPathname = exports.useStaticQuery = exports.StaticQuery = exports.StaticQueryContext = void 0; - -var _react = _interopRequireDefault(require("react")); - -var _propTypes = _interopRequireDefault(require("prop-types")); - -var _gatsbyLink = _interopRequireWildcard(require("gatsby-link")); - -exports.Link = _gatsbyLink.default; -exports.withPrefix = _gatsbyLink.withPrefix; -exports.withAssetPrefix = _gatsbyLink.withAssetPrefix; -exports.navigate = _gatsbyLink.navigate; -exports.push = _gatsbyLink.push; -exports.replace = _gatsbyLink.replace; -exports.navigateTo = _gatsbyLink.navigateTo; -exports.parsePath = _gatsbyLink.parsePath; - -var _publicPageRenderer = _interopRequireDefault(require("./public-page-renderer")); - -exports.PageRenderer = _publicPageRenderer.default; - -var _loader = _interopRequireDefault(require("./loader")); - -const prefetchPathname = _loader.default.enqueue; -exports.prefetchPathname = prefetchPathname; - -const StaticQueryContext = _react.default.createContext({}); - -exports.StaticQueryContext = StaticQueryContext; - -function StaticQueryDataRenderer({ - staticQueryData, - data, - query, - render -}) { - const finalData = data ? data.data : staticQueryData[query] && staticQueryData[query].data; - return _react.default.createElement(_react.default.Fragment, null, finalData && render(finalData), !finalData && _react.default.createElement("div", null, "Loading (StaticQuery)")); -} - -const StaticQuery = props => { - const { - data, - query, - render, - children - } = props; - return _react.default.createElement(StaticQueryContext.Consumer, null, staticQueryData => _react.default.createElement(StaticQueryDataRenderer, { - data: data, - query: query, - render: render || children, - staticQueryData: staticQueryData - })); -}; - -exports.StaticQuery = StaticQuery; - -const useStaticQuery = query => { - if (typeof _react.default.useContext !== `function` && process.env.NODE_ENV === `development`) { - throw new Error(`You're likely using a version of React that doesn't support Hooks\n` + `Please update React and ReactDOM to 16.8.0 or later to use the useStaticQuery hook.`); - } - - const context = _react.default.useContext(StaticQueryContext); - - if (context[query] && context[query].data) { - return context[query].data; - } else { - throw new Error(`The result of this StaticQuery could not be fetched.\n\n` + `This is likely a bug in Gatsby and if refreshing the page does not fix it, ` + `please open an issue in https://github.com/gatsbyjs/gatsby/issues`); - } -}; - -exports.useStaticQuery = useStaticQuery; -StaticQuery.propTypes = { - data: _propTypes.default.object, - query: _propTypes.default.string.isRequired, - render: _propTypes.default.func, - children: _propTypes.default.func -}; - -function graphql() { - throw new Error(`It appears like Gatsby is misconfigured. Gatsby related \`graphql\` calls ` + `are supposed to only be evaluated at compile time, and then compiled away. ` + `Unfortunately, something went wrong and the query was left in the compiled code.\n\n` + `Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.`); -} \ No newline at end of file diff --git a/.cache/commonjs/json-store.js b/.cache/commonjs/json-store.js deleted file mode 100644 index 734df1c76f..0000000000 --- a/.cache/commonjs/json-store.js +++ /dev/null @@ -1,93 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = void 0; - -var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); - -var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); - -var _react = _interopRequireDefault(require("react")); - -var _pageRenderer = _interopRequireDefault(require("./page-renderer")); - -var _normalizePagePath = _interopRequireDefault(require("./normalize-page-path")); - -var _gatsby = require("gatsby"); - -var _socketIo = require("./socketIo"); - -if (process.env.NODE_ENV === `production`) { - throw new Error(`It appears like Gatsby is misconfigured. JSONStore is Gatsby internal ` + `development-only component and should never be used in production.\n\n` + `Unless your site has a complex or custom webpack/Gatsby ` + `configuration this is likely a bug in Gatsby. ` + `Please report this at https://github.com/gatsbyjs/gatsby/issues ` + `with steps to reproduce this error.`); -} - -const getPathFromProps = props => props.pageResources && props.pageResources.page ? (0, _normalizePagePath.default)(props.pageResources.page.path) : undefined; - -class JSONStore extends _react.default.Component { - constructor(props) { - super(props); - (0, _defineProperty2.default)(this, "handleMittEvent", (type, event) => { - this.setState({ - staticQueryData: (0, _socketIo.getStaticQueryData)(), - pageQueryData: (0, _socketIo.getPageQueryData)() - }); - }); - this.state = { - staticQueryData: (0, _socketIo.getStaticQueryData)(), - pageQueryData: (0, _socketIo.getPageQueryData)(), - path: null - }; - } - - componentDidMount() { - (0, _socketIo.registerPath)(getPathFromProps(this.props)); - - ___emitter.on(`*`, this.handleMittEvent); - } - - componentWillUnmount() { - (0, _socketIo.unregisterPath)(this.state.path); - - ___emitter.off(`*`, this.handleMittEvent); - } - - static getDerivedStateFromProps(props, state) { - const newPath = getPathFromProps(props); - - if (newPath !== state.path) { - (0, _socketIo.unregisterPath)(state.path); - (0, _socketIo.registerPath)(newPath); - return { - path: newPath - }; - } - - return null; - } - - shouldComponentUpdate(nextProps, nextState) { - // We want to update this component when: - // - location changed - // - page data for path changed - // - static query results changed - return this.props.location !== nextProps.location || this.state.path !== nextState.path || this.state.pageQueryData[(0, _normalizePagePath.default)(nextState.path)] !== nextState.pageQueryData[(0, _normalizePagePath.default)(nextState.path)] || this.state.staticQueryData !== nextState.staticQueryData; - } - - render() { - const data = this.state.pageQueryData[getPathFromProps(this.props)]; // eslint-disable-next-line - - if (!data) { - return _react.default.createElement("div", null); - } - - return _react.default.createElement(_gatsby.StaticQueryContext.Provider, { - value: this.state.staticQueryData - }, _react.default.createElement(_pageRenderer.default, (0, _extends2.default)({}, this.props, data))); - } - -} - -var _default = JSONStore; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/loader.js b/.cache/commonjs/loader.js deleted file mode 100644 index 6d2a7934c3..0000000000 --- a/.cache/commonjs/loader.js +++ /dev/null @@ -1,437 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = exports.publicLoader = exports.setLoader = exports.ProdLoader = exports.BaseLoader = void 0; - -var _prefetch = _interopRequireDefault(require("./prefetch")); - -var _emitter = _interopRequireDefault(require("./emitter")); - -var _findPath = require("./find-path"); - -const preferDefault = m => m && m.default || m; - -const stripSurroundingSlashes = s => { - s = s[0] === `/` ? s.slice(1) : s; - s = s.endsWith(`/`) ? s.slice(0, -1) : s; - return s; -}; - -const createPageDataUrl = path => { - const fixedPath = path === `/` ? `index` : stripSurroundingSlashes(path); - return `${__PATH_PREFIX__}/page-data/${fixedPath}/page-data.json`; -}; - -const doFetch = (url, method = `GET`) => new Promise((resolve, reject) => { - const req = new XMLHttpRequest(); - req.open(method, url, true); - - req.onreadystatechange = () => { - if (req.readyState == 4) { - resolve(req); - } - }; - - req.send(null); -}); - -const loadPageDataJson = loadObj => { - const { - pagePath, - retries = 0 - } = loadObj; - const url = createPageDataUrl(pagePath); - return doFetch(url).then(req => { - const { - status, - responseText - } = req; // Handle 200 - - if (status === 200) { - try { - const jsonPayload = JSON.parse(responseText); - - if (jsonPayload.path === undefined) { - throw new Error(`not a valid pageData response`); - } - - return Object.assign(loadObj, { - status: `success`, - payload: jsonPayload - }); - } catch (err) {// continue regardless of error - } - } // Handle 404 - - - if (status === 404 || status === 200) { - // If the request was for a 404 page and it doesn't exist, we're done - if (pagePath === `/404.html`) { - return Object.assign(loadObj, { - status: `failure` - }); - } // Need some code here to cache the 404 request. In case - // multiple loadPageDataJsons result in 404s - - - return loadPageDataJson(Object.assign(loadObj, { - pagePath: `/404.html`, - notFound: true - })); - } // handle 500 response (Unrecoverable) - - - if (status === 500) { - return Object.assign(loadObj, { - status: `error` - }); - } // Handle everything else, including status === 0, and 503s. Should retry - - - if (retries < 3) { - return loadPageDataJson(Object.assign(loadObj, { - retries: retries + 1 - })); - } // Retried 3 times already, result is a failure. - - - return Object.assign(loadObj, { - status: `error` - }); - }); -}; - -const doesConnectionSupportPrefetch = () => { - if (`connection` in navigator && typeof navigator.connection !== `undefined`) { - if ((navigator.connection.effectiveType || ``).includes(`2g`)) { - return false; - } - - if (navigator.connection.saveData) { - return false; - } - } - - return true; -}; - -const toPageResources = (pageData, component = null) => { - const page = { - componentChunkName: pageData.componentChunkName, - path: pageData.path, - webpackCompilationHash: pageData.webpackCompilationHash, - matchPath: pageData.matchPath - }; - return { - component, - json: pageData.result, - page - }; -}; - -class BaseLoader { - constructor(loadComponent, matchPaths) { - // Map of pagePath -> Page. Where Page is an object with: { - // status: `success` || `error`, - // payload: PageResources, // undefined if `error` - // } - // PageResources is { - // component, - // json: pageData.result, - // page: { - // componentChunkName, - // path, - // webpackCompilationHash, - // } - // } - this.pageDb = new Map(); - this.inFlightDb = new Map(); - this.pageDataDb = new Map(); - this.prefetchTriggered = new Set(); - this.prefetchCompleted = new Set(); - this.loadComponent = loadComponent; - (0, _findPath.setMatchPaths)(matchPaths); - } - - setApiRunner(apiRunner) { - this.apiRunner = apiRunner; - this.prefetchDisabled = apiRunner(`disableCorePrefetching`).some(a => a); - } - - loadPageDataJson(rawPath) { - const pagePath = (0, _findPath.findPath)(rawPath); - - if (this.pageDataDb.has(pagePath)) { - return Promise.resolve(this.pageDataDb.get(pagePath)); - } - - return loadPageDataJson({ - pagePath - }).then(pageData => { - this.pageDataDb.set(pagePath, pageData); - return pageData; - }); - } - - findMatchPath(rawPath) { - return (0, _findPath.findMatchPath)(rawPath); - } // TODO check all uses of this and whether they use undefined for page resources not exist - - - loadPage(rawPath) { - const pagePath = (0, _findPath.findPath)(rawPath); - - if (this.pageDb.has(pagePath)) { - const page = this.pageDb.get(pagePath); - return Promise.resolve(page.payload); - } - - if (this.inFlightDb.has(pagePath)) { - return this.inFlightDb.get(pagePath); - } - - const inFlight = Promise.all([this.loadAppData(), this.loadPageDataJson(pagePath)]).then(allData => { - const result = allData[1]; - - if (result.status === `error`) { - return { - status: `error` - }; - } - - if (result.status === `failure`) { - // throw an error so error trackers can pick this up - throw new Error(`404 page could not be found. Checkout https://www.gatsbyjs.org/docs/add-404-page/`); - } - - let pageData = result.payload; - const { - componentChunkName - } = pageData; - return this.loadComponent(componentChunkName).then(component => { - const finalResult = { - createdAt: new Date() - }; - let pageResources; - - if (!component) { - finalResult.status = `error`; - } else { - finalResult.status = `success`; - - if (result.notFound === true) { - finalResult.notFound = true; - } - - pageData = Object.assign(pageData, { - webpackCompilationHash: allData[0] ? allData[0].webpackCompilationHash : `` - }); - pageResources = toPageResources(pageData, component); - finalResult.payload = pageResources; - - _emitter.default.emit(`onPostLoadPageResources`, { - page: pageResources, - pageResources - }); - } - - this.pageDb.set(pagePath, finalResult); // undefined if final result is an error - - return pageResources; - }); - }) // prefer duplication with then + catch over .finally to prevent problems in ie11 + firefox - .then(response => { - this.inFlightDb.delete(pagePath); - return response; - }).catch(err => { - this.inFlightDb.delete(pagePath); - throw err; - }); - this.inFlightDb.set(pagePath, inFlight); - return inFlight; - } // returns undefined if loading page ran into errors - - - loadPageSync(rawPath) { - const pagePath = (0, _findPath.findPath)(rawPath); - - if (this.pageDb.has(pagePath)) { - return this.pageDb.get(pagePath).payload; - } - - return undefined; - } - - shouldPrefetch(pagePath) { - // Skip prefetching if we know user is on slow or constrained connection - if (!doesConnectionSupportPrefetch()) { - return false; - } // Check if the page exists. - - - if (this.pageDb.has(pagePath)) { - return false; - } - - return true; - } - - prefetch(pagePath) { - if (!this.shouldPrefetch(pagePath)) { - return false; - } // Tell plugins with custom prefetching logic that they should start - // prefetching this path. - - - if (!this.prefetchTriggered.has(pagePath)) { - this.apiRunner(`onPrefetchPathname`, { - pathname: pagePath - }); - this.prefetchTriggered.add(pagePath); - } // If a plugin has disabled core prefetching, stop now. - - - if (this.prefetchDisabled) { - return false; - } - - const realPath = (0, _findPath.findPath)(pagePath); // Todo make doPrefetch logic cacheable - // eslint-disable-next-line consistent-return - - this.doPrefetch(realPath).then(() => { - if (!this.prefetchCompleted.has(pagePath)) { - this.apiRunner(`onPostPrefetchPathname`, { - pathname: pagePath - }); - this.prefetchCompleted.add(pagePath); - } - }); - return true; - } - - doPrefetch(pagePath) { - throw new Error(`doPrefetch not implemented`); - } - - hovering(rawPath) { - this.loadPage(rawPath); - } - - getResourceURLsForPathname(rawPath) { - const pagePath = (0, _findPath.findPath)(rawPath); - const page = this.pageDataDb.get(pagePath); - - if (page) { - const pageResources = toPageResources(page.payload); - return [...createComponentUrls(pageResources.page.componentChunkName), createPageDataUrl(pagePath)]; - } else { - return null; - } - } - - isPageNotFound(rawPath) { - const pagePath = (0, _findPath.findPath)(rawPath); - const page = this.pageDb.get(pagePath); - return page && page.notFound === true; - } - - loadAppData(retries = 0) { - return doFetch(`${__PATH_PREFIX__}/page-data/app-data.json`).then(req => { - const { - status, - responseText - } = req; - let appData; - - if (status !== 200 && retries < 3) { - // Retry 3 times incase of failures - return this.loadAppData(retries + 1); - } // Handle 200 - - - if (status === 200) { - try { - const jsonPayload = JSON.parse(responseText); - - if (jsonPayload.webpackCompilationHash === undefined) { - throw new Error(`not a valid app-data response`); - } - - appData = jsonPayload; - } catch (err) {// continue regardless of error - } - } - - return appData; - }); - } - -} - -exports.BaseLoader = BaseLoader; - -const createComponentUrls = componentChunkName => window.___chunkMapping[componentChunkName].map(chunk => __PATH_PREFIX__ + chunk); - -class ProdLoader extends BaseLoader { - constructor(asyncRequires, matchPaths) { - const loadComponent = chunkName => asyncRequires.components[chunkName]().then(preferDefault); - - super(loadComponent, matchPaths); - } - - doPrefetch(pagePath) { - const pageDataUrl = createPageDataUrl(pagePath); - return (0, _prefetch.default)(pageDataUrl, { - crossOrigin: `anonymous`, - as: `fetch` - }).then(() => // This was just prefetched, so will return a response from - // the cache instead of making another request to the server - this.loadPageDataJson(pagePath)).then(result => { - if (result.status !== `success`) { - return Promise.resolve(); - } - - const pageData = result.payload; - const chunkName = pageData.componentChunkName; - const componentUrls = createComponentUrls(chunkName); - return Promise.all(componentUrls.map(_prefetch.default)).then(() => pageData); - }); - } - -} - -exports.ProdLoader = ProdLoader; -let instance; - -const setLoader = _loader => { - instance = _loader; -}; - -exports.setLoader = setLoader; -const publicLoader = { - // Deprecated methods. As far as we're aware, these are only used by - // core gatsby and the offline plugin, however there's a very small - // chance they're called by others. - getResourcesForPathname: rawPath => { - console.warn(`Warning: getResourcesForPathname is deprecated. Use loadPage instead`); - return instance.i.loadPage(rawPath); - }, - getResourcesForPathnameSync: rawPath => { - console.warn(`Warning: getResourcesForPathnameSync is deprecated. Use loadPageSync instead`); - return instance.i.loadPageSync(rawPath); - }, - enqueue: rawPath => instance.prefetch(rawPath), - // Real methods - getResourceURLsForPathname: rawPath => instance.getResourceURLsForPathname(rawPath), - loadPage: rawPath => instance.loadPage(rawPath), - loadPageSync: rawPath => instance.loadPageSync(rawPath), - prefetch: rawPath => instance.prefetch(rawPath), - isPageNotFound: rawPath => instance.isPageNotFound(rawPath), - hovering: rawPath => instance.hovering(rawPath), - loadAppData: () => instance.loadAppData() -}; -exports.publicLoader = publicLoader; -var _default = publicLoader; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/navigation.js b/.cache/commonjs/navigation.js deleted file mode 100644 index eb30672a3c..0000000000 --- a/.cache/commonjs/navigation.js +++ /dev/null @@ -1,233 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.init = init; -exports.shouldUpdateScroll = shouldUpdateScroll; -exports.RouteUpdates = void 0; - -var _react = _interopRequireDefault(require("react")); - -var _propTypes = _interopRequireDefault(require("prop-types")); - -var _loader = _interopRequireDefault(require("./loader")); - -var _redirects = _interopRequireDefault(require("./redirects.json")); - -var _apiRunnerBrowser = require("./api-runner-browser"); - -var _emitter = _interopRequireDefault(require("./emitter")); - -var _router = require("@reach/router"); - -var _gatsbyLink = require("gatsby-link"); - -const redirectMap = _redirects.default.reduce((map, redirect) => { - map[redirect.fromPath] = redirect; - return map; -}, {}); - -function maybeRedirect(pathname) { - const redirect = redirectMap[pathname]; - - if (redirect != null) { - if (process.env.NODE_ENV !== `production`) { - const pageResources = _loader.default.loadPageSync(pathname); - - if (pageResources != null) { - console.error(`The route "${pathname}" matches both a page and a redirect; this is probably not intentional.`); - } - } - - window.___replace(redirect.toPath); - - return true; - } else { - return false; - } -} - -const onPreRouteUpdate = (location, prevLocation) => { - if (!maybeRedirect(location.pathname)) { - (0, _apiRunnerBrowser.apiRunner)(`onPreRouteUpdate`, { - location, - prevLocation - }); - } -}; - -const onRouteUpdate = (location, prevLocation) => { - if (!maybeRedirect(location.pathname)) { - (0, _apiRunnerBrowser.apiRunner)(`onRouteUpdate`, { - location, - prevLocation - }); // Temp hack while awaiting https://github.com/reach/router/issues/119 - - window.__navigatingToLink = false; - } -}; - -const navigate = (to, options = {}) => { - // Temp hack while awaiting https://github.com/reach/router/issues/119 - if (!options.replace) { - window.__navigatingToLink = true; - } - - let { - pathname - } = (0, _gatsbyLink.parsePath)(to); - const redirect = redirectMap[pathname]; // If we're redirecting, just replace the passed in pathname - // to the one we want to redirect to. - - if (redirect) { - to = redirect.toPath; - pathname = (0, _gatsbyLink.parsePath)(to).pathname; - } // If we had a service worker update, no matter the path, reload window and - // reset the pathname whitelist - - - if (window.___swUpdated) { - window.location = pathname; - return; - } // Start a timer to wait for a second before transitioning and showing a - // loader in case resources aren't around yet. - - - const timeoutId = setTimeout(() => { - _emitter.default.emit(`onDelayedLoadPageResources`, { - pathname - }); - - (0, _apiRunnerBrowser.apiRunner)(`onRouteUpdateDelayed`, { - location: window.location - }); - }, 1000); - - _loader.default.loadPage(pathname).then(pageResources => { - // If no page resources, then refresh the page - // Do this, rather than simply `window.location.reload()`, so that - // pressing the back/forward buttons work - otherwise when pressing - // back, the browser will just change the URL and expect JS to handle - // the change, which won't always work since it might not be a Gatsby - // page. - if (!pageResources || pageResources.status === `error`) { - window.history.replaceState({}, ``, location.href); - window.location = pathname; - } // If the loaded page has a different compilation hash to the - // window, then a rebuild has occurred on the server. Reload. - - - if (process.env.NODE_ENV === `production` && pageResources) { - if (pageResources.page.webpackCompilationHash !== window.___webpackCompilationHash) { - // Purge plugin-offline cache - if (`serviceWorker` in navigator && navigator.serviceWorker.controller !== null && navigator.serviceWorker.controller.state === `activated`) { - navigator.serviceWorker.controller.postMessage({ - gatsbyApi: `clearPathResources` - }); - } - - console.log(`Site has changed on server. Reloading browser`); - window.location = pathname; - } - } - - (0, _router.navigate)(to, options); - clearTimeout(timeoutId); - }); -}; - -function shouldUpdateScroll(prevRouterProps, { - location -}) { - const { - pathname, - hash - } = location; - const results = (0, _apiRunnerBrowser.apiRunner)(`shouldUpdateScroll`, { - prevRouterProps, - // `pathname` for backwards compatibility - pathname, - routerProps: { - location - }, - getSavedScrollPosition: args => this._stateStorage.read(args) - }); - - if (results.length > 0) { - // Use the latest registered shouldUpdateScroll result, this allows users to override plugin's configuration - // @see https://github.com/gatsbyjs/gatsby/issues/12038 - return results[results.length - 1]; - } - - if (prevRouterProps) { - const { - location: { - pathname: oldPathname - } - } = prevRouterProps; - - if (oldPathname === pathname) { - // Scroll to element if it exists, if it doesn't, or no hash is provided, - // scroll to top. - return hash ? decodeURI(hash.slice(1)) : [0, 0]; - } - } - - return true; -} - -function init() { - // Temp hack while awaiting https://github.com/reach/router/issues/119 - window.__navigatingToLink = false; - - window.___push = to => navigate(to, { - replace: false - }); - - window.___replace = to => navigate(to, { - replace: true - }); - - window.___navigate = (to, options) => navigate(to, options); // Check for initial page-load redirect - - - maybeRedirect(window.location.pathname); -} // Fire on(Pre)RouteUpdate APIs - - -class RouteUpdates extends _react.default.Component { - constructor(props) { - super(props); - onPreRouteUpdate(props.location, null); - } - - componentDidMount() { - onRouteUpdate(this.props.location, null); - } - - componentDidUpdate(prevProps, prevState, shouldFireRouteUpdate) { - if (shouldFireRouteUpdate) { - onRouteUpdate(this.props.location, prevProps.location); - } - } - - getSnapshotBeforeUpdate(prevProps) { - if (this.props.location.pathname !== prevProps.location.pathname) { - onPreRouteUpdate(this.props.location, prevProps.location); - return true; - } - - return false; - } - - render() { - return this.props.children; - } - -} - -exports.RouteUpdates = RouteUpdates; -RouteUpdates.propTypes = { - location: _propTypes.default.object.isRequired -}; \ No newline at end of file diff --git a/.cache/commonjs/normalize-page-path.js b/.cache/commonjs/normalize-page-path.js deleted file mode 100644 index 1311e3902c..0000000000 --- a/.cache/commonjs/normalize-page-path.js +++ /dev/null @@ -1,22 +0,0 @@ -"use strict"; - -exports.__esModule = true; -exports.default = void 0; - -var _default = path => { - if (path === undefined) { - return path; - } - - if (path === `/`) { - return `/`; - } - - if (path.charAt(path.length - 1) === `/`) { - return path.slice(0, -1); - } - - return path; -}; - -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/page-renderer.js b/.cache/commonjs/page-renderer.js deleted file mode 100644 index fe83e7cc64..0000000000 --- a/.cache/commonjs/page-renderer.js +++ /dev/null @@ -1,53 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); - -exports.__esModule = true; -exports.default = void 0; - -var _react = _interopRequireWildcard(require("react")); - -var _propTypes = _interopRequireDefault(require("prop-types")); - -var _loader = require("./loader"); - -var _apiRunnerBrowser = require("./api-runner-browser"); - -class PageRenderer extends _react.default.Component { - render() { - const props = Object.assign({}, this.props, { - pathContext: this.props.pageContext - }); - const [replacementElement] = (0, _apiRunnerBrowser.apiRunner)(`replaceComponentRenderer`, { - props: this.props, - loader: _loader.publicLoader - }); - const pageElement = replacementElement || (0, _react.createElement)(this.props.pageResources.component, Object.assign({}, props, { - key: this.props.path || this.props.pageResources.page.path - })); - const wrappedPage = (0, _apiRunnerBrowser.apiRunner)(`wrapPageElement`, { - element: pageElement, - props - }, pageElement, ({ - result - }) => { - return { - element: result, - props - }; - }).pop(); - return wrappedPage; - } - -} - -PageRenderer.propTypes = { - location: _propTypes.default.object.isRequired, - pageResources: _propTypes.default.object.isRequired, - data: _propTypes.default.object, - pageContext: _propTypes.default.object.isRequired -}; -var _default = PageRenderer; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/prefetch.js b/.cache/commonjs/prefetch.js deleted file mode 100644 index 20dfe2f580..0000000000 --- a/.cache/commonjs/prefetch.js +++ /dev/null @@ -1,79 +0,0 @@ -"use strict"; - -exports.__esModule = true; -exports.default = void 0; - -const support = function (feature) { - if (typeof document === `undefined`) { - return false; - } - - const fakeLink = document.createElement(`link`); - - try { - if (fakeLink.relList && typeof fakeLink.relList.supports === `function`) { - return fakeLink.relList.supports(feature); - } - } catch (err) { - return false; - } - - return false; -}; - -const linkPrefetchStrategy = function (url, options) { - return new Promise((resolve, reject) => { - if (typeof document === `undefined`) { - reject(); - return; - } - - const link = document.createElement(`link`); - link.setAttribute(`rel`, `prefetch`); - link.setAttribute(`href`, url); - Object.keys(options).forEach(key => { - link.setAttribute(key, options[key]); - }); - link.onload = resolve; - link.onerror = reject; - const parentElement = document.getElementsByTagName(`head`)[0] || document.getElementsByName(`script`)[0].parentNode; - parentElement.appendChild(link); - }); -}; - -const xhrPrefetchStrategy = function (url) { - return new Promise((resolve, reject) => { - const req = new XMLHttpRequest(); - req.open(`GET`, url, true); - - req.onload = () => { - if (req.status === 200) { - resolve(); - } else { - reject(); - } - }; - - req.send(null); - }); -}; - -const supportedPrefetchStrategy = support(`prefetch`) ? linkPrefetchStrategy : xhrPrefetchStrategy; -const preFetched = {}; - -const prefetch = function (url, options) { - return new Promise(resolve => { - if (preFetched[url]) { - resolve(); - return; - } - - supportedPrefetchStrategy(url, options).then(() => { - resolve(); - preFetched[url] = true; - }).catch(() => {}); // 404s are logged to the console anyway - }); -}; - -var _default = prefetch; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/production-app.js b/.cache/commonjs/production-app.js deleted file mode 100644 index cf37e826cd..0000000000 --- a/.cache/commonjs/production-app.js +++ /dev/null @@ -1,139 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); - -var _apiRunnerBrowser = require("./api-runner-browser"); - -var _react = _interopRequireDefault(require("react")); - -var _reactDom = _interopRequireDefault(require("react-dom")); - -var _router = require("@reach/router"); - -var _gatsbyReactRouterScroll = require("gatsby-react-router-scroll"); - -var _domready = _interopRequireDefault(require("@mikaelkristiansson/domready")); - -var _navigation = require("./navigation"); - -var _emitter = _interopRequireDefault(require("./emitter")); - -var _pageRenderer = _interopRequireDefault(require("./page-renderer")); - -var _asyncRequires = _interopRequireDefault(require("./async-requires")); - -var _loader = require("./loader"); - -var _ensureResources = _interopRequireDefault(require("./ensure-resources")); - -var _stripPrefix = _interopRequireDefault(require("./strip-prefix")); - -var _matchPaths = _interopRequireDefault(require("./match-paths.json")); - -// Generated during bootstrap -const loader = new _loader.ProdLoader(_asyncRequires.default, _matchPaths.default); -(0, _loader.setLoader)(loader); -loader.setApiRunner(_apiRunnerBrowser.apiRunner); -window.asyncRequires = _asyncRequires.default; -window.___emitter = _emitter.default; -window.___loader = _loader.publicLoader; -(0, _navigation.init)(); -(0, _apiRunnerBrowser.apiRunnerAsync)(`onClientEntry`).then(() => { - // Let plugins register a service worker. The plugin just needs - // to return true. - if ((0, _apiRunnerBrowser.apiRunner)(`registerServiceWorker`).length > 0) { - require(`./register-service-worker`); - } // In gatsby v2 if Router is used in page using matchPaths - // paths need to contain full path. - // For example: - // - page have `/app/*` matchPath - // - inside template user needs to use `/app/xyz` as path - // Resetting `basepath`/`baseuri` keeps current behaviour - // to not introduce breaking change. - // Remove this in v3 - - - const RouteHandler = props => _react.default.createElement(_router.BaseContext.Provider, { - value: { - baseuri: `/`, - basepath: `/` - } - }, _react.default.createElement(_pageRenderer.default, props)); - - class LocationHandler extends _react.default.Component { - render() { - const { - location - } = this.props; - return _react.default.createElement(_ensureResources.default, { - location: location - }, ({ - pageResources, - location - }) => _react.default.createElement(_navigation.RouteUpdates, { - location: location - }, _react.default.createElement(_gatsbyReactRouterScroll.ScrollContext, { - location: location, - shouldUpdateScroll: _navigation.shouldUpdateScroll - }, _react.default.createElement(_router.Router, { - basepath: __BASE_PATH__, - location: location, - id: "gatsby-focus-wrapper" - }, _react.default.createElement(RouteHandler, (0, _extends2.default)({ - path: encodeURI(pageResources.page.path === `/404.html` ? (0, _stripPrefix.default)(location.pathname, __BASE_PATH__) : pageResources.page.matchPath || pageResources.page.path) - }, this.props, { - location: location, - pageResources: pageResources - }, pageResources.json)))))); - } - - } - - const { - pagePath, - location: browserLoc - } = window; // Explicitly call navigate if the canonical path (window.pagePath) - // is different to the browser path (window.location.pathname). But - // only if NONE of the following conditions hold: - // - // - The url matches a client side route (page.matchPath) - // - it's a 404 page - // - it's the offline plugin shell (/offline-plugin-app-shell-fallback/) - - if (pagePath && __BASE_PATH__ + pagePath !== browserLoc.pathname && !(loader.findMatchPath((0, _stripPrefix.default)(browserLoc.pathname, __BASE_PATH__)) || pagePath === `/404.html` || pagePath.match(/^\/404\/?$/) || pagePath.match(/^\/offline-plugin-app-shell-fallback\/?$/))) { - (0, _router.navigate)(__BASE_PATH__ + pagePath + browserLoc.search + browserLoc.hash, { - replace: true - }); - } - - _loader.publicLoader.loadPage(browserLoc.pathname).then(page => { - if (!page || page.status === `error`) { - throw new Error(`page resources for ${browserLoc.pathname} not found. Not rendering React`); - } - - window.___webpackCompilationHash = page.page.webpackCompilationHash; - - const Root = () => _react.default.createElement(_router.Location, null, locationContext => _react.default.createElement(LocationHandler, locationContext)); - - const WrappedRoot = (0, _apiRunnerBrowser.apiRunner)(`wrapRootElement`, { - element: _react.default.createElement(Root, null) - }, _react.default.createElement(Root, null), ({ - result - }) => { - return { - element: result - }; - }).pop(); - - let NewRoot = () => WrappedRoot; - - const renderer = (0, _apiRunnerBrowser.apiRunner)(`replaceHydrateFunction`, undefined, _reactDom.default.hydrate)[0]; - (0, _domready.default)(() => { - renderer(_react.default.createElement(NewRoot, null), typeof window !== `undefined` ? document.getElementById(`___gatsby`) : void 0, () => { - (0, _apiRunnerBrowser.apiRunner)(`onInitialClientRender`); - }); - }); - }); -}); \ No newline at end of file diff --git a/.cache/commonjs/public-page-renderer-dev.js b/.cache/commonjs/public-page-renderer-dev.js deleted file mode 100644 index 1f2ad92aca..0000000000 --- a/.cache/commonjs/public-page-renderer-dev.js +++ /dev/null @@ -1,33 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = void 0; - -var _react = _interopRequireDefault(require("react")); - -var _propTypes = _interopRequireDefault(require("prop-types")); - -var _loader = _interopRequireDefault(require("./loader")); - -var _jsonStore = _interopRequireDefault(require("./json-store")); - -const DevPageRenderer = ({ - location -}) => { - const pageResources = _loader.default.loadPageSync(location.pathname); - - return _react.default.createElement(_jsonStore.default, { - location, - pageResources - }); -}; - -DevPageRenderer.propTypes = { - location: _propTypes.default.shape({ - pathname: _propTypes.default.string.isRequired - }).isRequired -}; -var _default = DevPageRenderer; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/public-page-renderer-prod.js b/.cache/commonjs/public-page-renderer-prod.js deleted file mode 100644 index b0da15eab0..0000000000 --- a/.cache/commonjs/public-page-renderer-prod.js +++ /dev/null @@ -1,34 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = void 0; - -var _react = _interopRequireDefault(require("react")); - -var _propTypes = _interopRequireDefault(require("prop-types")); - -var _pageRenderer = _interopRequireDefault(require("./page-renderer")); - -const ProdPageRenderer = ({ - location, - pageResources -}) => { - if (!pageResources) { - return null; - } - - return _react.default.createElement(_pageRenderer.default, Object.assign({ - location, - pageResources - }, pageResources.json)); -}; - -ProdPageRenderer.propTypes = { - location: _propTypes.default.shape({ - pathname: _propTypes.default.string.isRequired - }).isRequired -}; -var _default = ProdPageRenderer; -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/public-page-renderer.js b/.cache/commonjs/public-page-renderer.js deleted file mode 100644 index 589fe20c2a..0000000000 --- a/.cache/commonjs/public-page-renderer.js +++ /dev/null @@ -1,11 +0,0 @@ -"use strict"; - -const preferDefault = m => m && m.default || m; - -if (process.env.BUILD_STAGE === `develop`) { - module.exports = preferDefault(require(`./public-page-renderer-dev`)); -} else if (process.env.BUILD_STAGE === `build-javascript`) { - module.exports = preferDefault(require(`./public-page-renderer-prod`)); -} else { - module.exports = () => null; -} \ No newline at end of file diff --git a/.cache/commonjs/react-lifecycles-compat.js b/.cache/commonjs/react-lifecycles-compat.js deleted file mode 100644 index ebf5374734..0000000000 --- a/.cache/commonjs/react-lifecycles-compat.js +++ /dev/null @@ -1,3 +0,0 @@ -"use strict"; - -exports.polyfill = Component => Component; \ No newline at end of file diff --git a/.cache/commonjs/register-service-worker.js b/.cache/commonjs/register-service-worker.js deleted file mode 100644 index 9551aadefc..0000000000 --- a/.cache/commonjs/register-service-worker.js +++ /dev/null @@ -1,66 +0,0 @@ -"use strict"; - -var _apiRunnerBrowser = require("./api-runner-browser"); - -if (window.location.protocol !== `https:` && window.location.hostname !== `localhost`) { - console.error(`Service workers can only be used over HTTPS, or on localhost for development`); -} else if (`serviceWorker` in navigator) { - navigator.serviceWorker.register(`${__BASE_PATH__}/sw.js`).then(function (reg) { - reg.addEventListener(`updatefound`, () => { - (0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerUpdateFound`, { - serviceWorker: reg - }); // The updatefound event implies that reg.installing is set; see - // https://w3c.github.io/ServiceWorker/#service-worker-registration-updatefound-event - - const installingWorker = reg.installing; - console.log(`installingWorker`, installingWorker); - installingWorker.addEventListener(`statechange`, () => { - switch (installingWorker.state) { - case `installed`: - if (navigator.serviceWorker.controller) { - // At this point, the old content will have been purged and the fresh content will - // have been added to the cache. - // We set a flag so Gatsby Link knows to refresh the page on next navigation attempt - window.___swUpdated = true; // We call the onServiceWorkerUpdateReady API so users can show update prompts. - - (0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerUpdateReady`, { - serviceWorker: reg - }); // If resources failed for the current page, reload. - - if (window.___failedResources) { - console.log(`resources failed, SW updated - reloading`); - window.location.reload(); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a "Content is cached for offline use." message. - console.log(`Content is now available offline!`); // Post to service worker that install is complete. - // Delay to allow time for the event listener to be added -- - // otherwise fetch is called too soon and resources aren't cached. - - (0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerInstalled`, { - serviceWorker: reg - }); - } - - break; - - case `redundant`: - console.error(`The installing service worker became redundant.`); - (0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerRedundant`, { - serviceWorker: reg - }); - break; - - case `activated`: - (0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerActive`, { - serviceWorker: reg - }); - break; - } - }); - }); - }).catch(function (e) { - console.error(`Error during service worker registration:`, e); - }); -} \ No newline at end of file diff --git a/.cache/commonjs/root.js b/.cache/commonjs/root.js deleted file mode 100644 index a7ff0da14b..0000000000 --- a/.cache/commonjs/root.js +++ /dev/null @@ -1,131 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = void 0; - -var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); - -var _react = _interopRequireDefault(require("react")); - -var _router = require("@reach/router"); - -var _gatsbyReactRouterScroll = require("gatsby-react-router-scroll"); - -var _navigation = require("./navigation"); - -var _apiRunnerBrowser = require("./api-runner-browser"); - -var _loader = _interopRequireDefault(require("./loader")); - -var _jsonStore = _interopRequireDefault(require("./json-store")); - -var _ensureResources = _interopRequireDefault(require("./ensure-resources")); - -var _errorOverlayHandler = require("./error-overlay-handler"); - -if (window.__webpack_hot_middleware_reporter__ !== undefined) { - const overlayErrorID = `webpack`; // Report build errors - - window.__webpack_hot_middleware_reporter__.useCustomOverlay({ - showProblems(type, obj) { - if (type !== `errors`) { - (0, _errorOverlayHandler.clearError)(overlayErrorID); - return; - } - - (0, _errorOverlayHandler.reportError)(overlayErrorID, obj[0]); - }, - - clear() { - (0, _errorOverlayHandler.clearError)(overlayErrorID); - } - - }); -} - -(0, _navigation.init)(); // In gatsby v2 if Router is used in page using matchPaths -// paths need to contain full path. -// For example: -// - page have `/app/*` matchPath -// - inside template user needs to use `/app/xyz` as path -// Resetting `basepath`/`baseuri` keeps current behaviour -// to not introduce breaking change. -// Remove this in v3 - -const RouteHandler = props => _react.default.createElement(_router.BaseContext.Provider, { - value: { - baseuri: `/`, - basepath: `/` - } -}, _react.default.createElement(_jsonStore.default, props)); - -class LocationHandler extends _react.default.Component { - render() { - let { - location - } = this.props; - - if (!_loader.default.isPageNotFound(location.pathname)) { - return _react.default.createElement(_ensureResources.default, { - location: location - }, locationAndPageResources => _react.default.createElement(_navigation.RouteUpdates, { - location: location - }, _react.default.createElement(_gatsbyReactRouterScroll.ScrollContext, { - location: location, - shouldUpdateScroll: _navigation.shouldUpdateScroll - }, _react.default.createElement(_router.Router, { - basepath: __BASE_PATH__, - location: location, - id: "gatsby-focus-wrapper" - }, _react.default.createElement(RouteHandler, (0, _extends2.default)({ - path: encodeURI(locationAndPageResources.pageResources.page.matchPath || locationAndPageResources.pageResources.page.path) - }, this.props, locationAndPageResources)))))); - } - - const dev404PageResources = _loader.default.loadPageSync(`/dev-404-page`); - - const real404PageResources = _loader.default.loadPageSync(`/404.html`); - - let custom404; - - if (real404PageResources) { - custom404 = _react.default.createElement(_jsonStore.default, (0, _extends2.default)({}, this.props, { - pageResources: real404PageResources - })); - } - - return _react.default.createElement(_navigation.RouteUpdates, { - location: location - }, _react.default.createElement(_router.Router, { - basepath: __BASE_PATH__, - location: location, - id: "gatsby-focus-wrapper" - }, _react.default.createElement(RouteHandler, { - path: location.pathname, - location: location, - pageResources: dev404PageResources, - custom404: custom404 - }))); - } - -} - -const Root = () => _react.default.createElement(_router.Location, null, locationContext => _react.default.createElement(LocationHandler, locationContext)); // Let site, plugins wrap the site e.g. for Redux. - - -const WrappedRoot = (0, _apiRunnerBrowser.apiRunner)(`wrapRootElement`, { - element: _react.default.createElement(Root, null) -}, _react.default.createElement(Root, null), ({ - result, - plugin -}) => { - return { - element: result - }; -}).pop(); - -var _default = () => WrappedRoot; - -exports.default = _default; \ No newline at end of file diff --git a/.cache/commonjs/socketIo.js b/.cache/commonjs/socketIo.js deleted file mode 100644 index fb18ce9ba6..0000000000 --- a/.cache/commonjs/socketIo.js +++ /dev/null @@ -1,122 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = socketIo; -exports.getPageData = getPageData; -exports.registerPath = registerPath; -exports.unregisterPath = unregisterPath; -exports.getIsInitialized = exports.getPageQueryData = exports.getStaticQueryData = void 0; - -var _errorOverlayHandler = require("./error-overlay-handler"); - -var _normalizePagePath = _interopRequireDefault(require("./normalize-page-path")); - -let socket = null; -let staticQueryData = {}; -let pageQueryData = {}; -let isInitialized = false; - -const getStaticQueryData = () => staticQueryData; - -exports.getStaticQueryData = getStaticQueryData; - -const getPageQueryData = () => pageQueryData; - -exports.getPageQueryData = getPageQueryData; - -const getIsInitialized = () => isInitialized; - -exports.getIsInitialized = getIsInitialized; - -function socketIo() { - if (process.env.NODE_ENV !== `production`) { - if (!socket) { - // Try to initialize web socket if we didn't do it already - try { - // eslint-disable-next-line no-undef - socket = io(); - - const didDataChange = (msg, queryData) => { - const id = msg.type === `staticQueryResult` ? msg.payload.id : (0, _normalizePagePath.default)(msg.payload.id); - return !(id in queryData) || JSON.stringify(msg.payload.result) !== JSON.stringify(queryData[id]); - }; - - socket.on(`message`, msg => { - if (msg.type === `staticQueryResult`) { - if (didDataChange(msg, staticQueryData)) { - staticQueryData = Object.assign({}, staticQueryData, { - [msg.payload.id]: msg.payload.result - }); - } - } else if (msg.type === `pageQueryResult`) { - if (didDataChange(msg, pageQueryData)) { - pageQueryData = Object.assign({}, pageQueryData, { - [(0, _normalizePagePath.default)(msg.payload.id)]: msg.payload.result - }); - } - } else if (msg.type === `overlayError`) { - if (msg.payload.message) { - (0, _errorOverlayHandler.reportError)(msg.payload.id, msg.payload.message); - } else { - (0, _errorOverlayHandler.clearError)(msg.payload.id); - } - } - - if (msg.type && msg.payload) { - ___emitter.emit(msg.type, msg.payload); - } - }); - } catch (err) { - console.error(`Could not connect to socket.io on dev server.`); - } - } - - return socket; - } else { - return null; - } -} - -const inFlightGetPageDataPromiseCache = {}; - -function getPageData(pathname) { - pathname = (0, _normalizePagePath.default)(pathname); - - if (inFlightGetPageDataPromiseCache[pathname]) { - return inFlightGetPageDataPromiseCache[pathname]; - } else { - inFlightGetPageDataPromiseCache[pathname] = new Promise(resolve => { - if (pageQueryData[pathname]) { - delete inFlightGetPageDataPromiseCache[pathname]; - resolve(pageQueryData[pathname]); - } else { - const onPageDataCallback = msg => { - if (msg.type === `pageQueryResult` && (0, _normalizePagePath.default)(msg.payload.id) === pathname) { - socket.off(`message`, onPageDataCallback); - delete inFlightGetPageDataPromiseCache[pathname]; - resolve(pageQueryData[pathname]); - } - }; - - socket.on(`message`, onPageDataCallback); - socket.emit(`getDataForPath`, pathname); - } - }); - } - - return inFlightGetPageDataPromiseCache[pathname]; -} // Tell websocket-manager.js the new path we're on. -// This will help the backend prioritize queries for this -// path. - - -function registerPath(path) { - socket.emit(`registerPath`, path); -} // Unregister the former path - - -function unregisterPath(path) { - socket.emit(`unregisterPath`, path); -} \ No newline at end of file diff --git a/.cache/commonjs/static-entry.js b/.cache/commonjs/static-entry.js deleted file mode 100644 index f3cc396a25..0000000000 --- a/.cache/commonjs/static-entry.js +++ /dev/null @@ -1,406 +0,0 @@ -"use strict"; - -var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); - -exports.__esModule = true; -exports.default = exports.sanitizeComponents = void 0; - -var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); - -const React = require(`react`); - -const fs = require(`fs`); - -const { - join -} = require(`path`); - -const { - renderToString, - renderToStaticMarkup -} = require(`react-dom/server`); - -const { - ServerLocation, - Router, - isRedirect -} = require(`@reach/router`); - -const { - get, - merge, - isObject, - flatten, - uniqBy, - flattenDeep, - replace -} = require(`lodash`); - -const apiRunner = require(`./api-runner-ssr`); - -const syncRequires = require(`./sync-requires`); - -const { - version: gatsbyVersion -} = require(`gatsby/package.json`); - -const stats = JSON.parse(fs.readFileSync(`${process.cwd()}/public/webpack.stats.json`, `utf-8`)); -const chunkMapping = JSON.parse(fs.readFileSync(`${process.cwd()}/public/chunk-map.json`, `utf-8`)); // const testRequireError = require("./test-require-error") -// For some extremely mysterious reason, webpack adds the above module *after* -// this module so that when this code runs, testRequireError is undefined. -// So in the meantime, we'll just inline it. - -const testRequireError = (moduleName, err) => { - const regex = new RegExp(`Error: Cannot find module\\s.${moduleName}`); - const firstLine = err.toString().split(`\n`)[0]; - return regex.test(firstLine); -}; - -let Html; - -try { - Html = require(`../src/html`); -} catch (err) { - if (testRequireError(`../src/html`, err)) { - Html = require(`./default-html`); - } else { - throw err; - } -} - -Html = Html && Html.__esModule ? Html.default : Html; - -const getPageDataPath = path => { - const fixedPagePath = path === `/` ? `index` : path; - return join(`page-data`, fixedPagePath, `page-data.json`); -}; - -const getPageDataUrl = pagePath => { - const pageDataPath = getPageDataPath(pagePath); - return `${__PATH_PREFIX__}/${pageDataPath}`; -}; - -const getPageDataFile = pagePath => { - const pageDataPath = getPageDataPath(pagePath); - return join(process.cwd(), `public`, pageDataPath); -}; - -const loadPageDataSync = pagePath => { - const pageDataPath = getPageDataPath(pagePath); - const pageDataFile = join(process.cwd(), `public`, pageDataPath); - - try { - const pageDataJson = fs.readFileSync(pageDataFile); - return JSON.parse(pageDataJson); - } catch (error) { - // not an error if file is not found. There's just no page data - return null; - } -}; - -const createElement = React.createElement; - -const sanitizeComponents = components => { - const componentsArray = ensureArray(components); - return componentsArray.map(component => { - // Ensure manifest is always loaded from content server - // And not asset server when an assetPrefix is used - if (__ASSET_PREFIX__ && component.props.rel === `manifest`) { - return React.cloneElement(component, { - href: replace(component.props.href, __ASSET_PREFIX__, ``) - }); - } - - return component; - }); -}; - -exports.sanitizeComponents = sanitizeComponents; - -const ensureArray = components => { - if (Array.isArray(components)) { - // remove falsy items and flatten - return flattenDeep(components.filter(val => Array.isArray(val) ? val.length > 0 : val)); - } else { - // we also accept single components, so we need to handle this case as well - return components ? [components] : []; - } -}; - -var _default = (pagePath, callback) => { - let bodyHtml = ``; - let headComponents = [React.createElement("meta", { - name: "generator", - content: `Gatsby ${gatsbyVersion}`, - key: `generator-${gatsbyVersion}` - })]; - let htmlAttributes = {}; - let bodyAttributes = {}; - let preBodyComponents = []; - let postBodyComponents = []; - let bodyProps = {}; - - const replaceBodyHTMLString = body => { - bodyHtml = body; - }; - - const setHeadComponents = components => { - headComponents = headComponents.concat(sanitizeComponents(components)); - }; - - const setHtmlAttributes = attributes => { - htmlAttributes = merge(htmlAttributes, attributes); - }; - - const setBodyAttributes = attributes => { - bodyAttributes = merge(bodyAttributes, attributes); - }; - - const setPreBodyComponents = components => { - preBodyComponents = preBodyComponents.concat(sanitizeComponents(components)); - }; - - const setPostBodyComponents = components => { - postBodyComponents = postBodyComponents.concat(sanitizeComponents(components)); - }; - - const setBodyProps = props => { - bodyProps = merge({}, bodyProps, props); - }; - - const getHeadComponents = () => headComponents; - - const replaceHeadComponents = components => { - headComponents = sanitizeComponents(components); - }; - - const getPreBodyComponents = () => preBodyComponents; - - const replacePreBodyComponents = components => { - preBodyComponents = sanitizeComponents(components); - }; - - const getPostBodyComponents = () => postBodyComponents; - - const replacePostBodyComponents = components => { - postBodyComponents = sanitizeComponents(components); - }; - - const pageDataRaw = fs.readFileSync(getPageDataFile(pagePath)); - const pageData = JSON.parse(pageDataRaw); - const pageDataUrl = getPageDataUrl(pagePath); - const { - componentChunkName - } = pageData; - - class RouteHandler extends React.Component { - render() { - const props = Object.assign({}, this.props, {}, pageData.result, { - // pathContext was deprecated in v2. Renamed to pageContext - pathContext: pageData.result ? pageData.result.pageContext : undefined - }); - const pageElement = createElement(syncRequires.components[componentChunkName], props); - const wrappedPage = apiRunner(`wrapPageElement`, { - element: pageElement, - props - }, pageElement, ({ - result - }) => { - return { - element: result, - props - }; - }).pop(); - return wrappedPage; - } - - } - - const routerElement = createElement(ServerLocation, { - url: `${__BASE_PATH__}${pagePath}` - }, createElement(Router, { - id: `gatsby-focus-wrapper`, - baseuri: `${__BASE_PATH__}` - }, createElement(RouteHandler, { - path: `/*` - }))); - const bodyComponent = apiRunner(`wrapRootElement`, { - element: routerElement, - pathname: pagePath - }, routerElement, ({ - result - }) => { - return { - element: result, - pathname: pagePath - }; - }).pop(); // Let the site or plugin render the page component. - - apiRunner(`replaceRenderer`, { - bodyComponent, - replaceBodyHTMLString, - setHeadComponents, - setHtmlAttributes, - setBodyAttributes, - setPreBodyComponents, - setPostBodyComponents, - setBodyProps, - pathname: pagePath, - pathPrefix: __PATH_PREFIX__ - }); // If no one stepped up, we'll handle it. - - if (!bodyHtml) { - try { - bodyHtml = renderToString(bodyComponent); - } catch (e) { - // ignore @reach/router redirect errors - if (!isRedirect(e)) throw e; - } - } // Create paths to scripts - - - let scriptsAndStyles = flatten([`app`, componentChunkName].map(s => { - const fetchKey = `assetsByChunkName[${s}]`; - let chunks = get(stats, fetchKey); - let namedChunkGroups = get(stats, `namedChunkGroups`); - - if (!chunks) { - return null; - } - - chunks = chunks.map(chunk => { - if (chunk === `/`) { - return null; - } - - return { - rel: `preload`, - name: chunk - }; - }); - namedChunkGroups[s].assets.forEach(asset => chunks.push({ - rel: `preload`, - name: asset - })); - const childAssets = namedChunkGroups[s].childAssets; - - for (const rel in childAssets) { - chunks = merge(chunks, childAssets[rel].map(chunk => { - return { - rel, - name: chunk - }; - })); - } - - return chunks; - })).filter(s => isObject(s)).sort((s1, s2) => s1.rel == `preload` ? -1 : 1); // given priority to preload - - scriptsAndStyles = uniqBy(scriptsAndStyles, item => item.name); - const scripts = scriptsAndStyles.filter(script => script.name && script.name.endsWith(`.js`)); - const styles = scriptsAndStyles.filter(style => style.name && style.name.endsWith(`.css`)); - apiRunner(`onRenderBody`, { - setHeadComponents, - setHtmlAttributes, - setBodyAttributes, - setPreBodyComponents, - setPostBodyComponents, - setBodyProps, - pathname: pagePath, - loadPageDataSync, - bodyHtml, - scripts, - styles, - pathPrefix: __PATH_PREFIX__ - }); - scripts.slice(0).reverse().forEach(script => { - // Add preload/prefetch s for scripts. - headComponents.push(React.createElement("link", { - as: "script", - rel: script.rel, - key: script.name, - href: `${__PATH_PREFIX__}/${script.name}` - })); - }); - - if (pageData) { - headComponents.push(React.createElement("link", { - as: "fetch", - rel: "preload", - key: pageDataUrl, - href: pageDataUrl, - crossOrigin: "anonymous" - })); - } - - styles.slice(0).reverse().forEach(style => { - // Add s for styles that should be prefetched - // otherwise, inline as a
\ No newline at end of file diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest deleted file mode 100644 index 9d043ac336..0000000000 --- a/public/manifest.webmanifest +++ /dev/null @@ -1 +0,0 @@ -{"name":"gatsby-starter-default","short_name":"starter","start_url":"/","background_color":"#722ED1","theme_color":"#722ED1","display":"minimal-ui","icons":[{"src":"icons/icon-48x48.png?v=40b8872b4d87c3cdc6162b11ecf88dc1","sizes":"48x48","type":"image/png"},{"src":"icons/icon-72x72.png?v=40b8872b4d87c3cdc6162b11ecf88dc1","sizes":"72x72","type":"image/png"},{"src":"icons/icon-96x96.png?v=40b8872b4d87c3cdc6162b11ecf88dc1","sizes":"96x96","type":"image/png"},{"src":"icons/icon-144x144.png?v=40b8872b4d87c3cdc6162b11ecf88dc1","sizes":"144x144","type":"image/png"},{"src":"icons/icon-192x192.png?v=40b8872b4d87c3cdc6162b11ecf88dc1","sizes":"192x192","type":"image/png"},{"src":"icons/icon-256x256.png?v=40b8872b4d87c3cdc6162b11ecf88dc1","sizes":"256x256","type":"image/png"},{"src":"icons/icon-384x384.png?v=40b8872b4d87c3cdc6162b11ecf88dc1","sizes":"384x384","type":"image/png"},{"src":"icons/icon-512x512.png?v=40b8872b4d87c3cdc6162b11ecf88dc1","sizes":"512x512","type":"image/png"}]} \ No newline at end of file diff --git a/public/page-data/404.html/page-data.json b/public/page-data/404.html/page-data.json deleted file mode 100644 index 6aa78f65ca..0000000000 --- a/public/page-data/404.html/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-pages-404-tsx","path":"/404.html","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"slug":"/404/","langKey":"zh"}}} \ No newline at end of file diff --git a/public/page-data/404/page-data.json b/public/page-data/404/page-data.json deleted file mode 100644 index 9b866fd399..0000000000 --- a/public/page-data/404/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-pages-404-tsx","path":"/404","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"slug":"/404/","langKey":"zh"}}} \ No newline at end of file diff --git a/public/page-data/dev-404-page/page-data.json b/public/page-data/dev-404-page/page-data.json deleted file mode 100644 index 95c042b1c5..0000000000 --- a/public/page-data/dev-404-page/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page","result":{"data":{"allSitePage":{"nodes":[{"path":"/en/docs/tutorial/data"},{"path":"/zh/docs/tutorial/data"},{"path":"/en/docs/tutorial/quickstart"},{"path":"/zh/docs/tutorial/quickstart"},{"path":"/en/docs/api/l7"},{"path":"/zh/docs/api/l7"},{"path":"/en/docs/api/scene"},{"path":"/zh/docs/api/scene"},{"path":"/zh/docs/manual/tutorial/data"},{"path":"/zh/docs/manual/tutorial/quickstart"},{"path":"/en/docs/manual/tutorial/data"},{"path":"/en/docs/manual/tutorial/quickstart"},{"path":"/en/docs/api/source/geojson"},{"path":"/zh/docs/api/source/geojson"},{"path":"/en/docs/api/layer/heatmap"},{"path":"/en/docs/api/source/source"},{"path":"/zh/docs/api/layer/heatmap"},{"path":"/zh/docs/api/source/source"},{"path":"/en/docs/api/layer/layer"},{"path":"/en/docs/api/layer/imagelayer"},{"path":"/zh/docs/api/layer/imagelayer"},{"path":"/zh/docs/api/layer/layer"},{"path":"/en/docs/api/layer/linelayer"},{"path":"/en/docs/api/layer/pointlayer"},{"path":"/zh/docs/api/layer/pointlayer"},{"path":"/zh/docs/api/layer/linelayer"},{"path":"/en/docs/api/layer/polygonlayer"},{"path":"/zh/docs/api/layer/polygonlayer"},{"path":"/en/docs/api/component/control"},{"path":"/zh/docs/api/component/control"},{"path":"/en/docs/api/component/marker"},{"path":"/zh/docs/api/component/marker"},{"path":"/zh/docs/api/component/popup"},{"path":"/en/docs/api/component/popup"},{"path":"/zh/examples/polygon/fill"},{"path":"/en/examples/polygon/fill"},{"path":"/zh/examples/polygon/3d"},{"path":"/en/examples/polygon/3d"},{"path":"/en/examples/raster/basic"},{"path":"/zh/examples/raster/basic"},{"path":"/zh/examples/point/scatter"},{"path":"/en/examples/point/scatter"},{"path":"/zh/examples/point/marker"},{"path":"/en/examples/point/marker"},{"path":"/en/examples/line/path"},{"path":"/zh/examples/line/path"},{"path":"/en/examples/line/isoline"},{"path":"/zh/examples/line/isoline"},{"path":"/zh/examples/line/arc"},{"path":"/en/examples/line/arc"},{"path":"/en/examples/point/image"},{"path":"/zh/examples/point/column"},{"path":"/zh/examples/point/image"},{"path":"/en/examples/point/column"},{"path":"/en/examples/heatmap/heatmap"},{"path":"/zh/examples/heatmap/hexagon"},{"path":"/en/examples/heatmap/hexagon"},{"path":"/zh/examples/heatmap/heatmap"},{"path":"/zh/examples/point/chart"},{"path":"/en/examples/heatmap/grid"},{"path":"/en/examples/point/chart"},{"path":"/zh/examples/heatmap/grid"},{"path":"/en/examples/point/bubble"},{"path":"/zh/examples/point/bubble"},{"path":"/zh/examples/gallery/basic"},{"path":"/en/examples/gallery/basic"},{"path":"/dev-404-page"},{"path":"/"},{"path":"/404.html"},{"path":"/404"},{"path":"/en"},{"path":"/zh"}]}},"pageContext":{"isCreatedByStatefulCreatePages":true}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/component/control/page-data.json b/public/page-data/en/docs/api/component/control/page-data.json deleted file mode 100644 index f522f80e21..0000000000 --- a/public/page-data/en/docs/api/component/control/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/component/control","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","tableOfContents":"","fields":{"slug":"/en/docs/api/component/control","readingTime":{"text":"2 min read","time":60899.99999999999}},"frontmatter":{"title":"Control"},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3},"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

"}},"next":{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3},"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/component/marker/page-data.json b/public/page-data/en/docs/api/component/marker/page-data.json deleted file mode 100644 index 3c48812489..0000000000 --- a/public/page-data/en/docs/api/component/marker/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/component/marker","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","tableOfContents":"","fields":{"slug":"/en/docs/api/component/marker","readingTime":{"text":"1 min read","time":42300}},"frontmatter":{"title":"Marker"},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1},"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

"}},"next":{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4},"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/component/popup/page-data.json b/public/page-data/en/docs/api/component/popup/page-data.json deleted file mode 100644 index 40bc937b3d..0000000000 --- a/public/page-data/en/docs/api/component/popup/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/component/popup","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","tableOfContents":"","fields":{"slug":"/en/docs/api/component/popup","readingTime":{"text":"1 min read","time":33000}},"frontmatter":{"title":"Popup"},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3},"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/l7/page-data.json b/public/page-data/en/docs/api/l7/page-data.json deleted file mode 100644 index 84a1fb8433..0000000000 --- a/public/page-data/en/docs/api/l7/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/l7","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","tableOfContents":"","fields":{"slug":"/en/docs/api/l7","readingTime":{"text":"1 min read","time":39600}},"frontmatter":{"title":"Introduction"},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"next":{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1},"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/layer/heatmap/page-data.json b/public/page-data/en/docs/api/layer/heatmap/page-data.json deleted file mode 100644 index f3baefc13e..0000000000 --- a/public/page-data/en/docs/api/layer/heatmap/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/layer/heatmap","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","tableOfContents":"","fields":{"slug":"/en/docs/api/layer/heatmap","readingTime":{"text":"2 min read","time":94500}},"frontmatter":{"title":"HeatmapLayer"},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1},"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

"}},"next":{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0},"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/layer/imagelayer/page-data.json b/public/page-data/en/docs/api/layer/imagelayer/page-data.json deleted file mode 100644 index 954fad0cad..0000000000 --- a/public/page-data/en/docs/api/layer/imagelayer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/layer/imagelayer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","tableOfContents":"","fields":{"slug":"/en/docs/api/layer/imagelayer","readingTime":{"text":"1 min read","time":9300}},"frontmatter":{"title":"ImageLayer"},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0},"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
"}},"next":{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2},"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/layer/layer/page-data.json b/public/page-data/en/docs/api/layer/layer/page-data.json deleted file mode 100644 index 88d7ddf77d..0000000000 --- a/public/page-data/en/docs/api/layer/layer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/layer/layer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","tableOfContents":"","fields":{"slug":"/en/docs/api/layer/layer","readingTime":{"text":"3 min read","time":158400}},"frontmatter":{"title":"Map Layer"},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0},"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
"}},"next":{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5},"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/layer/linelayer/page-data.json b/public/page-data/en/docs/api/layer/linelayer/page-data.json deleted file mode 100644 index a310f06f6c..0000000000 --- a/public/page-data/en/docs/api/layer/linelayer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/layer/linelayer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","tableOfContents":"","fields":{"slug":"/en/docs/api/layer/linelayer","readingTime":{"text":"1 min read","time":30600}},"frontmatter":{"title":"LineLayer"},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5},"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
"}},"next":{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1},"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/layer/pointlayer/page-data.json b/public/page-data/en/docs/api/layer/pointlayer/page-data.json deleted file mode 100644 index 0301e62538..0000000000 --- a/public/page-data/en/docs/api/layer/pointlayer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/layer/pointlayer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","tableOfContents":"","fields":{"slug":"/en/docs/api/layer/pointlayer","readingTime":{"text":"1 min read","time":26100}},"frontmatter":{"title":"PointLayer"},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2},"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
"}},"next":{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3},"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/layer/polygonlayer/page-data.json b/public/page-data/en/docs/api/layer/polygonlayer/page-data.json deleted file mode 100644 index 3dae6dad18..0000000000 --- a/public/page-data/en/docs/api/layer/polygonlayer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/layer/polygonlayer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","tableOfContents":"","fields":{"slug":"/en/docs/api/layer/polygonlayer","readingTime":{"text":"1 min read","time":11400}},"frontmatter":{"title":"PolygonLayer"},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1},"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
"}},"next":{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1},"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/scene/page-data.json b/public/page-data/en/docs/api/scene/page-data.json deleted file mode 100644 index 20606e4f22..0000000000 --- a/public/page-data/en/docs/api/scene/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/scene","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","tableOfContents":"","fields":{"slug":"/en/docs/api/scene","readingTime":{"text":"2 min read","time":119100.00000000001}},"frontmatter":{"title":"Scene"},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0},"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

"}},"next":{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1},"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/source/geojson/page-data.json b/public/page-data/en/docs/api/source/geojson/page-data.json deleted file mode 100644 index 26416e6414..0000000000 --- a/public/page-data/en/docs/api/source/geojson/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/source/geojson","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","tableOfContents":"","fields":{"slug":"/en/docs/api/source/geojson","readingTime":{"text":"1 min read","time":6300}},"frontmatter":{"title":"geojson"},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1},"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
"}},"next":{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5},"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/api/source/source/page-data.json b/public/page-data/en/docs/api/source/source/page-data.json deleted file mode 100644 index 8f45a65aa3..0000000000 --- a/public/page-data/en/docs/api/source/source/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/source/source","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","tableOfContents":"","fields":{"slug":"/en/docs/api/source/source","readingTime":{"text":"2 min read","time":108000}},"frontmatter":{"title":"Source"},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5},"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
"}},"next":{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0},"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/manual/tutorial/data/page-data.json b/public/page-data/en/docs/manual/tutorial/data/page-data.json deleted file mode 100644 index 89f2557b29..0000000000 --- a/public/page-data/en/docs/manual/tutorial/data/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/manual/tutorial/data","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","tableOfContents":"","fields":{"slug":"/en/docs/manual/tutorial/data","readingTime":{"text":"1 min read","time":21299.999999999996}},"frontmatter":{"title":"data"},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"next":{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0},"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/manual/tutorial/quickstart/page-data.json b/public/page-data/en/docs/manual/tutorial/quickstart/page-data.json deleted file mode 100644 index 30b65bc370..0000000000 --- a/public/page-data/en/docs/manual/tutorial/quickstart/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/manual/tutorial/quickstart","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","tableOfContents":"","fields":{"slug":"/en/docs/manual/tutorial/quickstart","readingTime":{"text":"2 min read","time":98100}},"frontmatter":{"title":"QuickStart"},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1},"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/tutorial/data/page-data.json b/public/page-data/en/docs/tutorial/data/page-data.json deleted file mode 100644 index c39a3e3fd3..0000000000 --- a/public/page-data/en/docs/tutorial/data/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/tutorial/data","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","tableOfContents":"","fields":{"slug":"/en/docs/tutorial/data","readingTime":{"text":"1 min read","time":21299.999999999996}},"frontmatter":{"title":"data"},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"next":{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0},"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

"}}}}} \ No newline at end of file diff --git a/public/page-data/en/docs/tutorial/quickstart/page-data.json b/public/page-data/en/docs/tutorial/quickstart/page-data.json deleted file mode 100644 index 3d74b61608..0000000000 --- a/public/page-data/en/docs/tutorial/quickstart/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/tutorial/quickstart","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","tableOfContents":"","fields":{"slug":"/en/docs/tutorial/quickstart","readingTime":{"text":"2 min read","time":98100}},"frontmatter":{"title":"QuickStart"},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1},"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

"}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/gallery/basic/page-data.json b/public/page-data/en/examples/gallery/basic/page-data.json deleted file mode 100644 index c39a383d80..0000000000 --- a/public/page-data/en/examples/gallery/basic/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/gallery/basic","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"gallery/basic/demo/column_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/column_dark.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 35.210526315789465,\n type: 'amap',\n style: 'dark',\n center: [ 104.288144, 31.239692 ],\n zoom: 4.4\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n })\n .shape('cylinder')\n .size('t', function(level) {\n return [ 1, 2, level * 2 + 20 ];\n })\n .color('t', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ])\n .style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.column_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 35.210526315789465,\n type: 'amap',\n style: 'dark',\n center: [104.288144, 31.239692],\n zoom: 4.4\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n }).shape('cylinder').size('t', function (level) {\n return [1, 2, level * 2 + 20];\n }).color('t', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6']).style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":0,"filename":"column_dark.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7COqR4wCc6QAAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/arcCircle.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/arcCircle.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 107.77791556935472, 35.443286920228644 ],\n zoom: 2.9142882493605033\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')\n .then(res => res.text())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n })\n .size(1)\n .shape('arc')\n .color('#8C1EB2')\n .style({\n opacity: 0.8,\n blur: 0.99\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.arcCircle = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [107.77791556935472, 35.443286920228644],\n zoom: 2.9142882493605033\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n }).size(1).shape('arc').color('#8C1EB2').style({\n opacity: 0.8,\n blur: 0.99\n });\n scene.addLayer(layer);\n });\n});","order":1,"filename":"arcCircle.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/bus_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/bus_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 103.83735604457024, 1.360253881403068 ],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'dark'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n coordinates: 'path',\n type: 'json'\n }\n })\n .size('level', level => {\n return [ 1.0, level * 1 ];\n })\n .shape('line')\n .color(\n 'level',\n [\n '#312B60',\n '#4A457E',\n '#615C99',\n '#816CAD',\n '#A67FB5',\n '#C997C7',\n '#DEB8D4',\n '#F5D4E6',\n '#FAE4F1',\n '#FFF3FC'\n ].slice(0, 8)\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.bus_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [103.83735604457024, 1.360253881403068],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'dark'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n coordinates: 'path',\n type: 'json'\n }\n }).size('level', function (level) {\n return [1.0, level * 1];\n }).shape('line').color('level', ['#312B60', '#4A457E', '#615C99', '#816CAD', '#A67FB5', '#C997C7', '#DEB8D4', '#F5D4E6', '#FAE4F1', '#FFF3FC'].slice(0, 8));\n scene.addLayer(layer);\n });\n});","order":2,"filename":"bus_dark.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j-P8RaJMEvAAAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/light.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 43,\n center: [ 120.13383079335335, 29.651873105004427 ],\n zoom: 7.068989519212174,\n type: 'mapbox'\n});\n\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'hexagon',\n size: 2500,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('sum', sum => {\n return sum * 200;\n })\n .shape('hexagonColumn')\n .style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n })\n .color('sum', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#C3F9CC',\n '#DEFAC0',\n '#ECFFB1'\n ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 43,\n center: [120.13383079335335, 29.651873105004427],\n zoom: 7.068989519212174,\n type: 'mapbox'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'hexagon',\n size: 2500,\n field: 'v',\n method: 'sum'\n }]\n }).size('sum', function (sum) {\n return sum * 200;\n }).shape('hexagonColumn').style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n }).color('sum', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#C3F9CC', '#DEFAC0', '#ECFFB1']);\n scene.addLayer(layer);\n });\n});","order":3,"filename":"light.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/point.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/point.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 64.88,\n type: 'amap',\n style: 'dark',\n center: [ 114.060288, 22.53684 ],\n zoom: 15.63\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data)\n .size(2)\n .color('h8', [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ])\n .style({\n opacity: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.point = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 64.88,\n type: 'amap',\n style: 'dark',\n center: [114.060288, 22.53684],\n zoom: 15.63\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data).size(2).color('h8', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0']).style({\n opacity: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":4,"filename":"point.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/normal.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/normal.js","source":"import { Scene, PointLayer } from '@antv/l7';\n\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [ 121.417463, 31.215175 ],\n pitch: 0,\n zoom: 11\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')\n .then(res => res.text())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n y: 'lat',\n x: 'lng'\n }\n })\n .size(0.5)\n .color('#080298')\n .style({\n opacity: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.normal = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [121.417463, 31.215175],\n pitch: 0,\n zoom: 11\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'csv',\n y: 'lat',\n x: 'lng'\n }\n }).size(0.5).color('#080298').style({\n opacity: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":5,"filename":"normal.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"}]},"next":{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/heatmap/grid/page-data.json b/public/page-data/en/examples/heatmap/grid/page-data.json deleted file mode 100644 index 4d80bf3595..0000000000 --- a/public/page-data/en/examples/heatmap/grid/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/heatmap/grid","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"heatmap/grid/demo/china.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/grid/demo/china.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [ 107.054293, 35.246265 ],\n zoom: 4.056,\n type: 'amap'\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'grid',\n size: 20000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('count', value => {\n return value * 0;\n })\n .shape('square')\n .style({\n coverage: 1,\n angle: 0\n })\n .color(\n 'count',\n [\n '#0B0030',\n '#100243',\n '#100243',\n '#1B048B',\n '#051FB7',\n '#0350C1',\n '#0350C1',\n '#0072C4',\n '#0796D3',\n '#2BA9DF',\n '#30C7C4',\n '#6BD5A0',\n '#A7ECB2',\n '#D0F4CA'\n ].reverse()\n );\n\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.china = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [107.054293, 35.246265],\n zoom: 4.056,\n type: 'amap'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'grid',\n size: 20000,\n field: 'v',\n method: 'sum'\n }]\n }).size('count', function (value) {\n return value * 0;\n }).shape('square').style({\n coverage: 1,\n angle: 0\n }).color('count', ['#0B0030', '#100243', '#100243', '#1B048B', '#051FB7', '#0350C1', '#0350C1', '#0072C4', '#0796D3', '#2BA9DF', '#30C7C4', '#6BD5A0', '#A7ECB2', '#D0F4CA'].reverse());\n scene.addLayer(layer);\n });\n});","order":0,"filename":"china.js","title":"网格热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*XPBuSIPPgsgAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/grid/demo/grid1.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/grid/demo/grid1.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [ 110.097892, 33.853662 ],\n zoom: 4.056,\n type: 'amap'\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'grid',\n size: 10000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('count', value => {\n return value * 0;\n })\n .shape('square')\n .style({\n coverage: 1,\n angle: 0\n })\n .color(\n 'count',\n [\n '#FF4818',\n '#F7B74A',\n '#FFF598',\n '#FF40F3',\n '#9415FF',\n '#421EB2'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.grid1 = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [110.097892, 33.853662],\n zoom: 4.056,\n type: 'amap'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'grid',\n size: 10000,\n field: 'v',\n method: 'sum'\n }]\n }).size('count', function (value) {\n return value * 0;\n }).shape('square').style({\n coverage: 1,\n angle: 0\n }).color('count', ['#FF4818', '#F7B74A', '#FFF598', '#FF40F3', '#9415FF', '#421EB2'].reverse());\n scene.addLayer(layer);\n });\n});","order":1,"filename":"grid1.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Uo9oQolgoxYAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/grid/demo/heatmap3.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/grid/demo/heatmap3.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [ 110.097892, 33.853662 ],\n zoom: 4.056,\n type: 'amap'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'grid',\n size: 20000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('count', value => {\n return value * 0;\n })\n .shape('circle')\n .style({\n coverage: 0.9,\n angle: 0\n })\n .color(\n 'count',\n [\n '#8C1EB2',\n '#8C1EB2',\n '#DA05AA',\n '#F0051A',\n '#FF2A3C',\n '#FF4818',\n '#FF4818',\n '#FF8B18',\n '#F77B00',\n '#ED9909',\n '#ECC357',\n '#EDE59C'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.heatmap3 = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [110.097892, 33.853662],\n zoom: 4.056,\n type: 'amap'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'grid',\n size: 20000,\n field: 'v',\n method: 'sum'\n }]\n }).size('count', function (value) {\n return value * 0;\n }).shape('circle').style({\n coverage: 0.9,\n angle: 0\n }).color('count', ['#8C1EB2', '#8C1EB2', '#DA05AA', '#F0051A', '#FF2A3C', '#FF4818', '#FF4818', '#FF8B18', '#F77B00', '#ED9909', '#ECC357', '#EDE59C'].reverse());\n scene.addLayer(layer);\n });\n});","order":2,"filename":"heatmap3.js","title":"网格布局 圆形","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Ucz6SJ5wU_0AAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/grid/demo/world.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/grid/demo/world.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [ 110.097892, 33.853662 ],\n zoom: 4.056,\n type: 'amap'\n});\n\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'grid',\n size: 10000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('count', value => {\n return value * 0;\n })\n .shape('square')\n .style({\n coverage: 1,\n angle: 0\n })\n .color(\n 'count',\n [\n '#FF3417',\n '#FF7412',\n '#FFB02A',\n '#FFE754',\n '#46F3FF',\n '#02BEFF',\n '#1A7AFF',\n '#0A1FB2'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.world = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [110.097892, 33.853662],\n zoom: 4.056,\n type: 'amap'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'grid',\n size: 10000,\n field: 'v',\n method: 'sum'\n }]\n }).size('count', function (value) {\n return value * 0;\n }).shape('square').style({\n coverage: 1,\n angle: 0\n }).color('count', ['#FF3417', '#FF7412', '#FFB02A', '#FFE754', '#46F3FF', '#02BEFF', '#1A7AFF', '#0A1FB2'].reverse());\n scene.addLayer(layer);\n });\n});","order":3,"filename":"world.js","title":"网格热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f1IDQ7AG-00AAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/heatmap/heatmap/page-data.json b/public/page-data/en/examples/heatmap/heatmap/page-data.json deleted file mode 100644 index 6d62e8e8b0..0000000000 --- a/public/page-data/en/examples/heatmap/heatmap/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/heatmap/heatmap","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"heatmap/heatmap/demo/heatmap.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/heatmap/demo/heatmap.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [ 127.5671666579043, 7.445038892195569 ],\n type: 'mapbox',\n zoom: 2.632456779444394\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data)\n .shape('heatmap')\n .size('mag', [ 0, 1.0 ]) // weight映射通道\n .style({\n intensity: 2,\n radius: 20,\n opacity: 1.0,\n rampColors: {\n colors: [\n '#FF4818',\n '#F7B74A',\n '#FFF598',\n '#91EABC',\n '#2EA9A1',\n '#206C7C'\n ].reverse(),\n positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]\n }\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.heatmap = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [127.5671666579043, 7.445038892195569],\n type: 'mapbox',\n zoom: 2.632456779444394\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data).shape('heatmap').size('mag', [0, 1.0]) // weight映射通道\n .style({\n intensity: 2,\n radius: 20,\n opacity: 1.0,\n rampColors: {\n colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'].reverse(),\n positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]\n }\n });\n scene.addLayer(layer);\n });\n});","order":0,"filename":"heatmap.js","title":"经典热力图2D","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*QstiQq4JBOIAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/heatmap/demo/heatmap_purple.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/heatmap/demo/heatmap_purple.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [ 127.5671666579043, 7.445038892195569 ],\n type: 'mapbox',\n zoom: 2.632456779444394\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data)\n .shape('heatmap')\n .size('mag', [ 0, 1.0 ]) // weight映射通道\n .style({\n intensity: 2,\n radius: 20,\n opacity: 1.0,\n rampColors: {\n colors: [\n '#FF4818',\n '#F7B74A',\n '#FFF598',\n '#F27DEB',\n '#8C1EB2',\n '#421EB2'\n ].reverse(),\n positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]\n }\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.heatmap_purple = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [127.5671666579043, 7.445038892195569],\n type: 'mapbox',\n zoom: 2.632456779444394\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data).shape('heatmap').size('mag', [0, 1.0]) // weight映射通道\n .style({\n intensity: 2,\n radius: 20,\n opacity: 1.0,\n rampColors: {\n colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'].reverse(),\n positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]\n }\n });\n scene.addLayer(layer);\n });\n});","order":1,"filename":"heatmap_purple.js","title":"经典热力图2D","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*GD2bR7pb-yIAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/heatmap/demo/heatmap3d.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/heatmap/demo/heatmap3d.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 58.5,\n center: [ 111.8759, 30.6942 ],\n rotation: 0.519,\n type: 'mapbox',\n zoom: 3.6116\n});\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data)\n .size('capacity', [ 0, 1 ])\n .shape('heatmap3D')\n // weight映射通道\n .style({\n intensity: 10,\n radius: 5,\n opacity: 1.0,\n rampColors: {\n colors: [\n '#2E8AE6',\n '#69D1AB',\n '#DAF291',\n '#FFD591',\n '#FF7A45',\n '#CF1D49'\n ],\n positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]\n }\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.heatmap3d = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 58.5,\n center: [111.8759, 30.6942],\n rotation: 0.519,\n type: 'mapbox',\n zoom: 3.6116\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data).size('capacity', [0, 1]).shape('heatmap3D') // weight映射通道\n .style({\n intensity: 10,\n radius: 5,\n opacity: 1.0,\n rampColors: {\n colors: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],\n positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]\n }\n });\n scene.addLayer(layer);\n });\n});","order":2,"filename":"heatmap3d.js","title":"经典热力图3D","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmhzTqrHpR4AAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/heatmap/hexagon/page-data.json b/public/page-data/en/examples/heatmap/hexagon/page-data.json deleted file mode 100644 index b7512c9447..0000000000 --- a/public/page-data/en/examples/heatmap/hexagon/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/heatmap/hexagon","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"heatmap/hexagon/demo/china.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/hexagon/demo/china.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 47.49999999999995,\n center: [ 112.50447776627743, 30.830476390931125 ],\n zoom: 3.9879693680088626,\n type: 'mapbox'\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'hexagon',\n size: 17000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('sum', value => {\n return value * 20;\n })\n .shape('hexagonColumn')\n .color(\n 'count',\n [\n '#FF4818',\n '#F7B74A',\n '#FFF598',\n '#FF40F3',\n '#9415FF',\n '#421EB2'\n ].reverse()\n )\n .style({\n coverage: 0.9,\n angle: 0\n });\n\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.china = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 47.49999999999995,\n center: [112.50447776627743, 30.830476390931125],\n zoom: 3.9879693680088626,\n type: 'mapbox'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'hexagon',\n size: 17000,\n field: 'v',\n method: 'sum'\n }]\n }).size('sum', function (value) {\n return value * 20;\n }).shape('hexagonColumn').color('count', ['#FF4818', '#F7B74A', '#FFF598', '#FF40F3', '#9415FF', '#421EB2'].reverse()).style({\n coverage: 0.9,\n angle: 0\n });\n scene.addLayer(layer);\n });\n});","order":0,"filename":"china.js","title":"蜂窝热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*hLVeSqPl9asAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/hexagon/demo/light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/hexagon/demo/light.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 43,\n center: [ 120.13383079335335, 29.651873105004427 ],\n zoom: 7.068989519212174,\n type: 'mapbox'\n});\n\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'hexagon',\n size: 2500,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('sum', sum => {\n return sum * 200;\n })\n .shape('hexagonColumn')\n .style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n })\n .color('sum', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#C3F9CC',\n '#DEFAC0',\n '#ECFFB1'\n ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 43,\n center: [120.13383079335335, 29.651873105004427],\n zoom: 7.068989519212174,\n type: 'mapbox'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'hexagon',\n size: 2500,\n field: 'v',\n method: 'sum'\n }]\n }).size('sum', function (sum) {\n return sum * 200;\n }).shape('hexagonColumn').style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n }).color('sum', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#C3F9CC', '#DEFAC0', '#ECFFB1']);\n scene.addLayer(layer);\n });\n});","order":1,"filename":"light.js","title":"蜂窝热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/hexagon/demo/hexagon.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/hexagon/demo/hexagon.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'light',\n pitch: 56.499,\n center: [ 114.07737552216226, 22.542656745583486 ],\n rotation: 39.19,\n zoom: 12.47985,\n type: 'mapbox'\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n transforms: [\n {\n type: 'hexagon',\n size: 100,\n field: 'h12',\n method: 'sum'\n }\n ]\n })\n .size('sum', [ 0, 600 ])\n .shape('hexagonColumn')\n .style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n })\n .color(\n 'sum',\n [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.hexagon = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'light',\n pitch: 56.499,\n center: [114.07737552216226, 22.542656745583486],\n rotation: 39.19,\n zoom: 12.47985,\n type: 'mapbox'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n transforms: [{\n type: 'hexagon',\n size: 100,\n field: 'h12',\n method: 'sum'\n }]\n }).size('sum', [0, 600]).shape('hexagonColumn').style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n }).color('sum', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6'].reverse());\n scene.addLayer(layer);\n });\n});","order":2,"filename":"hexagon.js","title":"蜂窝热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JBibTKlhhWQAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/hexagon/demo/world.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/hexagon/demo/world.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [ 104.995156, 31.450658 ],\n type: 'amap',\n zoom: 3.79\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n transforms: [\n {\n type: 'hexagon',\n size: 90000,\n field: 'capacity',\n method: 'sum'\n }\n ]\n })\n .size('sum', value => {\n return value * 50;\n })\n .shape('hexagon')\n .style({\n coverage: 0.9,\n angle: 0,\n opacity: 1.0\n })\n .color(\n 'sum',\n [\n '#3F4BBA',\n '#3F4BBA',\n '#3F4BBA',\n '#3F4BBA',\n '#3C73DA',\n '#3C73DA',\n '#3C73DA',\n '#0F62FF',\n '#0F62FF',\n '#30B2E9',\n '#30B2E9',\n '#40C4CE'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.world = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [104.995156, 31.450658],\n type: 'amap',\n zoom: 3.79\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n transforms: [{\n type: 'hexagon',\n size: 90000,\n field: 'capacity',\n method: 'sum'\n }]\n }).size('sum', function (value) {\n return value * 50;\n }).shape('hexagon').style({\n coverage: 0.9,\n angle: 0,\n opacity: 1.0\n }).color('sum', ['#3F4BBA', '#3F4BBA', '#3F4BBA', '#3F4BBA', '#3C73DA', '#3C73DA', '#3C73DA', '#0F62FF', '#0F62FF', '#30B2E9', '#30B2E9', '#40C4CE'].reverse());\n scene.addLayer(layer);\n });\n});","order":3,"filename":"world.js","title":"蜂窝热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0uVgSoxXP-cAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/line/arc/page-data.json b/public/page-data/en/examples/line/arc/page-data.json deleted file mode 100644 index 34a2b38730..0000000000 --- a/public/page-data/en/examples/line/arc/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/line/arc","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"line/arc/demo/arcCircle.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/arc/demo/arcCircle.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 107.77791556935472, 35.443286920228644 ],\n zoom: 2.9142882493605033\n});\nfetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')\n .then(res => res.text())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n })\n .size(1)\n .shape('greatcircle')\n .color('#8C1EB2')\n .style({\n opacity: 0.8,\n blur: 0.99\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.arcCircle = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [107.77791556935472, 35.443286920228644],\n zoom: 2.9142882493605033\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n }).size(1).shape('greatcircle').color('#8C1EB2').style({\n opacity: 0.8,\n blur: 0.99\n });\n scene.addLayer(layer);\n });\n});","order":0,"filename":"arcCircle.js","title":"大圆弧线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"},{"relativePath":"line/arc/demo/arc.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/arc/demo/arc.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 0, 23.107329 ],\n zoom: 0\n});\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json'\n)\n .then(res => res.json())\n .then(data => {\n function getAirportCoord(idx) {\n return [ data.airports[idx][3], data.airports[idx][4] ];\n }\n const routes = data.routes.map(function(airline) {\n return {\n coord: [ getAirportCoord(airline[1]), getAirportCoord(airline[2]) ]\n };\n });\n const layer = new LineLayer({})\n .source(routes, {\n parser: {\n type: 'json',\n coordinates: 'coord'\n }\n })\n .size(0.6)\n .shape('arc')\n .color('rgb(5, 5, 50)')\n .style({\n opacity: 0.05\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.arc = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [0, 23.107329],\n zoom: 0\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n function getAirportCoord(idx) {\n return [data.airports[idx][3], data.airports[idx][4]];\n }\n\n var routes = data.routes.map(function (airline) {\n return {\n coord: [getAirportCoord(airline[1]), getAirportCoord(airline[2])]\n };\n });\n var layer = new _l.LineLayer({}).source(routes, {\n parser: {\n type: 'json',\n coordinates: 'coord'\n }\n }).size(0.6).shape('arc').color('rgb(5, 5, 50)').style({\n opacity: 0.05\n });\n scene.addLayer(layer);\n });\n});","order":1,"filename":"arc.js","title":"弧线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ue-SRJEKUqwAAAAAAAAAAABkARQnAQ"},{"relativePath":"line/arc/demo/trip_arc_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/arc/demo/trip_arc_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'dark',\n center: [ 104.34278, 41.12554 ],\n zoom: 2.94888,\n rotation: 42.3999\n});\n\nfetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')\n .then(res => res.text())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n })\n .size(1)\n .shape('arc3d')\n .color('#FF7C6A')\n .style({\n opacity: 0.8\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.trip_arc_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'dark',\n center: [104.34278, 41.12554],\n zoom: 2.94888,\n rotation: 42.3999\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n }).size(1).shape('arc3d').color('#FF7C6A').style({\n opacity: 0.8\n });\n scene.addLayer(layer);\n });\n});","order":2,"filename":"trip_arc_dark.js","title":"3D 弧线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ"},{"relativePath":"line/arc/demo/trip_arc.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/arc/demo/trip_arc.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'light',\n center: [ -74.06967, 40.720399 ],\n zoom: 12.45977\n});\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'start station longitude',\n y: 'start station latitude',\n x1: 'end station longitude',\n y1: 'end station latitude'\n }\n })\n .size(1)\n .shape('arc3d')\n .color('#0C47BF')\n .style({\n opacity: 1,\n blur: 0.9\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.trip_arc = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'light',\n center: [-74.06967, 40.720399],\n zoom: 12.45977\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'start station longitude',\n y: 'start station latitude',\n x1: 'end station longitude',\n y1: 'end station latitude'\n }\n }).size(1).shape('arc3d').color('#0C47BF').style({\n opacity: 1,\n blur: 0.9\n });\n scene.addLayer(layer);\n });\n});","order":3,"filename":"trip_arc.js","title":"3D 弧线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/line/isoline/page-data.json b/public/page-data/en/examples/line/isoline/page-data.json deleted file mode 100644 index 7ec25f676a..0000000000 --- a/public/page-data/en/examples/line/isoline/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/line/isoline","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"line/isoline/demo/ele.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/isoline/demo/ele.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 53.6305,\n type: 'amap',\n style: 'light',\n center: [ 102.600579, 23.114887 ],\n zoom: 14.66\n});\n\nfetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .size('ELEV', h => {\n return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];\n })\n .shape('line')\n .scale('ELEV', {\n type: 'quantize'\n })\n .color(\n 'ELEV',\n [\n '#E4682F',\n '#FF8752',\n '#FFA783',\n '#FFBEA8',\n '#FFDCD6',\n '#EEF3FF',\n '#C8D7F5',\n '#A5C1FC',\n '#7FA7F9',\n '#5F8AE5'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.ele = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 53.6305,\n type: 'amap',\n style: 'light',\n center: [102.600579, 23.114887],\n zoom: 14.66\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).size('ELEV', function (h) {\n return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];\n }).shape('line').scale('ELEV', {\n type: 'quantize'\n }).color('ELEV', ['#E4682F', '#FF8752', '#FFA783', '#FFBEA8', '#FFDCD6', '#EEF3FF', '#C8D7F5', '#A5C1FC', '#7FA7F9', '#5F8AE5'].reverse());\n scene.addLayer(layer);\n });\n});","order":0,"filename":"ele.js","title":"等高线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*p6LsTp3M144AAAAAAAAAAABkARQnAQ"},{"relativePath":"line/isoline/demo/ele_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/isoline/demo/ele_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 26.842105263157915,\n type: 'amap',\n style: 'dark',\n center: [ 102.599436, 23.116371 ],\n zoom: 14.78\n});\n\nfetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .size('ELEV', h => {\n return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];\n })\n .shape('line')\n .scale('ELEV', {\n type: 'quantize'\n })\n .color('ELEV', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.ele_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 26.842105263157915,\n type: 'amap',\n style: 'dark',\n center: [102.599436, 23.116371],\n zoom: 14.78\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).size('ELEV', function (h) {\n return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];\n }).shape('line').scale('ELEV', {\n type: 'quantize'\n }).color('ELEV', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6']);\n scene.addLayer(layer);\n });\n});","order":1,"filename":"ele_dark.js","title":"等高线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jJd0Qq_E3_UAAAAAAAAAAABkARQnAQ"},{"relativePath":"line/isoline/demo/isoline.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/isoline/demo/isoline.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 104.117492, 36.492696 ],\n zoom: 3.89\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .scale('value', {\n type: 'quantile'\n })\n .size('value', [ 0.5, 1, 1.5, 2 ])\n .shape('line')\n .color(\n 'value',\n [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.isoline = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [104.117492, 36.492696],\n zoom: 3.89\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).scale('value', {\n type: 'quantile'\n }).size('value', [0.5, 1, 1.5, 2]).shape('line').color('value', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0'].reverse());\n scene.addLayer(layer);\n });\n});","order":2,"filename":"isoline.js","title":"等高线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RLvsSbS4PJMAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/line/path/page-data.json b/public/page-data/en/examples/line/path/page-data.json deleted file mode 100644 index 0a45a4016e..0000000000 --- a/public/page-data/en/examples/line/path/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/line/path","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"line/path/demo/bus_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/path/demo/bus_light.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 103.83735604457024, 1.360253881403068 ],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'light'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'json',\n coordinates: 'path'\n }\n })\n .size('level', level => {\n return [ 0.8, level * 1 ];\n })\n .shape('line')\n .color(\n 'level',\n [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ]\n .reverse()\n .slice(0, 8)\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.bus_light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [103.83735604457024, 1.360253881403068],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'light'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'json',\n coordinates: 'path'\n }\n }).size('level', function (level) {\n return [0.8, level * 1];\n }).shape('line').color('level', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0'].reverse().slice(0, 8));\n scene.addLayer(layer);\n });\n});","order":0,"filename":"bus_light.js","title":"公交线路","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YtfjQr5vRS4AAAAAAAAAAABkARQnAQ"},{"relativePath":"line/path/demo/bus_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/path/demo/bus_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 103.83735, 1.3602538 ],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'dark'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'json',\n coordinates: 'path'\n }\n })\n .size('level', level => {\n return [ 0.8, level * 1 ];\n })\n .shape('line')\n .color(\n 'level',\n [\n '#312B60',\n '#4A457E',\n '#615C99',\n '#816CAD',\n '#A67FB5',\n '#C997C7',\n '#DEB8D4',\n '#F5D4E6',\n '#FAE4F1',\n '#FFF3FC'\n ].slice(0, 8)\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.bus_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [103.83735, 1.3602538],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'dark'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'json',\n coordinates: 'path'\n }\n }).size('level', function (level) {\n return [0.8, level * 1];\n }).shape('line').color('level', ['#312B60', '#4A457E', '#615C99', '#816CAD', '#A67FB5', '#C997C7', '#DEB8D4', '#F5D4E6', '#FAE4F1', '#FFF3FC'].slice(0, 8));\n scene.addLayer(layer);\n });\n});","order":1,"filename":"bus_dark.js","title":"公交线路","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j-P8RaJMEvAAAAAAAAAAAABkARQnAQ"},{"relativePath":"line/path/demo/road_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/path/demo/road_light.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 116.3956, 39.9392 ],\n pitch: 0,\n zoom: 10,\n rotation: 0,\n type: 'mapbox',\n style: 'light'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .size(1.5)\n .shape('line')\n .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.road_light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [116.3956, 39.9392],\n pitch: 0,\n zoom: 10,\n rotation: 0,\n type: 'mapbox',\n style: 'light'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).size(1.5).shape('line').color('标准名称', ['#5B8FF9', '#5CCEA1', '#5D7092']);\n scene.addLayer(layer);\n });\n});","order":2,"filename":"road_light.js","title":"路径","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LuXiTZAq_84AAAAAAAAAAABkARQnAQ"},{"relativePath":"line/path/demo/road_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/path/demo/road_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 116.3956, 39.9392 ],\n pitch: 0,\n zoom: 10,\n rotation: 0,\n type: 'mapbox',\n style: 'dark'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .size(1.5)\n .shape('line')\n .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.road_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [116.3956, 39.9392],\n pitch: 0,\n zoom: 10,\n rotation: 0,\n type: 'mapbox',\n style: 'dark'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).size(1.5).shape('line').color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16']);\n scene.addLayer(layer);\n });\n});","order":3,"filename":"road_dark.js","title":"路径","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DDjQRLEnwpoAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/point/bubble/page-data.json b/public/page-data/en/examples/point/bubble/page-data.json deleted file mode 100644 index 5aac8b52c5..0000000000 --- a/public/page-data/en/examples/point/bubble/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/point/bubble","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/bubble/demo/point.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/bubble/demo/point.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 140.067171, 36.26186 ],\n zoom: 5.32,\n maxZoom: 10\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data)\n .shape('circle')\n .size('mag', [ 1, 25 ])\n .color('mag', mag => {\n return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';\n })\n .style({\n opacity: 0.3,\n strokeWidth: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.point = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [140.067171, 36.26186],\n zoom: 5.32,\n maxZoom: 10\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data).shape('circle').size('mag', [1, 25]).color('mag', function (mag) {\n return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';\n }).style({\n opacity: 0.3,\n strokeWidth: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":0,"filename":"point.js","title":"气泡图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fNGiS7YI1tIAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/bubble/demo/color.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/bubble/demo/color.js","source":"import { Scene, PointLayer } from '@antv/l7';\n\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 121.435159, 31.256971 ],\n zoom: 14.89,\n minZoom: 10\n});\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n })\n .shape('name', [\n 'circle',\n 'triangle',\n 'square',\n 'pentagon',\n 'hexagon',\n 'octogon',\n 'hexagram',\n 'rhombus',\n 'vesica'\n ])\n .size('unit_price', [ 10, 25 ])\n .color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])\n .style({\n opacity: 0.3,\n strokeWidth: 2\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.color = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [121.435159, 31.256971],\n zoom: 14.89,\n minZoom: 10\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n }).shape('name', ['circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica']).size('unit_price', [10, 25]).color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452']).style({\n opacity: 0.3,\n strokeWidth: 2\n });\n scene.addLayer(pointLayer);\n });\n});","order":1,"filename":"color.js","title":"形状映射","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iN0nTYRDd3AAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/bubble/demo/world.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/bubble/demo/world.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 96.99215001469588, 29.281597225674773 ],\n zoom: 2.194613775109773,\n maxZoom: 10\n});\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'\n)\n .then(res => res.json())\n .then(data => {\n data.features = data.features.filter(item => {\n return item.properties.capacity > 800;\n });\n const pointLayer = new PointLayer({})\n .source(data)\n .shape('circle')\n .size('capacity', [ 0, 16 ])\n .color('capacity', [\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ])\n .style({\n opacity: 0.5,\n strokeWidth: 0\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.world = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [96.99215001469588, 29.281597225674773],\n zoom: 2.194613775109773,\n maxZoom: 10\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n data.features = data.features.filter(function (item) {\n return item.properties.capacity > 800;\n });\n var pointLayer = new _l.PointLayer({}).source(data).shape('circle').size('capacity', [0, 16]).color('capacity', ['#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6']).style({\n opacity: 0.5,\n strokeWidth: 0\n });\n scene.addLayer(pointLayer);\n });\n});","order":2,"filename":"world.js","title":"气泡图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*v5j_QZEL-1YAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/bubble/demo/scatter.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/bubble/demo/scatter.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [ -121.24357, 37.58264 ],\n pitch: 0,\n zoom: 6.45\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'\n)\n .then(res => res.text())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'Longitude',\n y: 'Latitude'\n }\n })\n .shape('circle')\n .size(4)\n .color('Magnitude', [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ])\n .style({\n opacity: 0.5,\n strokeWidth: 0\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.scatter = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [-121.24357, 37.58264],\n pitch: 0,\n zoom: 6.45\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'Longitude',\n y: 'Latitude'\n }\n }).shape('circle').size(4).color('Magnitude', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0']).style({\n opacity: 0.5,\n strokeWidth: 0\n });\n scene.addLayer(pointLayer);\n });\n});","order":3,"filename":"scatter.js","title":"定点图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LnlmQ7sFWigAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/point/chart/page-data.json b/public/page-data/en/examples/point/chart/page-data.json deleted file mode 100644 index f0b65edf99..0000000000 --- a/public/page-data/en/examples/point/chart/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/point/chart","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/chart/demo/bar.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/chart/demo/bar.js","source":"import { Scene, Marker } from '@antv/l7';\nimport * as G2 from '@antv/g2';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [ 2.6125016864608597, 49.359131 ],\n pitch: 0,\n zoom: 4.19\n});\nscene.render();\nscene.on('loaded', () => {\n addChart();\n});\nfunction addChart() {\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'\n )\n .then(res => res.json())\n .then(data => {\n data.nodes.forEach(function(item) {\n const el = document.createElement('div');\n const total =\n item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;\n\n const size = Math.min(parseInt(total / 30000, 10), 70);\n if (size < 30) {\n return;\n }\n const itemData = [\n {\n item: 'Agriculture',\n count: item.gdp.Agriculture,\n percent: item.gdp.Agriculture / total\n },\n {\n item: 'Industry',\n count: item.gdp.Industry,\n percent: item.gdp.Industry / total\n },\n {\n item: 'Service',\n count: item.gdp.Service,\n percent: item.gdp.Service / total\n }\n ];\n\n const chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.legend(false);\n chart.source(itemData);\n chart.tooltip(false);\n chart.axis('count', {\n grid: false\n });\n chart\n .interval()\n .position('item*count')\n .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])\n .opacity(1);\n chart.render();\n new Marker({\n element: el\n })\n .setLnglat({\n lng: item.coordinates[0],\n lat: item.coordinates[1]\n })\n .addTo(scene);\n });\n });\n}\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\", \"@antv/g2\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"), require(\"@antv/g2\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7, global.g2);\n global.bar = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l, G2) {\n \"use strict\";\n\n G2 = _interopRequireWildcard(G2);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [2.6125016864608597, 49.359131],\n pitch: 0,\n zoom: 4.19\n });\n scene.render();\n scene.on('loaded', function () {\n addChart();\n });\n\n function addChart() {\n fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n data.nodes.forEach(function (item) {\n var el = document.createElement('div');\n var total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;\n var size = Math.min(parseInt(total / 30000, 10), 70);\n\n if (size < 30) {\n return;\n }\n\n var itemData = [{\n item: 'Agriculture',\n count: item.gdp.Agriculture,\n percent: item.gdp.Agriculture / total\n }, {\n item: 'Industry',\n count: item.gdp.Industry,\n percent: item.gdp.Industry / total\n }, {\n item: 'Service',\n count: item.gdp.Service,\n percent: item.gdp.Service / total\n }];\n var chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.legend(false);\n chart.source(itemData);\n chart.tooltip(false);\n chart.axis('count', {\n grid: false\n });\n chart.interval().position('item*count').color('item', ['#5CCEA1', '#5D7092', '#5B8FF9']).opacity(1);\n chart.render();\n new _l.Marker({\n element: el\n }).setLnglat({\n lng: item.coordinates[0],\n lat: item.coordinates[1]\n }).addTo(scene);\n });\n });\n }\n});","order":0,"filename":"bar.js","title":"柱图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6AR6Qq0Bq-MAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/chart/demo/chart.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/chart/demo/chart.js","source":"import { Scene, Marker } from '@antv/l7';\nimport * as G2 from '@antv/g2';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [ 2.6125016864608597, 49.359131 ],\n pitch: 0,\n zoom: 4.19\n});\nscene.render();\nscene.on('loaded', () => {\n addChart();\n});\nfunction addChart() {\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'\n )\n .then(res => res.json())\n .then(data => {\n data.nodes.forEach(function(item) {\n const el = document.createElement('div');\n const total =\n item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;\n\n const size = Math.min(parseInt(total / 30000, 10), 70);\n if (size < 30) {\n return;\n }\n const itemData = [\n {\n item: 'Agriculture',\n count: item.gdp.Agriculture,\n percent: item.gdp.Agriculture / total\n },\n {\n item: 'Industry',\n count: item.gdp.Industry,\n percent: item.gdp.Industry / total\n },\n {\n item: 'Service',\n count: item.gdp.Service,\n percent: item.gdp.Service / total\n }\n ];\n\n const sliceNumber = 0.02;\n\n // 自定义 other 的图形，增加两条线\n G2.Shape.registerShape('interval', 'sliceShape', {\n draw: function draw(cfg, container) {\n const points = cfg.points;\n let path = [];\n path.push([ 'M', points[0].x, points[0].y ]);\n path.push([ 'L', points[1].x, points[1].y - sliceNumber ]);\n path.push([ 'L', points[2].x, points[2].y - sliceNumber ]);\n path.push([ 'L', points[3].x, points[3].y ]);\n path.push('Z');\n path = this.parsePath(path);\n return container.addShape('path', {\n attrs: {\n fill: cfg.color,\n path\n }\n });\n }\n });\n\n const chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.legend(false);\n chart.source(itemData);\n chart.coord('theta', {\n innerRadius: 0.6\n });\n chart.tooltip(false);\n chart\n .intervalStack()\n .position('percent')\n .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])\n .shape('sliceShape');\n chart.render();\n new Marker({\n element: el\n })\n .setLnglat({\n lng: item.coordinates[0],\n lat: item.coordinates[1]\n })\n .addTo(scene);\n });\n });\n}\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\", \"@antv/g2\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"), require(\"@antv/g2\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7, global.g2);\n global.chart = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l, G2) {\n \"use strict\";\n\n G2 = _interopRequireWildcard(G2);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [2.6125016864608597, 49.359131],\n pitch: 0,\n zoom: 4.19\n });\n scene.render();\n scene.on('loaded', function () {\n addChart();\n });\n\n function addChart() {\n fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n data.nodes.forEach(function (item) {\n var el = document.createElement('div');\n var total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;\n var size = Math.min(parseInt(total / 30000, 10), 70);\n\n if (size < 30) {\n return;\n }\n\n var itemData = [{\n item: 'Agriculture',\n count: item.gdp.Agriculture,\n percent: item.gdp.Agriculture / total\n }, {\n item: 'Industry',\n count: item.gdp.Industry,\n percent: item.gdp.Industry / total\n }, {\n item: 'Service',\n count: item.gdp.Service,\n percent: item.gdp.Service / total\n }];\n var sliceNumber = 0.02; // 自定义 other 的图形，增加两条线\n\n G2.Shape.registerShape('interval', 'sliceShape', {\n draw: function draw(cfg, container) {\n var points = cfg.points;\n var path = [];\n path.push(['M', points[0].x, points[0].y]);\n path.push(['L', points[1].x, points[1].y - sliceNumber]);\n path.push(['L', points[2].x, points[2].y - sliceNumber]);\n path.push(['L', points[3].x, points[3].y]);\n path.push('Z');\n path = this.parsePath(path);\n return container.addShape('path', {\n attrs: {\n fill: cfg.color,\n path: path\n }\n });\n }\n });\n var chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.legend(false);\n chart.source(itemData);\n chart.coord('theta', {\n innerRadius: 0.6\n });\n chart.tooltip(false);\n chart.intervalStack().position('percent').color('item', ['#5CCEA1', '#5D7092', '#5B8FF9']).shape('sliceShape');\n chart.render();\n new _l.Marker({\n element: el\n }).setLnglat({\n lng: item.coordinates[0],\n lat: item.coordinates[1]\n }).addTo(scene);\n });\n });\n }\n});","order":1,"filename":"chart.js","title":"环图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*X06uT50Ll7QAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/chart/demo/ring.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/chart/demo/ring.js","source":"import { Scene, Marker } from '@antv/l7';\nimport * as G2 from '@antv/g2';\n\nconst CSS = `.l7-marker .g2-guide-html {\n width: 50px;\n height: 50px;\n vertical-align: middle;\n text-align: center;\n line-height: 0.1\n}\n\nl7-marker .g2-guide-html .title {\n font-size: 12px;\n color: #8c8c8c;\n font-weight: 300;\n}\n\nl7-marker .g2-guide-html .value {\n font-size: 18px;\n color: #000;\n font-weight: bold;\n}\n`;\nfunction loadCssCode(code) {\n const style = document.createElement('style');\n style.type = 'text/css';\n style.rel = 'stylesheet';\n // for Chrome Firefox Opera Safari\n style.appendChild(document.createTextNode(code));\n // for IE\n // style.styleSheet.cssText = code;\n const head = document.getElementsByTagName('head')[0];\n head.appendChild(style);\n}\nloadCssCode(CSS);\n\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 52.21496184144132, 24.121126851768906 ],\n zoom: 3.802\n});\nscene.render();\nscene.on('loaded', () => {\n Promise.all([\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'\n ).then(d => d.json()),\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'\n ).then(d => d.json())\n ]).then(function onLoad([ center, population ]) {\n const popobj = {};\n population.forEach(element => {\n popobj[element.Code] =\n element['Population, female (% of total) (% of total)'];\n });\n // 数据绑定\n\n center.features = center.features.map(fe => {\n fe.properties.female = popobj[fe.properties.id] * 1 || 0;\n return fe;\n });\n center.features.forEach(point => {\n const el = document.createElement('div');\n const coord = point.geometry.coordinates;\n const v = point.properties.female * 1;\n if (v < 1 || (v > 46 && v < 54)) { return; }\n const size = 60;\n const data = [\n {\n type: '男性',\n value: 100.0 - v.toFixed(2)\n },\n {\n type: '女性',\n value: v.toFixed(2) * 1\n }\n ];\n const chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.source(data);\n chart.legend(false);\n chart.tooltip(false);\n chart.coord('theta', {\n radius: 0.9,\n innerRadius: 0.6\n });\n chart\n .intervalStack()\n .position('value')\n .color('type', [ '#5CCEA1', '#5B8FF9' ])\n .opacity(1);\n chart.render();\n new Marker({ element: el })\n .setLnglat({\n lng: coord[0],\n lat: coord[1]\n })\n .addTo(scene);\n });\n });\n});\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\", \"@antv/g2\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"), require(\"@antv/g2\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7, global.g2);\n global.ring = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l, G2) {\n \"use strict\";\n\n G2 = _interopRequireWildcard(G2);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\n function _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\n function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\n function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n var CSS = \".l7-marker .g2-guide-html {\\n width: 50px;\\n height: 50px;\\n vertical-align: middle;\\n text-align: center;\\n line-height: 0.1\\n}\\n\\nl7-marker .g2-guide-html .title {\\n font-size: 12px;\\n color: #8c8c8c;\\n font-weight: 300;\\n}\\n\\nl7-marker .g2-guide-html .value {\\n font-size: 18px;\\n color: #000;\\n font-weight: bold;\\n}\\n\";\n\n function loadCssCode(code) {\n var style = document.createElement('style');\n style.type = 'text/css';\n style.rel = 'stylesheet'; // for Chrome Firefox Opera Safari\n\n style.appendChild(document.createTextNode(code)); // for IE\n // style.styleSheet.cssText = code;\n\n var head = document.getElementsByTagName('head')[0];\n head.appendChild(style);\n }\n\n loadCssCode(CSS);\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [52.21496184144132, 24.121126851768906],\n zoom: 3.802\n });\n scene.render();\n scene.on('loaded', function () {\n Promise.all([fetch('https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json').then(function (d) {\n return d.json();\n }), fetch('https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json').then(function (d) {\n return d.json();\n })]).then(function onLoad(_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n center = _ref2[0],\n population = _ref2[1];\n\n var popobj = {};\n population.forEach(function (element) {\n popobj[element.Code] = element['Population, female (% of total) (% of total)'];\n }); // 数据绑定\n\n center.features = center.features.map(function (fe) {\n fe.properties.female = popobj[fe.properties.id] * 1 || 0;\n return fe;\n });\n center.features.forEach(function (point) {\n var el = document.createElement('div');\n var coord = point.geometry.coordinates;\n var v = point.properties.female * 1;\n\n if (v < 1 || v > 46 && v < 54) {\n return;\n }\n\n var size = 60;\n var data = [{\n type: '男性',\n value: 100.0 - v.toFixed(2)\n }, {\n type: '女性',\n value: v.toFixed(2) * 1\n }];\n var chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.source(data);\n chart.legend(false);\n chart.tooltip(false);\n chart.coord('theta', {\n radius: 0.9,\n innerRadius: 0.6\n });\n chart.intervalStack().position('value').color('type', ['#5CCEA1', '#5B8FF9']).opacity(1);\n chart.render();\n new _l.Marker({\n element: el\n }).setLnglat({\n lng: coord[0],\n lat: coord[1]\n }).addTo(scene);\n });\n });\n });\n});","order":2,"filename":"ring.js","title":"环图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-oG0T64BnZoAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/point/column/page-data.json b/public/page-data/en/examples/point/column/page-data.json deleted file mode 100644 index 9ec158dd51..0000000000 --- a/public/page-data/en/examples/point/column/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/point/column","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/column/demo/column_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/column_light.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 48.62562,\n type: 'amap',\n style: 'light',\n center: [ 104.026043, 31.847 ],\n rotation: -0.76,\n zoom: 4.48\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n })\n .shape('cylinder')\n .size('t', function(level) {\n return [ 1, 2, level * 2 + 20 ];\n })\n .color('#006CFF')\n .style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.column_light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 48.62562,\n type: 'amap',\n style: 'light',\n center: [104.026043, 31.847],\n rotation: -0.76,\n zoom: 4.48\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n }).shape('cylinder').size('t', function (level) {\n return [1, 2, level * 2 + 20];\n }).color('#006CFF').style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":0,"filename":"column_light.js","title":"3D柱图_浅色底图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kjvTRLNtckIAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/column/demo/clumn_shape_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/clumn_shape_light.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'light',\n center: [ 121.412224, 31.26192438 ],\n zoom: 13.13438,\n rotation: 35.97133\n});\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n })\n .shape('name', [\n 'cylinder',\n 'triangleColumn',\n 'hexagonColumn',\n 'squareColumn'\n ])\n .size('unit_price', h => {\n return [ 6, 6, h / 500 ];\n })\n .color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])\n .style({\n opacity: 1.0\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.clumn_shape_light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'light',\n center: [121.412224, 31.26192438],\n zoom: 13.13438,\n rotation: 35.97133\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n }).shape('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn']).size('unit_price', function (h) {\n return [6, 6, h / 500];\n }).color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A']).style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":1,"filename":"clumn_shape_light.js","title":"3D 浅色柱图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RVw4QKTJe7kAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/column/demo/column_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/column_dark.js","source":"import { Scene, PointLayer } from '@antv/l7';\n\nconst scene = new Scene({\n id: 'map',\n pitch: 35.210526315789465,\n type: 'amap',\n style: 'dark',\n center: [ 104.288144, 31.239692 ],\n zoom: 4.4\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n })\n .shape('cylinder')\n .size('t', function(level) {\n return [ 1, 2, level * 2 + 20 ];\n })\n .color('t', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ])\n .style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.column_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 35.210526315789465,\n type: 'amap',\n style: 'dark',\n center: [104.288144, 31.239692],\n zoom: 4.4\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n }).shape('cylinder').size('t', function (level) {\n return [1, 2, level * 2 + 20];\n }).color('t', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6']).style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":2,"filename":"column_dark.js","title":"3D柱图_深色底图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7COqR4wCc6QAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/column/demo/clumn_shape.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/clumn_shape.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 66.02383,\n type: 'amap',\n style: 'dark',\n center: [ 121.400257, 31.25287 ],\n zoom: 14.55,\n rotation: 134.9507\n});\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n })\n .shape('name', [\n 'cylinder',\n 'triangleColumn',\n 'hexagonColumn',\n 'squareColumn'\n ])\n .size('unit_price', h => {\n return [ 6, 6, h / 500 ];\n })\n .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])\n .style({\n opacity: 1.0\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.clumn_shape = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 66.02383,\n type: 'amap',\n style: 'dark',\n center: [121.400257, 31.25287],\n zoom: 14.55,\n rotation: 134.9507\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n }).shape('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn']).size('unit_price', function (h) {\n return [6, 6, h / 500];\n }).color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F']).style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":3,"filename":"clumn_shape.js","title":"3D 深色柱图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tvpvQZLv_xYAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/point/image/page-data.json b/public/page-data/en/examples/point/image/page-data.json deleted file mode 100644 index 5005842411..0000000000 --- a/public/page-data/en/examples/point/image/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/point/image","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/image/demo/image.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/image/demo/image.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 121.434765, 31.256735 ],\n zoom: 14.83\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n .then(res => res.json())\n .then(data => {\n scene.addImage(\n '00',\n 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'\n );\n scene.addImage(\n '01',\n 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'\n );\n scene.addImage(\n '02',\n 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'\n );\n const imageLayer = new PointLayer()\n .source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n })\n .shape('name', [ '00', '01', '02' ])\n .size(20);\n scene.addLayer(imageLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.image = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [121.434765, 31.256735],\n zoom: 14.83\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n scene.addImage('00', 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg');\n scene.addImage('01', 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg');\n scene.addImage('02', 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg');\n var imageLayer = new _l.PointLayer().source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n }).shape('name', ['00', '01', '02']).size(20);\n scene.addLayer(imageLayer);\n });\n});","order":0,"filename":"image.js","title":"符号图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oVyHT5S3sv0AAAAAAAAAAABkARQnAQ"},{"relativePath":"point/image/demo/locate.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/image/demo/locate.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 116.276227, 35.256776 ],\n zoom: 6\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'\n)\n .then(res => res.json())\n .then(data => {\n scene.addImage(\n 'marker',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'\n );\n const imageLayer = new PointLayer()\n .source(data)\n .shape('marker')\n .size(12);\n scene.addLayer(imageLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.locate = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [116.276227, 35.256776],\n zoom: 6\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n scene.addImage('marker', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ');\n var imageLayer = new _l.PointLayer().source(data).shape('marker').size(12);\n scene.addLayer(imageLayer);\n });\n});","order":1,"filename":"locate.js","title":"顶点符号","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DgoWS7-XKdUAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/image/demo/weather.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/image/demo/weather.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [ 120.5969, 29.7918 ],\n pitch: 35,\n zoom: 7,\n rotation: 4.183582\n});\nscene.addImage(\n '00',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '01',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '02',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '04',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '11',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '15',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '07',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '16',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '06',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '08',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '17',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '05',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ'\n);\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json'\n)\n .then(res => res.json())\n .then(data => {\n const imageLayer = new PointLayer()\n .source(data)\n .shape('w', function(w) {\n return w;\n })\n .size(15);\n scene.addLayer(imageLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.weather = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [120.5969, 29.7918],\n pitch: 35,\n zoom: 7,\n rotation: 4.183582\n });\n scene.addImage('00', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ');\n scene.addImage('01', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ');\n scene.addImage('02', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ');\n scene.addImage('04', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ');\n scene.addImage('11', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ');\n scene.addImage('15', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ');\n scene.addImage('07', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ');\n scene.addImage('16', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ');\n scene.addImage('06', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ');\n scene.addImage('08', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ');\n scene.addImage('17', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ');\n scene.addImage('05', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ');\n fetch('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var imageLayer = new _l.PointLayer().source(data).shape('w', function (w) {\n return w;\n }).size(15);\n scene.addLayer(imageLayer);\n });\n});","order":2,"filename":"weather.js","title":"天气","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-nk1RZJeGooAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/point/marker/page-data.json b/public/page-data/en/examples/point/marker/page-data.json deleted file mode 100644 index 45c5e48d8a..0000000000 --- a/public/page-data/en/examples/point/marker/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/point/marker","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/marker/demo/marker.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/marker/demo/marker.js","source":"import { Scene, Marker } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [ 105.790327, 36.495636 ],\n pitch: 0,\n zoom: 4\n});\nscene.render();\nscene.on('loaded', () => {\n addMarkers();\n});\n\nfunction addMarkers() {\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'\n )\n .then(res => res.json())\n .then(nodes => {\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i].g !== '1' || nodes[i].v === '') { continue; }\n const el = document.createElement('label');\n el.className = 'lableclass';\n el.textContent = nodes[i].v + '℃';\n el.style.background = getColor(nodes[i].v);\n el.style.borderColor = getColor(nodes[i].v);\n new Marker({\n element: el\n })\n .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })\n .addTo(scene);\n }\n });\n}\n\nfunction getColor(v) {\n return v > 50\n ? '#800026'\n : v > 40\n ? '#BD0026'\n : v > 30\n ? '#E31A1C'\n : v > 20\n ? '#FC4E2A'\n : v > 10\n ? '#FD8D3C'\n : v > 5\n ? '#FEB24C'\n : v > 0\n ? '#FED976'\n : '#FFEDA0';\n}\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.marker = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [105.790327, 36.495636],\n pitch: 0,\n zoom: 4\n });\n scene.render();\n scene.on('loaded', function () {\n addMarkers();\n });\n\n function addMarkers() {\n fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json').then(function (res) {\n return res.json();\n }).then(function (nodes) {\n for (var i = 0; i < nodes.length; i++) {\n if (nodes[i].g !== '1' || nodes[i].v === '') {\n continue;\n }\n\n var el = document.createElement('label');\n el.className = 'lableclass';\n el.textContent = nodes[i].v + '℃';\n el.style.background = getColor(nodes[i].v);\n el.style.borderColor = getColor(nodes[i].v);\n new _l.Marker({\n element: el\n }).setLnglat({\n lng: nodes[i].x * 1,\n lat: nodes[i].y\n }).addTo(scene);\n }\n });\n }\n\n function getColor(v) {\n return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0';\n }\n});","order":0,"filename":"marker.js","title":"温度","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*aTDtTL1qls0AAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/point/scatter/page-data.json b/public/page-data/en/examples/point/scatter/page-data.json deleted file mode 100644 index f67fa3033a..0000000000 --- a/public/page-data/en/examples/point/scatter/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/point/scatter","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/scatter/demo/normal2.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/scatter/demo/normal2.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 64.88,\n type: 'amap',\n style: 'dark',\n center: [ 114.060288, 22.53684 ],\n zoom: 15.63\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data)\n .size(2)\n .color('h8', [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ])\n .style({\n opacity: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.normal2 = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 64.88,\n type: 'amap',\n style: 'dark',\n center: [114.060288, 22.53684],\n zoom: 15.63\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data).size(2).color('h8', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0']).style({\n opacity: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":0,"filename":"normal2.js","title":"城市亮度图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"},{"relativePath":"point/scatter/demo/normal.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/scatter/demo/normal.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [ 121.417463, 31.215175 ],\n pitch: 0,\n zoom: 11\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')\n .then(res => res.text())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n y: 'lat',\n x: 'lng'\n }\n })\n .size(0.5)\n .color('#080298')\n .style({\n opacity: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.normal = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [121.417463, 31.215175],\n pitch: 0,\n zoom: 11\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'csv',\n y: 'lat',\n x: 'lng'\n }\n }).size(0.5).color('#080298').style({\n opacity: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":1,"filename":"normal.js","title":"海量点","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/polygon/3d/page-data.json b/public/page-data/en/examples/polygon/3d/page-data.json deleted file mode 100644 index 38912f7715..0000000000 --- a/public/page-data/en/examples/polygon/3d/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/polygon/3d","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"polygon/3d/demo/polygon.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/polygon/3d/demo/polygon.js","source":"import { Scene, PolygonLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'dark',\n center: [ 114.050008, 22.529272 ],\n zoom: 14.1\n});\n\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new PolygonLayer({})\n .source(data)\n .shape('extrude')\n .size('h20', [ 100, 120, 160, 200, 260, 500 ])\n .color('h20', [\n '#816CAD',\n '#A67FB5',\n '#C997C7',\n '#DEB8D4',\n '#F5D4E6',\n '#FAE4F1',\n '#FFF3FC'\n ])\n .style({\n opacity: 1.0\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.polygon = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'dark',\n center: [114.050008, 22.529272],\n zoom: 14.1\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.PolygonLayer({}).source(data).shape('extrude').size('h20', [100, 120, 160, 200, 260, 500]).color('h20', ['#816CAD', '#A67FB5', '#C997C7', '#DEB8D4', '#F5D4E6', '#FAE4F1', '#FFF3FC']).style({\n opacity: 1.0\n });\n scene.addLayer(layer);\n });\n});","order":0,"filename":"polygon.js","title":"3D 建筑面","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RCaZSLthUn0AAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/polygon/fill/page-data.json b/public/page-data/en/examples/polygon/fill/page-data.json deleted file mode 100644 index 1748f398dc..0000000000 --- a/public/page-data/en/examples/polygon/fill/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/polygon/fill","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"polygon/fill/demo/polygon.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/polygon/fill/demo/polygon.js","source":"\nimport { Scene, PolygonLayer, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 107.042225, 37.66565 ],\n zoom: 3.87\n});\n\nfetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')\n .then(res => res.json())\n .then(data => {\n const colors = [\n '#D7F9F0',\n '#A6E1E0',\n '#72BED6',\n '#5B8FF9',\n '#3474DB',\n '#005CBE',\n '#00419F',\n '#00287E'\n ];\n const layer = new PolygonLayer({})\n .source(data)\n .color('name', colors)\n .shape('fill')\n .style({\n opacity: 0.9\n });\n\n const layer2 = new LineLayer({\n zIndex: 2\n })\n .source(data)\n .color('#fff')\n .size(0.3)\n .style({\n opacity: 1\n });\n\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.polygon = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [107.042225, 37.66565],\n zoom: 3.87\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var colors = ['#D7F9F0', '#A6E1E0', '#72BED6', '#5B8FF9', '#3474DB', '#005CBE', '#00419F', '#00287E'];\n var layer = new _l.PolygonLayer({}).source(data).color('name', colors).shape('fill').style({\n opacity: 0.9\n });\n var layer2 = new _l.LineLayer({\n zIndex: 2\n }).source(data).color('#fff').size(0.3).style({\n opacity: 1\n });\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n});","order":0,"filename":"polygon.js","title":"全国地图行政区划","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"},{"relativePath":"polygon/fill/demo/fill.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/polygon/fill/demo/fill.js","source":"import { Scene, PolygonLayer, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 116.368652, 39.93866 ],\n zoom: 10.07\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new PolygonLayer({})\n .source(data)\n .color(\n 'unit_price',\n [\n '#1A4397',\n '#2555B7',\n '#3165D1',\n '#467BE8',\n '#6296FE',\n '#7EA6F9',\n '#98B7F7',\n '#BDD0F8',\n '#DDE6F7',\n '#F2F5FC'\n ].reverse()\n )\n .shape('fill')\n .style({\n opacity: 1\n });\n const layer2 = new LineLayer({\n zIndex: 2\n })\n .source(data)\n .color('#fff')\n .size(0.3)\n .style({\n opacity: 1\n });\n\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.fill = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [116.368652, 39.93866],\n zoom: 10.07\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.PolygonLayer({}).source(data).color('unit_price', ['#1A4397', '#2555B7', '#3165D1', '#467BE8', '#6296FE', '#7EA6F9', '#98B7F7', '#BDD0F8', '#DDE6F7', '#F2F5FC'].reverse()).shape('fill').style({\n opacity: 1\n });\n var layer2 = new _l.LineLayer({\n zIndex: 2\n }).source(data).color('#fff').size(0.3).style({\n opacity: 1\n });\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n});","order":1,"filename":"fill.js","title":"连续填充图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ouhFSJNcNvkAAAAAAAAAAABkARQnAQ"},{"relativePath":"polygon/fill/demo/population.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/polygon/fill/demo/population.js","source":"import { Scene, PolygonLayer, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'light',\n center: [ 3.438, 40.16797 ],\n zoom: 0.51329\n});\nPromise.all([\n fetch(\n 'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json'\n ).then(d => d.json()),\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'\n ).then(d => d.json())\n]).then(function onLoad([ world, population ]) {\n const popobj = {};\n population.forEach(element => {\n popobj[element.Code] =\n element['Population, female (% of total) (% of total)'];\n });\n // 数据绑定\n world.features = world.features.map(fe => {\n fe.properties.female = popobj[fe.id] * 1 || 0;\n return fe;\n });\n const colors = [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ];\n const layer = new PolygonLayer({})\n .source(world)\n .scale('female', {\n type: 'quantile'\n })\n .color('female', colors)\n .shape('fill')\n .style({\n opacity: 0.9\n });\n\n const layer2 = new LineLayer({\n zIndex: 2\n })\n .source(world)\n .color('#fff')\n .size(0.3)\n .style({\n opacity: 1\n });\n\n scene.addLayer(layer);\n scene.addLayer(layer2);\n});\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.population = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\n function _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\n function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\n function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'light',\n center: [3.438, 40.16797],\n zoom: 0.51329\n });\n Promise.all([fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(function (d) {\n return d.json();\n }), fetch('https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json').then(function (d) {\n return d.json();\n })]).then(function onLoad(_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n world = _ref2[0],\n population = _ref2[1];\n\n var popobj = {};\n population.forEach(function (element) {\n popobj[element.Code] = element['Population, female (% of total) (% of total)'];\n }); // 数据绑定\n\n world.features = world.features.map(function (fe) {\n fe.properties.female = popobj[fe.id] * 1 || 0;\n return fe;\n });\n var colors = ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0'];\n var layer = new _l.PolygonLayer({}).source(world).scale('female', {\n type: 'quantile'\n }).color('female', colors).shape('fill').style({\n opacity: 0.9\n });\n var layer2 = new _l.LineLayer({\n zIndex: 2\n }).source(world).color('#fff').size(0.3).style({\n opacity: 1\n });\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n});","order":2,"filename":"population.js","title":"世界地图 女性人口比例","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7c0eQYMfxwoAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/examples/raster/basic/page-data.json b/public/page-data/en/examples/raster/basic/page-data.json deleted file mode 100644 index 724cacb84d..0000000000 --- a/public/page-data/en/examples/raster/basic/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/raster/basic","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"raster/basic/demo/image.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/raster/basic/demo/image.js","source":"import { Scene, ImageLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 121.268, 30.3628 ],\n zoom: 13\n});\n\nconst layer = new ImageLayer({});\nlayer.source(\n 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n {\n parser: {\n type: 'image',\n extent: [ 121.168, 30.2828, 121.384, 30.4219 ]\n }\n }\n);\nscene.addLayer(layer);\n// scene.on('loaded', () => {\n// scene.addLayer(layer);\n// });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.image = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [121.268, 30.3628],\n zoom: 13\n });\n var layer = new _l.ImageLayer({});\n layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', {\n parser: {\n type: 'image',\n extent: [121.168, 30.2828, 121.384, 30.4219]\n }\n });\n scene.addLayer(layer); // scene.on('loaded', () => {\n // scene.addLayer(layer);\n // });\n});","order":0,"filename":"image.js","title":"图片","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"},{"relativePath":"raster/basic/demo/radar.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/raster/basic/demo/radar.js","source":"import { Scene, ImageLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'dark',\n center: [ 115.5268, 34.3628 ],\n zoom: 7\n});\n\nconst layer = new ImageLayer({});\nlayer.source(\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ',\n {\n parser: {\n type: 'image',\n extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]\n }\n }\n);\nscene.addLayer(layer);\n\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.radar = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'dark',\n center: [115.5268, 34.3628],\n zoom: 7\n });\n var layer = new _l.ImageLayer({});\n layer.source('https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ', {\n parser: {\n type: 'image',\n extent: [113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137]\n }\n });\n scene.addLayer(layer);\n});","order":1,"filename":"radar.js","title":"地形","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/en/page-data.json b/public/page-data/en/page-data.json deleted file mode 100644 index ec9a6ea88a..0000000000 --- a/public/page-data/en/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---site-pages-index-en-tsx","path":"/en","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"slug":"/en/","langKey":"en"}}} \ No newline at end of file diff --git a/public/page-data/index/page-data.json b/public/page-data/index/page-data.json deleted file mode 100644 index ad239041b4..0000000000 --- a/public/page-data/index/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-pages-index-tsx","path":"/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"slug":"/","langKey":"zh"}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/component/control/page-data.json b/public/page-data/zh/docs/api/component/control/page-data.json deleted file mode 100644 index 7a51fdfc09..0000000000 --- a/public/page-data/zh/docs/api/component/control/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/component/control","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","tableOfContents":"","fields":{"slug":"/zh/docs/api/component/control","readingTime":{"text":"2 min read","time":60899.99999999999}},"frontmatter":{"title":"Control"},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3},"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3},"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/component/marker/page-data.json b/public/page-data/zh/docs/api/component/marker/page-data.json deleted file mode 100644 index 6ab3d95fa1..0000000000 --- a/public/page-data/zh/docs/api/component/marker/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/component/marker","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","tableOfContents":"","fields":{"slug":"/zh/docs/api/component/marker","readingTime":{"text":"1 min read","time":42300}},"frontmatter":{"title":"Marker"},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3},"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0},"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/component/popup/page-data.json b/public/page-data/zh/docs/api/component/popup/page-data.json deleted file mode 100644 index dd492dcac1..0000000000 --- a/public/page-data/zh/docs/api/component/popup/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/component/popup","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","tableOfContents":"","fields":{"slug":"/zh/docs/api/component/popup","readingTime":{"text":"1 min read","time":33000}},"frontmatter":{"title":"popup"},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3},"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/l7/page-data.json b/public/page-data/zh/docs/api/l7/page-data.json deleted file mode 100644 index 83ce1716b3..0000000000 --- a/public/page-data/zh/docs/api/l7/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/l7","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","tableOfContents":"","fields":{"slug":"/zh/docs/api/l7","readingTime":{"text":"1 min read","time":39300.00000000001}},"frontmatter":{"title":"简介"},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"next":{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1},"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/layer/heatmap/page-data.json b/public/page-data/zh/docs/api/layer/heatmap/page-data.json deleted file mode 100644 index bcd932e4fb..0000000000 --- a/public/page-data/zh/docs/api/layer/heatmap/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/layer/heatmap","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","tableOfContents":"","fields":{"slug":"/zh/docs/api/layer/heatmap","readingTime":{"text":"2 min read","time":94500}},"frontmatter":{"title":"HeatmapLayer"},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1},"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0},"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/layer/imagelayer/page-data.json b/public/page-data/zh/docs/api/layer/imagelayer/page-data.json deleted file mode 100644 index 068c7a6c5e..0000000000 --- a/public/page-data/zh/docs/api/layer/imagelayer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/layer/imagelayer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","tableOfContents":"","fields":{"slug":"/zh/docs/api/layer/imagelayer","readingTime":{"text":"1 min read","time":9300}},"frontmatter":{"title":"ImageLayer"},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0},"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0},"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/layer/layer/page-data.json b/public/page-data/zh/docs/api/layer/layer/page-data.json deleted file mode 100644 index e5cdce99a5..0000000000 --- a/public/page-data/zh/docs/api/layer/layer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/layer/layer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","tableOfContents":"","fields":{"slug":"/zh/docs/api/layer/layer","readingTime":{"text":"3 min read","time":158400}},"frontmatter":{"title":"Layer"},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5},"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1},"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/layer/linelayer/page-data.json b/public/page-data/zh/docs/api/layer/linelayer/page-data.json deleted file mode 100644 index c2c372a43f..0000000000 --- a/public/page-data/zh/docs/api/layer/linelayer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/layer/linelayer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","tableOfContents":"","fields":{"slug":"/zh/docs/api/layer/linelayer","readingTime":{"text":"1 min read","time":30600}},"frontmatter":{"title":"LineLayer"},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1},"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3},"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/layer/pointlayer/page-data.json b/public/page-data/zh/docs/api/layer/pointlayer/page-data.json deleted file mode 100644 index 539eaba22f..0000000000 --- a/public/page-data/zh/docs/api/layer/pointlayer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/layer/pointlayer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","tableOfContents":"","fields":{"slug":"/zh/docs/api/layer/pointlayer","readingTime":{"text":"1 min read","time":26100}},"frontmatter":{"title":"PointLayer"},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0},"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2},"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/layer/polygonlayer/page-data.json b/public/page-data/zh/docs/api/layer/polygonlayer/page-data.json deleted file mode 100644 index 103cbd74fe..0000000000 --- a/public/page-data/zh/docs/api/layer/polygonlayer/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/layer/polygonlayer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","tableOfContents":"","fields":{"slug":"/zh/docs/api/layer/polygonlayer","readingTime":{"text":"1 min read","time":11400}},"frontmatter":{"title":"PolygonLayer"},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2},"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3},"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/scene/page-data.json b/public/page-data/zh/docs/api/scene/page-data.json deleted file mode 100644 index 7135b4dd84..0000000000 --- a/public/page-data/zh/docs/api/scene/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/scene","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","tableOfContents":"","fields":{"slug":"/zh/docs/api/scene","readingTime":{"text":"2 min read","time":118500}},"frontmatter":{"title":"场景 Scene"},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0},"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1},"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/source/geojson/page-data.json b/public/page-data/zh/docs/api/source/geojson/page-data.json deleted file mode 100644 index e248a4ab6c..0000000000 --- a/public/page-data/zh/docs/api/source/geojson/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/source/geojson","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","tableOfContents":"","fields":{"slug":"/zh/docs/api/source/geojson","readingTime":{"text":"1 min read","time":6300}},"frontmatter":{"title":"geojson"},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1},"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5},"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/api/source/source/page-data.json b/public/page-data/zh/docs/api/source/source/page-data.json deleted file mode 100644 index 3943e47f3b..0000000000 --- a/public/page-data/zh/docs/api/source/source/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/api/source/source","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","tableOfContents":"","fields":{"slug":"/zh/docs/api/source/source","readingTime":{"text":"2 min read","time":108899.99999999999}},"frontmatter":{"title":"Source"},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5},"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
"}},"next":{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5},"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/manual/tutorial/data/page-data.json b/public/page-data/zh/docs/manual/tutorial/data/page-data.json deleted file mode 100644 index be603c3222..0000000000 --- a/public/page-data/zh/docs/manual/tutorial/data/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/manual/tutorial/data","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","tableOfContents":"","fields":{"slug":"/zh/docs/manual/tutorial/data","readingTime":{"text":"1 min read","time":24599.999999999996}},"frontmatter":{"title":"数据"},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"next":{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0},"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/manual/tutorial/quickstart/page-data.json b/public/page-data/zh/docs/manual/tutorial/quickstart/page-data.json deleted file mode 100644 index f4816b27c0..0000000000 --- a/public/page-data/zh/docs/manual/tutorial/quickstart/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/manual/tutorial/quickstart","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","tableOfContents":"","fields":{"slug":"/zh/docs/manual/tutorial/quickstart","readingTime":{"text":"2 min read","time":98100}},"frontmatter":{"title":"快速上手"},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1},"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/tutorial/data/page-data.json b/public/page-data/zh/docs/tutorial/data/page-data.json deleted file mode 100644 index b2fa534039..0000000000 --- a/public/page-data/zh/docs/tutorial/data/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/tutorial/data","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","tableOfContents":"","fields":{"slug":"/zh/docs/tutorial/data","readingTime":{"text":"1 min read","time":24599.999999999996}},"frontmatter":{"title":"数据"},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"next":{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0},"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/docs/tutorial/quickstart/page-data.json b/public/page-data/zh/docs/tutorial/quickstart/page-data.json deleted file mode 100644 index f3e2623bfd..0000000000 --- a/public/page-data/zh/docs/tutorial/quickstart/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/tutorial/quickstart","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","tableOfContents":"","fields":{"slug":"/zh/docs/tutorial/quickstart","readingTime":{"text":"2 min read","time":98100}},"frontmatter":{"title":"快速上手"},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1},"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/gallery/basic/page-data.json b/public/page-data/zh/examples/gallery/basic/page-data.json deleted file mode 100644 index 714e395217..0000000000 --- a/public/page-data/zh/examples/gallery/basic/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/gallery/basic","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"gallery/basic/demo/column_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/column_dark.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 35.210526315789465,\n type: 'amap',\n style: 'dark',\n center: [ 104.288144, 31.239692 ],\n zoom: 4.4\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n })\n .shape('cylinder')\n .size('t', function(level) {\n return [ 1, 2, level * 2 + 20 ];\n })\n .color('t', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ])\n .style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.column_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 35.210526315789465,\n type: 'amap',\n style: 'dark',\n center: [104.288144, 31.239692],\n zoom: 4.4\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n }).shape('cylinder').size('t', function (level) {\n return [1, 2, level * 2 + 20];\n }).color('t', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6']).style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":0,"filename":"column_dark.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7COqR4wCc6QAAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/arcCircle.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/arcCircle.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 107.77791556935472, 35.443286920228644 ],\n zoom: 2.9142882493605033\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')\n .then(res => res.text())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n })\n .size(1)\n .shape('arc')\n .color('#8C1EB2')\n .style({\n opacity: 0.8,\n blur: 0.99\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.arcCircle = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [107.77791556935472, 35.443286920228644],\n zoom: 2.9142882493605033\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n }).size(1).shape('arc').color('#8C1EB2').style({\n opacity: 0.8,\n blur: 0.99\n });\n scene.addLayer(layer);\n });\n});","order":1,"filename":"arcCircle.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/bus_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/bus_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 103.83735604457024, 1.360253881403068 ],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'dark'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n coordinates: 'path',\n type: 'json'\n }\n })\n .size('level', level => {\n return [ 1.0, level * 1 ];\n })\n .shape('line')\n .color(\n 'level',\n [\n '#312B60',\n '#4A457E',\n '#615C99',\n '#816CAD',\n '#A67FB5',\n '#C997C7',\n '#DEB8D4',\n '#F5D4E6',\n '#FAE4F1',\n '#FFF3FC'\n ].slice(0, 8)\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.bus_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [103.83735604457024, 1.360253881403068],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'dark'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n coordinates: 'path',\n type: 'json'\n }\n }).size('level', function (level) {\n return [1.0, level * 1];\n }).shape('line').color('level', ['#312B60', '#4A457E', '#615C99', '#816CAD', '#A67FB5', '#C997C7', '#DEB8D4', '#F5D4E6', '#FAE4F1', '#FFF3FC'].slice(0, 8));\n scene.addLayer(layer);\n });\n});","order":2,"filename":"bus_dark.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j-P8RaJMEvAAAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/light.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 43,\n center: [ 120.13383079335335, 29.651873105004427 ],\n zoom: 7.068989519212174,\n type: 'mapbox'\n});\n\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'hexagon',\n size: 2500,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('sum', sum => {\n return sum * 200;\n })\n .shape('hexagonColumn')\n .style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n })\n .color('sum', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#C3F9CC',\n '#DEFAC0',\n '#ECFFB1'\n ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 43,\n center: [120.13383079335335, 29.651873105004427],\n zoom: 7.068989519212174,\n type: 'mapbox'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'hexagon',\n size: 2500,\n field: 'v',\n method: 'sum'\n }]\n }).size('sum', function (sum) {\n return sum * 200;\n }).shape('hexagonColumn').style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n }).color('sum', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#C3F9CC', '#DEFAC0', '#ECFFB1']);\n scene.addLayer(layer);\n });\n});","order":3,"filename":"light.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/point.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/point.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 64.88,\n type: 'amap',\n style: 'dark',\n center: [ 114.060288, 22.53684 ],\n zoom: 15.63\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data)\n .size(2)\n .color('h8', [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ])\n .style({\n opacity: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.point = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 64.88,\n type: 'amap',\n style: 'dark',\n center: [114.060288, 22.53684],\n zoom: 15.63\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data).size(2).color('h8', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0']).style({\n opacity: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":4,"filename":"point.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"},{"relativePath":"gallery/basic/demo/normal.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/gallery/basic/demo/normal.js","source":"import { Scene, PointLayer } from '@antv/l7';\n\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [ 121.417463, 31.215175 ],\n pitch: 0,\n zoom: 11\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')\n .then(res => res.text())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n y: 'lat',\n x: 'lng'\n }\n })\n .size(0.5)\n .color('#080298')\n .style({\n opacity: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.normal = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [121.417463, 31.215175],\n pitch: 0,\n zoom: 11\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'csv',\n y: 'lat',\n x: 'lng'\n }\n }).size(0.5).color('#080298').style({\n opacity: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":5,"filename":"normal.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"}]},"next":{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0},"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/heatmap/grid/page-data.json b/public/page-data/zh/examples/heatmap/grid/page-data.json deleted file mode 100644 index 4922fbc48b..0000000000 --- a/public/page-data/zh/examples/heatmap/grid/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/heatmap/grid","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"heatmap/grid/demo/china.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/grid/demo/china.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [ 107.054293, 35.246265 ],\n zoom: 4.056,\n type: 'amap'\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'grid',\n size: 20000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('count', value => {\n return value * 0;\n })\n .shape('square')\n .style({\n coverage: 1,\n angle: 0\n })\n .color(\n 'count',\n [\n '#0B0030',\n '#100243',\n '#100243',\n '#1B048B',\n '#051FB7',\n '#0350C1',\n '#0350C1',\n '#0072C4',\n '#0796D3',\n '#2BA9DF',\n '#30C7C4',\n '#6BD5A0',\n '#A7ECB2',\n '#D0F4CA'\n ].reverse()\n );\n\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.china = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [107.054293, 35.246265],\n zoom: 4.056,\n type: 'amap'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'grid',\n size: 20000,\n field: 'v',\n method: 'sum'\n }]\n }).size('count', function (value) {\n return value * 0;\n }).shape('square').style({\n coverage: 1,\n angle: 0\n }).color('count', ['#0B0030', '#100243', '#100243', '#1B048B', '#051FB7', '#0350C1', '#0350C1', '#0072C4', '#0796D3', '#2BA9DF', '#30C7C4', '#6BD5A0', '#A7ECB2', '#D0F4CA'].reverse());\n scene.addLayer(layer);\n });\n});","order":0,"filename":"china.js","title":"网格热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*XPBuSIPPgsgAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/grid/demo/grid1.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/grid/demo/grid1.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [ 110.097892, 33.853662 ],\n zoom: 4.056,\n type: 'amap'\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'grid',\n size: 10000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('count', value => {\n return value * 0;\n })\n .shape('square')\n .style({\n coverage: 1,\n angle: 0\n })\n .color(\n 'count',\n [\n '#FF4818',\n '#F7B74A',\n '#FFF598',\n '#FF40F3',\n '#9415FF',\n '#421EB2'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.grid1 = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [110.097892, 33.853662],\n zoom: 4.056,\n type: 'amap'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'grid',\n size: 10000,\n field: 'v',\n method: 'sum'\n }]\n }).size('count', function (value) {\n return value * 0;\n }).shape('square').style({\n coverage: 1,\n angle: 0\n }).color('count', ['#FF4818', '#F7B74A', '#FFF598', '#FF40F3', '#9415FF', '#421EB2'].reverse());\n scene.addLayer(layer);\n });\n});","order":1,"filename":"grid1.js","title":"","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Uo9oQolgoxYAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/grid/demo/heatmap3.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/grid/demo/heatmap3.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [ 110.097892, 33.853662 ],\n zoom: 4.056,\n type: 'amap'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'grid',\n size: 20000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('count', value => {\n return value * 0;\n })\n .shape('circle')\n .style({\n coverage: 0.9,\n angle: 0\n })\n .color(\n 'count',\n [\n '#8C1EB2',\n '#8C1EB2',\n '#DA05AA',\n '#F0051A',\n '#FF2A3C',\n '#FF4818',\n '#FF4818',\n '#FF8B18',\n '#F77B00',\n '#ED9909',\n '#ECC357',\n '#EDE59C'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.heatmap3 = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [110.097892, 33.853662],\n zoom: 4.056,\n type: 'amap'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'grid',\n size: 20000,\n field: 'v',\n method: 'sum'\n }]\n }).size('count', function (value) {\n return value * 0;\n }).shape('circle').style({\n coverage: 0.9,\n angle: 0\n }).color('count', ['#8C1EB2', '#8C1EB2', '#DA05AA', '#F0051A', '#FF2A3C', '#FF4818', '#FF4818', '#FF8B18', '#F77B00', '#ED9909', '#ECC357', '#EDE59C'].reverse());\n scene.addLayer(layer);\n });\n});","order":2,"filename":"heatmap3.js","title":"网格布局 圆形","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Ucz6SJ5wU_0AAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/grid/demo/world.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/grid/demo/world.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [ 110.097892, 33.853662 ],\n zoom: 4.056,\n type: 'amap'\n});\n\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'grid',\n size: 10000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('count', value => {\n return value * 0;\n })\n .shape('square')\n .style({\n coverage: 1,\n angle: 0\n })\n .color(\n 'count',\n [\n '#FF3417',\n '#FF7412',\n '#FFB02A',\n '#FFE754',\n '#46F3FF',\n '#02BEFF',\n '#1A7AFF',\n '#0A1FB2'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.world = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [110.097892, 33.853662],\n zoom: 4.056,\n type: 'amap'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'grid',\n size: 10000,\n field: 'v',\n method: 'sum'\n }]\n }).size('count', function (value) {\n return value * 0;\n }).shape('square').style({\n coverage: 1,\n angle: 0\n }).color('count', ['#FF3417', '#FF7412', '#FFB02A', '#FFE754', '#46F3FF', '#02BEFF', '#1A7AFF', '#0A1FB2'].reverse());\n scene.addLayer(layer);\n });\n});","order":3,"filename":"world.js","title":"网格热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f1IDQ7AG-00AAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1},"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0},"html":""}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/heatmap/heatmap/page-data.json b/public/page-data/zh/examples/heatmap/heatmap/page-data.json deleted file mode 100644 index 27dc4aa683..0000000000 --- a/public/page-data/zh/examples/heatmap/heatmap/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/heatmap/heatmap","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"heatmap/heatmap/demo/heatmap.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/heatmap/demo/heatmap.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [ 127.5671666579043, 7.445038892195569 ],\n type: 'mapbox',\n zoom: 2.632456779444394\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data)\n .shape('heatmap')\n .size('mag', [ 0, 1.0 ]) // weight映射通道\n .style({\n intensity: 2,\n radius: 20,\n opacity: 1.0,\n rampColors: {\n colors: [\n '#FF4818',\n '#F7B74A',\n '#FFF598',\n '#91EABC',\n '#2EA9A1',\n '#206C7C'\n ].reverse(),\n positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]\n }\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.heatmap = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [127.5671666579043, 7.445038892195569],\n type: 'mapbox',\n zoom: 2.632456779444394\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data).shape('heatmap').size('mag', [0, 1.0]) // weight映射通道\n .style({\n intensity: 2,\n radius: 20,\n opacity: 1.0,\n rampColors: {\n colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'].reverse(),\n positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]\n }\n });\n scene.addLayer(layer);\n });\n});","order":0,"filename":"heatmap.js","title":"经典热力图2D","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*QstiQq4JBOIAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/heatmap/demo/heatmap_purple.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/heatmap/demo/heatmap_purple.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [ 127.5671666579043, 7.445038892195569 ],\n type: 'mapbox',\n zoom: 2.632456779444394\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data)\n .shape('heatmap')\n .size('mag', [ 0, 1.0 ]) // weight映射通道\n .style({\n intensity: 2,\n radius: 20,\n opacity: 1.0,\n rampColors: {\n colors: [\n '#FF4818',\n '#F7B74A',\n '#FFF598',\n '#F27DEB',\n '#8C1EB2',\n '#421EB2'\n ].reverse(),\n positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]\n }\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.heatmap_purple = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 0,\n center: [127.5671666579043, 7.445038892195569],\n type: 'mapbox',\n zoom: 2.632456779444394\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data).shape('heatmap').size('mag', [0, 1.0]) // weight映射通道\n .style({\n intensity: 2,\n radius: 20,\n opacity: 1.0,\n rampColors: {\n colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'].reverse(),\n positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]\n }\n });\n scene.addLayer(layer);\n });\n});","order":1,"filename":"heatmap_purple.js","title":"经典热力图2D","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*GD2bR7pb-yIAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/heatmap/demo/heatmap3d.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/heatmap/demo/heatmap3d.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 58.5,\n center: [ 111.8759, 30.6942 ],\n rotation: 0.519,\n type: 'mapbox',\n zoom: 3.6116\n});\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data)\n .size('capacity', [ 0, 1 ])\n .shape('heatmap3D')\n // weight映射通道\n .style({\n intensity: 10,\n radius: 5,\n opacity: 1.0,\n rampColors: {\n colors: [\n '#2E8AE6',\n '#69D1AB',\n '#DAF291',\n '#FFD591',\n '#FF7A45',\n '#CF1D49'\n ],\n positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]\n }\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.heatmap3d = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 58.5,\n center: [111.8759, 30.6942],\n rotation: 0.519,\n type: 'mapbox',\n zoom: 3.6116\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data).size('capacity', [0, 1]).shape('heatmap3D') // weight映射通道\n .style({\n intensity: 10,\n radius: 5,\n opacity: 1.0,\n rampColors: {\n colors: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],\n positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]\n }\n });\n scene.addLayer(layer);\n });\n});","order":2,"filename":"heatmap3d.js","title":"经典热力图3D","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmhzTqrHpR4AAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0},"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1},"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/heatmap/hexagon/page-data.json b/public/page-data/zh/examples/heatmap/hexagon/page-data.json deleted file mode 100644 index 56afbafcc6..0000000000 --- a/public/page-data/zh/examples/heatmap/hexagon/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/heatmap/hexagon","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"heatmap/hexagon/demo/china.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/hexagon/demo/china.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 47.49999999999995,\n center: [ 112.50447776627743, 30.830476390931125 ],\n zoom: 3.9879693680088626,\n type: 'mapbox'\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'hexagon',\n size: 17000,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('sum', value => {\n return value * 20;\n })\n .shape('hexagonColumn')\n .color(\n 'count',\n [\n '#FF4818',\n '#F7B74A',\n '#FFF598',\n '#FF40F3',\n '#9415FF',\n '#421EB2'\n ].reverse()\n )\n .style({\n coverage: 0.9,\n angle: 0\n });\n\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.china = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 47.49999999999995,\n center: [112.50447776627743, 30.830476390931125],\n zoom: 3.9879693680088626,\n type: 'mapbox'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'hexagon',\n size: 17000,\n field: 'v',\n method: 'sum'\n }]\n }).size('sum', function (value) {\n return value * 20;\n }).shape('hexagonColumn').color('count', ['#FF4818', '#F7B74A', '#FFF598', '#FF40F3', '#9415FF', '#421EB2'].reverse()).style({\n coverage: 0.9,\n angle: 0\n });\n scene.addLayer(layer);\n });\n});","order":0,"filename":"china.js","title":"蜂窝热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*hLVeSqPl9asAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/hexagon/demo/light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/hexagon/demo/light.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'dark',\n pitch: 43,\n center: [ 120.13383079335335, 29.651873105004427 ],\n zoom: 7.068989519212174,\n type: 'mapbox'\n});\n\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [\n {\n type: 'hexagon',\n size: 2500,\n field: 'v',\n method: 'sum'\n }\n ]\n })\n .size('sum', sum => {\n return sum * 200;\n })\n .shape('hexagonColumn')\n .style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n })\n .color('sum', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#C3F9CC',\n '#DEFAC0',\n '#ECFFB1'\n ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'dark',\n pitch: 43,\n center: [120.13383079335335, 29.651873105004427],\n zoom: 7.068989519212174,\n type: 'mapbox'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng',\n y: 'lat'\n },\n transforms: [{\n type: 'hexagon',\n size: 2500,\n field: 'v',\n method: 'sum'\n }]\n }).size('sum', function (sum) {\n return sum * 200;\n }).shape('hexagonColumn').style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n }).color('sum', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#C3F9CC', '#DEFAC0', '#ECFFB1']);\n scene.addLayer(layer);\n });\n});","order":1,"filename":"light.js","title":"蜂窝热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/hexagon/demo/hexagon.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/hexagon/demo/hexagon.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'light',\n pitch: 56.499,\n center: [ 114.07737552216226, 22.542656745583486 ],\n rotation: 39.19,\n zoom: 12.47985,\n type: 'mapbox'\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n transforms: [\n {\n type: 'hexagon',\n size: 100,\n field: 'h12',\n method: 'sum'\n }\n ]\n })\n .size('sum', [ 0, 600 ])\n .shape('hexagonColumn')\n .style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n })\n .color(\n 'sum',\n [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.hexagon = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'light',\n pitch: 56.499,\n center: [114.07737552216226, 22.542656745583486],\n rotation: 39.19,\n zoom: 12.47985,\n type: 'mapbox'\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n transforms: [{\n type: 'hexagon',\n size: 100,\n field: 'h12',\n method: 'sum'\n }]\n }).size('sum', [0, 600]).shape('hexagonColumn').style({\n coverage: 0.8,\n angle: 0,\n opacity: 1.0\n }).color('sum', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6'].reverse());\n scene.addLayer(layer);\n });\n});","order":2,"filename":"hexagon.js","title":"蜂窝热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JBibTKlhhWQAAAAAAAAAAABkARQnAQ"},{"relativePath":"heatmap/hexagon/demo/world.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/heatmap/hexagon/demo/world.js","source":"import { Scene, HeatmapLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [ 104.995156, 31.450658 ],\n type: 'amap',\n zoom: 3.79\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new HeatmapLayer({})\n .source(data, {\n transforms: [\n {\n type: 'hexagon',\n size: 90000,\n field: 'capacity',\n method: 'sum'\n }\n ]\n })\n .size('sum', value => {\n return value * 50;\n })\n .shape('hexagon')\n .style({\n coverage: 0.9,\n angle: 0,\n opacity: 1.0\n })\n .color(\n 'sum',\n [\n '#3F4BBA',\n '#3F4BBA',\n '#3F4BBA',\n '#3F4BBA',\n '#3C73DA',\n '#3C73DA',\n '#3C73DA',\n '#0F62FF',\n '#0F62FF',\n '#30B2E9',\n '#30B2E9',\n '#40C4CE'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.world = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n style: 'light',\n pitch: 0,\n center: [104.995156, 31.450658],\n type: 'amap',\n zoom: 3.79\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.HeatmapLayer({}).source(data, {\n transforms: [{\n type: 'hexagon',\n size: 90000,\n field: 'capacity',\n method: 'sum'\n }]\n }).size('sum', function (value) {\n return value * 50;\n }).shape('hexagon').style({\n coverage: 0.9,\n angle: 0,\n opacity: 1.0\n }).color('sum', ['#3F4BBA', '#3F4BBA', '#3F4BBA', '#3F4BBA', '#3C73DA', '#3C73DA', '#3C73DA', '#0F62FF', '#0F62FF', '#30B2E9', '#30B2E9', '#40C4CE'].reverse());\n scene.addLayer(layer);\n });\n});","order":3,"filename":"world.js","title":"蜂窝热力图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0uVgSoxXP-cAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0},"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1},"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/line/arc/page-data.json b/public/page-data/zh/examples/line/arc/page-data.json deleted file mode 100644 index 45f144216e..0000000000 --- a/public/page-data/zh/examples/line/arc/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/line/arc","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"line/arc/demo/arcCircle.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/arc/demo/arcCircle.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 107.77791556935472, 35.443286920228644 ],\n zoom: 2.9142882493605033\n});\nfetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')\n .then(res => res.text())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n })\n .size(1)\n .shape('greatcircle')\n .color('#8C1EB2')\n .style({\n opacity: 0.8,\n blur: 0.99\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.arcCircle = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [107.77791556935472, 35.443286920228644],\n zoom: 2.9142882493605033\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n }).size(1).shape('greatcircle').color('#8C1EB2').style({\n opacity: 0.8,\n blur: 0.99\n });\n scene.addLayer(layer);\n });\n});","order":0,"filename":"arcCircle.js","title":"大圆弧线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"},{"relativePath":"line/arc/demo/arc.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/arc/demo/arc.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 0, 23.107329 ],\n zoom: 0\n});\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json'\n)\n .then(res => res.json())\n .then(data => {\n function getAirportCoord(idx) {\n return [ data.airports[idx][3], data.airports[idx][4] ];\n }\n const routes = data.routes.map(function(airline) {\n return {\n coord: [ getAirportCoord(airline[1]), getAirportCoord(airline[2]) ]\n };\n });\n const layer = new LineLayer({})\n .source(routes, {\n parser: {\n type: 'json',\n coordinates: 'coord'\n }\n })\n .size(0.6)\n .shape('arc')\n .color('rgb(5, 5, 50)')\n .style({\n opacity: 0.05\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.arc = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [0, 23.107329],\n zoom: 0\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n function getAirportCoord(idx) {\n return [data.airports[idx][3], data.airports[idx][4]];\n }\n\n var routes = data.routes.map(function (airline) {\n return {\n coord: [getAirportCoord(airline[1]), getAirportCoord(airline[2])]\n };\n });\n var layer = new _l.LineLayer({}).source(routes, {\n parser: {\n type: 'json',\n coordinates: 'coord'\n }\n }).size(0.6).shape('arc').color('rgb(5, 5, 50)').style({\n opacity: 0.05\n });\n scene.addLayer(layer);\n });\n});","order":1,"filename":"arc.js","title":"弧线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ue-SRJEKUqwAAAAAAAAAAABkARQnAQ"},{"relativePath":"line/arc/demo/trip_arc_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/arc/demo/trip_arc_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'dark',\n center: [ 104.34278, 41.12554 ],\n zoom: 2.94888,\n rotation: 42.3999\n});\n\nfetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')\n .then(res => res.text())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n })\n .size(1)\n .shape('arc3d')\n .color('#FF7C6A')\n .style({\n opacity: 0.8\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.trip_arc_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'dark',\n center: [104.34278, 41.12554],\n zoom: 2.94888,\n rotation: 42.3999\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'lng1',\n y: 'lat1',\n x1: 'lng2',\n y1: 'lat2'\n }\n }).size(1).shape('arc3d').color('#FF7C6A').style({\n opacity: 0.8\n });\n scene.addLayer(layer);\n });\n});","order":2,"filename":"trip_arc_dark.js","title":"3D 弧线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ"},{"relativePath":"line/arc/demo/trip_arc.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/arc/demo/trip_arc.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'light',\n center: [ -74.06967, 40.720399 ],\n zoom: 12.45977\n});\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'\n)\n .then(res => res.text())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'start station longitude',\n y: 'start station latitude',\n x1: 'end station longitude',\n y1: 'end station latitude'\n }\n })\n .size(1)\n .shape('arc3d')\n .color('#0C47BF')\n .style({\n opacity: 1,\n blur: 0.9\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.trip_arc = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'light',\n center: [-74.06967, 40.720399],\n zoom: 12.45977\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'start station longitude',\n y: 'start station latitude',\n x1: 'end station longitude',\n y1: 'end station latitude'\n }\n }).size(1).shape('arc3d').color('#0C47BF').style({\n opacity: 1,\n blur: 0.9\n });\n scene.addLayer(layer);\n });\n});","order":3,"filename":"trip_arc.js","title":"3D 弧线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0},"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

"}},"next":{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2},"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/line/isoline/page-data.json b/public/page-data/zh/examples/line/isoline/page-data.json deleted file mode 100644 index e312509d65..0000000000 --- a/public/page-data/zh/examples/line/isoline/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/line/isoline","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"line/isoline/demo/ele.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/isoline/demo/ele.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 53.6305,\n type: 'amap',\n style: 'light',\n center: [ 102.600579, 23.114887 ],\n zoom: 14.66\n});\n\nfetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .size('ELEV', h => {\n return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];\n })\n .shape('line')\n .scale('ELEV', {\n type: 'quantize'\n })\n .color(\n 'ELEV',\n [\n '#E4682F',\n '#FF8752',\n '#FFA783',\n '#FFBEA8',\n '#FFDCD6',\n '#EEF3FF',\n '#C8D7F5',\n '#A5C1FC',\n '#7FA7F9',\n '#5F8AE5'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.ele = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 53.6305,\n type: 'amap',\n style: 'light',\n center: [102.600579, 23.114887],\n zoom: 14.66\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).size('ELEV', function (h) {\n return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];\n }).shape('line').scale('ELEV', {\n type: 'quantize'\n }).color('ELEV', ['#E4682F', '#FF8752', '#FFA783', '#FFBEA8', '#FFDCD6', '#EEF3FF', '#C8D7F5', '#A5C1FC', '#7FA7F9', '#5F8AE5'].reverse());\n scene.addLayer(layer);\n });\n});","order":0,"filename":"ele.js","title":"等高线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*p6LsTp3M144AAAAAAAAAAABkARQnAQ"},{"relativePath":"line/isoline/demo/ele_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/isoline/demo/ele_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 26.842105263157915,\n type: 'amap',\n style: 'dark',\n center: [ 102.599436, 23.116371 ],\n zoom: 14.78\n});\n\nfetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .size('ELEV', h => {\n return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];\n })\n .shape('line')\n .scale('ELEV', {\n type: 'quantize'\n })\n .color('ELEV', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.ele_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 26.842105263157915,\n type: 'amap',\n style: 'dark',\n center: [102.599436, 23.116371],\n zoom: 14.78\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).size('ELEV', function (h) {\n return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];\n }).shape('line').scale('ELEV', {\n type: 'quantize'\n }).color('ELEV', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6']);\n scene.addLayer(layer);\n });\n});","order":1,"filename":"ele_dark.js","title":"等高线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jJd0Qq_E3_UAAAAAAAAAAABkARQnAQ"},{"relativePath":"line/isoline/demo/isoline.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/isoline/demo/isoline.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 104.117492, 36.492696 ],\n zoom: 3.89\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .scale('value', {\n type: 'quantile'\n })\n .size('value', [ 0.5, 1, 1.5, 2 ])\n .shape('line')\n .color(\n 'value',\n [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ].reverse()\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.isoline = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [104.117492, 36.492696],\n zoom: 3.89\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).scale('value', {\n type: 'quantile'\n }).size('value', [0.5, 1, 1.5, 2]).shape('line').color('value', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0'].reverse());\n scene.addLayer(layer);\n });\n});","order":2,"filename":"isoline.js","title":"等高线","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RLvsSbS4PJMAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1},"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0},"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/line/path/page-data.json b/public/page-data/zh/examples/line/path/page-data.json deleted file mode 100644 index 2566ca0d93..0000000000 --- a/public/page-data/zh/examples/line/path/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/line/path","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"line/path/demo/bus_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/path/demo/bus_light.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 103.83735604457024, 1.360253881403068 ],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'light'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'json',\n coordinates: 'path'\n }\n })\n .size('level', level => {\n return [ 0.8, level * 1 ];\n })\n .shape('line')\n .color(\n 'level',\n [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ]\n .reverse()\n .slice(0, 8)\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.bus_light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [103.83735604457024, 1.360253881403068],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'light'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'json',\n coordinates: 'path'\n }\n }).size('level', function (level) {\n return [0.8, level * 1];\n }).shape('line').color('level', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0'].reverse().slice(0, 8));\n scene.addLayer(layer);\n });\n});","order":0,"filename":"bus_light.js","title":"公交线路","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YtfjQr5vRS4AAAAAAAAAAABkARQnAQ"},{"relativePath":"line/path/demo/bus_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/path/demo/bus_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 103.83735, 1.3602538 ],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'dark'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data, {\n parser: {\n type: 'json',\n coordinates: 'path'\n }\n })\n .size('level', level => {\n return [ 0.8, level * 1 ];\n })\n .shape('line')\n .color(\n 'level',\n [\n '#312B60',\n '#4A457E',\n '#615C99',\n '#816CAD',\n '#A67FB5',\n '#C997C7',\n '#DEB8D4',\n '#F5D4E6',\n '#FAE4F1',\n '#FFF3FC'\n ].slice(0, 8)\n );\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.bus_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [103.83735, 1.3602538],\n pitch: 4.00000000000001,\n zoom: 10.210275860702593,\n rotation: 19.313180925794313,\n type: 'mapbox',\n style: 'dark'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data, {\n parser: {\n type: 'json',\n coordinates: 'path'\n }\n }).size('level', function (level) {\n return [0.8, level * 1];\n }).shape('line').color('level', ['#312B60', '#4A457E', '#615C99', '#816CAD', '#A67FB5', '#C997C7', '#DEB8D4', '#F5D4E6', '#FAE4F1', '#FFF3FC'].slice(0, 8));\n scene.addLayer(layer);\n });\n});","order":1,"filename":"bus_dark.js","title":"公交线路","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j-P8RaJMEvAAAAAAAAAAAABkARQnAQ"},{"relativePath":"line/path/demo/road_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/path/demo/road_light.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 116.3956, 39.9392 ],\n pitch: 0,\n zoom: 10,\n rotation: 0,\n type: 'mapbox',\n style: 'light'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .size(1.5)\n .shape('line')\n .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.road_light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [116.3956, 39.9392],\n pitch: 0,\n zoom: 10,\n rotation: 0,\n type: 'mapbox',\n style: 'light'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).size(1.5).shape('line').color('标准名称', ['#5B8FF9', '#5CCEA1', '#5D7092']);\n scene.addLayer(layer);\n });\n});","order":2,"filename":"road_light.js","title":"路径","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LuXiTZAq_84AAAAAAAAAAABkARQnAQ"},{"relativePath":"line/path/demo/road_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/line/path/demo/road_dark.js","source":"import { Scene, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n center: [ 116.3956, 39.9392 ],\n pitch: 0,\n zoom: 10,\n rotation: 0,\n type: 'mapbox',\n style: 'dark'\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new LineLayer({})\n .source(data)\n .size(1.5)\n .shape('line')\n .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]);\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.road_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n center: [116.3956, 39.9392],\n pitch: 0,\n zoom: 10,\n rotation: 0,\n type: 'mapbox',\n style: 'dark'\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.LineLayer({}).source(data).size(1.5).shape('line').color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16']);\n scene.addLayer(layer);\n });\n});","order":3,"filename":"road_dark.js","title":"路径","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DDjQRLEnwpoAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7},"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1},"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/point/bubble/page-data.json b/public/page-data/zh/examples/point/bubble/page-data.json deleted file mode 100644 index 5842630e55..0000000000 --- a/public/page-data/zh/examples/point/bubble/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/point/bubble","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/bubble/demo/point.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/bubble/demo/point.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 140.067171, 36.26186 ],\n zoom: 5.32,\n maxZoom: 10\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data)\n .shape('circle')\n .size('mag', [ 1, 25 ])\n .color('mag', mag => {\n return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';\n })\n .style({\n opacity: 0.3,\n strokeWidth: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.point = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [140.067171, 36.26186],\n zoom: 5.32,\n maxZoom: 10\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data).shape('circle').size('mag', [1, 25]).color('mag', function (mag) {\n return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';\n }).style({\n opacity: 0.3,\n strokeWidth: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":0,"filename":"point.js","title":"气泡图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fNGiS7YI1tIAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/bubble/demo/color.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/bubble/demo/color.js","source":"import { Scene, PointLayer } from '@antv/l7';\n\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 121.435159, 31.256971 ],\n zoom: 14.89,\n minZoom: 10\n});\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n })\n .shape('name', [\n 'circle',\n 'triangle',\n 'square',\n 'pentagon',\n 'hexagon',\n 'octogon',\n 'hexagram',\n 'rhombus',\n 'vesica'\n ])\n .size('unit_price', [ 10, 25 ])\n .color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])\n .style({\n opacity: 0.3,\n strokeWidth: 2\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.color = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [121.435159, 31.256971],\n zoom: 14.89,\n minZoom: 10\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n }).shape('name', ['circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica']).size('unit_price', [10, 25]).color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452']).style({\n opacity: 0.3,\n strokeWidth: 2\n });\n scene.addLayer(pointLayer);\n });\n});","order":1,"filename":"color.js","title":"形状映射","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iN0nTYRDd3AAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/bubble/demo/world.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/bubble/demo/world.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 96.99215001469588, 29.281597225674773 ],\n zoom: 2.194613775109773,\n maxZoom: 10\n});\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'\n)\n .then(res => res.json())\n .then(data => {\n data.features = data.features.filter(item => {\n return item.properties.capacity > 800;\n });\n const pointLayer = new PointLayer({})\n .source(data)\n .shape('circle')\n .size('capacity', [ 0, 16 ])\n .color('capacity', [\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ])\n .style({\n opacity: 0.5,\n strokeWidth: 0\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.world = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [96.99215001469588, 29.281597225674773],\n zoom: 2.194613775109773,\n maxZoom: 10\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n data.features = data.features.filter(function (item) {\n return item.properties.capacity > 800;\n });\n var pointLayer = new _l.PointLayer({}).source(data).shape('circle').size('capacity', [0, 16]).color('capacity', ['#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6']).style({\n opacity: 0.5,\n strokeWidth: 0\n });\n scene.addLayer(pointLayer);\n });\n});","order":2,"filename":"world.js","title":"气泡图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*v5j_QZEL-1YAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/bubble/demo/scatter.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/bubble/demo/scatter.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [ -121.24357, 37.58264 ],\n pitch: 0,\n zoom: 6.45\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'\n)\n .then(res => res.text())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n x: 'Longitude',\n y: 'Latitude'\n }\n })\n .shape('circle')\n .size(4)\n .color('Magnitude', [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ])\n .style({\n opacity: 0.5,\n strokeWidth: 0\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.scatter = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [-121.24357, 37.58264],\n pitch: 0,\n zoom: 6.45\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv').then(function (res) {\n return res.text();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'csv',\n x: 'Longitude',\n y: 'Latitude'\n }\n }).shape('circle').size(4).color('Magnitude', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0']).style({\n opacity: 0.5,\n strokeWidth: 0\n });\n scene.addLayer(pointLayer);\n });\n});","order":3,"filename":"scatter.js","title":"定点图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LnlmQ7sFWigAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0},"html":""}},"next":{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1},"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/point/chart/page-data.json b/public/page-data/zh/examples/point/chart/page-data.json deleted file mode 100644 index e64d9ce9a3..0000000000 --- a/public/page-data/zh/examples/point/chart/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/point/chart","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/chart/demo/bar.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/chart/demo/bar.js","source":"import { Scene, Marker } from '@antv/l7';\nimport * as G2 from '@antv/g2';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [ 2.6125016864608597, 49.359131 ],\n pitch: 0,\n zoom: 4.19\n});\nscene.render();\nscene.on('loaded', () => {\n addChart();\n});\nfunction addChart() {\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'\n )\n .then(res => res.json())\n .then(data => {\n data.nodes.forEach(function(item) {\n const el = document.createElement('div');\n const total =\n item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;\n\n const size = Math.min(parseInt(total / 30000, 10), 70);\n if (size < 30) {\n return;\n }\n const itemData = [\n {\n item: 'Agriculture',\n count: item.gdp.Agriculture,\n percent: item.gdp.Agriculture / total\n },\n {\n item: 'Industry',\n count: item.gdp.Industry,\n percent: item.gdp.Industry / total\n },\n {\n item: 'Service',\n count: item.gdp.Service,\n percent: item.gdp.Service / total\n }\n ];\n\n const chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.legend(false);\n chart.source(itemData);\n chart.tooltip(false);\n chart.axis('count', {\n grid: false\n });\n chart\n .interval()\n .position('item*count')\n .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])\n .opacity(1);\n chart.render();\n new Marker({\n element: el\n })\n .setLnglat({\n lng: item.coordinates[0],\n lat: item.coordinates[1]\n })\n .addTo(scene);\n });\n });\n}\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\", \"@antv/g2\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"), require(\"@antv/g2\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7, global.g2);\n global.bar = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l, G2) {\n \"use strict\";\n\n G2 = _interopRequireWildcard(G2);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [2.6125016864608597, 49.359131],\n pitch: 0,\n zoom: 4.19\n });\n scene.render();\n scene.on('loaded', function () {\n addChart();\n });\n\n function addChart() {\n fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n data.nodes.forEach(function (item) {\n var el = document.createElement('div');\n var total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;\n var size = Math.min(parseInt(total / 30000, 10), 70);\n\n if (size < 30) {\n return;\n }\n\n var itemData = [{\n item: 'Agriculture',\n count: item.gdp.Agriculture,\n percent: item.gdp.Agriculture / total\n }, {\n item: 'Industry',\n count: item.gdp.Industry,\n percent: item.gdp.Industry / total\n }, {\n item: 'Service',\n count: item.gdp.Service,\n percent: item.gdp.Service / total\n }];\n var chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.legend(false);\n chart.source(itemData);\n chart.tooltip(false);\n chart.axis('count', {\n grid: false\n });\n chart.interval().position('item*count').color('item', ['#5CCEA1', '#5D7092', '#5B8FF9']).opacity(1);\n chart.render();\n new _l.Marker({\n element: el\n }).setLnglat({\n lng: item.coordinates[0],\n lat: item.coordinates[1]\n }).addTo(scene);\n });\n });\n }\n});","order":0,"filename":"bar.js","title":"柱图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6AR6Qq0Bq-MAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/chart/demo/chart.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/chart/demo/chart.js","source":"import { Scene, Marker } from '@antv/l7';\nimport * as G2 from '@antv/g2';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [ 2.6125016864608597, 49.359131 ],\n pitch: 0,\n zoom: 4.19\n});\nscene.render();\nscene.on('loaded', () => {\n addChart();\n});\nfunction addChart() {\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'\n )\n .then(res => res.json())\n .then(data => {\n data.nodes.forEach(function(item) {\n const el = document.createElement('div');\n const total =\n item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;\n\n const size = Math.min(parseInt(total / 30000, 10), 70);\n if (size < 30) {\n return;\n }\n const itemData = [\n {\n item: 'Agriculture',\n count: item.gdp.Agriculture,\n percent: item.gdp.Agriculture / total\n },\n {\n item: 'Industry',\n count: item.gdp.Industry,\n percent: item.gdp.Industry / total\n },\n {\n item: 'Service',\n count: item.gdp.Service,\n percent: item.gdp.Service / total\n }\n ];\n\n const sliceNumber = 0.02;\n\n // 自定义 other 的图形，增加两条线\n G2.Shape.registerShape('interval', 'sliceShape', {\n draw: function draw(cfg, container) {\n const points = cfg.points;\n let path = [];\n path.push([ 'M', points[0].x, points[0].y ]);\n path.push([ 'L', points[1].x, points[1].y - sliceNumber ]);\n path.push([ 'L', points[2].x, points[2].y - sliceNumber ]);\n path.push([ 'L', points[3].x, points[3].y ]);\n path.push('Z');\n path = this.parsePath(path);\n return container.addShape('path', {\n attrs: {\n fill: cfg.color,\n path\n }\n });\n }\n });\n\n const chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.legend(false);\n chart.source(itemData);\n chart.coord('theta', {\n innerRadius: 0.6\n });\n chart.tooltip(false);\n chart\n .intervalStack()\n .position('percent')\n .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])\n .shape('sliceShape');\n chart.render();\n new Marker({\n element: el\n })\n .setLnglat({\n lng: item.coordinates[0],\n lat: item.coordinates[1]\n })\n .addTo(scene);\n });\n });\n}\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\", \"@antv/g2\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"), require(\"@antv/g2\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7, global.g2);\n global.chart = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l, G2) {\n \"use strict\";\n\n G2 = _interopRequireWildcard(G2);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [2.6125016864608597, 49.359131],\n pitch: 0,\n zoom: 4.19\n });\n scene.render();\n scene.on('loaded', function () {\n addChart();\n });\n\n function addChart() {\n fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n data.nodes.forEach(function (item) {\n var el = document.createElement('div');\n var total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;\n var size = Math.min(parseInt(total / 30000, 10), 70);\n\n if (size < 30) {\n return;\n }\n\n var itemData = [{\n item: 'Agriculture',\n count: item.gdp.Agriculture,\n percent: item.gdp.Agriculture / total\n }, {\n item: 'Industry',\n count: item.gdp.Industry,\n percent: item.gdp.Industry / total\n }, {\n item: 'Service',\n count: item.gdp.Service,\n percent: item.gdp.Service / total\n }];\n var sliceNumber = 0.02; // 自定义 other 的图形，增加两条线\n\n G2.Shape.registerShape('interval', 'sliceShape', {\n draw: function draw(cfg, container) {\n var points = cfg.points;\n var path = [];\n path.push(['M', points[0].x, points[0].y]);\n path.push(['L', points[1].x, points[1].y - sliceNumber]);\n path.push(['L', points[2].x, points[2].y - sliceNumber]);\n path.push(['L', points[3].x, points[3].y]);\n path.push('Z');\n path = this.parsePath(path);\n return container.addShape('path', {\n attrs: {\n fill: cfg.color,\n path: path\n }\n });\n }\n });\n var chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.legend(false);\n chart.source(itemData);\n chart.coord('theta', {\n innerRadius: 0.6\n });\n chart.tooltip(false);\n chart.intervalStack().position('percent').color('item', ['#5CCEA1', '#5D7092', '#5B8FF9']).shape('sliceShape');\n chart.render();\n new _l.Marker({\n element: el\n }).setLnglat({\n lng: item.coordinates[0],\n lat: item.coordinates[1]\n }).addTo(scene);\n });\n });\n }\n});","order":1,"filename":"chart.js","title":"环图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*X06uT50Ll7QAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/chart/demo/ring.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/chart/demo/ring.js","source":"import { Scene, Marker } from '@antv/l7';\nimport * as G2 from '@antv/g2';\n\nconst CSS = `.l7-marker .g2-guide-html {\n width: 50px;\n height: 50px;\n vertical-align: middle;\n text-align: center;\n line-height: 0.1\n}\n\nl7-marker .g2-guide-html .title {\n font-size: 12px;\n color: #8c8c8c;\n font-weight: 300;\n}\n\nl7-marker .g2-guide-html .value {\n font-size: 18px;\n color: #000;\n font-weight: bold;\n}\n`;\nfunction loadCssCode(code) {\n const style = document.createElement('style');\n style.type = 'text/css';\n style.rel = 'stylesheet';\n // for Chrome Firefox Opera Safari\n style.appendChild(document.createTextNode(code));\n // for IE\n // style.styleSheet.cssText = code;\n const head = document.getElementsByTagName('head')[0];\n head.appendChild(style);\n}\nloadCssCode(CSS);\n\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [ 52.21496184144132, 24.121126851768906 ],\n zoom: 3.802\n});\nscene.render();\nscene.on('loaded', () => {\n Promise.all([\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'\n ).then(d => d.json()),\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'\n ).then(d => d.json())\n ]).then(function onLoad([ center, population ]) {\n const popobj = {};\n population.forEach(element => {\n popobj[element.Code] =\n element['Population, female (% of total) (% of total)'];\n });\n // 数据绑定\n\n center.features = center.features.map(fe => {\n fe.properties.female = popobj[fe.properties.id] * 1 || 0;\n return fe;\n });\n center.features.forEach(point => {\n const el = document.createElement('div');\n const coord = point.geometry.coordinates;\n const v = point.properties.female * 1;\n if (v < 1 || (v > 46 && v < 54)) { return; }\n const size = 60;\n const data = [\n {\n type: '男性',\n value: 100.0 - v.toFixed(2)\n },\n {\n type: '女性',\n value: v.toFixed(2) * 1\n }\n ];\n const chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.source(data);\n chart.legend(false);\n chart.tooltip(false);\n chart.coord('theta', {\n radius: 0.9,\n innerRadius: 0.6\n });\n chart\n .intervalStack()\n .position('value')\n .color('type', [ '#5CCEA1', '#5B8FF9' ])\n .opacity(1);\n chart.render();\n new Marker({ element: el })\n .setLnglat({\n lng: coord[0],\n lat: coord[1]\n })\n .addTo(scene);\n });\n });\n});\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\", \"@antv/g2\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"), require(\"@antv/g2\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7, global.g2);\n global.ring = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l, G2) {\n \"use strict\";\n\n G2 = _interopRequireWildcard(G2);\n\n function _getRequireWildcardCache() { if (typeof WeakMap !== \"function\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }\n\n function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \"object\" && typeof obj !== \"function\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\n\n function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\n function _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\n function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\n function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n var CSS = \".l7-marker .g2-guide-html {\\n width: 50px;\\n height: 50px;\\n vertical-align: middle;\\n text-align: center;\\n line-height: 0.1\\n}\\n\\nl7-marker .g2-guide-html .title {\\n font-size: 12px;\\n color: #8c8c8c;\\n font-weight: 300;\\n}\\n\\nl7-marker .g2-guide-html .value {\\n font-size: 18px;\\n color: #000;\\n font-weight: bold;\\n}\\n\";\n\n function loadCssCode(code) {\n var style = document.createElement('style');\n style.type = 'text/css';\n style.rel = 'stylesheet'; // for Chrome Firefox Opera Safari\n\n style.appendChild(document.createTextNode(code)); // for IE\n // style.styleSheet.cssText = code;\n\n var head = document.getElementsByTagName('head')[0];\n head.appendChild(style);\n }\n\n loadCssCode(CSS);\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'dark',\n center: [52.21496184144132, 24.121126851768906],\n zoom: 3.802\n });\n scene.render();\n scene.on('loaded', function () {\n Promise.all([fetch('https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json').then(function (d) {\n return d.json();\n }), fetch('https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json').then(function (d) {\n return d.json();\n })]).then(function onLoad(_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n center = _ref2[0],\n population = _ref2[1];\n\n var popobj = {};\n population.forEach(function (element) {\n popobj[element.Code] = element['Population, female (% of total) (% of total)'];\n }); // 数据绑定\n\n center.features = center.features.map(function (fe) {\n fe.properties.female = popobj[fe.properties.id] * 1 || 0;\n return fe;\n });\n center.features.forEach(function (point) {\n var el = document.createElement('div');\n var coord = point.geometry.coordinates;\n var v = point.properties.female * 1;\n\n if (v < 1 || v > 46 && v < 54) {\n return;\n }\n\n var size = 60;\n var data = [{\n type: '男性',\n value: 100.0 - v.toFixed(2)\n }, {\n type: '女性',\n value: v.toFixed(2) * 1\n }];\n var chart = new G2.Chart({\n container: el,\n width: size,\n height: size,\n render: 'svg',\n padding: 0\n });\n chart.source(data);\n chart.legend(false);\n chart.tooltip(false);\n chart.coord('theta', {\n radius: 0.9,\n innerRadius: 0.6\n });\n chart.intervalStack().position('value').color('type', ['#5CCEA1', '#5B8FF9']).opacity(1);\n chart.render();\n new _l.Marker({\n element: el\n }).setLnglat({\n lng: coord[0],\n lat: coord[1]\n }).addTo(scene);\n });\n });\n });\n});","order":2,"filename":"ring.js","title":"环图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-oG0T64BnZoAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4},"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

"}},"next":{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7},"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/point/column/page-data.json b/public/page-data/zh/examples/point/column/page-data.json deleted file mode 100644 index 1d1e052bb5..0000000000 --- a/public/page-data/zh/examples/point/column/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/point/column","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/column/demo/column_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/column_light.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 48.62562,\n type: 'amap',\n style: 'light',\n center: [ 104.026043, 31.847 ],\n rotation: -0.76,\n zoom: 4.48\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n })\n .shape('cylinder')\n .size('t', function(level) {\n return [ 1, 2, level * 2 + 20 ];\n })\n .color('#006CFF')\n .style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.column_light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 48.62562,\n type: 'amap',\n style: 'light',\n center: [104.026043, 31.847],\n rotation: -0.76,\n zoom: 4.48\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n }).shape('cylinder').size('t', function (level) {\n return [1, 2, level * 2 + 20];\n }).color('#006CFF').style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":0,"filename":"column_light.js","title":"3D柱图_浅色底图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kjvTRLNtckIAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/column/demo/clumn_shape_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/clumn_shape_light.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'light',\n center: [ 121.412224, 31.26192438 ],\n zoom: 13.13438,\n rotation: 35.97133\n});\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n })\n .shape('name', [\n 'cylinder',\n 'triangleColumn',\n 'hexagonColumn',\n 'squareColumn'\n ])\n .size('unit_price', h => {\n return [ 6, 6, h / 500 ];\n })\n .color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])\n .style({\n opacity: 1.0\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.clumn_shape_light = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 60,\n type: 'mapbox',\n style: 'light',\n center: [121.412224, 31.26192438],\n zoom: 13.13438,\n rotation: 35.97133\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n }).shape('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn']).size('unit_price', function (h) {\n return [6, 6, h / 500];\n }).color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A']).style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":1,"filename":"clumn_shape_light.js","title":"3D 浅色柱图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RVw4QKTJe7kAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/column/demo/column_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/column_dark.js","source":"import { Scene, PointLayer } from '@antv/l7';\n\nconst scene = new Scene({\n id: 'map',\n pitch: 35.210526315789465,\n type: 'amap',\n style: 'dark',\n center: [ 104.288144, 31.239692 ],\n zoom: 4.4\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n })\n .shape('cylinder')\n .size('t', function(level) {\n return [ 1, 2, level * 2 + 20 ];\n })\n .color('t', [\n '#094D4A',\n '#146968',\n '#1D7F7E',\n '#289899',\n '#34B6B7',\n '#4AC5AF',\n '#5FD3A6',\n '#7BE39E',\n '#A1EDB8',\n '#CEF8D6'\n ])\n .style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.column_dark = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 35.210526315789465,\n type: 'amap',\n style: 'dark',\n center: [104.288144, 31.239692],\n zoom: 4.4\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data.list, {\n parser: {\n type: 'json',\n x: 'j',\n y: 'w'\n }\n }).shape('cylinder').size('t', function (level) {\n return [1, 2, level * 2 + 20];\n }).color('t', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6']).style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":2,"filename":"column_dark.js","title":"3D柱图_深色底图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7COqR4wCc6QAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/column/demo/clumn_shape.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/clumn_shape.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 66.02383,\n type: 'amap',\n style: 'dark',\n center: [ 121.400257, 31.25287 ],\n zoom: 14.55,\n rotation: 134.9507\n});\nwindow.mapScene = scene;\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n })\n .shape('name', [\n 'cylinder',\n 'triangleColumn',\n 'hexagonColumn',\n 'squareColumn'\n ])\n .size('unit_price', h => {\n return [ 6, 6, h / 500 ];\n })\n .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])\n .style({\n opacity: 1.0\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.clumn_shape = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 66.02383,\n type: 'amap',\n style: 'dark',\n center: [121.400257, 31.25287],\n zoom: 14.55,\n rotation: 134.9507\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n }).shape('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn']).size('unit_price', function (h) {\n return [6, 6, h / 500];\n }).color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F']).style({\n opacity: 1.0\n });\n scene.addLayer(pointLayer);\n });\n});","order":3,"filename":"clumn_shape.js","title":"3D 深色柱图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tvpvQZLv_xYAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2},"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6},"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/point/image/page-data.json b/public/page-data/zh/examples/point/image/page-data.json deleted file mode 100644 index 0f49ba286b..0000000000 --- a/public/page-data/zh/examples/point/image/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/point/image","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/image/demo/image.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/image/demo/image.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 121.434765, 31.256735 ],\n zoom: 14.83\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n .then(res => res.json())\n .then(data => {\n scene.addImage(\n '00',\n 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'\n );\n scene.addImage(\n '01',\n 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'\n );\n scene.addImage(\n '02',\n 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'\n );\n const imageLayer = new PointLayer()\n .source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n })\n .shape('name', [ '00', '01', '02' ])\n .size(20);\n scene.addLayer(imageLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.image = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [121.434765, 31.256735],\n zoom: 14.83\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n scene.addImage('00', 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg');\n scene.addImage('01', 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg');\n scene.addImage('02', 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg');\n var imageLayer = new _l.PointLayer().source(data, {\n parser: {\n type: 'json',\n x: 'longitude',\n y: 'latitude'\n }\n }).shape('name', ['00', '01', '02']).size(20);\n scene.addLayer(imageLayer);\n });\n});","order":0,"filename":"image.js","title":"符号图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oVyHT5S3sv0AAAAAAAAAAABkARQnAQ"},{"relativePath":"point/image/demo/locate.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/image/demo/locate.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 116.276227, 35.256776 ],\n zoom: 6\n});\n\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'\n)\n .then(res => res.json())\n .then(data => {\n scene.addImage(\n 'marker',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'\n );\n const imageLayer = new PointLayer()\n .source(data)\n .shape('marker')\n .size(12);\n scene.addLayer(imageLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.locate = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [116.276227, 35.256776],\n zoom: 6\n });\n fetch('https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n scene.addImage('marker', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ');\n var imageLayer = new _l.PointLayer().source(data).shape('marker').size(12);\n scene.addLayer(imageLayer);\n });\n});","order":1,"filename":"locate.js","title":"顶点符号","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DgoWS7-XKdUAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/image/demo/weather.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/image/demo/weather.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [ 120.5969, 29.7918 ],\n pitch: 35,\n zoom: 7,\n rotation: 4.183582\n});\nscene.addImage(\n '00',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '01',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '02',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '04',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '11',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '15',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '07',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '16',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '06',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '08',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '17',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ'\n);\nscene.addImage(\n '05',\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ'\n);\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json'\n)\n .then(res => res.json())\n .then(data => {\n const imageLayer = new PointLayer()\n .source(data)\n .shape('w', function(w) {\n return w;\n })\n .size(15);\n scene.addLayer(imageLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.weather = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [120.5969, 29.7918],\n pitch: 35,\n zoom: 7,\n rotation: 4.183582\n });\n scene.addImage('00', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ');\n scene.addImage('01', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ');\n scene.addImage('02', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ');\n scene.addImage('04', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ');\n scene.addImage('11', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ');\n scene.addImage('15', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ');\n scene.addImage('07', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ');\n scene.addImage('16', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ');\n scene.addImage('06', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ');\n scene.addImage('08', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ');\n scene.addImage('17', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ');\n scene.addImage('05', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ');\n fetch('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var imageLayer = new _l.PointLayer().source(data).shape('w', function (w) {\n return w;\n }).size(15);\n scene.addLayer(imageLayer);\n });\n});","order":2,"filename":"weather.js","title":"天气","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-nk1RZJeGooAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1},"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4},"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/point/marker/page-data.json b/public/page-data/zh/examples/point/marker/page-data.json deleted file mode 100644 index b5316cf441..0000000000 --- a/public/page-data/zh/examples/point/marker/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/point/marker","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/marker/demo/marker.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/marker/demo/marker.js","source":"import { Scene, Marker } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [ 105.790327, 36.495636 ],\n pitch: 0,\n zoom: 4\n});\nscene.render();\nscene.on('loaded', () => {\n addMarkers();\n});\n\nfunction addMarkers() {\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'\n )\n .then(res => res.json())\n .then(nodes => {\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i].g !== '1' || nodes[i].v === '') { continue; }\n const el = document.createElement('label');\n el.className = 'lableclass';\n el.textContent = nodes[i].v + '℃';\n el.style.background = getColor(nodes[i].v);\n el.style.borderColor = getColor(nodes[i].v);\n new Marker({\n element: el\n })\n .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })\n .addTo(scene);\n }\n });\n}\n\nfunction getColor(v) {\n return v > 50\n ? '#800026'\n : v > 40\n ? '#BD0026'\n : v > 30\n ? '#E31A1C'\n : v > 20\n ? '#FC4E2A'\n : v > 10\n ? '#FD8D3C'\n : v > 5\n ? '#FEB24C'\n : v > 0\n ? '#FED976'\n : '#FFEDA0';\n}\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.marker = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'light',\n center: [105.790327, 36.495636],\n pitch: 0,\n zoom: 4\n });\n scene.render();\n scene.on('loaded', function () {\n addMarkers();\n });\n\n function addMarkers() {\n fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json').then(function (res) {\n return res.json();\n }).then(function (nodes) {\n for (var i = 0; i < nodes.length; i++) {\n if (nodes[i].g !== '1' || nodes[i].v === '') {\n continue;\n }\n\n var el = document.createElement('label');\n el.className = 'lableclass';\n el.textContent = nodes[i].v + '℃';\n el.style.background = getColor(nodes[i].v);\n el.style.borderColor = getColor(nodes[i].v);\n new _l.Marker({\n element: el\n }).setLnglat({\n lng: nodes[i].x * 1,\n lat: nodes[i].y\n }).addTo(scene);\n }\n });\n }\n\n function getColor(v) {\n return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0';\n }\n});","order":0,"filename":"marker.js","title":"温度","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*aTDtTL1qls0AAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6},"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

"}},"next":{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0},"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/point/scatter/page-data.json b/public/page-data/zh/examples/point/scatter/page-data.json deleted file mode 100644 index 6012c38cf0..0000000000 --- a/public/page-data/zh/examples/point/scatter/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/point/scatter","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/scatter/demo/normal2.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/scatter/demo/normal2.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 64.88,\n type: 'amap',\n style: 'dark',\n center: [ 114.060288, 22.53684 ],\n zoom: 15.63\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'\n)\n .then(res => res.json())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data)\n .size(2)\n .color('h8', [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ])\n .style({\n opacity: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.normal2 = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 64.88,\n type: 'amap',\n style: 'dark',\n center: [114.060288, 22.53684],\n zoom: 15.63\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data).size(2).color('h8', ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0']).style({\n opacity: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":0,"filename":"normal2.js","title":"城市亮度图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"},{"relativePath":"point/scatter/demo/normal.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/scatter/demo/normal.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [ 121.417463, 31.215175 ],\n pitch: 0,\n zoom: 11\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')\n .then(res => res.text())\n .then(data => {\n const pointLayer = new PointLayer({})\n .source(data, {\n parser: {\n type: 'csv',\n y: 'lat',\n x: 'lng'\n }\n })\n .size(0.5)\n .color('#080298')\n .style({\n opacity: 1\n });\n\n scene.addLayer(pointLayer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.normal = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n type: 'amap',\n style: 'dark',\n center: [121.417463, 31.215175],\n pitch: 0,\n zoom: 11\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt').then(function (res) {\n return res.text();\n }).then(function (data) {\n var pointLayer = new _l.PointLayer({}).source(data, {\n parser: {\n type: 'csv',\n y: 'lat',\n x: 'lng'\n }\n }).size(0.5).color('#080298').style({\n opacity: 1\n });\n scene.addLayer(pointLayer);\n });\n});","order":1,"filename":"normal.js","title":"海量点","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0},"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2},"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/polygon/3d/page-data.json b/public/page-data/zh/examples/polygon/3d/page-data.json deleted file mode 100644 index 0b3b15eeba..0000000000 --- a/public/page-data/zh/examples/polygon/3d/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/polygon/3d","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"polygon/3d/demo/polygon.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/polygon/3d/demo/polygon.js","source":"import { Scene, PolygonLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'dark',\n center: [ 114.050008, 22.529272 ],\n zoom: 14.1\n});\n\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new PolygonLayer({})\n .source(data)\n .shape('extrude')\n .size('h20', [ 100, 120, 160, 200, 260, 500 ])\n .color('h20', [\n '#816CAD',\n '#A67FB5',\n '#C997C7',\n '#DEB8D4',\n '#F5D4E6',\n '#FAE4F1',\n '#FFF3FC'\n ])\n .style({\n opacity: 1.0\n });\n scene.addLayer(layer);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.polygon = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'dark',\n center: [114.050008, 22.529272],\n zoom: 14.1\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.PolygonLayer({}).source(data).shape('extrude').size('h20', [100, 120, 160, 200, 260, 500]).color('h20', ['#816CAD', '#A67FB5', '#C997C7', '#DEB8D4', '#F5D4E6', '#FAE4F1', '#FFF3FC']).style({\n opacity: 1.0\n });\n scene.addLayer(layer);\n });\n});","order":0,"filename":"polygon.js","title":"3D 建筑面","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RCaZSLthUn0AAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0},"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0},"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/polygon/fill/page-data.json b/public/page-data/zh/examples/polygon/fill/page-data.json deleted file mode 100644 index 3f860f4871..0000000000 --- a/public/page-data/zh/examples/polygon/fill/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/polygon/fill","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"polygon/fill/demo/polygon.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/polygon/fill/demo/polygon.js","source":"\nimport { Scene, PolygonLayer, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 107.042225, 37.66565 ],\n zoom: 3.87\n});\n\nfetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')\n .then(res => res.json())\n .then(data => {\n const colors = [\n '#D7F9F0',\n '#A6E1E0',\n '#72BED6',\n '#5B8FF9',\n '#3474DB',\n '#005CBE',\n '#00419F',\n '#00287E'\n ];\n const layer = new PolygonLayer({})\n .source(data)\n .color('name', colors)\n .shape('fill')\n .style({\n opacity: 0.9\n });\n\n const layer2 = new LineLayer({\n zIndex: 2\n })\n .source(data)\n .color('#fff')\n .size(0.3)\n .style({\n opacity: 1\n });\n\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.polygon = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [107.042225, 37.66565],\n zoom: 3.87\n });\n fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var colors = ['#D7F9F0', '#A6E1E0', '#72BED6', '#5B8FF9', '#3474DB', '#005CBE', '#00419F', '#00287E'];\n var layer = new _l.PolygonLayer({}).source(data).color('name', colors).shape('fill').style({\n opacity: 0.9\n });\n var layer2 = new _l.LineLayer({\n zIndex: 2\n }).source(data).color('#fff').size(0.3).style({\n opacity: 1\n });\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n});","order":0,"filename":"polygon.js","title":"全国地图行政区划","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"},{"relativePath":"polygon/fill/demo/fill.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/polygon/fill/demo/fill.js","source":"import { Scene, PolygonLayer, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 116.368652, 39.93866 ],\n zoom: 10.07\n});\nwindow.mapScene = scene;\nfetch(\n 'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'\n)\n .then(res => res.json())\n .then(data => {\n const layer = new PolygonLayer({})\n .source(data)\n .color(\n 'unit_price',\n [\n '#1A4397',\n '#2555B7',\n '#3165D1',\n '#467BE8',\n '#6296FE',\n '#7EA6F9',\n '#98B7F7',\n '#BDD0F8',\n '#DDE6F7',\n '#F2F5FC'\n ].reverse()\n )\n .shape('fill')\n .style({\n opacity: 1\n });\n const layer2 = new LineLayer({\n zIndex: 2\n })\n .source(data)\n .color('#fff')\n .size(0.3)\n .style({\n opacity: 1\n });\n\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.fill = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [116.368652, 39.93866],\n zoom: 10.07\n });\n window.mapScene = scene;\n fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var layer = new _l.PolygonLayer({}).source(data).color('unit_price', ['#1A4397', '#2555B7', '#3165D1', '#467BE8', '#6296FE', '#7EA6F9', '#98B7F7', '#BDD0F8', '#DDE6F7', '#F2F5FC'].reverse()).shape('fill').style({\n opacity: 1\n });\n var layer2 = new _l.LineLayer({\n zIndex: 2\n }).source(data).color('#fff').size(0.3).style({\n opacity: 1\n });\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n});","order":1,"filename":"fill.js","title":"连续填充图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ouhFSJNcNvkAAAAAAAAAAABkARQnAQ"},{"relativePath":"polygon/fill/demo/population.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/polygon/fill/demo/population.js","source":"import { Scene, PolygonLayer, LineLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'light',\n center: [ 3.438, 40.16797 ],\n zoom: 0.51329\n});\nPromise.all([\n fetch(\n 'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json'\n ).then(d => d.json()),\n fetch(\n 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'\n ).then(d => d.json())\n]).then(function onLoad([ world, population ]) {\n const popobj = {};\n population.forEach(element => {\n popobj[element.Code] =\n element['Population, female (% of total) (% of total)'];\n });\n // 数据绑定\n world.features = world.features.map(fe => {\n fe.properties.female = popobj[fe.id] * 1 || 0;\n return fe;\n });\n const colors = [\n '#0A3663',\n '#1558AC',\n '#3771D9',\n '#4D89E5',\n '#64A5D3',\n '#72BED6',\n '#83CED6',\n '#A6E1E0',\n '#B8EFE2',\n '#D7F9F0'\n ];\n const layer = new PolygonLayer({})\n .source(world)\n .scale('female', {\n type: 'quantile'\n })\n .color('female', colors)\n .shape('fill')\n .style({\n opacity: 0.9\n });\n\n const layer2 = new LineLayer({\n zIndex: 2\n })\n .source(world)\n .color('#fff')\n .size(0.3)\n .style({\n opacity: 1\n });\n\n scene.addLayer(layer);\n scene.addLayer(layer2);\n});\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.population = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\n function _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\n function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\n function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'mapbox',\n style: 'light',\n center: [3.438, 40.16797],\n zoom: 0.51329\n });\n Promise.all([fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(function (d) {\n return d.json();\n }), fetch('https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json').then(function (d) {\n return d.json();\n })]).then(function onLoad(_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n world = _ref2[0],\n population = _ref2[1];\n\n var popobj = {};\n population.forEach(function (element) {\n popobj[element.Code] = element['Population, female (% of total) (% of total)'];\n }); // 数据绑定\n\n world.features = world.features.map(function (fe) {\n fe.properties.female = popobj[fe.id] * 1 || 0;\n return fe;\n });\n var colors = ['#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0'];\n var layer = new _l.PolygonLayer({}).source(world).scale('female', {\n type: 'quantile'\n }).color('female', colors).shape('fill').style({\n opacity: 0.9\n });\n var layer2 = new _l.LineLayer({\n zIndex: 2\n }).source(world).color('#fff').size(0.3).style({\n opacity: 1\n });\n scene.addLayer(layer);\n scene.addLayer(layer2);\n });\n});","order":2,"filename":"population.js","title":"世界地图 女性人口比例","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7c0eQYMfxwoAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2},"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0},"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/examples/raster/basic/page-data.json b/public/page-data/zh/examples/raster/basic/page-data.json deleted file mode 100644 index 2de70e05d6..0000000000 --- a/public/page-data/zh/examples/raster/basic/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/raster/basic","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"
","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"

An open source large-scale geospatial data visualization analysis development framework powered by WebGL.

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"

L7 地理空间数据可视分析引擎

\n

2.0.beta 版本目前有些功能还未完善，

\n

⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，

\n

⚠️ 1.x 版本的用户需求我们持续跟进 旧版官网地址

\n

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

\n\n

核心特性

\n

🌏 数据驱动可视化展示

\n

数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。

\n

🌏 2D，3D 一体化的海量数据高性能渲染

\n

百万级空间数据实时，动态渲染。

\n

🌏 简单灵活的数据接入

\n

支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

\n

🌏 多地图底图支持，支持离线内网部署

\n

高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

\n

支持丰富的图表类型

\n

点图层

\n
    \n
  • 气泡图
    • \n
  • 散点图
    • \n
  • 符号地图
    • \n
  • 3D柱状地图
    • \n
  • 聚合地图
    • \n
  • 复合图表地图
    • \n
  • 自定义Marker
    • \n
\n

线图层

\n
    \n
  • 路径地图
    • \n
  • 弧线，支持2D弧线、3D弧线以及大圆航线
    • \n
  • 等值线
    • \n
\n

面图层

\n
    \n
  • 填充图
    • \n
  • 3D填充图
    • \n
\n

热力图

\n
    \n
  • 经典热力图
    • \n
  • 蜂窝热力图
    • \n
  • 网格热力图
    • \n
\n

栅格地图

\n
    \n
  • 图片
    • \n
  • Raster
    • \n
\n

L7 2.0 Roadmap

\n

\"L7

\n

更多技术细节，详细进展，请关注 GitHub，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

\n

技术支持服务群

\n

L7 相关技术问题，需求反馈，我们会及时响应\n\"地理空间可视化L7支持群\"

","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"

使用方法

\n

L7 提供三种使用方式：CDN、Submodule。

\n

通过 CDN 使用

\n

首先在 <head> 中引入 L7 CDN 版本的 JS 和 CSS 文件：

\n
<head>\n  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>\n</head>
\n

如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 Mapbox 文档：

\n
<head>\n  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>\n  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />\n  <!-- 上一步引入的 L7 JS 和 CSS -->\n</head>
\n

⚠️高德采用异步加载，因此不需要引入任何额外静态文件。

\n

然后在 <body> 中定义一个容器并设置一个 id。通过全局 L7 这个命名空间可以获取场景 L7.Scene 和图层 L7.PolygonLayer：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 L7.Scene 的构造函数，获取方式如下：

\n\n

通过 Submodule 使用

\n

首先通过 npm/yarn

\n
npm install --save @antv/l7\n\nyarn add npm install --save @antv/l7
\n

然后就可以使用其中包含的场景和各类图层：

\n
import { Scene, PolygonLayer } from '@antv/l7';\n\n(async function() {\n  // 获取数据\n  const response = await fetch(\n    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n  );\n  const data = await response.json();\n\n  // 创建场景\n  const scene = new Scene({\n    center: [110.19382669582967, 50.258134],\n    id: 'map',\n    pitch: 0,\n    style: 'dark',\n    type: 'amap',\n    zoom: 3,\n    token: 'pg.xxx', // 高德或者 Mapbox 的 token\n  });\n\n  // 创建图层\n  const layer = new PolygonLayer({});\n  layer\n    .source(data)\n    .size('name', [0, 10000, 50000, 30000, 100000])\n    .color('name', [\n      '#2E8AE6',\n      '#69D1AB',\n      '#DAF291',\n      '#FFD591',\n      '#FF7A45',\n      '#CF1D49',\n    ])\n    .shape('fill')\n    .style({\n      opacity: 0.8,\n    });\n\n  // 添加图层到场景中\n  scene.addLayer(layer);\n\n  // 渲染场景\n  scene.render();\n})();\n
\n

L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：

\n\n

[WIP] React

\n

React 组件待开发，目前可以暂时以 Submodule 方式使用：

\n
import { Scene, PolygonLayer} from '@antv/l7';\nimport * as React from 'react';\n\nexport default class AMap extends React.Component {\n  private scene: Scene;\n\n  public componentWillUnmount() {\n    this.scene.destroy();\n  }\n\n  public async componentDidMount() {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',\n    );\n    const scene = new Scene({\n      center: [110.19382669582967, 50.258134],\n      id: 'map',\n      pitch: 0,\n      style: 'dark',\n      type: 'amap',\n      zoom: 3,\n      token: 'pg.xxx', // 高德或者 Mapbox 的 token\n    });\n    const layer = new PolygonLayer({});\n\n    layer\n      .source(await response.json())\n      .size('name', [0, 10000, 50000, 30000, 100000])\n      .color('name', [\n        '#2E8AE6',\n        '#69D1AB',\n        '#DAF291',\n        '#FFD591',\n        '#FF7A45',\n        '#CF1D49',\n      ])\n      .shape('fill')\n      .style({\n        opacity: 0.8,\n      });\n    scene.addLayer(layer);\n    scene.render();\n    this.scene = scene;\n  }\n\n  public render() {\n    return (\n      <div\n        id=\"map\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n        }}\n      />\n    );\n  }\n}
\n

⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。

","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n },{\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n          type: 'map',\n          callback:function(item){\n            const [x, y] = item.coordinates;\n            item.lat = item.lat*1;\n            item.lng = item.lng*1;\n            item.v = item.v *1;\n            item.coordinates = [x*1,y*1];\n            return item;\n          }\n\n      },
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 layer.source(data, {\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v',\n        method:'sum'\n      }\n      ]\n    }
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"

Source

\n

概述

\n

source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);

\n

parser:

\n

不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。

\n

transform:

\n

数据转换，数据统计，网格布局，数据聚合等数据操作。

\n

API

\n

parser

\n

空间数据分矢量数据和栅格数据两大类

\n
    \n
  • 矢量数据 支持 csv，geojson，json 三种数据类型
    • \n
  • 栅格数据 支持 image，Raster
    • \n
\n

geojson

\n

geojson 数据为默认数据格式，可以

\n

不需要设置parser 参数

\n
layer.source(data);\n
\n

json

\n

json 不是标准的地理数据结构，因此需要设置对应的经纬度字段

\n

点数据

\n

x: 经度字段

\n

y: 纬度字段

\n
const data = [\n  {\n    lng: 112.345,\n    lat: 30.455,\n    value: 10,\n  },\n  {\n    lng: 114.345,\n    lat: 31.455,\n    value: 10,\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    x: 'lng',\n    y: 'lat',\n  },\n});\n
\n

线段数据

\n

type: json

\n

这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标

\n

x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段 终点经度\ny1:纬度字段 终点纬度

\n
const data = [{\n   lng1:112.345,\n   lat1:30.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  },\n  {\n   lng1:114.345,\n   lat1:31.455,\n   lng2:112.345,\n   lat2:30.455,\n   value: 10\n  }    \n];\n\nlayer.source(\n  data,\n   {\n    parser:{\n        type:'json',\n        x:'lng1',\n        y:'lat1' , \n        x1:'lng1',\n        y1:'lat2' , \n    }\n  }\n})
\n

面数据

\n

需要指定coordinates 字段, coordinates据格式

\n

注意面数据 coord  是三层数据结构

\n
[\n  {\n    type: 'Polygon',\n    geometryCoord: [\n      [\n        [115.1806640625, 30.637912028341123],\n        [114.9609375, 29.152161283318915],\n        [117.79541015625001, 27.430289738862594],\n        [118.740234375, 29.420460341013133],\n        [117.46582031249999, 31.50362930577303],\n        [115.1806640625, 30.637912028341123],\n      ],\n    ],\n  },\n];\n\nlayer.source(data, {\n  parser: {\n    type: 'json',\n    coordinates: 'geometryCoord',\n  },\n});\n
\n

csv

\n

点，线数据配置项同json数据类型

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng1',\n    y: 'lat1',\n    x1: 'lng1',\n    y1: 'lat2',\n  },\n});\n
\n

栅格数据类型**

\n

image

\n

 根据图片的经纬度范围，将图片添加到地图上。 配置项

\n
    \n
  •  type: image
    • \n
  •  extent: 图像的经纬度范围 []
    • \n
\n
layer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
\n

raster

\n

栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项

\n
    \n
  • type  raster
    • \n
  • width  数据宽度二维矩阵 columns 
    • \n
  • height 数据高度
    • \n
  • min 数据最大值
    • \n
  • max 数据最小值
    • \n
  • extent 经纬度范围
    • \n
\n
source(values, {\n  parser: {\n    type: 'raster',\n    width: n,\n    height: m,\n    min: 0,\n    max: 8000,\n    extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],\n  },\n});\n
\n

transforms

\n

目前支持三种数据处理方法 map，grid，hexagon transform配置项

\n
    \n
  • type 数据处理类型
    • \n
  •  tansform cfg  数据处理配置项
    • \n
\n

map

\n

数据处理，支持自定义callback函数

\n
    \n
  • callback:function 回调函数
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n  ],\n});\n
\n

grid

\n

生成方格网布局，根据数据字段统计，主要在网格热力图中使用

\n
    \n
  •  type: 'grid',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
layer.source(data, {\n  transforms: [\n    {\n      type: 'grid',\n      size: 15000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

hexagon

\n

生成六边形网格布局，根据数据字段统计

\n
    \n
  •  type: 'hexagon',
    • \n
  •  size: 网格半径
    • \n
  •  field: 数据统计字段
    • \n
  •  method:聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"

Layer

\n

简介

\n

L7 Layer 接口设计遵循图形语法，在可视表达上

\n

语法示例

\n
new Layer(option)\n  .source()\n  .color()\n  .size()\n  .shape()\n  .style();\n
\n

构造函数

\n

配置项

\n

visable

\n

图层是否可见   {bool } default true

\n

zIndex

\n

 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0

\n

minZoom

\n

图层显示最小缩放等级，（0-18）   {number}  default 0

\n

maxZoom

\n

 图层显示最大缩放等级 （0-18）   {number}  default 18

\n

鼠标事件

\n

beta版当前不支持，正式版会支持

\n
layer.on('click', ev => {}); // 鼠标左键点击图层事件\nlayer.on('dblclick', ev => {}); // 鼠标左键双击图层事件\nlayer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发\nlayer.on('mouseover', ev => {}); // 鼠标移入图层要素内时触发\nlayer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发\nlayer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发\nlayer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发\nlayer.on('mouseleave', ev => {}); // 鼠标离开图层要素\nlayer.on('rightclick', ev => {}); // 鼠标右键图层要素\n
\n

方法

\n

source

\n

数据源为layer设置数据 source(data,config)

\n
    \n
  • data {geojson|json|csv}
    • \n
\n

      源数据

\n
    \n
  • \n

    config  可选 数据源配置项

    \n
      \n
    • parser 数据解析，默认是解析层geojson
      • \n
    • transforms [transform，transform ]  数据处理转换 可设置多个
      • \n
    \n
    • \n
\n

 parser和 transforms 见source文档

\n
layer.source(data, {\n  parser: {\n    type: 'csv',\n    x: 'lng',\n    y: 'lat',\n  },\n  transforms: [\n    {\n      type: 'map',\n      callback: function(item) {\n        const [x, y] = item.coordinates;\n        item.lat = item.lat * 1;\n        item.lng = item.lng * 1;\n        item.v = item.v * 1;\n        item.coordinates = [x * 1, y * 1];\n        return item;\n      },\n    },\n    {\n      type: 'hexagon',\n      size: 6000,\n      field: 'v',\n      method: 'sum',\n    },\n  ],\n});\n
\n

\n

scale

\n

cscle('field', scaleConfig)

\n

(field: string, scaleConfig: object)

\n

为指定的数据字段进行列定义，返回 layer 实例。

\n
    \n
  • field 字段名。
    • \n
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
    • \n
\n
{\n  type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize\n}\n
\n

size

\n

将数据值映射到图形的大小上的方法。

\n

注意： 

\n

不同图层的 size 的含义有所差别：

\n
    \n
  • point 图形的 size 影响点的半径大小和高度；
    • \n
  • line, arc, path 中的 size 影响线的粗细,和高度；
    • \n
  • polygon size 影响的是高度
    • \n
\n
pointLayer.size(10); // 常量\npointLayer.size('type'); // 使用字段映射到大小\npointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值\npointLayer.size('type', type => {\n  // 回调函数\n  if (type === 'a') {\n    return 10;\n  }\n  return 5;\n});\n
\n

size(value）

\n

传入数字常量，如 pointLayer.size(20)

\n

size(field)

\n

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

\n

size(field, callback)

\n

使用回调函数控制图形大小。

\n
    \n
  • callback: function 回调函数。
    • \n
\n
pointLayer.size('age', value => {\n  if (value === 1) {\n    return 5;\n  }\n  return 10;\n});\n
\n

color

\n

将数据值映射到图形的颜色上的方法。

\n
layer.color('red'); // 常量颜色\nlayer.color('type'); // 对 type 字段进行映射，使用内置的颜色\nlayer.color('type', ['red', 'blue']); // 指定颜色\nlayer.color('type', type => {\n  // 通过回调函数\n  if (type === 'a') {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('type*value', (type, value) => {\n  //多个参数，通过回调函数\n  if (type === 'a' && value > 100) {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

color(value)

\n

参数：value ：string\n只支持接收一个参数，value 可以是：

\n
    \n
  • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
    • \n
  • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
    • \n
\n

示例

\n
layer.color('name'); // 映射数据字段\nlayer.color('white'); // 指定颜色\n
\n

color(field, colors)

\n

参数：

\n
    \n
  • field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
    • \n
  •  colors: string | array | function
    • \n
\n

colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。

\n
layer.color('name'); // 使用默认的颜色\nlayer.color('name', ['red', 'blue']); // 使用传入的指定颜色\n
\n
    \n
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
    • \n
\n
layer.color('gender', value => {\n  if (value === 1) {\n    return 'red';\n  }\n  return 'blue';\n});\nlayer.color('gender*age', (gender, age) => {\n  if (age === 20 && gender == ' 男') {\n    return 'red';\n  }\n  return 'blue';\n});\n
\n

shape

\n

将数据值映射到图形的形状上的方法。

\n

shape(shape)

\n

参数shape string

\n

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
layer类型shape类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude
\n

shape(field, shapes)

\n

shape(field, callback)

\n

style

\n

用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放

\n
    \n
  • fill
    • \n
  • opacity  设置透明度
    • \n
  • stroke 线填充颜色
    • \n
  • strokeWidth 线的宽度
    • \n
\n
layer.style({\n  fill: 'red',\n  opacity: 0.8,\n  stroke: 'white',\n});\n
\n

show

\n

图层显示

\n
layer.show();\n
\n

hide

\n

图层隐藏

\n
layer.hide();\n
\n

fitBounds

\n

缩放到图层范围

\n
layer.fitBounds();\n
","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"

填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。

","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"

填充地图的增强实现，通过三维视角中的高度体现数据差异。

","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"

区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"

指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。

","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/l7';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"

简介

\n

Scene

\n

L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理

\n

Map

\n

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。

\n

目前L7 支持两种地图底图

\n
    \n
  • 高德地图 国内业务场景 合规中国地图
    • \n
  • MapBox 国际业务，或者内网离线部署场景
    • \n
\n

map

\n

可以通过scene map 属性获取 map实例

\n
const map = scene.map;\n
\n

为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。

\n

示例代码

\n
import { Scene } from '@antv/scene';\nconst scene = new L7.Scene({\n  id: 'map',\n  mapStyle: 'dark',\n  center: [110.770672, 34.159869],\n  pitch: 45,\n});\n
\n

构造函数

\n

Scene

\n

配置项

\n

地图配置项

\n

id

\n

需传入 dom 容器或者容器 id  {domObject || string} [必选]

\n

zoom

\n

地图初始显示级别 {number} （0-22）

\n

center

\n

地图初始中心经纬度 {Lnglat}

\n

pitch

\n

地图初始俯仰角度 {number}  default 0

\n

style

\n

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

\n
    \n
  • dark
    • \n
  • light
    • \n
  • normal
    • \n
\n

除了内置的样式，你也可以传入自定义的其他属性。

\n

比如高德地图

\n
{\n  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致\n}\n
\n

minZoom

\n

地图最小缩放等级 {number}  default 0 (0-22)

\n

maxZoom

\n

地图最大缩放等级 {number}  default 22 (0-22)

\n

rotateEnable

\n

地图是否可旋转 {Boolean} default true

\n

方法

\n

getZoom

\n

获取当前缩放等级

\n
scene.getZoom();\n
\n

return {float}  当前缩放等级

\n

getLayers()

\n

获取所有的地图图层

\n
scene.getLayers();\n
\n

return 图层数组 {Array}

\n

getCenter()

\n

获取地图中心点

\n
scene.getCenter();\n
\n

return {Lnglat} :地图中心点

\n

getSize()

\n

获取地图容器大小

\n
scene.getSize();\n
\n

return { Object } 地图容器的 width,height

\n

getPitch()

\n

获取地图俯仰角

\n
scene.getPitch();\n
\n

return {number} pitch

\n

setCenter()

\n

设置地图中心点坐标

\n
scene.setCenter([lng, lat]);\n
\n

参数：center {LngLat} 地图中心点

\n

setZoomAndCenter

\n

设置地图等级和中心

\n
scene.setZoomAndCenter(zoom, center);\n
\n

参数：zoom {number}
center {LngLat}

\n

setRotation

\n

设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

\n
scene.setRotation(rotation);\n
\n

参数： rotation {number}

\n

zoomIn

\n

地图放大一级

\n
scene.zoomIn();\n
\n

zoomOut

\n

地图缩小一级

\n
scene.ZoomOUt();\n
\n

panTo

\n

地图平移到指定的位置

\n
scene.panTo(LngLat);\n
\n

参数：center LngLat 中心位置坐标

\n

panBy

\n

以像素为单位沿X方向和Y方向移动地图

\n
scene.panBy(x, y);\n
\n

参数：
x {number} 水平方向移动像素 向右为正方向
      y {number} 垂直方向移动像素 向下为正方向

\n

setPitch

\n

设置地图仰俯角度

\n
scene.setPitch(pitch);\n
\n

参数 :
   pitch {number}

\n

fitBounds

\n

地图缩放到某个范围内
参数 :
  extent { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]

\n
scene.fitBounds([112, 32, 114, 35]);\n
\n

removeLayer

\n

移除layer

\n
scene.removeLayer(layer);\n
\n

参数 layer {Layer}

\n

getLayers

\n

 获取所有的layer

\n
scene.getLayers();\n
\n

return layers  {array}

\n

事件

\n

on

\n

事件监听

\n

参数

\n

eventName {string} 事件名
hander {function } 事件回调函数

\n

off

\n

移除事件监听
eventName {string} 事件名
hander {function } 事件回调函数

\n

地图事件

\n
scene.on('loaded', () => {}); //地图加载完成触发\nscene.on('mapmove', () => {}); // 地图平移时触发事件\nscene.on('movestart', () => {}); // 地图平移开始时触发\nscene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发\nscene.on('zoomchange', () => {}); // 地图缩放级别更改后触发\nscene.on('zoomstart', () => {}); // 缩放开始时触发\nscene.on('zoomend', () => {}); // 缩放停止时触发\n
\n

鼠标事件

\n
scene.on('click', ev => {}); // 鼠标左键点击事件\nscene.on('dblclick', ev => {}); // 鼠标左键双击事件\nscene.on('mousemove', ev => {}); // 鼠标在地图上移动时触发\nscene.on('mousewheel', ev => {}); // 鼠标滚轮开始缩放地图时触发\nscene.on('mouseover', ev => {}); // 鼠标移入地图容器内时触发\nscene.on('mouseout', ev => {}); // 鼠标移出地图容器时触发\nscene.on('mouseup', ev => {}); // 鼠标在地图上单击抬起时触发\nscene.on('mousedown', ev => {}); // 鼠标在地图上单击按下时触发\nscene.on('rightclick', ev => {}); // 鼠标右键单击事件\nscene.on('dragstart', ev => {}); //开始拖拽地图时触发\nscene.on('dragging', ev => {}); // 拖拽地图过程中触发\nscene.on('dragend', ev => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发\n
\n

其它事件

\n
scene.on('resize', () => {}); // 地图容器大小改变事件\n
","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

\n

数据资源

\n

全国行政区划边界 

\n

支持 geojson, svg下载

\n

HighCharts 全球行政区划数据集

\n

https://img.hcharts.cn/mapdata/

","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"

数据

\n

目前L7支持的数据格式有GeoJson,CSV,JSon Image

\n

GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。

\n

GeoJSON

\n
\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n
\n
{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {},\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [\n          [\n            [110.478515625, 32.76880048488168],\n            [117.68554687499999, 32.76880048488168],\n            [117.68554687499999, 37.64903402157866],\n            [110.478515625, 37.64903402157866],\n            [110.478515625, 32.76880048488168]\n          ]\n        ]\n      }\n    }\n  ]\n}\n
\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/  可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"

geojson 数据介绍

\n

简介

\n

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

\n

geojson详细文档

\n

Geojson相关的JS库

\n

地理统计分析工具

\n

turfjs:  地理数据计算，处理，统计，分析的Javascript 库

\n

在线工具：

\n

http://geojson.io/    可以在线查看，绘制，修改GeoJSON数据

\n

https://mapshaper.org/ 可以查看较大的geojson，还能够简化GeoJSON数据

","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"html":"

PointLayer

\n

简介

\n

点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。

\n

shape 支持

\n

3D类型 柱图

\n
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
\n

2D 符号图

\n
'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
\n

图片标注

\n

通过 Scene.addImage() 可以添加图片资源，

\n

代码示例

\n

基本图形显示示例

\n
import { PointLayer } from '@antv/l7';\n\nconst layer = PointLayer({\n  zIndex: 2,\n})\n  .source(data.list, {\n    type: 'array',\n    x: 'j',\n    y: 'w',\n  })\n  .shape('cylinder')\n  .size('t', level => {\n    return [4, 4, level + 40];\n  })\n  .color('t', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

符号图

\n

使用图片添加地图标注

\n
scene.addImage(\n  'local',\n  'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',\n);\n\nconst layer = new PointLayer({\n  zIndex: 4,\n})\n  .source(city)\n  .size(20.0)\n  .shape('local')\n  .color('#0D408C');\n
","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"

指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。

","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。

","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"

热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          },\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"

线图层

\n

shape

\n

线图层支持4种 shape

\n
    \n
  • line 绘制路径图，
    • \n
  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
    • \n
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
    • \n
  • arc3d 3d弧线地图 3D视角
    • \n
\n

⚠️ 弧线只需要设置起始点坐标即可

\n
        new LineLayer()\n        .source(data, {\n          parser: {\n            type: 'csv',\n            x: 'lng1',\n            y: 'lat1',\n            x1: 'lng2',\n            y1: 'lat2',\n          }\n        })
\n

如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    {\n      "type": "Feature",\n      "properties": {},\n      "geometry": {\n        "type": "LineString",\n        "coordinates": [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\n}
\n

size

\n

线图层 可以设置高度

\n
    \n
  • size 类型为number 则表示 line的宽度
    • \n
  • size 类型为 [number , number] 分别表示宽度和高度
    • \n
\n
lineLayer.size(1); // 线的宽度为 1\nlineLayer.size([1, 2]); // 宽度为1，高度2\n
","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"

指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。

","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"

以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。

","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"html":"

填充图

\n

绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。

\n

shape

\n

填充图支持3种shape

\n
    \n
  • fill 绘制填充面 不支持数据映射
    • \n
  • line 绘制填充图描边 不支持数据映射
    • \n
  • extrude 对填充图3D拉伸 不支持数据映射
    • \n
\n
PolyonLayer.shape('fill');\nPolyonLayer.shape('line').size(1); // size 表示线宽度\nPolyonLayer.shape('extrude'); // size 表示高度\n
\n

其他方法，事件，同基类 Layer

","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"

control

\n

地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

\n

构造函数

\n
const baseControl = new L7.Control.Base(option);\n
\n

option

\n

 position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

\n

scene 内置地图组件

\n

zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表

\n

scene配置项设置控件添加状态

\n
scene = new L7.scene({\n  zoomControl: true,\n  scaleControl: true,\n  attributionControl: true,\n});\n
\n

\n

Zoom

\n

放大缩小组件 默认 左上角

\n
new L7.Control.Zoom({\n  position: 'topleft',\n}).addTo(scene);\n
\n

Scale

\n

比例尺组件默认左下角

\n
new L7.Control.Scale({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

attribution

\n

默认右下角

\n
new L7.Control.Attribution({\n  position: 'bottomleft',\n}).addTo(scene);\n
\n

layer

\n

图层列表目前只支持可视化overlayers 图层控制

\n
var overlayers = {\n  围栏填充: layer,\n  围栏边界: layer2,\n};\nnew L7.Control.Layers({\n  overlayers: overlayers,\n}).addTo(scene);\n
\n

方法

\n

onAdd

\n

组件添加到地图Scene时调用，自定义组件时需要实现此方法

\n

addTo

\n

添加到地图scene

\n
control.addTo(scene);\n
\n

setPosition

\n

设置组件位置

\n
control.setPosition('bottomright');\n
\n

remove

\n

移除地图组件

\n
control.remove();\n
\n

示例代码

\n

自定义图例控件

\n

源码

\n
var legend = new L7.Control.Base({\n  position: 'bottomright',\n});\nlegend.onAdd = function() {\n  var el = document.createElement('div');\n  el.className = 'infolegend legend';\n  var grades = [0, 8, 15, 30, 65, 120];\n  for (var i = 0; i < grades.length; i++) {\n    el.innerHTML +=\n      '<i style=\"background:' +\n      colors[i] +\n      '\"></i> ' +\n      grades[i] +\n      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');\n  }\n  return el;\n};\nlegend.addTo(scene);\n
\n

\n

FAQ

","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"

Marker 地图标注 目前只支持2D dom标注

\n

构造函数

\n

Marker
const Marker = new L7.Marker(option)

\n

option

\n
    \n
  • color        string   \"map-marker.png\" 设置默认marker的颜色
    • \n
  • element    Dom|string    自定义marker Dom节点，可以是dom实例，也可以是dom id
    • \n
  • anchor     string  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
    • \n
  • offset    Array  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
    • \n
\n

方法

\n

setLnglat

\n

设置marker经纬度位置

\n

addTo

\n

将marker添加到地图Scene

\n

remove

\n

移除marker

\n

getElement

\n

获取marker dom Element

\n

getLngLat

\n

获取marker经纬度坐标

\n

togglePopup

\n

开启或者关闭marker弹出框

\n

setPopup

\n

为marker设置popup

\n

getPopup

\n

获取marker弹出框

\n

示例代码

\n

默认Marker

\n

**
const marker = new L7.Marker({color:'blue'})

\n

自定义Marker

\n
var el = document.createElement('label');\nel.className = 'lableclass';\nel.textContent = data[i].v;\nel.style.background = getColor(data[i].v);\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat([data[i].x * 1, data[i].y])\n  .addTo(scene);\n
\n

设置 popup

\n
var popup = new L7.Popup({\n  anchor: 'left',\n}).setText(item.name);\n\nnew L7.Marker({\n  element: el,\n})\n  .setLnglat(item.coordinates)\n  .setPopup(popup)\n  .addTo(scene);\n
","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"

popup

\n

地图标注信息窗口，用于展示地图要素的属性信息

\n

构造函数

\n

Popup

\n
const popup = new L7.Popup(option);\n
\n

option

\n
    \n
  • closeButton
    • \n
  • closeOnClick
    • \n
  • maxWidth
    • \n
  • anchor
    • \n
\n

方法

\n

setLnglat

\n

设置popup的经纬度位置
参数：lnglat 经纬度数组 [112,32]

\n
popup.setLnglat([112, 32]);\n
\n

addTo

\n

参数：scene 地图scene实例

\n

将popup添加到地图scene显示

\n
popup.addTo(scene);\n
\n

setHtml

\n

参数：html 字符串

\n

设置popup html 内容

\n
var html =\n  '<p>\\u7701\\u4EFD\\uFF1A' +\n  feature.s +\n  '</p>\\n        <p>\\u5730\\u533A\\uFF1A' +\n  feature.m +\n  '</p>\\n        <p>\\u6E29\\u5EA6\\uFF1A' +\n  feature.t +\n  '</p>\\n        ';\npopup.setHtml(html);\n
\n

setText

\n

设置 popup 显示文本内容

\n
popup.setText('hello world');\n
\n

remove

\n

移除popup

\n
popup.remove();\n
\n

事件

\n

close

\n
popup.on('close', () => {});\n
\n

示例代码

\n

添加popup

\n
  var html = '<p>'+feature.m+'</p>';\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
\n

FAQ

","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"

用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图

","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n      }\n    ],\n    }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"html":"

heatmapLayer

\n

简介

\n

热力图图层，包含三种类型的，

\n
    \n
  • 方格热力图
    • \n
\n

将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。

\n
    \n
  • 六边形热力图
    • \n
\n

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

\n
    \n
  • 经典热力图
    • \n
\n

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法

\n

source

\n

热力图只支持点数据作为数据源

\n

布局方法 通过source的 tansforms属性配置

\n
    \n
  • type  数据聚合类型 grid、hexagon
    • \n
  • size  网格半径 单位 米
    • \n
  • field  聚合字段
    • \n
  • method 聚合方法  count,max,min,sum,mean5个统计维度
    • \n
\n
 \nlayer.source(data, {\n      parser: {\n        type: 'csv',\n        x: 'lng',\n        y: 'lat'\n      },\n      transforms:[\n        {\n        type: 'grid',\n        size: 15000,\n        field:'v', \n        method:'sum'\n        }\n      ],\n  }
\n

shape

\n

不同类型热力图shape支持

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
2D3d
网格格热力图circle,triangle,square,heaxgoncylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图circle,triangle,square,heaxgoncircle,triangle,square,heaxgon
普通热力图heatmapheatmap
\n

热力图布局下只shape方法只支持常量的可视化。

\n
HeatmapLayer.shape('square');\nHeatmapLayer.shape('hexagon');\n// 默认类型可以不设置\n
\n

size

\n

当前版本 shape 为grid，hexagon不需要设置 size 映射

\n

default 类型需要设置size映射 详细参数见Size

\n

**size(field,values) **

\n
    \n
  • field: 热力图权重字段
    • \n
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
    • \n
\n
HeatmapLayer.size('field', [0, 1]);\n
\n

color

\n

default heatMap 类型不需设置 color映射

\n

color 配置项同 color

\n

style

\n

grid hexagon 可以通过style 设置透明度

\n

default热力图需要通过style配置参数热力图参数

\n
    \n
  • intensity   全局热力权重   推荐权重范围 1-5
    • \n
  • radius  热力半径，单位像素
    • \n
  • \n

    rampColors 色带参数

    \n
      \n
    • colors  颜色数组
      • \n
    • positions 数据区间
      • \n
    \n
    • \n
\n
HeatmapLayer.style({\n  intensity: 3,\n  radius: 20,\n  rampColors: {\n    colors: [\n      'rgba(33,102,172,0.0)',\n      'rgb(103,169,207)',\n      'rgb(209,229,240)',\n      'rgb(253,219,199)',\n      'rgb(239,138,98)',\n      'rgb(178,24,43,1.0)',\n    ],\n    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n  },\n});\n
\n

完整代码示例

\n

普通热力图

\n
// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json\n\nHeatmapLayer({\n  zIndex: 2,\n})\n  .source(data)\n  .size('mag', [0, 1]) // weight映射通道\n  .style({\n    intensity: 3,\n    radius: 20,\n    rampColors: {\n      colors: [\n        'rgba(33,102,172,0.0)',\n        'rgb(103,169,207)',\n        'rgb(209,229,240)',\n        'rgb(253,219,199)',\n        'rgb(239,138,98)',\n        'rgb(178,24,43,1.0)',\n      ],\n      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],\n    },\n  });\n
\n

网格热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .source(data, {\n    parser: {\n      type: 'csv',\n      x: 'lng',\n      y: 'lat',\n    },\n    transforms: [\n      {\n        type: 'grid',\n        size: 15000,\n        field: 'v',\n        method: 'sum',\n      },\n    ],\n  })\n  .shape('grid')\n  .style({\n    coverage: 0.8,\n  })\n  .color('count', [\n    '#002466',\n    '#105CB3',\n    '#2894E0',\n    '#CFF6FF',\n    '#FFF5B8',\n    '#FFAB5C',\n    '#F27049',\n    '#730D1C',\n  ]);\n
\n

六边形热力图

\n
var layer = scene\n  .HeatmapLayer({\n    zIndex: 2,\n  })\n  .souce(data, {\n    parser: {\n      type: 'csv',\n      x: lng,\n      y: lat,\n    },\n    transforms: [\n      {\n        type: 'hexgon',\n        size: 1500,\n        field: 'count',\n        operation: 'sum',\n      },\n    ],\n  })\n  .shape('hexgon')\n  .size(1000)\n  .color('sum')\n  .style({\n    coverage: 0.8,\n  });\nrender();\n
","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"

ImageLayer

\n

简介

\n

将图片添加到地图上，需要指定图片的经纬度范围

\n

代码示例

\n
const layer = new ImageLayer({});\nlayer.source(\n  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n  {\n    parser: {\n      type: 'image',\n      extent: [121.168, 30.2828, 121.384, 30.4219],\n    },\n  },\n);\n
","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"

使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"

可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"raster/basic/demo/image.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/raster/basic/demo/image.js","source":"import { Scene, ImageLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [ 121.268, 30.3628 ],\n zoom: 13\n});\n\nconst layer = new ImageLayer({});\nlayer.source(\n 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n {\n parser: {\n type: 'image',\n extent: [ 121.168, 30.2828, 121.384, 30.4219 ]\n }\n }\n);\nscene.addLayer(layer);\n// scene.on('loaded', () => {\n// scene.addLayer(layer);\n// });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.image = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'light',\n center: [121.268, 30.3628],\n zoom: 13\n });\n var layer = new _l.ImageLayer({});\n layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', {\n parser: {\n type: 'image',\n extent: [121.168, 30.2828, 121.384, 30.4219]\n }\n });\n scene.addLayer(layer); // scene.on('loaded', () => {\n // scene.addLayer(layer);\n // });\n});","order":0,"filename":"image.js","title":"图片","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"},{"relativePath":"raster/basic/demo/radar.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/raster/basic/demo/radar.js","source":"import { Scene, ImageLayer } from '@antv/l7';\nconst scene = new Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'dark',\n center: [ 115.5268, 34.3628 ],\n zoom: 7\n});\n\nconst layer = new ImageLayer({});\nlayer.source(\n 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ',\n {\n parser: {\n type: 'image',\n extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]\n }\n }\n);\nscene.addLayer(layer);\n\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/l7\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/l7\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.l7);\n global.radar = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n \"use strict\";\n\n var scene = new _l.Scene({\n id: 'map',\n pitch: 0,\n type: 'amap',\n style: 'dark',\n center: [115.5268, 34.3628],\n zoom: 7\n });\n var layer = new _l.ImageLayer({});\n layer.source('https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ', {\n parser: {\n type: 'image',\n extent: [113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137]\n }\n });\n scene.addLayer(layer);\n});","order":1,"filename":"radar.js","title":"地形","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1},"html":"

热力图的变体，网格布局呈现数据分级分布的聚合现象。

"}}}}} \ No newline at end of file diff --git a/public/page-data/zh/page-data.json b/public/page-data/zh/page-data.json deleted file mode 100644 index 2422dddb1f..0000000000 --- a/public/page-data/zh/page-data.json +++ /dev/null @@ -1 +0,0 @@ -{"componentChunkName":"component---site-pages-index-zh-tsx","path":"/zh","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"slug":"/zh/","langKey":"zh"}}} \ No newline at end of file diff --git a/public/static/d/2084297051.json b/public/static/d/2084297051.json deleted file mode 100644 index 2e9e4ad35c..0000000000 --- a/public/static/d/2084297051.json +++ /dev/null @@ -1 +0,0 @@ -{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","siteUrl":"https://l7.antv.vision","logoUrl":null,"showLanguageSwitcher":null,"navs":[{"slug":"docs/api","title":{"zh":"文档","en":"Document"},"target":null},{"slug":"docs/tutorial","title":{"zh":"教程","en":"tutorial"},"target":null},{"slug":"examples","title":{"zh":"图表演示","en":"Examples"},"target":null}],"redirects":null}}}} \ No newline at end of file diff --git a/public/static/d/2969191536.json b/public/static/d/2969191536.json deleted file mode 100644 index 0dad385a49..0000000000 --- a/public/static/d/2969191536.json +++ /dev/null @@ -1 +0,0 @@ -{"data":{"placeholderImage":null}} \ No newline at end of file diff --git a/public/static/d/3896820173.json b/public/static/d/3896820173.json deleted file mode 100644 index eb38b10371..0000000000 --- a/public/static/d/3896820173.json +++ /dev/null @@ -1 +0,0 @@ -{"data":{"site":{"siteMetadata":{"githubUrl":"https://github.com/antvis/L7"}}}} \ No newline at end of file diff --git a/public/static/d/3978990474.json b/public/static/d/3978990474.json deleted file mode 100644 index 5279852f7c..0000000000 --- a/public/static/d/3978990474.json +++ /dev/null @@ -1 +0,0 @@ -{"data":{"site":{"siteMetadata":{"title":"L7","description":"Large-scale WebGL-powered Geospatial data visualization analysis framework"}}}} \ No newline at end of file